-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
225 lines (189 loc) · 7.59 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
220
221
222
223
224
225
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Flavors of Life</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<!-- Font Awesome CSS -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Favicon -->
<link rel="icon" href="css/favicon.ico"/>
<!-- Google Fonts -->
<style>
@import url('https://fonts.googleapis.com/css?family=Quicksand');
</style>
</head>
<body>
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="http://leahkahwadjian.com">
<img src="images/pomegranate.png" width="30" alt="LK Logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarNavDropdown">
<ul class="navbar-nav align-items-end">
<li class="nav-item active">
<a class="nav-link" href="index.html">Recipes <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://leahkahwadjian.com">Community</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://leahkahwadjian.com">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://leahkahwadjian.com">How To</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://leahkahwadjian.com">Contact Us</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<section class="jumbotron">
<h1>Making a New Year's Resolution?</h1>
<p><a class="btn btn-lg btn-warning" href="#" role="button">Explore our Recipes</a></p>
</section>
<div class="row">
<div class="col-12">
<div class="row justify-content-around teal-bk box">
<div class="col-md-2 col-sm-4">
<img src="images/blueberrymuffin.png" class="img-fluid ">
<h6 class="align-items-end text-center caps t-box">Blueberry Muffin</h6>
</div>
<div class="col-md-2 col-sm-4 teal-bk">
<img src="images/mousse.png" class="img-fluid ">
<h6 class="align-items-end text-center caps t-box">Chocolate Mousse</h6>
</div>
<div class="col-md-2 col-sm-4 teal-bk">
<img src="images/scone.png" class="img-fluid ">
<h6 class="align-items-end text-center caps t-box">Cranberry Scone</h6>
</div>
<div class="col-md-2 col-sm-4 teal-bk">
<img src="images/chocolatecake.png" class="img-fluid">
<h6 class="align-items-end text-center caps t-box">Chocolate coffeecake</h6>
</div>
<div class="col-md-2 col-sm-4 teal-bk">
<img src="images/shortcake.png" class="img-fluid">
<h6 class="align-items-end text-center caps t-box">Strawberry Shortcake</h6>
</div>
</div>
</div>
</div>
<!--- FIRST -->
<div class="row">
<div class="col-md-4 col-12 p-0 ">
<div class="row m-0 ">
<div class="col-md-12 col-4">
<div class="red-bk box p-0">
<img src="images/chowder.png" class="img-fluid w-100">
<h6 class="text-center white-text">Clam Chowder</h6>
</div>
</div>
<div class="col-md-12 col-4">
<div class="red-bk box p-0">
<img src="images/sliders.png" class="img-fluid w-100">
<h6 class="text-center white-text">Sliders</h6>
</div>
</div>
<div class="col-md-12 col-4">
<div class="red-bk box p-0">
<img src="images/guac.png" class="img-fluid w-100">
<h6 class="text-center white-text">Guacamole</h6>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-12">
<div class="col-12 yellow-bk box">
<div class="innerBox ">
<img src="images/ribs.png" class="img-fluid">
<h3 class="caps">100 Dishes</h3>
<p>to eat in Alabama before you die.</p>
</div>
<a href="#" class="moreInfo white-text">Download PDF</a>
</div>
<div class="col-12 tan-bk box">
<h3 class="text-center caps yellow-text">Farm to Table Blog</h3>
<hr>
<p class="title">Fried Okra? Creamy grits? Not in this celebrated chef's kitchen</p>
<img src="images/okra.png" class="img-fluid">
<p>For the recent Year of Alabama Food article about our state's culinarary rivalries, we asked celebrated chef Frank Stitt to... <a href="#" class="yellow-text italic">More</a></p>
<hr>
<p class="title">10 simple tips for healthier Southern cooking</p>
<img src="images/chicken.png" class="img-fluid">
<p>While I love traditional Southern cooking, I truly enjoy eating a nutritious diet, feeding my three children the best possib... <a href="#" class="yellow-text italic">More</a></p>
<hr>
<p class="title">Five reasons to buy from local farmers</p>
<img src="images/fruittart.png" class="img-fluid">
<p>Usually sold within 24 hours of being harvested, fruits and vegetables produced locally are fresher and taste better than pr... <a href="#" class="yellow-text italic">More</a></p>
<hr>
<a href="#" class="yellow-text italic">Browse all posts</a>
</div>
</div>
<div class="col-md-4 col-12">
<div class="col-12 box yellow-bk">
<div class="innerBox">
<h3 class="caps text-right">Learn Secret Alabama Recipes</h3>
<img src="images/meals.png" class="img-fluid">
</div>
<a href="#" class="moreInfo white-text">Tell no one</a>
</div>
<div class="col-12 box tan-bk">
<div class="innerBox">
<img src="images/meals.png" class="img-fluid">
<h3 class="caps text-right">Hungry for Adventure? Sample Alabama's Food Trails.</h3>
</div>
<a href="#" class="moreInfo yellow-text">Tell no one</a>
</div>
<div class="col-md-12 box yellow-bk ">
<div class="row img-bg bg-apple">
<div class="col-12 transparent innerBox border">
<h4 class="caps">Don't miss these great good fests</h4>
<p>Discover <a href="#" class="black-text">25 Alabama events</a> for true food fanatics</p>
</div>
</div>
</div>
<div class="col-md-12 box green-bk">
<div class="row img-bg bg-ic">
<div class="col-12 transparent innerBox border">
<h4 class="caps">Go ahead, shoot your food</h4>
</div>
</div>
</div>
<div class="col-md-12 box green-bk">
<div class="row img-bg bg-sm">
<div class="col-12 transparent innerBox border">
<h4 class="caps">Food Fan? Join us on Facebook</h4>
</div>
</div>
</div>
</div>
</div>
<footer class="footer yellow-bk text-center">
<nav role="navigation">
<div class="row justify-content-around">
<ul class="align-self-center">
<li><a href="#">Home</a></li>
<li ><a href="#">Famous Dishes</a></li>
<li ><a href="#">Restaurants</a></li>
<li ><a href="#">Farmers Markets</a></li>
<li><a href="#">Recipes</a></li>
</ul>
</div>
</nav>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>