Skip to content

Commit 58165f0

Browse files
HuXn-WebDevHuXn-WebDev
committed
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>

0 commit comments

Comments
 (0)