-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
248 lines (235 loc) · 10.8 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
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://fonts.google.com/">
<title>The best Coffee in your stunning world</title>
</head>
<body class="body">
<header>
<div class="container">
<div class="heading">
<ul class="nav left">
<li class="nav__item left" id="highlight">HOMEPAGE</li>
<li class="nav__item left">OUR COFEE</li>
<li class="nav__item left">FEATURE</li>
</ul>
<div class="brand">
<img src="./img/logo-icon.svg" alt="" class="logo">
<img src="./img/coffeener.svg" alt="" class="brand__name">
</div>
<ul class="nav right">
<li class="nav__item right">BLOG</li>
<li class="nav__item right">SINGLE POST</li>
<li class="nav__item right">CONTACT</li>
</ul>
<div class="menu">
<div class="line__top"></div>
<div class="line__bottom"></div>
</div>
</div>
</div>
</header>
<!-- <div class="hero"> -->
<div class="line-bg ">
<div class="container">
<p class="textCenter">The best <span>Coffee</span> in your stunning world</p>
<div class="clickOn">
<button class="button primary">Get Cofeener</button>
<button class="button secondary">My Twitter</button>
</div>
</div>
</div>
<div class="container">
<!-- <div class="float__video "> -->
<img src="./img/video.png" alt="" class="video">
<!-- </div> -->
</div>
<div class="container">
<div class="about">
<div class="headline">
<h2 class="headline__text">Positive Statistics Highlight Success of Our Company</h2>
<div class="description">
<p>Strong sales, positive feedback, and sustainability practices <br class="break">showcase our
commitment to
excellence
and growth</p>
<div class="btn">
<img src="./img/Group.svg" alt="">
<button class="moreDetail">More detail</button>
</div>
</div>
<ul class="point">
<li class="frame num14">
<p>Customers reported high levels of satisfaction with our product, citing its quality and
effectiveness.</p>
<h3>92 %</h3>
</li>
<li class="frame num15">
<p>Colombian Supremo is the most popular Arabica coffee, accounting for 30% of all Arabica
coffee
sales worldwide. </p>
<h3>30 %</h3>
</li>
<li class="frame num16">
<p>Our product has received a great rating on average across all online review platforms,
indicating
its quality and effectiveness</p>
<h3>4.8-star</h3>
</li>
</ul>
</div>
</div>
</div>
<div class="experience ">
<div class="container">
<div class="head__text">
<h2>Experience the Complex and <br><span class="highlight">Delicious</span> Tastes of Two<br>
Exceptional <span class="highlight">Arabica</span> Coffees</h2>
</div>
<div class="infor__main">
<div class="main">
<div class="infor__main__left">
<p>by Daniel Tafjord on Unsplash</p>
<div class="wrapper">
<img src="./img/image.png" alt="#">
<div class="box__border first"></div>
</div>
</div>
<div class="infor__main__right">
<div class="main__right">
<p class="main__des">Ethiopian Yirgacheffe is a type of Arabica coffee that is grown in
the
southern
highlands<br class="break"> of Ethiopia. It is considered one of the finest Arabica
coffees in the
world
due to its <br class="break"> unique flavor profile. The coffee is known for itsbright
acidity, medium
body, and floral,<br class="break"> citrusy notes with a hint of spice.</p>
<p class="main__des">The Yirgacheffe coffee plant grows in rich, fertile soil and in
high-altitude
regions. The <br>beans are carefully hand-picked and sun-dried, resulting in a coffee
with a
distinct flavor<br>that is hard to replicate. The beans are also processed using a wet
method,which helps<br>to enhance the coffee's floral and fruity notes.</p>
<button class="infor__main__button">Get Cofeener</button>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="frame22">
<div class="frame22__left">
<p class="main__des">Colombian Supremo is a type of Arabica coffee that is grown in the
high-altitude regions of Colombia. It is renowned for its rich, full-bodied taste, with a mild
acidity and a smooth finish. The coffee beans are carefully hand-picked and sun-dried, resulting
in a coffee with a well-balanced flavor profile. </p>
<p class="main__des">The Yirgacheffe coffee plant grows in rich, fertile soil and in
high-altitude
regions. The beans are carefully hand-picked and sun-dried, resulting in a coffee with a
distinct flavor that is hard to replicate. The beans are also processed using a wet method,
which helps to enhance the coffee's floral and fruity notes.</p>
<button class="buttonFrame22">Get Cofeener</button>
</div>
<div class="frame22__right">
<p>by Daniel Tafjord on Unsplash</p>
<img src="./img/img.png" alt="">
<div class="box__border first"></div>
</div>
</div>
</div>
</div>
<div class="news">
<div class="container">
<div class="head__News">
<h2>Coffee Insights: Exploring the World of Specialty Coffee</h2>
<button> <img src="./img/arrowup.png" alt=""></button>
</div>
</div>
<div class="container">
<ul class="news__list">
<li class="news__items">
<img src="./img/img (1).png" alt="">
<p>Hygge Vibes <br>By Rizky Subagja on Unsplash</p>
</li>
<li class="news__items">
<img src="./img/img (2).png" alt="">
<p>By GC Libraries<br>
Creative Tech Lab on Unsplash</p>
</li>
<li class="news__items">
<img src="./img/img (3).png" alt="">
<p>Coffee<br>
By Harry Brewer on Unsplash</p>
</li>
</ul>
</div>
</div>
<div class="footline__main">
<div class="container">
<div class="footline">
<h2 class="subscribe">Subscribe on our updates</h2>
<div class="formSubmit">
<div class="form">
<input type="text" class="input" placeholder="Your email here">
<button class="buttonSubmit">Sign Up</button>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="footer__main">
<div class="footer__main__left">
<ul class="nav__Top">
<li class="nav__items" id="highlight">HOMEPAGE</li>
<li class="nav__items">OUR COFEE</li>
<li class="nav__items">FEATURE</li>
</ul>
<ul class="nav__Bottom">
<li class="nav__items">BLOG</li>
<li class="nav__items" id="singlePost">SINGLE POST</li>
<li class="nav__items">CONTACT</li>
</ul>
</div>
<div class="footer__main__center">
<div class="footer__brand">
<img src="./img/logo-icon.svg" alt="" class="logo">
<img src="./img/coffeener.svg" alt="" class="brand__name">
</div>
</div>
<div class="footer__main__right">
<ul class="contact__Top">
<li class="social__icon">
<i class="fa-brands fa-medium"></i>
</li>
<li class="social__icon">
<i class="fa-solid fa-basketball"></i>
</li>
</ul>
<ul class="contact__Bottom ">
<li class="social__icon">
<i class="fa-brands fa-behance"></i>
</li>
<li class="social__icon"><i class="fa-brands fa-linkedin-in"></i></li>
<li class="social__icon"><i class="fa-brands fa-twitter"></i></li>
</ul>
</div>
</div>
</div>
</div>
<div class="footerEnd">
<p>© 2023 Coffeener. Some rights reserved.</p>
</div>
</div>
<script src="./main.js"></script>
</body>
</html>