Skip to content

Commit 58165f0

Browse files
HuXn-WebDevHuXn-WebDev
committedJan 9, 2023
Coffee Landing Page
1 parent 9083a37 commit 58165f0

File tree

8 files changed

+469
-0
lines changed

8 files changed

+469
-0
lines changed
 

‎92. Coffee/Images/1.png

2.33 MB
Loading

‎92. Coffee/Images/2.png

4.44 MB
Loading

‎92. Coffee/Images/3.png

1.45 MB
Loading

‎92. Coffee/Images/4.png

408 KB
Loading

‎92. Coffee/Images/pexels-chitokan-2183027-removebg-preview.png

102 KB
Loading

‎92. Coffee/Images/pexels-nao-triponez-129207.jpg

815 KB
Loading

‎92. Coffee/index.html

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Coffee</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<!-- nav -->
11+
<nav>
12+
<h1 class="logo">Logo</h1>
13+
<ul>
14+
<li><a href="#" class="active">Home</a></li>
15+
<li><a href="#">About</a></li>
16+
<li><a href="#">Menu</a></li>
17+
<li><a href="#">Contact</a></li>
18+
</ul>
19+
</nav>
20+
21+
<!-- header -->
22+
<section class="header">
23+
<h1 class="main-headings">START YOUR DAY</h1>
24+
<h1 class="primary-heading">WITH OUR COFFEE</h1>
25+
<button class="main-btn">Shop Now</button>
26+
</section>
27+
28+
<!-- our story -->
29+
30+
<section id="our-story">
31+
<div class="img-container">
32+
<div class="img"></div>
33+
</div>
34+
<div class="section-content">
35+
<div class="title-style">
36+
<span class="line"></span>
37+
<h1 class="title">Our Story</h1>
38+
</div>
39+
<p>
40+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor
41+
doloremque reiciendis ea voluptatibus. Quis modi ratione incidunt
42+
ipsam
43+
</p>
44+
<button>Learn More</button>
45+
</div>
46+
</section>
47+
48+
<!-- Perfect place to enjoy your coffee -->
49+
<section class="coffee-container">
50+
<div class="content-section">
51+
<div class="title-style">
52+
<h1 class="title-two">
53+
Perfect Place <br />
54+
To Enjoy Your <br />
55+
Coffee
56+
</h1>
57+
</div>
58+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
59+
<button style="margin-top: 20px">Learn More</button>
60+
</div>
61+
62+
<section class="img-container">
63+
<img src="Images/2.png" class="img-2" alt="" />
64+
</section>
65+
</section>
66+
67+
<!-- Products -->
68+
<section class="products">
69+
<h1 class="title title-three">Products</h1>
70+
71+
<section class="cards">
72+
<div class="card">
73+
<div class="card-img img-one"></div>
74+
<div class="card-title">
75+
<h1>Mocha</h1>
76+
</div>
77+
<div class="items">
78+
<p>Espresso</p>
79+
<p>Chocolate</p>
80+
<p>Steamed Milk</p>
81+
</div>
82+
<button>Learn More</button>
83+
</div>
84+
<div class="card">
85+
<div class="card-img img-two"></div>
86+
<div class="card-title">
87+
<h1>Mocha</h1>
88+
</div>
89+
<div class="items">
90+
<p>Espresso</p>
91+
<p>Chocolate</p>
92+
<p>Steamed Milk</p>
93+
</div>
94+
<button>Learn More</button>
95+
</div>
96+
<div class="card">
97+
<div class="card-img img-three"></div>
98+
<div class="card-title">
99+
<h1>Mocha</h1>
100+
</div>
101+
<div class="items">
102+
<p>Espresso</p>
103+
<p>Chocolate</p>
104+
<p>Steamed Milk</p>
105+
</div>
106+
<button>Learn More</button>
107+
</div>
108+
</section>
109+
</section>
110+
111+
<!-- footer -->
112+
<hr />
113+
<footer>
114+
<div class="container">
115+
<h1 class="heading-info">About <span>Us</span></h1>
116+
<p>
117+
Sit amet consectetur adipisicing elit. Dolor doloremque reiciendis ea
118+
voluptatibus.
119+
</p>
120+
</div>
121+
<div class="container">
122+
<h1 class="heading-info">Contact <span>Us</span></h1>
123+
<p>
124+
Sit amet consectetur adipisicing elit. Dolor doloremque reiciendis ea
125+
voluptatibus.
126+
</p>
127+
</div>
128+
<div class="container">
129+
<h1 class="heading-info">Opening <span> Hourse</span></h1>
130+
<p>
131+
Sit amet consectetur adipisicing elit. Dolor doloremque reiciendis ea
132+
voluptatibus.
133+
</p>
134+
</div>
135+
</footer>
136+
<hr class="hr-two" />
137+
138+
<p class="para">
139+
Copyright @ 2022 HuXn WebDev | Provided by <span>HuXn WebDev</span>
140+
</p>
141+
142+
<script src="app.js"></script>
143+
</body>
144+
</html>

