Academic Integrity: tutoring, explanations, and feedback — we don’t complete graded work or submit on a student’s behalf.

So I\'m trying to make my current webpage look like this: My code looks like thi

ID: 3835458 • Letter: S

Question

So I'm trying to make my current webpage look like this:

My code looks like this. Please make any modifications that are needed to make this look exactly like the picture. Just keep in mind that it has to be HTML 5 and if needed CSS 3:

<!doctype html>
<html>

<head>
       <style>
       body {
   background-image: url(parch.jpg)
}

header, nav, section, aside, article, footer {
   display: block;
}

header {
   width: 850px ;
   height: 120px;
   padding-left: 40px;
}

header span {
   padding-left: 30px;
   vertical-align: 25px;
}

nav.horizontal {
   display: inline-block;
   width: 890px;
   height: 35px;
}

nav.horizontal ul {
   padding-left: 50px;
   padding-right: 10px;
   margin-top: 8px
  
}

nav.horizontal li {
   float: left;
   width: 20%;
}

nav.vertical {
   display:inline-block;
   margin-left: -36px;
   float:left;
   width: 180px;
   height: 500px;
   border-right-width: 10px
}

section{
   float:left;
   width: 360px;
   margin-top: -4px;
}

section p {
   margin-top:-3px;
   line-height: 13px
}
section div {
   margin-top:-3px;
   line-height: 13px
}

section img {
   width: 150px;
   float: right;
   margin: 15px;
}

aside {
   float: left;
   margin-left: 20px;
   margin-top: -4px;
   width: 360px;
}

footer {
clear: left;
border-top: 1px solid black;
text-align: center
}

article{
   float: left;
   border-left-style: solid;
   border-color: black;
   border-left-width: 2px;
   width: 500px;
   padding-left: 15px;
   margin-left: 10px;
   margin-top: -4px;
}
header, nav, section, aside, article, footer {
   display: block;
}

header {
   background-color: black;
}
header span {
   color: #cfe6e7;
   font-size:30px;
   font-weight: 300;
   letter-spacing: 4px;
}

nav.horizontal {
   text-decoration: none;
   background-color: blue;
}

nav.horizontal li {
   list-style: none;
   color: white;
   letter-spacing: 2px;
}

nav.horizontal a {
   text-decoration:none;
   font-size: 14px;
   color: white;
   font-weight: 600;
   font-family: Arial;
}

nav.horizontal a:hover {
   color: red;
   font-size: 14px
}

nav.vertical {
   text-align: center;
}
nav.vertical ul {
   list-style: none;
}

nav.vertical a {
   text-decoration: none;
   color: black;
   font-family: Arial;
   font-size: 13px;
   text-align: left
}

nav.vertical a:hover {
   color: red;
   background-color:white;
   border-style: solid;
   border-width:1px;
   border-color: black;

}

section{
   border-left-style: solid;
   border-left-width: 2px;
   border-right-style: solid;
   border-right-width: 2px;
   border-color: black
}

section h1{
   color: rgb(200, 78, 89);
   background-color: black;
   text-align: center;
   letter-spacing: 5px;
   padding-top: 5px;
   padding-bottom: 5px;  
}

section p::first-line {
   font-variant: small-caps;
}

section p::first-letter {
   font-size: 50px;
}

section h2{
   color: rgb(200, 78, 89);
   background-color: rgb(71, 71, 71);
   text-align: center;
   letter-spacing: 5px;
   padding-top: 5px;
   padding-bottom: 5px;
}

aside {
   background-color: rgb(255, 193, 162);
}

aside h2{
   color: black;
   background-color: rgb(178, 134, 113);
   text-align: center;
   letter-spacing: 5px;
   padding-top: 5px;
   padding-bottom: 5px;
}

aside p{
   line-height: 13px;
   font-family: arial;
   font-size: 14px
}

aside div{
   text-transform: none;
   font-size: 12px
}

footer address {
   font-style: normal;
   color: green;
   font-variant: small-caps;
   font-size: 12px;
   font-family: 'Arial Black', Gadget, sans-serif;
}

article h1{
   text-align: center;
   letter-spacing: 5px;
   font-weight: 100;
}

article a{
   letter-spacing: 5px;
}

article a:hover {
   font-family: arial;
   color: green;
   font-size: 18px;
}

