-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
205 lines (192 loc) · 9.64 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Good Food</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-icons.css">
<link rel="stylesheet" href="css/splide.min.css">
<link rel="stylesheet" href="css/jquery.fancybox.min.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/aos.css">
</head>
<body>
<!-- 1st row -->
<div class="bg-warning">
<div class="container-xxl px-0">
<div class="d-flex align-items-center">
<div>
<img src="img/pexelsphoto3659861.jpeg" alt="" class="img-fluid">
</div>
<div class="display-5 text-center p-3 fw-bold w-25">
M F <br>I D <br>T H <br>S D AND
</div>
<div>
<img src="img/pexelsphoto3659862.jpeg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
<!-- 2nd row -->
<div class="bg-dark">
<div class="container-xxl px-0">
<div class="row g-0">
<div class="col-lg-4 justify-content-end d-flex align-items-end" data-aos="fade-down" data-aos-delay="300" data-aos-duration="1000">
<div class="h1 text-light p-5 fw-bold">25 Healthy Smoothie Food Recipes</div>
</div>
<div class="col-lg-4 pt-5 text-center py-5">
<img src="img/pexelsphoto416471.jpeg" alt="" class="img-fluid w-50 h-100">
</div>
<div class="col-lg-4 h5 fw-semibold p-5 bg-warning mb-0" data-aos="zoom-in-up" data-aos-delay="300" data-aos-duration="1000">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia illo, eaque neque praesentium necessitatibus illum perferendis commodi assumenda quasi tempore voluptas expedita iste laboriosam. Magnam natus quis expedita quam excepturi quos, nobis eum corporis libero distinctio ipsa inventore. Ducimus, repudiandae.
</div>
</div>
</div>
</div>
<!-- 3rd row -->
<div class="bg-dark">
<div class="container-xxl p-5 bg-image">
<div class="col-lg-3 border border-3 border-warning text-light h6 mb-4 py-5 px-4 bg-black text-center" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
<div class="h5 fw-bold">
Breakfast Ideas
</div>
<div class="fw-semibold small mb-3">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat ut reprehenderit voluptas molestias iste, nobis prov.
</div>
<div>
<a href="#" class="text-light h6 fw-light">learn more</a>
</div>
</div>
<div class="col-lg-3 bg-warning text-dark h6 mb-4 py-5 px-4 text-center" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
<div class="h5 fw-bold">
Healthy Recipes
</div>
<div class="fw-semibold small mb-3">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat ut reprehenderit voluptas molestias iste, nobis prov.
</div>
<div>
<a href="#" class="text-dark h6 fw-light">learn more</a>
</div>
</div>
</div>
</div>
<!-- 4th row -->
<div class="bg-dark">
<div class="container-xxl px-0">
<div class="row gy-5 align-items-center px-5">
<div class="col-lg-6">
<div class="h1 text-light pt-5 mb-3 fw-bold">Fresh Food Cafe</div>
<div class="h6 text-light mb-4">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus facere voluptatum, animi architecto vero consequatur veritatis a aspernatur omnis soluta ipsam, vel ullam, molestiae aliquam.</div>
<div>
<i class="bi bi-facebook h5 text-warning px-1"></i>
<i class="bi bi-twitter h5 text-warning px-1"></i>
<i class="bi bi-instagram h5 text-warning px-1"></i>
<i class="bi bi-youtube h5 text-warning px-1"></i>
<i class="bi bi-pinterest h5 text-warning px-1"></i>
</div>
</div>
<div class="col-lg-6 text-center mb-5" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1000">
<div class="row gy-5 justify-content-center my-sm-0">
<div class="col-3">
<i class="bi bi-cup-hot display-4 text-warning"></i>
<div class="text-light h6 text-uppercase fw-normal mt-2">our menu</div>
</div>
<div class="col-3">
<i class="bi bi-egg display-4 text-warning" ></i>
<div class="text-light h6 text-uppercase fw-normal mt-2">specials</div>
</div>
<div class="col-3">
<i class="bi bi-calendar-heart display-4 text-warning" ></i>
<div class="text-light h6 text-uppercase fw-normal mt-2">drinks</div>
</div>
</div>
</div>
</div>
</div>
<!-- 5th row -->
<div class="container-xxl px-0">
<div class="d-flex position-relative px-0 align-items-end">
<a data-fancybox="gallery" href="img/pexelsphoto842142.jpeg">
<img src="img/pexelsphoto842142.jpeg" alt="" class="img-fluid">
</a>
<div class="col-sm-6 position-absolute text-light p-5 container-lg" style="right: 50px;">
<div class="h1 fw-semibold px-3 d-none d-md-block text-end">
Which is the Tastiest Food?
</div>
<div class="h6 px-3 fw-normal d-none d-md-block text-end">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque dolore, ipsam vel sunt beatae esse doloribus! Odit dolorem eligendi quaerat voluptates possimus voluptatum officia, vero doloremque, dolorum doloribus.
</div>
</div>
</div>
</div>
<!-- 6th row -->
<div class="container-xxl px-0 text-center">
<div class="row g-0 align-items-center">
<div class="col-md order-md-2" data-aos="zoom-in-up" data-aos-delay="200" data-aos-duration="1000">
<div>
<div class="pt-5 text-white h1 text-center mb-3 fw-bold">
Reviews
</div>
<div>
<i class="bi bi-quote h1 text-warning mb-3"></i>
<div class="text-white px-5 mx-5 mb-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perferendis, deserunt maiores soluta sint odio inventore, sequi, consectetur tempore nihil voluptate illo obcaecati itaque labore voluptas cupidita.</div>
<div class="text-white h5 fw-semibold">- LOO HUDSON</div>
</div>
</div>
</div>
<div class="col-md order-md-1">
<a data-fancybox="gallery" href="img/changed.jpg">
<img src="img/changed.jpg" alt="" class="img-fluid">
</a>
</div>
</div>
</div>
<!-- 7th row -->
<div class="container-xxl px-0 pt-5">
<div class="row align-items-center g-5 px-5">
<div class="col-md">
<div class="fw-normal text-white h5 mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem.</div>
<div class=" h5 fw-light text-light">4265 Richison drive <br>
Lorem ipsum, 56547</div>
</div>
<div class="col-md text-center">
<a data-fancybox="gallery" href="img//pexelsphoto262945.jpeg">
<img src="img/pexelsphoto262945.jpeg" alt="" class="img-fluid">
</a>
</div>
<div class="col-md">
<div class="text-dark bg-warning py-5 px-4">
<div class="fw-bold h2 mb-3">Contact us</div>
<div class="fw-normal h6 mb-1">Freephone: <a href="#" class="text-decoration-none text-dark">+1 800 789 987 678</a></div>
<div class="fw-normal h6 mb-1">Telephone: <a href="#" class="text-decoration-none text-dark">+1 800 789 987 678</a></div>
<div class="fw-normal h6 mb-1">Freephone: <a href="#" class="text-decoration-none text-dark">+1 800 789 987 678</a></div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var splide = new Splide('#splide-gallery', {
type: 'loop',
autoplay: true,
gap: '1rem',
interval: 3000,
perPage: 1,
perMove: 1,
});
splide.mount();
});
</script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/splide.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
<script src="js/aos.js"></script>
<script>
AOS.init({
once: true,
});
</script>
</body>
</html>