‎92. Coffee/style.css

Lines changed: 325 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,325 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display+SC:wght@700&display=swap");
2+
3+
:root {
4+
--main-color: #deab5f;
5+
--primary-color: #312e2e;
6+
}
7+
8+
/* Utility Styles */
9+
button {
10+
padding: 10px 30px;
11+
background: var(--main-color);
12+
border: none;
13+
cursor: pointer;
14+
}
15+
16+
* {
17+
padding: 0;
18+
margin: 0;
19+
box-sizing: border-box;
20+
}
21+
22+
body {
23+
background: #100e0f;
24+
}
25+
26+
nav {
27+
display: flex;
28+
justify-content: space-around;
29+
align-items: center;
30+
color: #fff;
31+
font-family: sans-serif;
32+
padding-top: 15px;
33+
}
34+
35+
li {
36+
display: inline;
37+
list-style: none;
38+
}
39+
40+
li a {
41+
color: #fff;
42+
text-decoration: none;
43+
margin-left: 40px;
44+
}
45+
46+
li a:hover {
47+
border-bottom: 2px solid #deab5f;
48+
}
49+
50+
.header {
51+
background: url("Images/pexels-nao-triponez-129207.jpg");
52+
background-position: center;
53+
background-size: cover;
54+
height: 100vh;
55+
font-family: "Playfair Display SC", serif;
56+
font-weight: normal;
57+
display: flex;
58+
flex-direction: column;
59+
justify-content: center;
60+
align-items: center;
61+
color: #fff;
62+
position: relative;
63+
text-align: center;
64+
}
65+
66+
.main-headings {
67+
position: absolute;
68+
top: 7rem;
69+
font-size: 4rem;
70+
word-spacing: 10px;
71+
}
72+
.primary-heading {
73+
position: absolute;
74+
bottom: 4rem;
75+
font-size: 4rem;
76+
word-spacing: 10px;
77+
margin-bottom: -40px;
78+
}
79+
80+
.main-btn {
81+
position: absolute;
82+
bottom: 2rem;
83+
padding: 10px 30px;
84+
margin-top: 20px;
85+
background: transparent;
86+
background: var(--main-color);
87+
border: none;
88+
cursor: pointer;
89+
transform: translateY(60px);
90+
}
91+
92+
#our-story {
93+
margin-top: 15%;
94+
display: flex;
95+
flex-wrap: wrap;
96+
justify-content: space-around;
97+
align-items: center;
98+
}
99+
100+
.img {
101+
width: 400px;
102+
height: 400px;
103+
background: url(Images/pexels-chitokan-2183027-removebg-preview.png);
104+
background-position: center;
105+
background-size: cover;
106+
}
107+
108+
.title-style {
109+
display: flex;
110+
align-items: center;
111+
}
112+
113+
.title {
114+
font-family: "Playfair Display SC", serif;
115+
font-size: 4rem;
116+
color: #fff;
117+
transform: translateX(-100px);
118+
}
119+
120+
.line {
121+
width: 100px;
122+
height: 2px;
123+
background: #fff;
124+
transform: translateX(-120px);
125+
}
126+
127+
.section-content p {
128+
max-width: 500px;
129+
color: #fff;
130+
font-family: sans-serif;
131+
line-height: 20px;
132+
margin: 20px 0;
133+
}
134+
135+
.coffee-container {
136+
display: flex;
137+
justify-content: space-around;
138+
align-items: center;
139+
flex-wrap: wrap;
140+
margin-top: 10rem;
141+
}
142+
143+
.content-section p {
144+
max-width: 500px;
145+
}
146+
147+
.img-container {
148+
width: 500px;
149+
height: 400px;
150+
}
151+
152+
.img-2 {
153+
width: 400px;
154+
height: 400px;
155+
}
156+
157+
.title-two {
158+
font-size: 3rem;
159+
color: #fff;
160+
font-family: "Playfair Display SC", serif;
161+
font-weight: normal;
162+
}
163+
164+
.content-section p {
165+
color: white;
166+
margin-top: 20px;
167+
font-family: sans-serif;
168+
}
169+
170+
.products {
171+
margin-top: 5rem;
172+
}
173+
174+
.title-three {
175+
font-size: 4rem;
176+
margin-left: 10rem;
177+
margin-top: 10rem;
178+
margin-bottom: 10rem;
179+
}
180+
181+
.cards {
182+
display: flex;
183+
flex-wrap: wrap;
184+
flex-direction: row;
185+
justify-content: space-around;
186+
align-items: center;
187+
}
188+
189+
.card {
190+
border: 2px solid #deab5f;
191+
padding: 0 20px;
192+
height: 400px;
193+
width: 300px;
194+
display: flex;
195+
flex-direction: column;
196+
justify-content: space-around;
197+
align-items: center;
198+
border-radius: 5px;
199+
position: relative;
200+
margin-bottom: 4rem;
201+
}
202+
203+
.card-img {
204+
width: 100px;
205+
height: 100px;
206+
position: absolute;
207+
top: -60px;
208+
}
209+
210+
.img-one {
211+
background: url(Images/1.png);
212+
background-position: center;
213+
background-size: cover;
214+
}
215+
.img-two {
216+
background: url(Images/3.png);
217+
background-position: center;
218+
background-size: cover;
219+
}
220+
.img-three {
221+
background: url(Images/4.png);
222+
background-position: center;
223+
background-size: cover;
224+
}
225+
226+
.card-title {
227+
color: #fff;
228+
font-family: sans-serif;
229+
margin-top: 50px;
230+
}
231+
232+
.card .items p {
233+
color: #fff;
234+
margin: 20px 0;
235+
font-family: sans-serif;
236+
}
237+
238+
/* footer */
239+
footer {
240+
height: 50vh;
241+
display: flex;
242+
flex-wrap: wrap;
243+
align-items: center;
244+
justify-content: center;
245+
color: #fff;
246+
font-family: sans-serif;
247+
}
248+
249+
footer .container {
250+
margin: 20px;
251+
max-width: 300px;
252+
text-align: center;
253+
}
254+
255+
footer .heading-info {
256+
margin-bottom: 20px;
257+
}
258+
259+
footer p {
260+
line-height: 25px;
261+
}
262+
263+
span {
264+
color: #deab5f;
265+
}
266+
267+
hr {
268+
margin-bottom: 20px;
269+
border-color: #deab5f;
270+
width: 500px;
271+
margin: 0 auto;
272+
}
273+
274+
.para {
275+
color: white;
276+
font-family: sans-serif;
277+
text-align: center;
278+
margin-top: 20px;
279+
}
280+
281+
@media only screen and (max-width: 768px) {
282+
.main-headings,
283+
.primary-heading {
284+
font-size: 2.5rem;
285+
}
286+
287+
#our-story {
288+
text-align: center;
289+
}
290+
291+
#our-story .title {
292+
transform: translateX(50px);
293+
}
294+
295+
#our-story .line {
296+
display: none;
297+
}
298+
299+
.content-section {
300+
text-align: center;
301+
}
302+
303+
#our-story .img-container .img {
304+
width: 70%;
305+
text-align: center;
306+
margin: 0 auto;
307+
}
308+
309+
.coffee-container .img-container {
310+
margin-top: 5rem;
311+
width: 50%;
312+
}
313+
314+
hr {
315+
width: 400px;
316+
}
317+
318+
.hr-two {
319+
display: none;
320+
}
321+
322+
.para {
323+
margin-top: 10rem;
324+
}
325+
}

0 commit comments

Comments
 (0)
Please sign in to comment.