sumber : Membuat List Produk E-Commerce Dengan HTML Dan CSS – WebHozz Blog
Assalamualaikum Wr. Wb.
Man-teman…Alhamdulillah kali ini kita ada kesempatan untuk berbagi ilmu.
Sebelumnya, semoga man-teman sehat dan bahagia selalu ya, Amin.
Oke pada kali ini, kita akan membuat tampilan daftar produk e-commerce menggunakan HTML dan CSS.
Tentunya kita pernah belanja online, lalu kita melihat daftar produk yang tersedia dalam sebuah website.
Kita terus mencari produk yang kita inginkan, lalu kita beli produk tersebut.
Nah, pada kesempatan ini kita akan belajar untuk membuat tampilan daftar produk tersebut.
Untuk memulainya, alangkah baiknya jika kita sudah punya beberapa gambar untuk dijadikan tampilan dalam sebuah website. Kalo udah, tinggal coding aja. Yuk kita mulai.
- Buat file dengan format HTML, lalu ketikkan script kode berikut.
|
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
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>E-Commerce</title> <link rel="stylesheet" href="css/tampilan.css"></head><body> <div class="badan"> <h2>Produk Baru</h2> <div class="list-produk"> <img src="gambar/jaket-parasut.jpg" alt="Jaket Parasut"> <h4>Jaket Parasut Polos</h4> <h5>Rp 150.000,-</h5> <a class="tombol tombol-detail" href="#">Detail</a> <a class="tombol tombol-beli" href="#">Beli</a> </div> <div class="list-produk"> <img src="gambar/jaket-tactical.jpg" alt="Jaket Tactical"> <h4>Jaket Tactical Hitam</h4> <h5>Rp 230.000,-</h5> <a class="tombol tombol-detail" href="#">Detail</a> <a class="tombol tombol-beli" href="#">Beli</a> </div> <div class="list-produk"> <img src="gambar/bomber-stylish.jpg" alt="Jaket Bomber Stylish"> <h4>Jaket Bomber Stylish</h4> <h5>Rp 250.000,-</h5> <a class="tombol tombol-detail" href="#">Detail</a> <a class="tombol tombol-beli" href="#">Beli</a> </div> <div class="list-produk"> <img src="gambar/jaket-naruto.jpg" alt="Jaket Naruto"> <h4>Jaket Naruto</h4> <h5>Rp 170.000,-</h5> <a class="tombol tombol-detail" href="#">Detail</a> <a class="tombol tombol-beli" href="#">Beli</a> </div> </div></body></html> |
2. Buat file baru dengan format CSS, lalu ketikkan script kode berikut.
|
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
|
*{ margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;}body{ background-color: black;}.badan{ width: 880px; margin: 35px auto; background-color: white; padding: 20px; overflow: hidden;}.badan h2{ color: crimson; border-bottom: 1px solid gainsboro; margin: 5px; margin-bottom: 13px;}.list-produk{ border: 1px solid gainsboro; padding: 10px; float: left; width: 200px; margin: 5px;}.list-produk:hover{ transition-duration: 700ms; box-shadow: 5px 5px gainsboro;}.list-produk img{ width: 100%; height: 175px; display: block; margin-bottom: 5px;}.list-produk h4, .list-produk h5{ color: crimson; text-align: center; margin-bottom: 5px;}.tombol{ text-decoration: none; border-radius: 7px; padding: 7px; display: block; float: left; width: 45%; margin: 4px; text-align: center; color: white;}.tombol:hover{ background-color: black; transition-duration: 700ms;}.tombol-detail{ background-color: green;}.tombol-beli{ background-color: crimson;} |
3. Lalu file-file gambarnya beserta file html dan css tadi, pastikan semua sudah dalam 1 buah folder project.
4. Jika sudah, maka akan tampil seperti berikut ini pada browser.
5. Saat kita arahkan kursor mousenya ke salah satu produk dari sekian daftar, maka akan tampil seperti ini.
Nah, gimana??? Mudah kan???
Komentar Terbaru