Create a new document and save it as lab8Bxx.html in your All_102Submissions fol

ID: 3817518 • Letter: C

Question

Create a new document and save it as lab8Bxx.html in your All_102Submissions folder, where xx are your first and last name initials Inside the body element, create a container for the entire page with the article element Inside the article element: give the page a banner with the header element, followed by the nav element, and then the section element. Inside the section element include another header element and a paragraph element. Copy/paste this section element at least three more times Fill in the content of this page with whatever you want, but structure it precisely as described. Give the page a title by filling in the article header. For each section: fill in the paragraph, and fill in the header with a title for the section. Just as in part A you may use the Lorem Ipsum text generator to give content to the paragraphs. Inside the nav element add an unordered list with a list item (li) for each section you created in the previous step. Each list item should contain an internal link to the corresponding section. Do this by giving the header in each section a unique id and then link to it internally with the d, anchor element (just as in lab 2). I.e., the navigation element will contain list items that when clicked will cause the page to scroll to the corresponding location within the page (the sections) Use an internal style sheet to accomplish the following: Set the display property of article, header, nav, and section to block using the group selector (comma) Set the margin of every element to be 0 using the universal selector (asterisk). i.e., *{margin: 0px;} Set the width of the article to something other than the default 100% e.g., 960px is a widely accepted standard width Center the article by setting both margin-left and margin-right to auto Set the list items to display inline (they are block-level by default). Set the color to green when you visit the anchor elements in the unordered list (use a pseudo class) Create a CSS rule that will make the article header into a larger font than the default size the element Create a separate CSS rule that will give the section headers a large font (but not as large as the article header). Continue to customize the style of the document to make it look good. Use a color scheme (http://www.colorcombos.com/), add padding/margin to elements that you think may need it add borders where you think they make sense, etc. When you have finished, your page should look something like

Explanation / Answer

<!DOCTYPE html> 
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Coding A CSS3 & HTML5 One Page Template | Bhavas demo</title>

<style type="text/css">

   *{
   /* Universal reset: */
   margin:0;
   padding:0;
}

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;
   color:#fcfcfc;
   background-color:#355664;
   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,h2,h3{
font-family:"Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
text-shadow:0 1px 1px black;
}

h1{
   /* The logo text */
   font-size:3.5em;
   padding:0.5em 0 0;
   text-transform:uppercase;
}

h3{
   /* The slogan text */
   font-family:forte,"Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
   font-size:2em;
   font-weight:normal;
   margin:0 0 1em;
}

h2{
   font-size:2.2em;
   font-weight:normal;
   letter-spacing:0.01em;
   text-transform:uppercase;
}

p{
line-height:1.5em;
padding-bottom:1em;
}

.line{
   /* The dividing line: */
   height:1px;
   background-color:#24404c;
   border-bottom:1px solid #416371;
   margin:1em 0;
   overflow:hidden;
}

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;
}

nav, article, nav ul li a,figure{
   /* Applying CSS3 rounded corners: */
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
}

/* 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{
   border:3px solid #142830;
   float:right;
   height:300px;
   margin-left:15px;
   overflow:hidden;
   width:500px;
}

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: */

footer{
   margin-bottom:30px;
   text-align:center;
   font-size:0.825em;
}

footer p{
margin-bottom:-2.5em;
position:relative;
}

footer a,footer a:visited{
   color:#cccccc;
   background-color:#213e4a;
   display:block;
   padding:2px 4px;
   z-index:100;
   position:relative;
}

footer a:hover{
text-decoration:none;
background-color:#142830;
}

footer a.by{
float:left;

}

footer a.up{
float:right;
}

</style>


</head>

<body>

   <section id="page"> 

<header> 

<hgroup>
<h1>KIDZ and KIDZ</h1>
<h3>Where Kids Can Be Kids</h3>
</hgroup>

<nav class="clear"> 
<ul>
<li><a href="#article1">Home</a></li>
<li><a href="#article2">About us</a></li>
<li><a href="#article3">Testimonials</a></li>
</ul>
</nav>

</header>

<section id="articles">

<div class="line"></div> 

<article id="article1"> 
<h2>Playschool</h2>

<div class="line"></div>

<div class="articleBody clear">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus quam quis nibh fringilla sit amet consectetur lectus malesuada. Sed nec libero erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi nisi, rhoncus ut vestibulum ac, sollicitudin quis lorem. Duis felis dui, vulputate nec adipiscing nec, interdum vel tortor. Sed gravida, erat nec rutrum tincidunt, metus mauris imperdiet nunc, et elementum tortor nunc at eros. Donec malesuada congue molestie. Suspendisse potenti. Vestibulum cursus congue sem et feugiat. Morbi quis elit odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus quam quis nibh fringilla sit amet consectetur lectus malesuada. Sed nec libero erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi nisi, rhoncus ut vestibulum ac, sollicitudin quis lorem. Duis felis dui, vulputate nec adipiscing nec, interdum vel tortor. Sed gravida, erat nec rutrum tincidunt, metus mauris imperdiet nunc, et elementum tortor nunc at eros. Donec malesuada congue molestie. Suspendisse potenti. Vestibulum cursus congue sem et feugiat. Morbi quis elit odio. </p>
</div>
</article>

</section>

<div class="line"></div>

<p>Copyright 2010 - YourSite.com</p> 

<a href="#" class="up">Go UP</a>
<a href="#">Template by Bhavas</a>

</footer>

       </section> 

</body>
</html>

Navigate

Create a new document and save it as lab8 B xx .html in your All102Submissions f

Create a new document called l5p3.html. It should have a form with a text input

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Create a new document and save it as lab8Bxx.html in your All_102Submissions fol

Question

Explanation / Answer

Related Questions

Navigate