-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
219 lines (193 loc) · 6.55 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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation 5 Recipes</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/app.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<header class="contain-to-grid sticky">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1><a href="#">Foundation 5 Recipes</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="has-dropdown"><a href="#">Recipes</a>
<ul class="dropdown">
<li><a href="#">Main dishes</a></li>
<li><a href="#">Side dishes</a></li>
<li class="has-dropdown"><a href="#">Desserts</a>
<ul class="dropdown">
<li><a href="#">Cupcakes</a></li>
<li><a href="#">Ice creams</a></li>
<li><a href="#">Brownies</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Blog</a><li>
</ul>
<ul class="right">
<li><a href="#">Contact Us</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</section>
</nav>
</header>
<div class="row">
<!-- Main Div -->
<div class="large-8 columns">
<!-- Popular Panel -->
<div class="panel">
<!-- Main Popular Posts" -->
<div class="row popular-main">
<div class="medium-6 columns">
<img src="img/summer-salad.jpg" alt="Summer Salad">
</div>
<div class="medium-6 columns">
<h3><a href="#">Summer Salad</a></h3>
<p>This summer salad will be the star of every garden party. It's made of tomatoes, cucumber, black olives and lettuce...</p>
</div>
</div>
<!-- Additional Popular Posts -->
<div class="row popular-additional show-for-medium-up">
<div class="medium-4 columns">
<img src="img/cheese.jpg" alt="Cheese">
<h4><a href="#">Cheese with Fruits</a></h4>
</div>
<div class="medium-4 columns">
<img src="img/ice-cream.jpg" alt="Ice Cream">
<h4><a href="#">Ice Cream</a></h4>
</div>
<div class="medium-4 columns">
<img src="img/italian-salad.jpg" alt="Italian Salad">
<h4><a href="#">Italian Salad</a></h4>
</div>
</div>
</div>
<div class="row latest-post">
<div class="medium-3 columns">
<a class="th" href="img/breakfast.jpg"><img src="img/breakfast-th.jpg" alt="Breakfast"></a>
</div>
<div class="medium-9 columns">
<h4><a href="#">Breakfast with Eggs</a></h4>
<p>Maybe this is not the best breakfast for someone on a diet but you will wow your guests with this for sure ...</p>
</div>
</div>
<div class="row latest-post">
<div class="medium-3 columns">
<a class="th" href="img/strawberry-cake.jpg"><img src="img/strawberry-cake-th.jpg" alt="Strawberry Cake"></a>
</div>
<div class="medium-9 columns">
<h4><a href="#">Strawberry Cake</a></h4>
<p>Strawberry cakes are the favourite fruit cakes of the summer as they are easy-to-made and not too ...</p>
</div>
</div>
<div class="row latest-post">
<div class="medium-3 columns">
<a class="th" href="img/seafood.jpg"><img src="img/seafood-th.jpg" alt="Seafood"></a>
</div>
<div class="medium-9 columns">
<h4><a href="#">Seafood</a></h4>
<p>Seafood is one of the most healthy food that exists around the globe, as it contains many vitamins and ...</p>
</div>
</div>
<div class="pagination-centered">
<ul class="pagination">
<li class="arrow unavailable"><a href="">«</a></li>
<li class="current"><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li class="unavailable"><a href="">…</a></li>
<li><a href="">12</a></li>
<li><a href="">13</a></li>
<li class="arrow"><a href="">»</a></li>
</ul>
</div>
</div>
<aside class="large-4 columns">
<!-- Newsletter Signup -->
<div class="row">
<div class="small-12 medium-9 large-12 columns end">
<h5>Sign Up To Our Newsletter</h5>
<form>
<div class="row collapse">
<div class="small-8 columns">
<input type="text" placeholder="your@ema.il">
</div>
<div class="small-4 columns">
<a href="#" class="button postfix">Send</a>
</div>
</div>
</form>
</div>
</div>
<!-- Flexible Video -->
<div class="row">
<div class="small-12 medium-9 large-12 columns end">
<h5>Daily Video Recipe</h5>
<div class="flex-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/PAtt_K3Tjjk" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<!-- Sidebar Accordion -->
<div class="row">
<div class="small-12 medium-9 large-12 columns end">
<h5>Our Cookbook</h5>
<ul class="accordion" data-accordion>
<li class="accordion-navigation">
<a href="#panel1a">Main dishes</a>
<div id="panel1a" class="content active">
<ul>
<li><a href="#">Poultry</a></li>
<li><a href="#">Pork</a></li>
<li><a href="#">Beef</a></li>
<li><a href="#">Vegetarian</a></li>
</ul>
</div>
</li>
<li class="accordion-navigation">
<a href="#panel2a">Side dishes</a>
<div id="panel2a" class="content">
<ul>
<li><a href="#">Potato dishes</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Salads</a></li>
<li><a href="#">Rice recipes</a></li>
</ul>
</div>
</li>
<li class="accordion-navigation">
<a href="#panel3a">Desserts</a>
<div id="panel3a" class="content">
<ul>
<li><a href="#">Fruit cakes</a></li>
<li><a href="#">Brownies</a></li>
<li><a href="#">Ice creams</a></li>
<li><a href="#">Pies</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</aside>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>