-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
203 lines (188 loc) · 7.04 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kopi Kenangan Senja</title>
<link rel="shortcut icon" type="x-icon" href="src/img/logo.png" />
<!-- FONTS -->
<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=Belanosima&family=Poppins:ital,wght@0,100;0,300;0,400;0,700;1,700&display=swap"
rel="stylesheet"
/>
<!-- MY STYLE -->
<link rel="stylesheet" href="src/css/style.css" />
<!-- FEATHER ICONS -->
<script src="https://unpkg.com/feather-icons"></script>
</head>
<body>
<!-- START NAVBAR -->
<nav class="navbar">
<a href="#" class="navbar-logo">kenangan<span>senja</span></a>
<div class="navbar-nav">
<a href="#home">Home</a>
<a href="#about">Tentang kami</a>
<a href="#menu">Menu</a>
<a href="#kontak">Kontak</a>
</div>
<div class="navbar-extra">
<a href="#" id="search"><i data-feather="search"></i></a>
<a href="#" id="shopping-cart"><i data-feather="shopping-cart"></i></a>
<a href="#" id="hamburger-menu"><i data-feather="menu"></i></a>
</div>
</nav>
<!-- END NAVBAR -->
<!-- START HERO SECTION -->
<section class="hero" id="home">
<main class="content">
<h1>Mari nikmati secangkir <span>kopi</span></h1>
<p>
Mari nikmati secangkir kopi terbaik dari Kenangan Senja. Rasakan aroma
dan rasa yang khas, diproses dengan penuh cinta untuk setiap momen
berharga Anda.
</p>
<a href="#" class="cta">Beli sekarang</a>
</main>
</section>
<!-- END HERO SECTION -->
<!-- START ABOUT SECTION -->
<section class="about" id="about">
<h2><span>Tentang</span> Kami</h2>
<div class="row">
<div class="about_img">
<img src="src/img/about_barista.jpg" alt="Tentang kami" />
</div>
<div class="konten">
<h3>Kenapa memilih kopi Kenangan Senja?</h3>
<p>
Kami percaya bahwa setiap seduhan kopi membawa cerita tersendiri. Di
Kenangan Senja, kami hanya menggunakan biji kopi pilihan yang
dipetik langsung dari kebun terbaik di Indonesia.
</p>
<p>
Dengan metode pengolahan tradisional dan teknik barista profesional,
kami memastikan setiap cangkir kopi memiliki rasa yang kaya dan
aroma yang menggugah.
</p>
</div>
</div>
</section>
<!-- END ABOUT SECTION -->
<!-- START MENU SECTION -->
<section class="menu" id="menu">
<h2>Menu <span>Kami</span></h2>
<p>
Kami menawarkan beragam pilihan kopi untuk memenuhi selera Anda. Mulai
dari espresso pekat yang klasik hingga varian kopi spesial kami dengan
tambahan cita rasa unik. Kenangan Senja berkomitmen untuk menyajikan
minuman berkualitas yang membuat Anda ingin kembali lagi.
</p>
<div class="row">
<div class="menu-card">
<img class="menu-card-img" src="src/img/menu5.jpg" alt="Espresso" />
<h3 class="menu-card-title">
<span>-</span> Espresso <span>-</span>
</h3>
<p class="menu-card-price">IDR 45K</p>
</div>
<div class="menu-card">
<img class="menu-card-img" src="src/img/menu1.jpg" alt="Espresso" />
<h3 class="menu-card-title">
<span>-</span> Espresso <span>-</span>
</h3>
<p class="menu-card-price">IDR 45K</p>
</div>
<div class="menu-card">
<img class="menu-card-img" src="src/img/menu3.jpg" alt="Espresso" />
<h3 class="menu-card-title">
<span>-</span> Espresso <span>-</span>
</h3>
<p class="menu-card-price">IDR 45K</p>
</div>
<div class="menu-card">
<img class="menu-card-img" src="src/img/menu6.jpg" alt="Espresso" />
<h3 class="menu-card-title">
<span>-</span> Espresso <span>-</span>
</h3>
<p class="menu-card-price">IDR 45K</p>
</div>
<div class="menu-card">
<img class="menu-card-img" src="src/img/menu4.jpg" alt="Espresso" />
<h3 class="menu-card-title">
<span>-</span> Espresso <span>-</span>
</h3>
<p class="menu-card-price">IDR 45K</p>
</div>
<div class="menu-card">
<img class="menu-card-img" src="src/img/menu3.jpg" alt="Espresso" />
<h3 class="menu-card-title">
<span>-</span> Espresso <span>-</span>
</h3>
<p class="menu-card-price">IDR 45K</p>
</div>
</div>
</section>
<!-- END MENU SECTION -->
<!-- START KONTAK KAMI -->
<section class="kontak" id="kontak">
<h2><span>Kontak</span> Kami</h2>
<p>
Jika Anda memiliki pertanyaan, ingin memesan kopi untuk acara spesial,
atau sekadar ingin tahu lebih banyak tentang kami, jangan ragu untuk
menghubungi kami. Kami siap melayani dan memastikan pengalaman minum
kopi Anda sempurna.
</p>
<div class="row">
<iframe
class="map"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d26638.826808356902!2d127.15091631327871!3d-8.0709913359886!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2d02cffb3189427d%3A0x616baf7d7e2a5db6!2sPeternakan%20Kambing%20Agus%20Gabriel!5e0!3m2!1sen!2sid!4v1694561353220!5m2!1sen!2sid"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
></iframe>
<form action="#">
<div class="input-group">
<i data-feather="user"></i>
<input type="text" placeholder="Nama anda" />
</div>
<div class="input-group">
<i data-feather="phone"></i>
<input type="number" placeholder="No hp" />
</div>
<div class="input-group">
<input type="text" placeholder="Pesan anda" />
</div>
<button class="btn" type="submit">Kirim pesan</button>
</form>
</div>
</section>
<!-- END KONTAK KAMI -->
<!-- START FOOTER -->
<footer>
<div class="socials">
<a href="#"><i data-feather="instagram"></i></a>
<a href="#"><i data-feather="github"></i></a>
<a href="#"><i data-feather="youtube"></i></a>
<a href="#"><i data-feather="facebook"></i></a>
</div>
<div class="links">
<a href="#home">Home</a>
<a href="#about">Tentang Kami</a>
<a href="#menu">Menu</a>
<a href="#kontak">Kontak</a>
</div>
<div class="credit">
<p>Created by <a href="">benonygabriel</a> © | 2024</p>
</div>
</footer>
<!-- END FOOTER -->
<!-- FEATHER ICONS -->
<script>
feather.replace();
</script>
<!-- MY JAVASCRIPT -->
<script src="src/JS/script.js"></script>
</body>
</html>