odin-landing-page/index.html

92 lines
3.2 KiB
HTML
Raw Normal View History

<!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 &copy; The Odin Project 2023
</footer>
</body>
</html>