Latihan Script E-Commerce

-

 Script Html e-commerce

 


<!DOCTYPE html&gt;

<html lang="en"&gt;

<head&gt;

    <meta charset="UTF-8"&gt;

    <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;

    <meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;

    <title&gt;E-Commerce</title&gt;

    <link rel="stylesheet" href="css/tampilan.css"&gt;

</head&gt;

<body&gt;

     

    <div class="badan"&gt;

        <h2&gt;Produk Baru</h2&gt;

 

        <div class="list-produk"&gt;

            <img src="gambar/jaket-parasut.jpg" alt="Jaket Parasut"&gt;

 

            <h4&gt;Jaket Parasut Polos</h4&gt;

            <h5&gt;Rp 150.000,-</h5&gt;

 

            <a class="tombol tombol-detail" href="#"&gt;Detail</a&gt; 

            <a class="tombol tombol-beli" href="#"&gt;Beli</a&gt;

        </div&gt;

 

        <div class="list-produk"&gt;

            <img src="gambar/jaket-tactical.jpg" alt="Jaket Tactical"&gt;

 

            <h4&gt;Jaket Tactical Hitam</h4&gt;

            <h5&gt;Rp 230.000,-</h5&gt;

 

            <a class="tombol tombol-detail" href="#"&gt;Detail</a&gt; 

            <a class="tombol tombol-beli" href="#"&gt;Beli</a&gt;

        </div&gt;

 

        <div class="list-produk"&gt;

            <img src="gambar/bomber-stylish.jpg" alt="Jaket Bomber Stylish"&gt;

 

            <h4&gt;Jaket Bomber Stylish</h4&gt;

            <h5&gt;Rp 250.000,-</h5&gt;

 

            <a class="tombol tombol-detail" href="#"&gt;Detail</a&gt; 

            <a class="tombol tombol-beli" href="#"&gt;Beli</a&gt;

        </div&gt;

 

        <div class="list-produk"&gt;

            <img src="gambar/jaket-naruto.jpg" alt="Jaket Naruto"&gt;

 

            <h4&gt;Jaket Naruto</h4&gt;

            <h5&gt;Rp 170.000,-</h5&gt;

 

            <a class="tombol tombol-detail" href="#"&gt;Detail</a&gt; 

            <a class="tombol tombol-beli" href="#"&gt;Beli</a&gt;

        </div&gt;

    </div&gt;

 

</body&gt;

</html&gt;




—---------------------------------------- 


Ketikan file CSS berikut! 


*

{

    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: g

reen;

}

 

.tombol-beli

{

    background-color: crimson;

}




—------------------------ 


Setelah semua disave, maka hasilnya seperti berikut: 







Postingan populer dari blog ini

Latihan 3

-
  Latihan 3  Ketiklah index script berikut:  <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>School Website - Home</title>     <link rel="stylesheet" href="styles.css"> </head> <body>     <header>         <h1>Welcome to Our School</h1>         <nav>             <ul>                 <li><a href="index.html">Home</a></li>                 <li><a href="about.html">About</a></li>                 <li><a href="contact.html">Contact</a></li>            ...
Baca selengkapnya

Latihan html membuat Form Online

-
 Ketiklah scrip berikut :  <!DOCTYPE html> <html> <head><title>Belajar HTML - Membuat Form</title></head> <body> <form action="prosess-form.php" method="GET"> <!-- letakkan field di sini --> <label> Nama: </label> <input type="text" name="nama-lengkap" /><br /> <label> Email: </label> <input type="email" name="email" /><br /> <label> Password: </label> <input type="password" name="password" /><br /> <label> Checkbox: </label> <input type="checkbox" name="hobi" /> Membaca <input type="checkbox" name="hobi" /> Menulis <input type="checkbox" name="hobi" /> Olahraga <br /> <label> Radio: </label> <input type="r...
Baca selengkapnya