-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
247 lines (246 loc) · 9.97 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
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Digital Otomotif</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
<nav class="blue text-white">
<div class="container flex center fs-20">
<div class="brand mx-5">
<h3>OTOMOTIVE</h3>
</div>
<ul class="nav-items flex center">
<li class="nav-link mx-5 px-5 flex center"><a href="#HOME" class="text-white">HOME</a></li>
<li class="nav-link mx-5 px-5 flex center"><a href="#PRODUCT" class="text-white">PRODUCT</a>
<ul class="dropdown grid">
<li><div class="dropdown-img"></div></li>
<li class="dropdown-items">
<ul>
<li class="my-5">Brigestone</li>
<li class="my-5">Archilles</li>
<li class="my-5">Dunlop</li>
<li class="my-5">Accelera</li>
<li class="my-5">Hankook</li>
</ul>
</li>
<li class="dropdown-items">
<ul>
<li class="my-5">GT Radial</li>
<li class="my-5">GT Super</li>
<li class="my-5">GT Maxiller</li>
<li class="my-5">Archilles</li>
<li class="my-5">Dunlop</li>
</ul>
</li>
</ul>
</li>
<li class="nav-link mx-5 px-5 flex center relative"><a href="#SERVICE" class="text-white">SERVICE</a>
<ul class="dropdown fs-15 dnone center">
<li>Cuci Mobil</li>
<li>Ganti Body</li>
<li>Ganti Velg</li>
<li>Isi Nitrogen</li>
</ul>
</li>
<li class="nav-link mx-5 px-5 flex center"><a href="#PARTNER" class="text-white">PARTNER</a></li>
<li class="nav-link mx-5 px-5 flex center"><a href="#CONTACT" class="text-white">CONTACT</a></li>
</ul>
<div class="toggle dnone">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
</header>
<main>
<div class="modal">
<div class="modal-content">
<div class="modal-head">
<span class="close">×</span>
<h1>Lacak Pengiriman</h1>
</div>
<hr>
<div class="modal-body">
</div>
</div>
</div>
<section id="HOME" class="center relative flex">
<div class="container grid text-white absolute">
<div class="home-describe grid">
<div class="describe-head text-justify">
<h1><b>M-SPORT</b> WEBSITE</h1>
Pusat bengkel otomotif no. 1 di Indonesia sejak November 1998 Layanan online terpercaya dan berkualitas, temukan suku cadang dan accesoris kendaraan termurah disini. Biaya sewa mobil/motor sport cicilan 0% tanpa bunga. Service berkualitas bersama para pakar otomotif handal dan tersertifikasi nasional. Tersedia pula product penjualan
sparepart melalui toko online (tokopedia, shopee, lazada). Dapatkan diskon 50% untuk setiap pembelian mobil sport edisi 2020 di akhir tahun.
</div>
<div class="describe-btn flex">
<button class="btn mx-5"><a href="https://www.tokopedia.com" class="text-white">TOKOPEDIA</a></button>
<button class="btn mx-5"><a href="https://www.tokopedia.com" class="text-white">SHOPEE</a></button>
<button class="btn mx-5"><a href="https://www.tokopedia.com" class="text-white">BUKALAPAK</a></button>
</div>
<div class="describe-input flex">
<input class="px-5" type="text" name="resi" placeholder="Masukkan Nomer Resi" required>
<button name="lacak" class="text-white fs-15">LACAK</button>
</div>
</div>
<div class="home-img"></div>
</div>
<div class="liquid"></div>
</section>
<section id="PRODUCT">
<div class="container grid center my-10">
<div class="product-head mb-20">
<h1>Daftar Product yang Tersedia</h1>
<hr>
<p>pilih product favorit <mark>berkualitas</mark> dengan harga terjangkau</p>
</div>
<div class="product-body grid">
</div>
</div>
</section>
<section id="SERVICE" class="relative flex text-white">
<div class="rotate liquid"></div>
<div class="container grid relative my-50">
<div class="service-head center">
<h1>Daftar Product yang Tersedia</h1>
<hr>
<p>pilih product favorit <mark>berkualitas</mark> dengan harga terjangkau</p>
</div>
<div class="service-body grid">
<div class="service-desc-1">
<ul>
</ul>
</div>
<div class="service-img"></div>
<div class="service-desc-2">
<ul>
</ul>
</div>
</div>
</div>
<!-- <div class="liquid"></div> -->
</section>
<section id="TESTIMONIAL" class="my-50">
<h1 class="center my-30">PEOPLE SAYS ABOUT US</h1>
<div class="container grid center">
<div class="testimonials flex">
<img src="img/anya.jpg" width="250" height="200">
<div class="testimonials-body p-5">
<h3>Anya Geraldine</h3>
<p>Pelayanan toko disini sangat memuaskan dengan banyak bonus yang diberikan dan ada pula hadiah tiap akhir tahun. Pasang 1 lampu di bawah mobil dapet bonus isi nitrogen dan cuci mobil. Selama menunggu dikasih minum jus gratis dan camilan ringan</p>
</div>
</div>
<div class="testimonials flex">
<img src="img/anya.jpg" width="250" height="200">
<div class="testimonials-body p-5">
<h3>Raisa</h3>
<p>Kualitas barang bagus, pekerja memiliki sifat yang ramah kepada pengunjung. Saya jadi ketagihan service mobil disini, mobil macet bisa diperbaiki kembali layaknya mobil baru. Cepat dan Efisien dalam bekerja menyelesaikan permaslaahan pada kendaraan.</p>
</div>
</div>
<div class="testimonials flex">
<img src="img/anya.jpg" width="250" height="200">
<div class="testimonials-body p-5">
<h3>Pevita</h3>
<p>Harga yang diberikan sangat murah dibanding tempat service sebelah, tokonya buka 24 jam tiap hari. Saya merekomendasikan untuk menggunakan jasa di toko otomotif ini kepada siapa saja. Saya merekomendasikan untuk menggunakan jasa di toko otomotif ini.</p>
</div>
</div>
<div class="testimonials flex">
<img src="img/anya.jpg" width="250" height="200">
<div class="testimonials-body p-5">
<h3>Tina Toon</h3>
<p>10 tahun menjadi pelanggan setia digital otomotif namun pelayanan yang diberikan tidak ada penurunan, malah meningkat dan semakin baik tiap harinya. Sangat rekomended bagi pecinta dunia otomotif khususnya pemilik mobil mewah.</p>
</div>
</div>
<div class="testimonials flex">
<img src="img/anya.jpg" width="250" height="200">
<div class="testimonials-body p-5">
<h3>Nagita Slavina</h3>
<p>Belanja onderdil dan sparepart disini cukup menyenangkan, banyak variasi velg warna warni dan stylish. Mungkin barang yang tidak ada di toko lain bisa anda temukan di toko digital otomotif. Mungkin barang yang tidak ada di toko lain bisa anda temukan di toko digital otomotif </p>
</div>
</div>
<div class="testimonials flex">
<img src="img/anya.jpg" width="250" height="200">
<div class="testimonials-body p-5">
<h3>Nabilah</h3>
<p>Yang paling saya suka adalah service style mobil yang kreatif dan keren. Apalagi waktu modif itasha nampak lebih minimalis dan kekinian. Gak cuma mobil tapi juga motor dapat dimodif itasha sesuai selera masing-masing.</p>
</div>
</div>
</div>
</section>
<section id="PARTNER" class="relative">
<div class="container relative">
<div class="partner-head center py-30 text-white">
<h1>OUR PARTNERSHIP</h1>
<hr>
</div>
<div class="partner-body grid center">
<div class="partner-img">
<img lazy="load" src="img/bmw.png">
</div>
<div class="partner-img">
<img lazy="load" src="img/bmw.png">
</div>
<div class="partner-img">
<img lazy="load" src="img/bmw.png">
</div>
<div class="partner-img">
<img lazy="load" src="img/bmw.png">
</div>
<div class="partner-img">
<img lazy="load" src="img/bmw.png">
</div>
<div class="partner-img">
<img lazy="load" src="img/bmw.png">
</div>
</div>
</div>
</section>
<section id="CONTACT">
<div class="container grid">
<div class="contact-form py-10 px-10">
<form>
<div class="title fs-20 mb-20">
<h1 class="my-10">CONTACT US</h1>
<p>FEEL FREE TO CONTACT US ANY TIME</p>
<p>WE WILL GET BACK TO YOU AS SOON AS WE CAN</p>
</div>
<div class="info flex">
<input type="text" class="my-10 px-5 py-5" name="name" placeholder="Full name">
<input type="text" class="my-10 px-5 py-5" name="name" placeholder="Email">
<input type="text" class="my-10 px-5 py-5" name="name" placeholder="Message">
<button type="submit" class="pesan-btn blue btn fs-15 my-30 py-5 text-white" href="#">SEND</button>
</div>
</form>
</div>
<div class="contact-info text-white px-10 py-10">
<div class="contact flex my-10">
<img lazy="load" class="mx-5" src="img/icon/Telpon.png">
<h3>021 334 564</h3>
</div>
<div class="contact flex my-10">
<img lazy="load" class="mx-5" src="img/icon/Email.png">
<h3>[email protected]</h3>
</div>
<div class="contact flex my-10">
<img lazy="load" class="mx-5" src="img/icon/Telegram.webp">
<h3>OTOMOTIF WEB</h3>
</div>
<div class="contact flex my-10">
<img lazy="load" class="mx-5" src="img/icon/WA.png">
<h3>+6285222204213</h3>
</div>
</div>
</div>
</section>
</main>
<footer class="center py-10 mt-10 text-white">
<h1>Copyrights © All right reserved</h1>
</footer>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>