Use Notepad++ or another text editor and hand code the HTML and CSS. Put your CS
ID: 3805455 • Letter: U
Question
Use Notepad++ or another text editor and hand code the HTML and CSS.
Put your CSS in an embedded/internal stylesheet in your HTML document.
For the image of Homer, point to http://kengeddes.com/images/homer.jpg (Links to an external site.). I.e., use an absolute url.
Write appropriate and valid HTML5 and CSS that, when rendered by the browser, yields a page that appears similar to the one given in the following screenshots:
Use only HTML5 and CSS. Use no JavaScript, PHP, jQuery, XML, widgets you found online, etc.
Validate your HTML using the Nu Html Checker: https://validator.w3.org/nu/ (Links to an external site.)
Check your CSS using the W3C CSS Validation Service: http://jigsaw.w3.org/css-validator/ (Links to an external site.)
Homer Simpson iii Apps D Google Bookmark Google-Bookmarks SMC L Books L house other Homer Simpson Education 1. School of Hard Knocks o Bachelor of Science in Everything 2. Santa Monica College o Associate of Science in Web Programmer Specialized in the Black Widow o AA in Rock Music Appreciation 3. University of California at Los Angeles o Graduate Certificate in Television Watching Worldly Experience Springfield Nucular Power Plant not sure what I'm supposed to do Springfield Donut Barn master tasteur. I like the ones with the pink icing. Springfield Pork Rind Factory-senior taster Duff Beer Brewery-taster trainee, supervisor José Antonio Gonzalez Other Skills XHTMLHTML5 ai 100 The following data will be posted to my server at homerswebsight.com Username I think therefore I drink Homerism a 73 or, supply your own wisdom here, if you think you're so smart. not so much You're OK How much do you like me? a bushel and apeck Submit ResetExplanation / Answer
index.html
<!DOCTYPE html> <!-- The new doctype -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<section id="page">
<section id="articles">
<div class="line"></div>
<article id="article1">
<h2>Homer Simpson</h2>
<div class="line"></div>
<div class="articleBody clear">
<figure> <!-- The figure tag marks data (usually an image) that is part of the article -->
<a href="#"><img src="http://kengeddes.com/images/homer.jpg" /></a>
</figure>
<h3>Education</h3>
<ul>
<ol >
<li> School of hard Knocks
<ul>
<li>Bachelor of science in everything</li>
</ul>
</li>
<li> Santa Monica college
<ul>
<li>Bachelor of science in everything</li>
<li>Bachelor of science in everything</li>
<li>Bachelor of science in everything</li>
</ul>
</li>
<li>University of california at Los Angels</li>
</ol>
</ul>
<h3>Worldy Experience</h3>
<ul>
<li>Springfiled nuclear power plant</li>
<li>Springfiled nuclear power pwewqe qwewrwr erwerer </li>
<li>Springfiled nuclsasdasddsfear power pwewqe qwewrwr erwerer </li>
<li>Springdfsdfsdfsdffiled nucsfsfsflear powdfgfger pwewqe qwewrwr erwerer </li>
</ul>
<h3>Other kills</h3>
<p>Xhtml, HTML5</p>
<h3>The following data will be posted to my server at homerswebsight.com</h3>
<div class= "last-div"><label>Username : </label><input type="text" name="username"><br/><br/>
<textarea>csffnsdjfbdjfbsdjkf hdfjsdfudsf dfgdyfdyufyfyasdfyfj sfgyufuyfua</textarea><br/><br/>
<label>How much do you like me ?</label>: <select><option>not so much</option><option>You are ok</option><option>not so much</option></select><br/><br/>
<input type="submit" name="submit">
<input type="reset" name="reset">
</div>
</div>
</article>
<footer> <!-- Marking the footer section -->
<div class="line"></div>
<reference available upon request>
<p>@ 2012 Homer Simpson kingdom & Universe.inc</p> <!-- Change the copyright notice --><br/><br/>
<a href="#" class="up">TOP</a>
</footer>
</section>
</body>
</html>
Styles.css
*{
/* Universal reset: */
}
header,footer,
article,section,
hgroup,nav,
figure{
/* Giving a display value to the HTML5 rendered elements: */
display:block;
}
body{
/* Setting the default text color, size, page background and a font stack: */
font-size:0.825em;
background-color:#ABD9E5;
font-family:Arial, Helvetica, sans-serif;
}
/* Hyperlink Styles: */
a, a:visited {
color:#0196e3;
text-decoration:none;
outline:none;
}
a:hover{
text-decoration:underline;
}
a img{
border:none;
}
/* Headings: */
h1{
/* The logo text */
font-size:3.5em;
padding:0.5em 0 0;
text-transform:uppercase;
}
h3{
color: black;
font-size: 18px;
}
h2{
font-size:2.2em;
font-weight:normal;
letter-spacing:0.01em;
text-transform:uppercase;
text-align: center;
background-color: #FFC1CC;
margin-top: 18px;
}
p{
line-height:1.5em;
padding-bottom:1em;
}
.line{
/* The dividing line: */
}
article .line{
/* The dividing line inside of the article is darker: */
background-color:#15242a;
border-bottom-color:#204656;
margin:1.3em 0;
}
footer .line{
margin:2em 0;
}
nav{
background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8;
padding:0 5px;
position:absolute;
right:0;
top:4em;
border:1px solid #FCFCFC;
-moz-box-shadow:0 1px 1px #333333;
-webkit-box-shadow:0 1px 1px #333333;
box-shadow:0 1px 1px #333333;
}
/* The clearfix hack to clear the floats: */
.clear:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* The navigation styling: */
nav ul li{
display:inline;
}
nav ul li a,
nav ul li a:visited{
color:#565656;
display:block;
float:left;
font-size:1.25em;
font-weight:bold;
margin:5px 2px;
padding:7px 10px 4px;
text-shadow:0 1px 1px white;
text-transform:uppercase;
}
nav ul li a:hover{
text-decoration:none;
background-color:#f0f0f0;
}
/* Article styles: */
#page{
width:960px;
margin:0 auto;
position:relative;
}
article{
/*background-color:#213E4A;
margin:3em 0;
padding:20px;
text-shadow:0 2px 0 black;*/
}
figure{
float:right;
height:150px;
margin-right:80px;
overflow:hidden;
width:120px;
}
figure:hover{
-moz-box-shadow:0 0 2px #4D7788;
-webkit-box-shadow:0 0 2px #4D7788;
box-shadow:0 0 2px #4D7788;
}
/*figure img{
margin-left:-60px;
}*/
/* Footer styling: */
.last-div{float:left; width:100%;padding: 5px; background-color: #FFC1CC;}
footer{
margin-bottom:30px;
font-size:0.825em;
}
footer p{
margin-bottom:-2.5em;
position:relative;
}
footer a,footer a:visited{
display:block;
padding:2px 4px;
z-index:100;
position:relative;
}
footer a:hover{
text-decoration-line: underline;
}
footer a.up{
float:left;
}
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.