shopCoffee/index.html at main · AvniCoderr/shopCoffee · GitHub

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
<!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" />
		\
		<link rel="preconnect" href="https://fonts.googleapis.com" />
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
		<link
			href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
			rel="stylesheet"
		/>
		<link rel="stylesheet" href="./style.css" />
		<title>The Quiet Cup</title>
	</head>
	<body>
		<section class="front-page">
			<img
				class="hero"
				src="./assets/michal-parzuchowski-ItaV89TNkks-unsplash.jpg"
				alt="Coffee"
			/>
			<nav>
				<div class="logo">
					<img src="./assets/logo.svg" alt="The Quiet Cup" />
					<h1>The Quiet Cup</h1>
				</div>
				<div class="links">
					<a href="#">Roasting Process</a>
					<a href="#">Tasting and Pairing</a>
					<a href="#">our story</a>
				</div>
				<svg
					width="44"
					height="18"
					viewBox="0 0 44 18"
					fill="none"
					xmlns="http://www.w3.org/2000/svg"
				>
					<line
						class="line"
						y1="1"
						x2="44"
						y2="1"
						stroke="white"
						stroke-width="2"
					/>
					<line
						class="line"
						y1="9"
						x2="27"
						y2="9"
						stroke="white"
						stroke-width="2"
					/>
					<line
						class="line"
						y1="17"
						x2="11"
						y2="17"
						stroke="white"
						stroke-width="2"
					/>
				</svg>
			</nav>
			<div class="selling-point">
				<h2>Let your senses awaken.</h2>
				<h3>
					Explore a world of flavors with our extensive coffee, tea, and pastry
					selection that satisfies your every craving.
				</h3>
				<div class="ctas">
					<button class="cta-sec">Explore More</button>
					<button class="cta-main">
						<a href="https://koalendar.com/e/yoga-appointment">Sign up today</a>
					</button>
				</div>
			</div>
		</section>
		<section class="classes">
			<div class="classes-description">
				<h2>Coffees Crafted for You</h2>
				<h3>Experience the perfect blend for your soul</h3>
			</div>
			<div class="videos">
				<div class="pilates">
					<h3>Pastries</h3>
					<img
						src="assets/tomas-jasovsky-d5SZqLkpIrY-unsplash.jpg"
						alt=""
						class="video"
					/>
				</div>
				<div class="yoga">
					<h3>Yummy</h3>
					<img
						src="assets/toa-heftiba-QnUywvDdI1o-unsplash.jpg"
						alt=""
						class="video"
					/>
				</div>
				<div class="meditation">
					<h3>Mochalation</h3>
					<img
						src="assets/clifford-VobvKmG-StA-unsplash.jpg"
						alt=""
						class="video"
					/>
				</div>
			</div>
		</section>
		<section class="about">
			<div class="our-story">
				<h2>Our story...</h2>
				<p>
					Always a coffee enthusiast, Janet has immersed herself in the art of
					crafting the perfect brew for over thirty years. A passionate coffee
					connoisseur, she shares her love for coffee with a personal touch.
					Through exploration, dedication, and innovation, she brings a unique
					approach to brewing and serving coffee in our coffee shop
				</p>
			</div>
			<img
				src="./assets/nathan-dumlao-pMW4jzELQCw-unsplash.jpg"
				alt="our-story"
			/>
		</section>
		<script
			src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"
			integrity="sha512-Mf/xUqfWvDIr+1B6zfnIDIiG7XHzyP/guXUWgV6PgaQoIFeXkJQR5XWh9fqAiCiRCpemabt3naV4jhDWVnuYDQ=="
			crossorigin="anonymous"
			referrerpolicy="no-referrer"
		></script>
		<script
			src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/ScrollTrigger.min.js"
			integrity="sha512-YzMW3OzvgtVpIIPPpjnCy8wVTq5slHRrxnLH1oD5dkVjZf8+8DJYd+GYmmWXZNmroTqKXFFzFS3XZ/LBvaNgZg=="
			crossorigin="anonymous"
			referrerpolicy="no-referrer"
		></script>
		<script src="./script.js"></script>
	</body>
</html>