-
Notifications
You must be signed in to change notification settings - Fork 37
/
Copy pathindex.html
105 lines (96 loc) · 5.66 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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>apples.com</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="CSS Demo">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Normalize helps us make our user experience consistent betweeen browsers -->
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles/style.css" />
</head>
<body>
<div class="footerfix">
<!--
Using HTML5 header element to separate this semantically.
Previously would have used a div.
-->
<header class="header prim-bground clearfix">
<div class="container">
<h1 class="home"><a href="#">apples.com</a></h1>
<ul class="nav">
<li><a href="#">Caramel</a></li>
<li><a href="#">Cider</a></li>
<li><a href="#">Cobbler</a></li>
<li><a href="#">Sauce</a></li>
</ul> <!-- end nav -->
</div> <!-- end container -->
</header>
<!--
Re-use prim-bground class to denote elements that should contain our background color.
-->
<div id="banner" class="center banner prim-bground">
<img class="logo" src="http://cliparts.co/cliparts/8iE/6Ro/8iE6RoprT.png" alt="Apples">
<h1 class="headline">Apples</h1>
<h3 class="tagline">All About Apples And How Good They Are</h3>
</div>
<div class="container clearfix">
<div id="intro" class="secondary col">
<h2>Welcome</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div> <!-- end intro -->
<div id="nutrition" class="primary col">
<h2>Nutrition</h2>
<img class="content-image" src="http://www.pngimagesfree.com/Fruit/Apple-png/Apples_PNG_Transparent-image.png" alt="Some Apples">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div> <!-- end nutrition -->
<div id="cultivars" class="tertiary col">
<h2>Cultivars</h2>
<ul>
<li><span class="cultivar-name">Granny Smith</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
<li><span class="cultivar-name">Honeycrisp</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
<li><span class="cultivar-name">Red Delicious</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>
</div> <!-- end cultivars -->
</div> <!-- end container -->
</div> <!-- end footerfix -->
<!-- Using HTML5 footer element to separate this semantically -->
<footer id="footer" class="footer center prim-bground">
<span>©2016 Johnny Appleseed</span>
</footer>
</body>
</html>