article div{
   font-family: Arial;
}
       </style>

<title></title>
<link href="layout.css" rel="stylesheet" type="text/css" />
   <link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>

   <header>
   <img src="logo.png" alt="DSC"/>
   <span> Computer Science Department </span>
   </header>
     
   <nav class="horizontal">
           <ul>
               <li><a href="http://daytonastate.edu/contact.html"> Contact </a></li>
               <li><a href="http://daytonastate.edu/faculty.html"> Faculty </a></li>
               <li><a href="http://daytonastate.edu/CollegeCatalog/ProgramGuideSearch.aspx"> Programs </a></li>
               <li><a href="https://www.daytonastate.edu/recreg/registerfaq.html"> Classes </a></li>
               <li><a href="ProgramList2.html"> Program List </a></li>
           </ul>
       </nav>
       <br />
       <nav class="vertical">
           <ul>
               <li><a href="https://daytonastate.edu/CollegeCatalog/ProgramGuide.aspx?major=0938&amp;cat=CC17&amp;major2no=2515">Computer Programming</a></li><br>
               <li><a href="https://www.daytonastate.edu/comp_sci/video/computer_specialist.html">Computer Specialist</a></li><br>
               <li><a href="https://daytonastate.edu/CollegeCatalog/ProgramGuide.aspx?major=0903&amp;cat=CC17&amp;major2no=2445">Information Technology Analysis</a></li><br>
               <li><a href="https://daytonastate.edu/comp_sci/video/information_technology_management.html">Information Technology Management</a></li><br>
               <li><a href="https://www.daytonastate.edu/comp_sci/video/network_system_developer.html">Network System Developer</a></li><br>
               <li><a href="https://daytonastate.edu/CollegeCatalog/ProgramGuide.aspx?major=0909&amp;cat=CC17&amp;major2no=2459">Web Development Specialist</a></li><br>
           </ul>
       </nav>
      
       <section>
           <h1>History of Daytona State College</h1>
           <p> Over the past 50-plus years, Daytona State College has evolved from a small campus into an academically superior multi-campus institution providing educational and cultural programs for the citizens of Volusia and Flager counties. It began in 1957 when the Florida Legislature authorized Daytona Beach Junior College as one of the state's first comprehensive colleges.<br /><br />
           Daytona State College is accredited by the Southern Association of Colleges and Schools Commission on Colleges to award associate and bachelor's degrees. Contact the Commission on Colleges at 1866 Southern Lane, Decatur, Georgia 30033-4097 or call 404-679-4500 for questions about the accreditation of Daytona State College.</p>
           <h2> About Computer Science </h2>
           <img src="Capture3.png" width="50" height="60" border="0" alt="">
           <div>While the computing field is one of the fastest growing segments of industry, it is also one of the fastest changing areas technologically. Computing professionals education does not stop with the college degree, but continues with seminars, conferences, and advanced courses and training. In computer theory and applications, new ideas are developed every day. Success requires an ongoing commitment to learning to maintain knowledge, skills and career opportunities.
           </div>
           <br />
       </section>
      
       <aside>
           <h2> Gainful Employment Information </h2>
           <blockquote>
               <p> The U.S. Department of Education requires colleges to disclose a variety of information for any financial aid eligible program that prepares students for gainful employment in a recognized occupation.? The information provided here describes the graduation rates, the median debt of students who completed the program and other important information regarding gainful employment for the latest completed academic year (as of July 1). </p>
           </blockquote>
           <blockquote>
               <br />
                   <div> &mdash; US Labor Department </div>
           </blockquote>
       </aside>
      
      
      
       <footer>
           <address>
           Daytona State College 1200 W. International Speedway Bvld.,
           Daytona Beach, Florida 32114 &#183; (386) 506-3000 &#183;
           </address>
       </footer>
      
              
     
     
</body>
</html>

