-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
178 lines (159 loc) · 7.97 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="theme-color" content="#ae957f">
<title>Potato™</title>
<link rel="shortcut icon" href="images/potato.ico" type="image/x-icon">
<link rel="stylesheet" href="css/minireset.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/animations.css">
</head>
<body>
<div class="nav">
<nav class="nav__navbar">
<a class="nav__title" href="#">🥔 Potato™</h1></a>
<ul class="nav__links">
<li class="nav__item"><a href="#hero">About</a></li>
<li class="nav__item"><a href="#features">Features</a></li>
<li class="nav__item"><a href="#nutrition">Nutrition</a></li>
<li class="nav__item"><span><a class="buy-button" href="#purchase">Buy it Now</a></span></li>
</ul>
<div class="mobile-menu" onclick="toggleHamburgerMenu(this)">
<div class="mobile-bar-1"></div>
<div class="mobile-bar-2"></div>
<div class="mobile-bar-3"></div>
</div>
</nav>
<ul id="navMobileLinks" class="nav__mobile-links">
<li class="nav__mobile-item"><a href="#hero">About</a></li>
<li class="nav__mobile-item"><a href="#features">Features</a></li>
<li class="nav__mobile-item"><a href="#nutrition">Nutrition</a></li>
<li class="nav__mobile-item"><a href="#purchase">Buy it Now</a></li>
</ul>
<section class="section hero" id="hero">
<h2 class="header hero__header">"Sweet, Nutritious and Delicous"</h2>
<p class="subheader header__subheader">The key to happiness is hidden in the <span class="subheader--bold">
Potato™</span>
</p>
<picture>
<source media="(max-width: 470px)" srcset="images/potato-hero_320.png">
<source media="(max-width: 767px)" srcset="images/potato-hero_628.png">
<source media="(max-width: 1023px)" srcset="images/potato-hero_853.png">
<source media="(min-width: 1024px)" srcset="images/potato-hero_1024.png">
<img class="image" src="images/potato-hero_1024.png" alt="A picture of 2 potatoes.">
</picture>
</section>
</div>
<section class="section feature1" id="features">
<h2 class="header feature1__header">Different shapes and sizes</h2>
<p class="subheader feature1__subheader"><span class="subheader--bold">
Potato™</span> comes in many different unique shapes and sizes. </p>
<p class="subheader feature1__subheader">Find the one that fits
your
personal preferences.
</p>
<picture>
<source media="(max-width: 470px)" srcset="images/potato-mix_320.png">
<source media="(max-width: 767px)" srcset="images/potato-mix_631.png">
<source media="(max-width: 1023px)" srcset="images/potato-mix_872.png">
<source media="(min-width: 1024px)" srcset="images/potato-mix_1024.png">
<img class="image" src="images/potato-mix_1024.png" alt="A picture of a variety of potatoes in different colors.">
</picture>
</section>
<section class="section feature2" id="nutrition">
<h2 class="header feature2__header">Is <span class="header--bold">
Potato™</span> healthy? Yes it is! </h2>
<p class="subheader feature2__subheader"> The majority of carbohydrates in potatoes are complex carbohydrates, your
body's
main energy source. </p>
<picture>
<source media="(max-width: 1023px)" srcset="images/single-potato_320.png">
<source media="(min-width: 1024px)" srcset="images/single-potato_633.png">
<img class="image" src="images/single-potato_633.png" alt="A single, texturized, juicy looking potato.">
</picture>
<ul class="nutritional-facts">
<li class="nutritional-facts__item">110 <span class="nutritional-facts__label">calories</span></li>
<li class="nutritional-facts__item">26g <span class="nutritional-facts__label">carbohydrate</span></li>
<li class="nutritional-facts__item">3g <span class="nutritional-facts__label">protein</span></li>
<li class="nutritional-facts__item">0g <span class="nutritional-facts__label">fat</span></li>
</ul>
</section>
<section class="section feature3">
<h2 class="header feature3__header">Easily Transformable</h2>
<p class="subheader feature2__subheader"> Because of its unique structure, <span
class="subheader--bold">Potato™</span> is easily useable and transformable in any way you can think of.
</p>
<picture>
<source media="(max-width: 470px)" srcset="images/potato-chips_320.png">
<source media="(max-width: 767px)" srcset="images/potato-chips_509.png">
<source media="(max-width: 1023px)" srcset="images/potato-chips_671.png">
<source media="(min-width: 1024px)" srcset="images/potato-chips_764.png">
<img class="image" src="images/potato-chips_764.png" alt="A basket of potato chips.">
</picture>
</section>
<section class="section testimonials">
<h2 class="header testimonials__header">100% Customer satisfaction!</h2>
<p class="subheader feature2__subheader testimonials__subheader">"I was skeptic at first, but when I tried the
Potato for the
first time, my
life has completely
changed! I'm a better person now. Everything is better with the Potato." <br>-Jane Doe, single mom</p>
</section>
<section class="section purchase" id="purchase">
<h2 class="header purchase__header">Order one (or more) today!</h2>
<div class="purchase__options">
<ul class="purchase__links purchase__potato-lite">
<h3 class="subheader purchase__subheader"><span class="subheader--bold">Potato™</span> Lite</h3>
<li class="purchase__item">Small and compact</li>
<li class="purchase__item">Highly portable</li>
<li class="purchase__item">Unaplogetically delicious</li>
<li class="purchase__item">Nutritious</li>
<div class="purchase__order-body">
<a class="buy-button buy-button--green">Order</a>
<p class="purchase__starting-price">starting at $9.99</p>
</div>
</ul>
<ul class="purchase__links purchase__potato-pro">
<h3 class="subheader purchase__subheader"><span class="subheader--bold">Potato™</span> Pro</h3>
<li class="purchase__item">Highly portable</li>
<li class="purchase__item">Easily sliceable</li>
<li class="purchase__item">Unaplogetically delicious</li>
<li class="purchase__item">Very nutritious</li>
<div class="purchase__order-body">
<a class="buy-button buy-button--green">Order</a>
<p class="purchase__starting-price">starting at $19.99</p>
</div>
</ul>
<ul class="purchase__links purchase__potato-elite">
<h3 class="subheader purchase__subheader"><span class="subheader--bold">Potato™</span> Elite</h3>
<li class="purchase__item">Ideal for bigger groups</li>
<li class="purchase__item">Easily sliceable</li>
<li class="purchase__item">Unaplogetically delicious</li>
<li class="purchase__item">Extremely nutritious</li>
<div class="purchase__order-body">
<a class="buy-button buy-button--green">Order</a>
<p class="purchase__starting-price">starting at $39.99</p>
</div>
</ul>
</div>
</section>
<footer class="footer">
<div class="footer__authorship">
<p>Since you came here to read this, have one 🥔 for free!</p>
<p>Copyright © 2019 Potato™ All rights reserved.</p>
<p>Created by <a class="footer__item footer__item-author" target="_blank" href="https://robertluo.dev">Robert
Luo.</a></p>
</div>
<ul class="footer__links">
<li class="footer__item"><a>History</a></li>
<li class="footer__item"><a>About</a></li>
<li class="footer__item"><a>Contact Us</a></li>
<li class="footer__item"><a>Free Potato</a></li>
</ul>
</footer>
<script src="js/main.js"></script>
</body>
</html>