web-design-u2/layout.html at main · NNHSComputerScience/web-design-u2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
<head>
  <title>CSS for Layout</title>
  <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
  <header class="clearfix">
	<h1>I am the HEADER </h1>
    <p>A header is usually located at the top of the website (or right below a top navigation menu). It often contains a logo or the website name.
	</p>
  </header>

  <nav>
    <h2>I am the NAV of the website</h2>
	<p>A navigation bar contains a list of links to help visitors navigating through your website.</p>
  </nav>


  <section>
    <h3>I am a SECTION of content</h3>
    <p>I will hold a variety of page content</p><br>
    <article>
      <h4>I am an ARTICLE on a page</h4>
      <p>I am great for holding text articles</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur sodales laoreet. Vivamus ac laoreet diam. Nunc vel viverra nisl, eget varius ligula. Proin ac diam purus. Integer enim magna, ullamcorper a dui at, hendrerit tincidunt purus. Donec in mauris rutrum, finibus lacus nec, finibus turpis. Nam suscipit velit eu purus sodales, ac sollicitudin nisl fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi lacus mauris, aliquam blandit ex ac, lacinia eleifend erat. Integer sit amet lectus nec dui sagittis commodo. Suspendisse ac tempus tortor. Fusce et enim erat. Curabitur auctor odio ut orci dapibus pulvinar. Vestibulum a est erat. Mauris quis dapibus orci, et porta urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur sodales laoreet. Vivamus ac laoreet diam. Nunc vel viverra nisl, eget varius ligula. Proin ac diam purus. Integer enim magna, ullamcorper a dui at, hendrerit tincidunt purus. Donec in mauris rutrum, finibus lacus nec, finibus turpis. Nam suscipit velit eu purus sodales, ac sollicitudin nisl fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi lacus mauris, aliquam blandit ex ac, lacinia eleifend erat. Integer sit amet lectus nec dui sagittis commodo. Suspendisse ac tempus tortor. Fusce et enim erat. Curabitur auctor odio ut orci dapibus pulvinar. Vestibulum a est erat. Mauris quis dapibus orci, et porta urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur sodales laoreet. Vivamus ac laoreet diam. Nunc vel viverra nisl, eget varius ligula. Proin ac diam purus. Integer enim magna, ullamcorper a dui at, hendrerit tincidunt purus. Donec in mauris rutrum, finibus lacus nec, finibus turpis. Nam suscipit velit eu purus sodales, ac sollicitudin nisl fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi lacus mauris, aliquam blandit ex ac, lacinia eleifend erat. Integer sit amet lectus nec dui sagittis commodo. Suspendisse ac tempus tortor. Fusce et enim erat. Curabitur auctor odio ut orci dapibus pulvinar. Vestibulum a est erat. Mauris quis dapibus orci, et porta urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur sodales laoreet. Vivamus ac laoreet diam. Nunc vel viverra nisl, eget varius ligula. Proin ac diam purus. Integer enim magna, ullamcorper a dui at, hendrerit tincidunt purus. Donec in mauris rutrum, finibus lacus nec, finibus turpis. Nam suscipit velit eu purus sodales, ac sollicitudin nisl fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi lacus mauris, aliquam blandit ex ac, lacinia eleifend erat. Integer sit amet lectus nec dui sagittis commodo. Suspendisse ac tempus tortor. Fusce et enim erat. Curabitur auctor odio ut orci dapibus pulvinar. Vestibulum a est erat. Mauris quis dapibus orci, et porta urna.</p>
    </article>
  </section>


  <aside>
    <h3>I am an ASIDE on a page</h3>
    <p>I am great for holding small pieces of extra information </p>

  </aside>


  <footer>
    <h4>I am the FOOTER of the page</h4>
    <p>I will hold a variety of required information.<br> For example, the name and contact information of the webpage designer.     </p>
  </footer>


</body>
</html>