-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
82 lines (69 loc) · 4.62 KB
/
index.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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<head>
<link rel="stylesheet" type="text/css" href="./styles.css">
<link rel='shortcut icon' href='./assets/favicon.ico' type='image/x-icon'/ >
</head>
<body class="marginless">
<nav class="flex uppercase">
<div class="flex1"><a href="#" class=""><h2>Eat at Joe's!</h2></a></div>
<div class="flex flex1 flexgrow2">
<h3 class="flex1"><a href="#">because</a></h3>
<h3 class="flex1"><a href="#">you</a></h3>
<h3 class="flex1"><a href="#">know</a></h3>
<h3 class="flex1"><a href="#">you</a></h3>
<h3 class="flex1"><a href="#">want</a></h3>
<h3 class="flex1"><a href="#">to</a></h3>
</div>
</nav>
<section class="joes">
<div class="space"></div>
</section>
<section class="flex burger">
<h2 class="flex1 flexgrow3 inline">You look like a man who needs a burger!</h2>
<div class="flex1">
<button class="button burgerbutton">Burger Me!</button>
</div>
</section>
<section class="flex sponsors">
<div class="flex1"><img src="./assets/joescat.png"></div>
<div class="flex1"><img src="./assets/joesbear.jpeg"></div>
<div class="flex1"><img src="./assets/joespig.jpeg"></div>
<div class="flex1"><img src="./assets/joesdinosaur.jpeg"></div>
</section>
<div class="heavymargin separator"></div>
<section class="articles heavypadding flex flexcolumn">
<div class="flex flex1 mediumpadding">
<article class="flex flexcolumn flex1 lightpadding heavymargin">
<h1 class="flex1 marginless">Good stuff</h1>
<h4 class="flex1 marginless">10/20/3040 by Joe's Grandma</h4>
<p class="flex1 flexgrow3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae egestas justo. Duis sit amet condimentum erat, eu maximus erat. In tincidunt elit eu risus facilisis, non pellentesque risus porttitor. Suspendisse sit amet vestibulum nisi, ac sollicitudin orci. Mauris bibendum in diam sed feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras sed justo vitae neque auctor mattis. Pellentesque pellentesque tempor sem, vel luctus mi blandit sed. Ut consequat feugiat lorem vitae commodo. In facilisis, leo a dapibus cursus, mauris ex tempor leo, eget fermentum erat eros vitae arcu.</p>
</article>
<article class="flex flexcolumn flex1 lightpadding heavymargin">
<h1 class="flex1 marginless">Joe loves his crab!</h1>
<h4 class="flex1 marginless">10/20/3040 by Joe's Dad</h4>
<p class="flex1 flexgrow3">Sed placerat pharetra gravida. Praesent vitae nulla a nisl faucibus scelerisque consectetur et lectus. Aenean interdum porttitor diam eget fermentum. Ut at porttitor risus, non sodales metus. Nunc erat dui, maximus vel purus vel, efficitur hendrerit mi. Nam pretium, lorem ut pellentesque imperdiet, arcu ipsum pretium libero, ut pulvinar risus magna nec sem. Nullam sed velit odio. Vestibulum accumsan id metus nec euismod. Vivamus laoreet faucibus enim, ut condimentum tortor lacinia eu.</p>
</article>
</div>
<div class="flex flex1 mediumpadding">
<article class="flex flexcolumn flex1 lightpadding heavymargin">
<h1 class="flex1 marginless">Crab Crab Crac-uhh Crab!</h1>
<h4 class="flex1 marginless">10/20/3040 by Joe</h4>
<p class="flex1 flexgrow3">Aliquam erat volutpat. Vivamus varius urna id commodo porttitor. Suspendisse vitae placerat arcu, nec suscipit ex. Vivamus auctor lorem in arcu imperdiet, vitae feugiat sapien condimentum. Pellentesque elit augue, placerat in diam at, hendrerit rhoncus tortor. Vivamus id dignissim orci. Fusce mollis vel elit et dignissim. Maecenas vehicula condimentum lorem, quis condimentum elit pharetra sed.</p>
</article>
<article class="flex flexcolumn flex1 lightpadding heavymargin">
<h1 class="flex1 marginless">%$%^%#%#!</h1>
<h4 class="flex1 marginless">10/20/3040 by @waytooharshfoodcritic</h4>
<p class="flex1 flexgrow3">Ut blandit lectus ut elementum ultrices. Proin sagittis, risus quis commodo mattis, urna orci dignissim mauris, vel gravida est massa ac sapien. Sed id feugiat turpis. In accumsan congue egestas. Phasellus ultricies leo ac tincidunt sagittis. Cras sollicitudin est sit amet leo vulputate, ut sollicitudin est vestibulum. Donec lacinia a neque hendrerit cursus. Integer quis gravida nunc. Vivamus malesuada ipsum bibendum libero dapibus ornare.</p>
</article>
</div>
</section>
<section class="pagination heavypadding">
<button class="lightpadding lightmargin">1</button>
<button class="lightpadding lightmargin">2</button>
<button class="lightpadding lightmargin">3</button>
<button class="lightpadding lightmargin">4</button>
<button class="lightpadding lightmargin">Next Page >></button>
</section>
<footer class="mediumpadding marginless">
<h1>Congratulations!</h1>
</footer>
</body>