92 lines
3.2 KiB
HTML
92 lines
3.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Document</title>
|
||
|
|
<link rel="stylesheet" href="style.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="enclosure darkblue">
|
||
|
|
<div class="header">
|
||
|
|
<div class="logo">Header Logo</div>
|
||
|
|
<div class="navbar">
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<a href="#">header link one</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#">header link two</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#">header link three</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="enclosure darkblue">
|
||
|
|
<div class="nutshell">
|
||
|
|
<div class="text">
|
||
|
|
<h1 class="caption">This website is awesome</h1>
|
||
|
|
<span class="content">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam, quos, provident unde quaerat cupiditate, recusandae delectus voluptate sapiente.</span>
|
||
|
|
<button>Sign up</button>
|
||
|
|
</div>
|
||
|
|
<div class="image">
|
||
|
|
this is a placeholder for an image
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="enclosure white">
|
||
|
|
<div class="info">
|
||
|
|
<h1 class="caption">Information</h1>
|
||
|
|
<div class="boxes">
|
||
|
|
<div class="box">
|
||
|
|
<div class="frame"></div>
|
||
|
|
this is some subtext under an illustration or image
|
||
|
|
</div>
|
||
|
|
<div class="box">
|
||
|
|
<div class="frame"></div>
|
||
|
|
this is some subtext under an illustration or image
|
||
|
|
</div>
|
||
|
|
<div class="box">
|
||
|
|
<div class="frame"></div>
|
||
|
|
this is some subtext under an illustration or image
|
||
|
|
</div>
|
||
|
|
<div class="box">
|
||
|
|
<div class="frame"></div>
|
||
|
|
this is some subtext under an illustration or image
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="enclosure lightgray">
|
||
|
|
<div class="quote">
|
||
|
|
<span class="content"><em>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, optio earum. Aperiam commodi soluta alias assumenda est velit voluptates? Eligendi sequi voluptate magni tempore amet delectus corporis praesentium.</em></span>
|
||
|
|
<br>
|
||
|
|
<span class="utterer"><strong>-Thor, God of Thunder</strong></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="enclosure white">
|
||
|
|
<div class="fillaction">
|
||
|
|
<div class="action blue">
|
||
|
|
<div class="text">
|
||
|
|
<h3>Call to action! It's time!</h3>
|
||
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit!
|
||
|
|
</div>
|
||
|
|
<div class="button">
|
||
|
|
<button>Sign up</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<footer class="darkblue">
|
||
|
|
Copyright © The Odin Project 2023
|
||
|
|
</footer>
|
||
|
|
</body>
|
||
|
|
</html>
|