-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
160 lines (144 loc) · 6.8 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Musik Asik | Havenly Music</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/x-icon" href="./asset/favicon-YC.png">
</head>
<body>
<header>
<div class="logo">
<h1>Musik Asik</h1>
</div>
<nav>
<ul>
<li><a href="#index.html">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#menu">Product</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<div class="hero">
<div class="title-hero">
<h1>LET'S EXPLORE MUSIC WITH US!</h1>
<p>Selamat Datang di Musik Asik! Ayo Jelajahi Musik Disini!</p>
</div>
<div class="image-hero">
<img src="./asset/hero-image.png">
</div>
</div>
<div id="about">
<h2>About Music</h2>
<hr>
<p>
Music, a universal language transcending boundaries, binds souls through melodies and rhythms. It evokes emotions, narrates stories, and unites cultures. From classical symphonies to pulsating beats of modern genres, each note crafts a unique experience. Music inspires creativity, fuels revolutions, and soothes troubled hearts. Its power lies in its ability to resonate with the human spirit, offering solace in times of sorrow and celebrating triumphs. Whether through the strumming of a guitar, the keys of a piano, or the beat of drums, music speaks to our essence, echoing the echoes of our shared humanity across the ages.</p>
</div>
<div id="menu">
<div class="title-menu">
<h2>Product</h2>
<hr>
<p>Explore our store's musical treasures: instruments, accessories, and gear. Elevate your sound, ignite your passion, and unleash your musical journey.</p>
</div>
<!-- Gambar produk -->
<div class="cards">
<div class="card">
<img src="./asset/gitar.png" alt="gitar elektrik">
<div class="container">
<h4>Electric Guitar</h4>
<p>Electric guitar: A versatile instrument, blending melody and power, unleashing endless possibilities in the realm of music.</p>
</div>
<a href="#">Order Now</a>
</div>
<div class="card">
<img src="./asset/bass.png" alt="bass elektrik">
<div class="container">
<h4>Electric Bass</h4>
<p>Electric bass: The heartbeat of the band, delivering deep grooves and driving rhythms, anchoring the music with its powerful resonance.</p>
</div>
<a href="#">Order Now</a>
</div>
<div class="card">
<img src="./asset/drum.png" alt="drum">
<div class="container">
<h4>Drum</h4>
<p>Acoustic drums: The heartbeat of live music, resonating with raw energy, driving rhythms that captivate audiences and elevate performances.</p>
</div>
<a href="#">Order Now</a>
</div>
<div class="card">
<img src="./asset/gitar-akustik.png" alt="gitar akustik">
<div class="container">
<h4>Acoustic Guitar</h4>
<p>Acoustic guitar: The soulful storyteller, resonating with warmth, crafting melodies that stir hearts and create intimate musical moments.</p>
</div>
<a href="#">Order Now</a>
</div>
<div class="card">
<img src="./asset/kabel.png" alt="kabel jack">
<div class="container">
<h4>Jack Cabel</h4>
<p>Ensure seamless audio connectivity with high-quality jack cables for enhanced sound transmission in your music setup.</p>
</div>
<a href="#">Order Now</a>
</div>
<div class="card">
<img src="./asset/keyboard.png" alt="keyboard">
<div class="container">
<h4>Keyboard</h4>
<p>A musical keyboard is an instrument with keys, producing sounds and tones, used for playing melodies, chords, and various voices.</p>
</div>
<a href="#">Order Now</a>
</div>
<div class="card">
<img src="./asset/mic.png" alt="microphone">
<div class="container">
<h4>Microphone</h4>
<p>A microphone is a device that captures sound, converting it into an electrical signal for recording or amplification in various audio applications.</p>
</div>
<a href="#">Order Now</a>
</div>
<div class="card">
<img src="./asset/mixer.png" alt="mixer">
<div class="container">
<h4>Mixer</h4>
<p>A mixer is a device that combines, adjusts, and balances audio signals from multiple sources for recording or live sound reinforcement.</p>
</div>
<a href="#">Order Now</a>
</div>
<div class="card">
<img src="./asset/senar-gitar.png" alt="senar gitar">
<div class="container">
<h4>Guitar Strings</h4>
<p>Guitar strings are wires of varying materials and thicknesses, producing different pitches when plucked or strummed.</p>
</div>
<a href="#">Order Now</a>
</div>
</div>
</div>
<div id="contact">
<h2>Our Contact</h2>
<div class="image-contact">
<img src="./asset/customer-service.jpg">
</div>
<div class="text-contact">
<div class="data">
<h4>Get in touch</h4>
<p>Telaga Kahuripan</p>
<p>Bogor, 16310</p>
</div>
<div class="sosmed-icon">
<a href=""><img src="asset/instagram.png"></a>
<a href=""><img src="asset/youtube.png"></a>
<a href="https://wa.wizard.id/7d6a45" target="_blank"><img src="asset/whatsapp.png"></a>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<p>© June 2024. Build by <a href="">Gregorius</a></p>
</footer>
</body>
</html>