You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
1.8 KiB
61 lines
1.8 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" type="text/css" href="style.css">
|
|
<title>Document</title>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container">
|
|
<header>
|
|
<nav>
|
|
<ul>
|
|
<li><a href="#">Portfolio</a></li>
|
|
<li><a href="#">Bio</a></li>
|
|
<li><a href="#">Contact</a></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<aside>
|
|
<h1>Sidebar</h1>
|
|
</aside>
|
|
|
|
<section>
|
|
<h1>content</h1>
|
|
<div class="small-boxes">
|
|
<div class="box">
|
|
<p>The default display style of a <div> tag is <strong>BLOCK</strong>.</p>
|
|
</div>
|
|
<div class="box">
|
|
<p>The best way to horizontally center an element is to set the <em>left-margin</em> and <em>right-margin</em> to <em>auto</em> or use the <em>margin: 0 auto</em> declaration.</p>
|
|
</div>
|
|
<div class="box">
|
|
<p><em>Padding</em> is the space between an element and it's border ("insidey" or "indoorsy"), while <em>margin</em> is the space between that border and an adjacent element ("outsidey" or "outdoorsy").</p>
|
|
</div>
|
|
<div class="box">
|
|
<p><em>Fixed</em> positioning places an element in relation to the browser window, while <em>absolute</em> positioning places an element in relation to it's container.</p>
|
|
</div>
|
|
<div class="box">
|
|
<p>A <em>clearfix</em> will auto-size a floating element's container to match the floating element itself. Otherwise, the element can flow outside it's container in wonky ways.</p>
|
|
</div>
|
|
</div>
|
|
<div class="big-boxes">
|
|
<div class="big-box">
|
|
</div>
|
|
<div class="big-box">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<h1>footer</h1>
|
|
</footer>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
|