-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
154 lines (152 loc) · 5.54 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<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=Hanken+Grotesk:wght@200;400;700&family=Roboto:ital,wght@0,100;0,400;0,700;1,700&display=swap"
rel="stylesheet"
/>
<script
src="https://kit.fontawesome.com/4b2ba109fe.js"
crossorigin="anonymous"
></script>
<title>Web Coffee</title>
</head>
<body>
<!-- Navbar Page -->
<div class="navbar">
<a href="#" class="navbar-logo">kenangan<span>pacar</span>.</a>
<div class="navbar-nav">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#menu">Menu</a>
<a href="#contact">Contact</a>
</div>
<div class="navbar-extra">
<a href="#" id="search"><i class="fa-solid fa-magnifying-glass"></i></a>
<a href="#" id="cart-shop"><i class="fa-solid fa-cart-shopping"></i></a>
<a href="#" id="hamburger-menu"><i class="fa-solid fa-bars"></i></a>
</div>
</div>
<!-- Hero Page -->
<div class="hero" id="home">
<div class="hero-content">
<h1>Mari Nikmati Secangkir <span>Kopi</span></h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero cum
officia dolores excepturi aliquid ipsam error nulla ab sed dolorum.
</p>
<a href="#" class="cta">Beli Sekarang</a>
</div>
</div>
<!-- About Page -->
<div class="about" id="about">
<h2><span>Tentang</span> Kami</h2>
<div class="row">
<div class="about-image">
<img
src="/img/dani-ZLqxSzvVr7I-unsplash (1).jpg"
alt="tentang-kami"
/>
</div>
<div class="about-content">
<h3>Kenapa Memilih Kami?</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptatibus autem, nostrum omnis quibusdam deleniti esse.
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur
fugit voluptatem nulla totam, repudiandae provident dolores at
incidunt magnam inventore.
</p>
</div>
</div>
</div>
<!-- Menu Page -->
<div class="menu" id="menu">
<h2><span>Menu</span> Kami</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. At saepe
incidunt recusandae quod molestiae odio.
</p>
<div class="row">
<div class="menu-card">
<img src="/img/nathan-dumlao-dAYJfrtVjh0-unsplash.jpg" alt="menu1" />
<h3 class="menu-card-tittle">-Espresso-</h3>
<p class="menu-card-price">IDR 15.000</p>
</div>
<div class="menu-card">
<img src="/img/nathan-dumlao-dAYJfrtVjh0-unsplash.jpg" alt="menu1" />
<h3 class="menu-card-tittle">-CoffeMilk-</h3>
<p class="menu-card-price">IDR 20.000</p>
</div>
<div class="menu-card">
<img src="/img/nathan-dumlao-dAYJfrtVjh0-unsplash.jpg" alt="menu1" />
<h3 class="menu-card-tittle">-Chocolate-</h3>
<p class="menu-card-price">IDR 25.000</p>
</div>
</div>
</div>
<!-- Contact Page -->
<div id="contact" class="contact">
<h2><span>Kontak</span> Kami</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto,
cumque repellat dolore magnam consectetur fuga.
</p>
<div class="row">
<iframe
class="map"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31728.818853286524!2d106.80141583545537!3d-6.250241788362007!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f3d71ecf1e35%3A0x50098a01fbeafde9!2sKec.%20Mampang%20Prpt.%2C%20Kota%20Jakarta%20Selatan%2C%20Daerah%20Khusus%20Ibukota%20Jakarta!5e0!3m2!1sid!2sid!4v1692847972946!5m2!1sid!2sid"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
></iframe>
<form action="">
<div class="input-group">
<i class="fa-regular fa-user"></i>
<input type="text" placeholder="Nama" />
</div>
<div class="input-group">
<i class="fa-regular fa-envelope"></i>
<input type="text" placeholder="Email" />
</div>
<div class="input-group">
<i class="fa-solid fa-mobile-screen"></i>
<input type="text" placeholder="No.Handphone" />
</div>
<button type="submit" class="btn">Kirim Pesan</button>
</form>
</div>
</div>
<!-- Footer -->
<div class="footer">
<div class="social">
<a href="https://github.com/AgunngDwi" target="_blank"
><i class="fa-brands fa-github"></i
></a>
<a href="https://www.instagram.com/agunngdwi" target="_blank"
><i class="fa-brands fa-instagram"></i
></a>
<a href="https://www.linkedin.com/in/agung-dwi-laksono/" target="_blank"
><i class="fa-brands fa-linkedin"></i
></a>
</div>
<div class="credit">
<p>
Created by
<a target="_blank" href="https://www.instagram.com/agunngdwi"
>agungdwilaksono</a
>
©2023
</p>
</div>
</div>
<script src="/script.js"></script>
</body>
</html>