-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
219 lines (215 loc) · 10.5 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 lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home | CoffeeBean</title>
<link rel="stylesheet" href="./assets/css/app.css" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
/>
</head>
<body class="font-body font-size-md bg-light color-black relative">
<!-- Top Navigation - Sticky component -->
<div class="w-100 bg-light nav-wrapper py-10">
<div class="card relative h-100 max-width m-auto d-flex justify-between bg-white">
<!-- TODO: replace this with a proper logo -->
<a href="/" class="d-flex self-center pl-20 font-special font-size-xs">
<h1><span class="color-warning uppercase bold">Coffee</span>Bean</h1>
</a>
<nav class="desktop-visible nav-container self-center">
<ul class="nav-list d-flex flex-row">
<li class="px-10"><a href="./services.html">Services</a></li>
<li class="px-10"><a href="./about.html">About Us</a></li>
<li class="px-10"><a href="./contact.html">Contact</a></li>
</ul>
</nav>
<nav class="mobile-visible nav-container self-center">
<details class="nav-toggle">
<summary class="nav-toggle-button px-40">
<span class="material-symbols-outlined">menu</span>
</summary>
<ul class="mobile-nav-list nav-list d-flex flex-col bg-white w-100">
<li class="px-10 py-20 d-flex mr-auto gap-10">
<span class="material-symbols-outlined">home</span>
<a href="/">Home</a>
</li>
<li class="px-10 py-20 d-flex mr-auto gap-10">
<span class="material-symbols-outlined">book</span>
<a href="./services.html">Services</a>
</li>
<li class="px-10 py-20 d-flex mr-auto gap-10">
<span class="material-symbols-outlined">book</span>
<a href="./about.html">About Us</a>
</li>
<li class="px-10 py-20 d-flex mr-auto gap-10">
<span class="material-symbols-outlined">contact_support</span>
<a href="./contact.html">Contact</a>
</li>
</ul>
</details>
</nav>
</div>
</div>
<!-- End of Top Navigation - Sticky component -->
<!-- bg banner with title -->
<header class="bg-hero bg bg-position-center">
<div class="h-100 d-flex">
<div class="m-auto card-shadow px-40 py-20 backdrop-filter">
<h1 class="color-accent text-center font-size-lg bold">Elevate Your Morning</h1>
<h2 class="color-accent text-center font-size-xlg font-special bold">
with <span class="color-warning uppercase">fresh</span> beans
</h2>
</div>
</div>
</header>
<!-- End of bg banner with title -->
<!-- Main -->
<main class="w-100">
<div class="d-flex flex-col">
<section class="bg-black color-light py-40 section">
<div class="max-width m-auto d-flex flex-col gap-40">
<h3 class="font-special font-size-xlg pt-40 bold">
Savor the refined flavors of our exquisite coffee
</h3>
<h4 class="font-size-md pb-40">
Step into the exquisite world of coffee roasting, where every bean is carefully
nurtured to perfection. Our artfully crafted roasts are a symphony of flavors that
dance on your palate, leaving you longing for more.
</h4>
</div>
</section>
<section class="d-flex flex-col gap-20 justify-evenly section self-center vh-section">
<div class="max-width m-auto d-flex flex-col flex-lg-row gap-40">
<div class="bg bg-position-center flex-lg-1 photo-1"></div>
<div class="separator mobile-visible">
<div class="dot bg-accent"></div>
<div class="dot bg-accent"></div>
<div class="dot bg-accent"></div>
</div>
<div class="d-flex flex-col flex-lg-1 text-center gap-20 self-center">
<h3 class="color-accent font-size-xlg font-special bold">
Coffee for a Refined Energy Boost
</h3>
<p class="font-size-md">
Indulge in the exquisite taste of our coffee that not only elevates your senses but
also provides a refined energy boost, helping you stay alert and focused throughout
the day.
</p>
</div>
</div>
</section>
<section class="bg-warning color-light d-flex flex-col gap-20 py-40 w-100">
<div class="max-width m-auto d-flex flex-col gap-40">
<h3 class="font-special font-size-xlg pt-40 bold">Crafted for Coffee Lovers</h3>
<h4 class="font-size-lg">Exquisite Roasts, Unmatched Flavors, Unforgettable Moments</h4>
<p class="font-size-md pb-40">
Proudly Serving Our Esteemed Partners and Clients: We Deliver Unparalleled Quality,
Reliability, and Expertise. Join Us in the Journey of Crafting Extraordinary Coffee
Experiences that Delight and Inspire Coffee Lovers Everywhere.
</p>
</div>
</section>
<section class="bg-white color-accent d-flex flex-col gap-20 py-40 w-100">
<div class="max-width m-auto d-flex flex-col gap-40 text-center">
<h3 class="font-special font-size-xlg pt-40 bold">Caffeine Connoisseur Connector</h3>
<img class="partners-grid" src="./assets/images/partners.png" />
</div>
</section>
<section class="bg-black color-light d-flex flex-col gap-20 py-40 w-100">
<div class="max-width m-auto d-flex flex-col gap-40">
<h3 class="font-special font-size-xlg pt-40 bold">
Experience the Artistry of Coffee Roasting: Refined Flavors Crafted to Perfection
</h3>
<h4 class="font-size-md pb-40">
Welcome to the World of Exquisite Coffee Roasting: Where Flavors Dance, Craftsmanship
Shines, and Cravings Awaken. Immerse Yourself in the Artistry of our Carefully Crafted
Brews and Discover the Magic of Coffee Roasting.
</h4>
</div>
</section>
<section class="d-flex flex-col gap-20 justify-evenly section self-center vh-section">
<div class="flex-lg-row-reverse max-width m-auto d-flex flex-col flex-lg-row gap-40">
<div class="bg bg-position-center flex-lg-1 photo-2"></div>
<div class="separator mobile-visible">
<div class="dot bg-accent"></div>
<div class="dot bg-accent"></div>
<div class="dot bg-accent"></div>
</div>
<div class="d-flex flex-col flex-lg-1 text-center gap-20 self-center">
<h3 class="color-accent font-size-xlg font-special bold">
Coffee's Rich Antioxidant Profile
</h3>
<p class="font-size-md">
Our coffee is packed with antioxidants, delighting your taste buds while also
helping fight inflammation and protecting against diseases, for a truly refined and
health-conscious coffee experience.
</p>
</div>
</div>
</section>
<section class="bg-black color-light d-flex flex-col gap-20 py-40 w-100">
<div class="max-width m-auto d-flex flex-col gap-40">
<h3 class="font-special font-size-xlg pt-40 bold">
Unveiling the Mastery of Coffee Roasting: An Epicurean Journey of Flavors and
Craftsmanship
</h3>
<h4 class="font-size-md pb-40">
Embrace the Artistry of Coffee Roasting: Where Elegance, Finesse, and Unmatched
Flavors Await. Discover Our Carefully Crafted Brews, a Symphony of Tastes That Will
Captivate Your Palate.
</h4>
</div>
</section>
<section class="d-flex flex-col gap-20 justify-evenly section self-center vh-section">
<div class="max-width m-auto d-flex flex-col flex-lg-row gap-40">
<div class="bg bg-position-center flex-lg-1 photo-3"></div>
<div class="separator mobile-visible">
<div class="dot bg-accent"></div>
<div class="dot bg-accent"></div>
<div class="dot bg-accent"></div>
</div>
<div class="d-flex flex-col flex-lg-1 text-center gap-20 self-center">
<h3 class="color-accent font-size-xlg font-special bold">
Coffee's Elegance in Enhancing Brain Function
</h3>
<p class="font-size-md">
The sophisticated blend of flavors in our coffee is enriched with caffeine that
stimulates the brain, improving memory, mood, and cognitive function, for an
elevated coffee experience that delights both your taste buds and your mind.
</p>
</div>
</div>
</section>
</div>
</main>
<!-- End of Main -->
<!-- Footer -->
<footer>
<div class="section bg-black color-light py-40">
<div class="max-width m-auto d-flex flex-col gap-20 font-size-md color-light">
<h4 class="font-size-xlg color-light font-special">Want to know more?</h4>
<a href="/"><h5 class="font-size-lg color-white font-special bold">Get in touch</h5></a>
<p class="font-size-sm">Copyright © 2023 CoffeeBean, Inc. All rights reserved.</p>
<p>
I've brewed my vision and crafted my idea from the comfort of my own home, and now I'm
ready to serve it to the world with a steaming cup of inspiration and a rich blend of
creativity.
</p>
<ul class="footer-list d-flex flex-col flex-wrap">
<li class="py-10"><a href="./">Home</a></li>
<li class="py-10"><a href="./services.html">Services</a></li>
<li class="py-10"><a href="./about.html">About Us</a></li>
<li class="py-10"><a href="./contact.html">Contact</a></li>
</ul>
</div>
</div>
</footer>
<!-- End of Footer -->
<div class="chat bg-accent color-light">
<span class="material-symbols-outlined">contact_support</span>
</div>
</body>
</html>