-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
179 lines (166 loc) · 7.52 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
179
<!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">
<title>Hangry Tummy</title>
<script src="https://kit.fontawesome.com/b328a1c9de.js"></script>
<link href="https://fonts.googleapis.com/css?family=Catamaran|Montserrat:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#maincontent" class="skip-link">Skip to main content</a>
<header class="clearfix">
<input type="checkbox" id="menu-toggle" name="menu-toggle">
<nav class="pages">
<ul class="clearfix">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
<label for="menu-toggle">
<i class="fa fa-bars" aria-label="Website Menu"></i>
</label>
</nav>
<h1>Hangry Tummy</h1>
<nav class="social clearfix">
<ul>
<li>
<a href="http://www.instagram.com" aria-label="Go to Hangry Tummy's Instagram page">
<i class="fab fa-instagram" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="http://www.facebook.com" aria-label="Go to Hangry Tummy's Facebook page">
<i class="fab fa-facebook-f" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="http://www.snapchat.com" aria-label="Go to HackerYou's Snapchat page">
<i class="fab fa-snapchat-ghost" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="http://www.twitter.com" aria-label="Go to HackerYou's Twitter feed">
<i class="fab fa-twitter" aria-hidden="true"></i>
</a>
</li>
</ul>
</nav>
</header>
<main id="maincontent">
<section class="new-menu clearfix">
<img src="assets/right-photo.jpg"
alt="Golden brown French fries and a bacon cheeseburger topped with a fried egg, tomato and lettuce">
<div class="text-content">
<h2>New to our menu</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi reprehenderit dolorem necessitatibus amet hic ducimus laboriosam possimus mollitia architecto temporibus. Ducimus cumque animi, vel eligendi laudantium facere sunt earum nemo distinctio sint velit maiores perspiciatis reprehenderit?</p>
<a href="#">Read More</a>
</div>
</section>
<section class="experience clearfix">
<img src="assets/left-photo.jpg" alt="A bowl of French onion soup, a plate of eggs Benedict with baked beans, potatoes and greens, and a plate of French fries and a sandwich">
<div class="text-content">
<h2>Full experience</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus libero culpa, est repellendus sed laudantium vitae earum incidunt molestiae neque, quibusdam quos praesentium distinctio, magnam laboriosam. Hic fugit esse ut distinctio, soluta debitis iusto. Ex, vitae!</p>
<a href="#">Read More</a>
</div>
</section>
<section class="dessert">
<div class="wrapper clearfix">
<img src="assets/square-imege.jpg" alt="Pints of green tea, caramel, strawberry and chocolate ice cream with a scoop of each on their respective lids">
<div class="text-content">
<h2>Desserts</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, exercitationem dolores in eligendi mollitia eum cumque quisquam, quibusdam, ex facilis doloribus sit! Deleniti tempora placeat quaerat quis ipsa? Voluptatem veritatis nihil sit est nemo. Eius non nobis ratione soluta veritatis! Sunt sed iste ipsa voluptate rerum sapiente neque quis reprehenderit.</p>
<a href="#">Read More</a>
</div>
</div>
</section>
<section class="location-menu-reach">
<nav class="wrapper">
<ul class="clearfix">
<li>
<a href="#">
<i class="fas fa-location-arrow" aria-hidden="true"></i>
<h3>Locations</h3>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-utensils" aria-hidden="true"></i>
<h3>Menu</h3>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-phone" aria-hidden="true"></i>
<h3>Reach Out</h3>
</a>
</li>
</ul>
</nav>
</section>
<section class="gallery">
<div class="wrapper">
<h2>The Gram</h2>
<div class="images clearfix">
<img src="assets/gallery-photo-1.jpg" alt="Fried chicken wings covered in buffalo sauce">
<img src="assets/gallery-photo-2.jpg"
alt="A composed bowl of salad with lettuce, sweet potato, avocado, cabbage, tomato, chickpeas, peppers, radish and seedlings">
<img src="assets/gallery-photo-3.jpg"
alt="Honey garlic chicken wings topped with sesame seeds with coleslaw and ranch dip">
</div>
</div>
</section>
</main>
<footer>
<div class="wrapper clearfix">
<nav class="pages">
<ul class="clearfix">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
<div class="contact">
<h2>Contact</h2>
<a class="email" href="mailto:[email protected]">[email protected]</a>
<a class="phone" href="tel:+1-123-456-7890">123 - 456 - 7890</a>
<p>123 Some Road, Toronto, ON</p>
<p>A5A 5A5, Canada</p>
</div>
<div class="newsletter">
<h2>Stay Updated</h2>
<form>
<p>Subscribe to our newsletter to stay updated.</p>
<label for="email" name= "email" class="visuallyhidden">Email address</label>
<input type="email" name="email" class="email" placeholder="email address">
<button type="submit">Subscribe</button>
</form>
</div>
</div>
<div class="copyright">
<p>Copyright © 2019 HackerYou</p>
</div>
</footer>
</body>
</html>