-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
169 lines (165 loc) · 5.16 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Yt-copy</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</head>
<body>
<nav>
<h1 class="Logo">Logo</h1>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<header>
<h1 class="main-heading">START YOUR DAY</h1>
<h1 class="primary-heading">WITH OUR COFFEE</h1>
<button class="main-btn">Shop</button>
</header>
<!-- start of our story section -->
<section id="Our-Story">
<div class="img-container">
<div class="img">
<img
src="./Asset/Screenshot 2024-03-03 at 2.54.36 PM.jpeg"
alt=""
width="700px"
height="600px"
/>
</div>
</div>
<div class="section-content">
<div class="title-style">
<span class="line"> </span>
<h1 class="title">Our story</h1>
</div>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque
recusandae aperiam eum dolorum dolorem vitae ea enim quaerat vero
veritatis quisquam voluptatum deserunt et at iure pariatur commodi,
repellat ab sapiente ipsa blanditiis.
</p>
<button class="btn-2"><a href="#">Learn More</a></button>
</div>
</section>
<!-- end of our story section -->
<!-- start of coffee section -->
<section class="coffe-container">
<div class="content-section">
<div class="title-style">
<!-- <span class="line"> </span> -->
<h1 class="title-two">
Perfect Place <br />
To Enjoy Your <br />
Coffee
</h1>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae odio id
tenetur quos molestias eos dolore aliquam exercitationem. Laboriosam,
fugit.
</p>
<button class="btn-coffee"><a href="#">Find More</a></button>
</div>
<section class="img-container">
<img src="Asset/about.jpg" alt="" />
</section>
</section>
<!-- end of coffee section -->
<!-- start of product section -->
<section class="products">
<h1 class="title title-three">Products</h1>
<section class="cards">
<div class="card">
<div class="card-img img-one">
<img src="./Asset/main coffee.png" alt="" />
</div>
<div class="card-title">
<h1>Mocha</h1>
</div>
<div class="items">
<p>Espresso</p>
<p>Chocolate</p>
<p>Steamed Milk</p>
</div>
</div>
<div class="card">
<div class="card-img img-two">
<img src="./Asset/main coffee.png" alt="" />
</div>
<div class="card-title">
<h1>Mocha</h1>
</div>
<div class="items">
<p>Espresso</p>
<p>Chocolate</p>
<p>Steamed Milk</p>
</div>
</div>
<div class="card">
<div class="card-img img-three">
<img src="./Asset/main coffee.png" alt="" />
</div>
<div class="card-title">
<h1>Mocha</h1>
</div>
<div class="items">
<p>Espresso</p>
<p>Chocolate</p>
<p>Steamed Milk</p>
</div>
</div>
</section>
</section>
<!-- End of product section -->
<!-- footer starts -->
<hr />
<footer>
<div class="container">
<h1 class="heading-info">About <span>Us</span></h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea
cupiditate reiciendis adipisci? Modi reiciendis dolore ex in? Ab
corrupti minima animi officiis nulla, facere magnam.
</p>
</div>
<div class="container">
<h1 class="heading-info">Contact <span>Us</span></h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea
cupiditate reiciendis adipisci? Modi reiciendis dolore ex in? Ab
corrupti minima animi officiis nulla, facere magnam.
</p>
</div>
<div class="container">
<h1 class="heading-info">opening <span>Hours</span></h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea
cupiditate reiciendis adipisci? Modi reiciendis dolore ex in? Ab
corrupti minima animi officiis nulla, facere magnam.
</p>
</div>
<hr class="hr-two" />
</div>
</footer>
<br>
<div class="crp-con">
<div class="crp">
<p>Made by <span>Anastand</span></p>
</div>
</div>
<!-- footer ends -->
</body>
</html>