Untitled 1 Windows Internet Explorer provided by Daytona State College Chapter Assignment chapter5Assignment.html Untitled 1 Computer Science Edit File View Favorites Tools Help DAYTONA STATE COLLEGE Computer Science Department Computer Programmin History of Daytona Gainful Employment Computer Specialist State College Information Information Technology over te past 50-plus years, Daytona Analysis State College has evolved from a small The U.S. Department of campus into an academically superior Education requires colleges to Information Technology multi-campus institution providing Management disclose a vari of information ety educational and cultural programs for for any financial aid eligible the citizens of Volusia and Flagler program that prepares students Network System counties. It began in 1957 when the for gainful employment in a Developer Florida Legislature authorized Daytona recognized occupation. The each Junior College as one of the information provided here Web Development state's first comprehensive colleges describes the graduation rates, Specialist Daytona State College is accredited by the median debt of students who the Southem Association of Colleges completed the program and and Schools Commission on Colleges award associate and bachelor's other important information regarding gainful employment degrees. Contact the Commission on for the latest completed Colleges at 1866 SouthemLan ademic year (as of July 1) aci Decatur, Georgia 30033-4097 or call 404-679-4500 for questions about the accreditation of Daytona State College out Computer US Labor Department Science While the computing field is one of the fastest growing segments of industry also one of the fastest changing areas technologically. Computing fessionals education does not stop with the college degree, but continues with seminars, conferences, and advanced courses and training. In computer theory and applications, new ideas are developed every day. Success requires an ongoing commitment to learning to maintain knowledge, skills and career opportunities

Explanation / Answer

<!doctype html>
<html>
<head>
<style>
       *{
           padding:0;
           margin:0;
       }
body {
background-image: url(parch.jpg)
}
header, nav, section, aside, article, footer {
display: block;
}

header img{
   margin-top: 50px;
padding-left: 50px;
}
.vertical li {
padding: 10px;
border-top: 1px solid black;
}
.vertical li:last-child {
border-bottom: 1px solid black;
}

header span {
color: #cfe6e7;
font-size: 30px;
font-weight: 300;
letter-spacing: 4px;
text-align: right;
display: block;
float: inherit;
padding: 10px 150px 10px;
}
nav.horizontal {
height: 35px;
}
nav.horizontal ul {
padding-left: 50px;
padding-right: 10px;
padding-top: 8px;
  
}
nav.horizontal li {
float: left;
width: 20%;
}

section{
float: left;
width: 38%;
}
section p {
padding: 10px;
text-align: justify;
}
section div {

line-height: 13px;
   padding:10px;
}
section img {
width: 150px;
float: right;
margin: 15px;
}
aside {
float: left;
margin-left: 20px;
width: 38%;
}
footer {
clear: left;
border-top: 1px solid black;
text-align: center
}
article{
float: left;
border-left-style: solid;
border-color: black;
border-left-width: 2px;
width: 500px;
padding-left: 15px;
margin-left: 10px;
margin-top: -4px;
}
header, nav, section, aside, article, footer {
display: block;
}
header {
background-color: black;
}
header span {
color: #cfe6e7;
font-size:30px;
font-weight: 300;
letter-spacing: 4px;
}
nav.horizontal {
text-decoration: none;
background-color: blue;
}
nav.horizontal li {
list-style: none;
color: white;
letter-spacing: 2px;
}
nav.horizontal a {
text-decoration:none;
font-size: 14px;
color: white;
font-weight: 600;
font-family: Arial;
}
nav.horizontal a:hover {
color: red;
font-size: 14px
}
nav.vertical {
text-align: center;
   float: left;
width: 20%;
}
nav.vertical ul {
list-style: none;
}
nav.vertical a {
text-decoration: none;
color: black;
font-family: Arial;
font-size: 13px;
text-align: left
}
nav.vertical a:hover {
color: red;
background-color:white;
border-width:1px;
border-color: black;
}
section{
border-left-style: solid;
border-left-width: 2px;
border-right-style: solid;
border-right-width: 2px;
border-color: black
}
section h1{
color: rgb(200, 78, 89);
background-color: black;
text-align: center;
letter-spacing: 5px;
padding: 10px 0;
  
}
section p::first-line {
font-variant: small-caps;
}
section p::first-letter {
font-size: 50px;
}
section h2{
color: rgb(200, 78, 89);
background-color: rgb(71, 71, 71);
text-align: center;
letter-spacing: 5px;
padding-top: 5px;
padding-bottom: 5px;
}
aside {
background-color: rgb(255, 193, 162);
}
aside h2{
color: black;
background-color: rgb(178, 134, 113);
text-align: center;
letter-spacing: 5px;
padding-top: 5px;
padding-bottom: 5px;
}
aside p{
text-align: justify;
line-height: 20px;
padding: 10px;
}
aside div{
text-transform: none;
font-size: 12px;
text-align: center;
padding: 10px;
}
footer address {
font-style: normal;
color: green;
font-variant: small-caps;
font-size: 12px;
font-family: 'Arial Black', Gadget, sans-serif;
   padding:10px;
}
article h1{
text-align: center;
letter-spacing: 5px;
font-weight: 100;
}
article a{
letter-spacing: 5px;
}
article a:hover {
font-family: arial;
color: green;
font-size: 18px;
}
article div{
font-family: Arial;
}
</style>

