-
Notifications
You must be signed in to change notification settings - Fork 4
/
float.html
67 lines (67 loc) · 2.19 KB
/
float.html
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Starting markup</title>
<link href="basic.css" rel="stylesheet">
<link href="float.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="row">
<header class="col-4">
<h1>My Fine Website</h1>
</header>
</div>
<div class="row">
<section class="col-push-1">
<article>
<h2>Introductory Blurb</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor facere, fugiat nobis consequuntur fugit dolorem molestiae. Rem error dolor veniam quibusdam sapiente, debitis repudiandae cumque in aliquid. Corrupti optio unde, illum impedit ipsum, eveniet aliquam recusandae dolor consectetur, mollitia, culpa aperiam nesciunt quae aut voluptatem modi vero ex dolores. Modi.</p>
<button>Call To Action</button>
</article>
<div class="row">
<aside class="col-1-nest">
<h3>Feature 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, culpa.</p>
<p><a href="#">Read more</a></p>
</aside>
<aside class="col-1-nest">
<h3>Feature 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, culpa.</p>
<p><a href="#">Read more</a></p>
</aside>
<aside class="col-1-nest">
<h3>Feature 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, culpa.</p>
<p><a href="#">Read more</a></p>
</aside>
<aside class="col-1-nest">
<h3>Feature 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, culpa.</p>
<p><a href="#">Read more</a></p>
</aside>
</div>
</section>
<aside class="col-pull-3">
<h3>Quick Links</h3>
<ul>
<li><a href="#">Thing One</a></li>
<li><a href="#">Thing Two</a></li>
<li><a href="#">Thing Three</a></li>
<li><a href="#">Thing Four</a></li>
</ul>
<blockquote>
<p>An inspirational quote to inspire you and stuff!</p>
<cite>Someone Famous</cite>
</blockquote>
</aside>
</div>
<div class="row">
<footer class="col-4">
<p>A fine footer by <a href="http://www.jenkramer.org" target="_blank">Jen Kramer</a></p>
</footer>
</div>
</div>
</body>
</html>