100 lines
3.2 KiB
HTML
100 lines
3.2 KiB
HTML
<!doctype html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
|
|
<title>My page title</title>
|
|
<link rel="stylesheet" href="css/style.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Here is our main header that is used across all the pages of our website -->
|
|
|
|
<header>
|
|
<h1>Header</h1>
|
|
</header>
|
|
|
|
<nav>
|
|
<ul>
|
|
<li><a href="#">Home</a></li>
|
|
<li><a href="#">Our team</a></li>
|
|
<li><a href="#">Projects</a></li>
|
|
<li><a href="#">Contact</a></li>
|
|
</ul>
|
|
|
|
<!-- A Search form is another common non-linear way to navigate through a website. -->
|
|
|
|
<form>
|
|
<input type="search" name="q" placeholder="Search query" />
|
|
<input type="submit" value="Go!" />
|
|
</form>
|
|
</nav>
|
|
|
|
<!-- Here is our page's main content -->
|
|
<main>
|
|
<!-- It contains an article -->
|
|
<article>
|
|
<h2>Article heading</h2>
|
|
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam
|
|
lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam
|
|
viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent
|
|
et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt
|
|
congue enim, ut porta lorem lacinia consectetur.
|
|
</p>
|
|
|
|
<h3>Subsection</h3>
|
|
|
|
<p>
|
|
Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum
|
|
dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem.
|
|
Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.
|
|
</p>
|
|
|
|
<p>
|
|
Pelientesque auctor nisi id magna consequat sagittis. Curabitur
|
|
dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet.
|
|
Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.
|
|
</p>
|
|
|
|
<h3>Another subsection</h3>
|
|
|
|
<p>
|
|
Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum
|
|
soclis natoque penatibus et manis dis parturient montes, nascetur
|
|
ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem
|
|
facilisis semper ac in est.
|
|
</p>
|
|
|
|
<p>
|
|
Vivamus fermentum semper porta. Nunc diam velit, adipscing ut
|
|
tristique vitae sagittis vel odio. Maecenas convallis ullamcorper
|
|
ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi
|
|
diam iaculis velit, is fringille sem nunc vet mi.
|
|
</p>
|
|
</article>
|
|
|
|
<!-- the aside content can also be nested within the main content -->
|
|
<aside>
|
|
<h2>Related</h2>
|
|
|
|
<ul>
|
|
<li><a href="#">Oh I do like to be beside the seaside</a></li>
|
|
<li><a href="#">Oh I do like to be beside the sea</a></li>
|
|
<li><a href="#">Although in the North of England</a></li>
|
|
<li><a href="#">It never stops raining</a></li>
|
|
<li><a href="#">Oh well…</a></li>
|
|
</ul>
|
|
</aside>
|
|
</main>
|
|
|
|
<!-- And here is our main footer that is used across all the pages of our website -->
|
|
|
|
<footer>
|
|
<p>©Copyright 2050 by nobody. All rights reversed.</p>
|
|
</footer>
|
|
</body>
|
|
</html>
|