<title></title>
<link href="layout.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>

<header>
<img src="logo.png" alt="DSC"/>
<span> Computer Science Department </span>
</header>

<nav class="horizontal">
<ul>
<li><a href="http://daytonastate.edu/contact.html"> Contact </a></li>
<li><a href="http://daytonastate.edu/faculty.html"> Faculty </a></li>
<li><a href="http://daytonastate.edu/CollegeCatalog/ProgramGuideSearch.aspx"> Programs </a></li>
<li><a href="https://www.daytonastate.edu/recreg/registerfaq.html"> Classes </a></li>
<li><a href="ProgramList2.html"> Program List </a></li>
</ul>
</nav>
<br />
<nav class="vertical">
<ul>
<li><a href="https://daytonastate.edu/CollegeCatalog/ProgramGuide.aspx?major=0938&amp;cat=CC17&amp;major2no=2515">Computer Programming</a></li>
<li><a href="https://www.daytonastate.edu/comp_sci/video/computer_specialist.html">Computer Specialist</a></li>
<li><a href="https://daytonastate.edu/CollegeCatalog/ProgramGuide.aspx?major=0903&amp;cat=CC17&amp;major2no=2445">Information Technology Analysis</a></li>
<li><a href="https://daytonastate.edu/comp_sci/video/information_technology_management.html">Information Technology Management</a></li>
<li><a href="https://www.daytonastate.edu/comp_sci/video/network_system_developer.html">Network System Developer</a></li>
<li><a href="https://daytonastate.edu/CollegeCatalog/ProgramGuide.aspx?major=0909&amp;cat=CC17&amp;major2no=2459">Web Development Specialist</a></li>
</ul>
</nav>
  
<section>
<h1>History of Daytona State College</h1>
<p> Over the past 50-plus years, Daytona State College has evolved from a small campus into an academically superior multi-campus institution providing educational and cultural programs for the citizens of Volusia and Flager counties. It began in 1957 when the Florida Legislature authorized Daytona Beach Junior College as one of the state's first comprehensive colleges.<br /><br />
Daytona State College is accredited by the Southern Association of Colleges and Schools Commission on Colleges to award associate and bachelor's degrees. Contact the Commission on Colleges at 1866 Southern Lane, Decatur, Georgia 30033-4097 or call 404-679-4500 for questions about the accreditation of Daytona State College.</p>
<h2> About Computer Science </h2>
<img src="Capture3.png" width="50" height="60" border="0" alt="">
<p>While the computing field is one of the fastest growing segments of industry, it is also one of the fastest changing areas technologically. Computing professionals education does not stop with the college degree, but continues with seminars, conferences, and advanced courses and training. In computer theory and applications, new ideas are developed every day. Success requires an ongoing commitment to learning to maintain knowledge, skills and career opportunities.
</p>
<br />
</section>
  
<aside>
<h2> Gainful Employment Information </h2>
<blockquote>
<p> The U.S. Department of Education requires colleges to disclose a variety of information for any financial aid eligible program that prepares students for gainful employment in a recognized occupation.? The information provided here describes the graduation rates, the median debt of students who completed the program and other important information regarding gainful employment for the latest completed academic year (as of July 1). </p>
</blockquote>
<blockquote>
<br />
<div> &mdash; US Labor Department </div>
</blockquote>
</aside>
  
  
  
<footer>
<address>
Daytona State College 1200 W. International Speedway Bvld.,
Daytona Beach, Florida 32114 &#183; (386) 506-3000 &#183;
</address>
</footer>
  
  


</body>
</html>

Hire Me For All Your Tutoring Needs
Integrity-first tutoring: clear explanations, guidance, and feedback.
Drop an Email at
drjack9650@gmail.com
Chat Now And Get Quote