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&cat=CC17&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&cat=CC17&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&cat=CC17&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> — US Labor Department </div>
</blockquote>
</aside>
<footer>
<address>
Daytona State College 1200 W. International Speedway Bvld.,
Daytona Beach, Florida 32114 · (386) 506-3000 ·
</address>
</footer>
</body>
</html>
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&cat=CC17&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&cat=CC17&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&cat=CC17&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> — US Labor Department </div>
</blockquote>
</aside>
<footer>
<address>
Daytona State College 1200 W. International Speedway Bvld.,
Daytona Beach, Florida 32114 · (386) 506-3000 ·
</address>
</footer>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.