-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
305 lines (301 loc) · 14.7 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
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
<!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">
<title>Catlo</title>
</head>
<body>
<header class="navbar-container">
<div class="logo">
<ul>
<li><img src="Catlo.png" alt="Catlo"></li>
<li>
<h1>Catlo</h1>
</li>
</ul>
</div>
<nav class="nav-list">
<ul>
<li><a href="#Produk">Produk</a></li>
<li><a href="#Perawatan">Perawatan</a></li>
<li><a href="#Informasi">Informasi</a></li>
<li><a href="#HubungiKami">Hubungi Kami</a></li>
</ul>
</nav>
</header>
<main class="main-container">
<div class="Content">
<article class="beranda">
<h1>Website Pilihan Para Cat Lovers Cerdas untuk Kucing Tersayang!</h1>
<p>Solusi cerdas untuk memudahkan cat lovers dalam menyiapkan semua keperluan kucing tersayang,
mulai dari makanan hingga mainan kucing ada disini.</p>
</article>
<div class="distance">
<article class="Menu" id="Produk">
<img src="catfood2.jpg" alt="">
<div class="menu-all">
<div class="menu-content">
<h2 class="deskripsi2">Premium food untuk kucing tersayang</h2>
<p class="menu-text">
Menyediakan banyak pilihan makan kucing murah dengan kualitas dan mutu terjamin.
</p>
<button class="buy">Beli Disini</button>
</div>
</div>
</article>
<article class="Menu2">
<img src="Catoy.jpg" alt="">
<div class="menu-all2">
<div class="menu-content2">
<h2 class="deskripsi3">Premium toy untuk kucing tersayang</h2>
<p class="menu-text2">Menyediakan mainan yang dirancang khusus sehingga aman untuk dimainkan
peliharaan tersayang.
</p>
<button class="buy2">Beli Disini</button>
</div>
</div>
</article>
<article class="Menu3">
<img src="CatOutfit.jpg" alt="">
<div class="menu-all3">
<div class="menu-content3">
<h2 class="deskripsi4">Premium clothes untuk kucing tersayang</h2>
<p class="menu-text3">Menyediakan pakaian dengan bahan premium, yang pastinya nyaman
digunakan kucing tersayang.
</p>
<button class="buy3">Beli Disini</button>
</div>
</div>
</article>
<article class="Menu4">
<img src="Soap.jpg" alt="">
<div class="menu-all4">
<div class="menu-content4">
<h2 class="deskripsi5">Perlengkapan premium untuk mandi sang kucing tersayang</h2>
<p class="menu-text4">Menyediakan Perlengkapan mandi dengan bahan premium, yang pastinya
baik untuk bulu kucing
tersayang.</p>
<button class="buy4">Beli Disini</button>
</div>
</div>
</article>
</div>
</div>
<div class="perawatan">
<div id="Perawatan" class="judul">
<h1>Perawatan</h1>
</div>
<article class="perawatan-deskripsi">
<h2>Seni Merawat Kucing dengan Simpel</h2>
<p>Para pemilik kucing baru sering merasa kewalahan ketika
belajar cara merawat kucing atau cara merawat kucing baru lahir. Memang, mungkin banyak yang
harus dipelajari, tetapi tips perawatan kucing yang umum setidaknya bisa memberikan panduan.
Tips-tips ini meliputi aspek penting seperti memberi makan kucing dengan diet yang bergizi,
menjaga kebersihan secara teratur, menjadwalkan kunjungan ke dokter hewan, bahkan memberikan
mandi sesekali, dan memastikan perawatan yang tepat untuk bulu dan kuku mereka.</p>
</article>
<article class="perawatan-kucing">
<div class="img"><img src="cat1-9bln.jpg" alt=""></div>
<div class="all">
<div class="content">
<p class="deskripsi5">Kucing Kecil</p>
<p class="text">
Bayi kucing memiliki ukuran seperti segenggam tanganmu Tips menarik dan bermanfaat dari kami
dapat membantumu untuk menjaga sahabat kecilmu di tahun pertamanya
</p>
<button class="button">Pelajari Lebih Lanjut</button>
</div>
</div>
</article>
<article class="perawatan-kucing2">
<div class="img"><img src="cat2-2thn.jpg" alt=""></div>
<div class="all2">
<div class="content2">
<p class="deskripsi6">Kucing Remaja</p>
<p class="text2">
Apakah kucingmu merangkak naik ke pangkuanmu? Atau bersosialisasi diluar teritorinya untuk
mencari kesenangan dan keberuntungan?
</p>
<button class="button2">Pelajari Lebih Lanjut</button>
</div>
</div>
</article>
<article class="perawatan-kucing3">
<div class="img"><img src="cat3-8thn.jpg" alt=""></div>
<div class="all3">
<div class="content3">
<p class="deskripsi7">Kucing Dewasa</p>
<p class="text3">
Di umur ini kucing lebih memilih untuk tidur dan bersantai dari pada bermain diluar
</p>
<button class="button3">Pelajari Lebih Lanjut</button>
</div>
</div>
</article>
</div>
<div class="informasi">
<div id="Informasi" class="judul">
<h1>Informasi</h1>
</div>
<div class="informasi-deskripsi">
<article>
<p class="main-p">Informasi Terkait Kucing yang bisa membantu anda</p>
<p class="main-p2">Selamat datang di sumber informasi yang mengungkap keajaiban dunia kucing! Apakah
Anda
seorang pecinta kucing yang ingin lebih memahami makhluk ini atau seseorang yang baru
akan
memulai perjalanan bersama kucing sebagai teman setia? Di sini, kami hadir untuk membawa
Anda melalui lapisan-lapisan pengetahuan menarik terkait kucing. Mulai dari rahasia
perilaku
unik mereka hingga panduan praktis perawatan, kami menyajikan informasi yang akan
memperkaya
pengalaman Anda dalam merawat dan memahami kucing.
</article>
</div>
</div>
<div class="position">
<div class="content4">
<article>
<div class="informasi-image"><img src="cat-is-being-given-injection.jpg" alt=""></div>
<p class="informasi-title">Vaksinasi: Pelindung Utama Kucing dari Ancaman Tersembunyi</p>
<p class="informasi-deskripsi1">
Meskipun anak kucingmu telah diimunisasi, kamu tetap harus melakukan vaksinasi setiap
tahunnya.
</p>
<button class="button4">Pelajari Lebih Lanjut</button>
</article>
</div>
<div class="content5">
<article>
<div class="informasi-image1"><img src="beautiful-cat-home (1).jpg" alt=""></div>
<p class="informasi-title1">Kucing dan Bahasa Tubuhnya: Apa yang Mereka Coba Sampaikan?</p>
<p class="informasi-deskripsi2">
Apa sebenarnya yang ingin mereka sampaikan melalui bahasa tubuh yang unik.
</p>
<button class="button5">Pelajari Lebih Lanjut</button>
</article>
</div>
</div>
<div class="position2">
<div class="content6">
<article>
<div class="informasi-image2"><img src="kucing-hamil-1068x776.jpg" alt=""></div>
<p class="informasi-title2">Harmoni Hidup: Merawat Kucing Hamil dengan Cinta dan Perhatian
</p>
<p class="informasi-deskripsi3">
Dalam perjalanan kebahagiaan rumah tangga bersama kucing, momen kehamilan adalah saat
yang
penuh keajaiban.
</p>
<button class="button6">Pelajari Lebih Lanjut</button>
</article>
</div>
<div class="content7">
<article>
<div class="informasi-image3"><img src="close-up-veterinarian-taking-care-pet.jpg"
alt="">
</div>
<p class="informasi-title3">Detektif Kesehatan Kucing: Membedah Setiap Aspek Kesejahteraan
Mereka</p>
<p class="informasi-deskripsi4">
Dalam peran Detektif Kesehatan Kucing, kita akan bersama-sama membedah setiap misteri
kesejahteraan yang menyelubungi sahabat berbulu kita.
</p>
<button class="button7">Pelajari Lebih Lanjut</button>
</article>
</div>
</div>
<div class="content8">
<article>
<div class="informasi-image4"><img src="adorable-kitty-being-playful.jpg" alt=""></div>
<p class="informasi-title4">Panduan Menarik: Memahami Kucing dari Sudut Pandang yang Berbeda</p>
<p class="informasi-deskripsi5">
Bersiaplah untuk merenung di balik sorot mata penuh tanda tanya dan belajar meresapi setiap
gerakan ekor mereka.
</p>
<button class="button8">Pelajari Lebih Lanjut</button>
</article>
</div>
<div class="kontak">
<div id="HubungiKami" class="judul">
<h1>Hubungi Kami</h1>
</div>
<article>
<form class="kontak-form">
<div class="form">
<label class="form-label" for="name">Nama:</label>
<input required="" placeholder="Masukkan Nama Anda" class="form-input" type="text">
</div>
<div class="form">
<label class="form-label" for="email">Email:</label>
<input required="" placeholder="Masukkan Email Anda" class="form-input" name="email" id="email"
type="email">
</div>
<div class="form">
<label class="form-label" for="no-telp">Nomor Telepon:</label>
<input required="" placeholder="Masukkan Nomor Telepon Anda" class="form-input" name="email"
id="email" type="text">
</div>
<div class="form">
<label class="form-label" for="pesan">Pesan:</label>
<textarea required="" placeholder="Masukkan Pesan Anda " class="form-input" name="message"
id="message"></textarea>
</div>
<button class="form-button" type="submit">Kirim</button>
</form>
</article>
</div>
<aside>
<div class="card">
<span class="bio">Biodata</span>
<div class="img"><img src="46.jpg" alt=""></div>
<div class="info">
<ul>
<li><span class="label" id="l1">Nama</span>
<span class="label-data" id="ld1">Muh. Afthar algiffari</span>
</li>
<li><span class="label" id="l2">No. Telepon</span>
<span class="label-data" id="ld2"> 082180883149</span>
</li>
<li><span class="label" id="l3">Alamat</span>
<span class="label-data" id="ld3">Perdos Tamalanrea, Makassar</span>
</li>
<li><span class="label" id="l4">Email </span>
<span class="label-data" id="ld4"> [email protected]</span>
</li>
</ul>
</div>
</div>
</aside>
</main>
<footer class="footer-container">
<div class="logo">
<ul>
<li><img src="Catlo.png" alt="Catlo"></li>
<li>
<h1>Catlo</h1>
</li>
<li class="footer-note">© 2023 Catlo Company by Muh. Afthar algiffari</li>
</ul>
</div>
<div class="footer-list">
<ul>
<li><a href="">Menu</a></li>
<li><a href="#Produk">Produk</a></li>
<li><a href="#Perawatan">Perawatan</a></li>
<li><a href="#Informasi">Informasi</a></li>
<li><a href="#HubungiKami">Hubungi Kami</a></li>
</ul>
</div>
<div class="footer-list2">
<ul>
<li>CONTACT US</li>
<li>Email: <a href="[email protected]">[email protected]</a></li>
<li>Telepon: 082180883149</li>
</ul>
</div>
</footer>
</body>
</html>