TUGAS PWEB-D Pertemuan - 3 : Website Katalog

      TUGAS PWEB-D Pertemuan - 3 : Website Katalog


       Perkenalkan nama saya Andymas Narendra Bagaskara, NRP 05111940000192, Kelas Pemrograman Web D. Pada pertemuan ke3 kelas PWEB-D, saya diberi tugas untuk membuat website Katalog dengan menggunakan HTML dan juga CSS.



Berikut ini hasil dari warung saya :



 



Link Websitenya : katalogrendra.netlify.app



Dan untuk hosting domainnya saya menggunakan Netlify dengan cara memasukan file html Biodata
ke dalam website netlify tersebut.





Source Code HTML :

<!DOCTYPE html>
<html lang="en">
<head>
    <body bgcolor=rgba(255, 255, 128, .5)>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Hoodie Store Rendra</title>
</head>
<body>
    <header>
        <h1>Rendra Hoodie Store</h1>
        <ul class="nav">
            <li><a href="#">Hoodie</a></li>
            <li><a href="#">Celana</a></li>
            <li><a href="#">Kontak</a></li>
        </ul>
    </header>
    <div class="row">
        <div class="column">
            <img class="produk" src="https://ncrsport.com/img/storage/large/CJ4864-010-1.jpg" onerror="alert('Gambar tidak ditemukan')">
        </div>
        <div class="column">
            <h2>Hoodie Nikea - Black Color</h2>
            <p style="width: 550px;">Menggunakan bahan cotton fleece high quality
                Fleece Cotton lembut diluar dan berbulu dibagian dalam
                sehingga terasa hangat dan nyaman saat dipakai
                Memiliki pola jahitan yang rapih dan di produksi dengan quality control yang ketat.</p>
            <p>Price: Rp 400,000</p>
            <a href="https://api.whatsapp.com/send/?phone=123456789" class="button">Buy Now</a>
        </div>
    </div>
    <div class="row">
        <div class="column">
            <img class="produk" src="https://ncrsport.com/img/storage/large/928476-010-1.jpg" onerror="alert('Gambar tidak ditemukan')">
        </div>
        <div class="column">
            <h2>Hoodie Nikea V1 - Black Color</h2>
            <p style="width: 550px;">Menggunakan bahan cotton fleece high quality
                Fleece Cotton lembut diluar dan berbulu dibagian dalam
                sehingga terasa hangat dan nyaman saat dipakai
                Memiliki pola jahitan yang rapih dan di produksi dengan quality control yang ketat.</p>
            <p>Price: Rp 550,000</p>
            <a href="https://api.whatsapp.com/send/?phone=123456789" class="button">Buy Now</a>
        </div>
    </div>
    <div class="row">
        <div class="column">
            <img class="produk" src="https://media.kohlsimg.com/is/image/kohls/3604298_Charcoal_Heather?wid=600&hei=600&op_sharpen=1" onerror="alert('Gambar tidak ditemukan')">
        </div>
        <div class="column">
            <h2>Hoodie Nikea V2 - Grey Color</h2>
            <p style="width: 550px;">Menggunakan bahan cotton fleece high quality
                Fleece Cotton lembut diluar dan berbulu dibagian dalam
                sehingga terasa hangat dan nyaman saat dipakai
                Memiliki pola jahitan yang rapih dan di produksi dengan quality control yang ketat.</p>
            <p style="width: 550px;"> Rp 500,000</p>
            <a href="https://api.whatsapp.com/send/?phone=123456789" class="button">Buy Now</a>
        </div>
    </div>
    <footer>
        <p>Rendra Store Copyright 2021</p>
    </footer>   
</body>
</html>



Source Code CSS :

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    color: rgb(153, 74, 10);
}
header {
    top: 0;
    margin-top: 100px;
    margin-bottom: 10px;
    color: rgb(12, 11, 10);
}
h1 {
    text-align: center;
    font-size: 2.4em;
}
h2 {
    font-size: 2.1em;
}
.nav{
    list-style: none;
    margin: 0;
    padding :0;
    text-align: center;
}
.nav li{
    display: inline;
}
.nav a{
    display: inline-block;
    color: black;
    padding: 10px;
}

.row {
    margin-top: 100px;
    display: flex;
}

.column {
    flex: 50%;
    padding: 10px;
}

.produk {
    border-radius: 10%;
    width: 354px;
    height: 472px;
    float: right;
}

p {
    height: left;
    text-align: justify;
    word-wrap: break-word;
    line-height: 2;
}

.button {
    background-color: #3f3f3f;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

footer p{
    margin-top: 90px;
    font-size: 1.3em;
    text-align: center;
}


Sekian penjelasan tugas dari saya mohon maaf jika ada kesalahan, sekian terima kasih.







Komentar

Posting Komentar

Postingan populer dari blog ini

TUGAS PWEB-D Pertemuan - 4 : Bootstrap

Gambar
      TUGAS PWEB-D Pertemuan - 4  Membuat Form Login dengan Bootstrap         Perkenalkan nama saya Andymas Narendra Bagaskara, NRP 05111940000192, Kelas Pemrograman Web D. Pada pertemuan keempat kelas PWEB-D, saya diberi tugas untuk membuat website Form Login dengan menggunakan Bootstrap Berikut ini hasil dari website Loginnya :                  Link Websitenya :  https://tugas6pweb.netlify.app/ Dan untuk hosting domainnya saya menggunakan  Netlify  dengan cara memasukan file html Biodata ke dalam website netlify tersebut. Source Code HTML : <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > login </ tit...
Baca selengkapnya

TUGAS PWEB-D Pertemuan - 5 : Form Validasi

Gambar
       TUGAS PWEB-D Pertemuan - 5 : Form Validasi         Perkenalkan nama saya Andymas Narendra Bagaskara, NRP 05111940000192, Kelas Pemrograman Web D. Pada pertemuan keempat kelas PWEB-D, saya diberi tugas untuk membuat website Form Validasi Vaksinasi dengan menggunakan JavaScript. Berikut ini hasil dari warung saya :   Link Websitenya :  https://tugas5pwebd.netlify.app/ Dan untuk hosting domainnya saya menggunakan  Netlify  dengan cara memasukan file html Biodata ke dalam website netlify tersebut. Source Code HTML : <!DOCTYPE html > < html lang =" en " > < head > < meta charset =" UTF-8 " /> < meta http-equiv =" X-UA-Compatible " content =" IE=edge " /> < meta name =" viewport " content =" width=device-width, initial-scale=1.0 " /> < link rel =" preconnect " href =" https://fonts.googleapis.com " /> < link rel =" preconnect ...
Baca selengkapnya

Tugas PWEB-D Pertemuan Ke-1 : Biodata

Gambar
     TUGAS PWEB-D Pertemuan - 1 : Biodata HTML         Perkenalkan nama saya Andymas Narendra Bagaskara, NRP 05111940000192, Kelas Pemrograman Web D. Pada pertemuan kedua kelas PWEB-D, saya diberi tugas untuk membuat Biodata dengan menggunakan HTML Berikut ini Hasil Biodata saya : Link Websitenya :   https://biodatarendra.netlify.app Dan untuk hosting domainnya saya menggunakan  Netlify  dengan cara memasukan file html Biodata ke dalam website netlify tersebut. Source Code : < html > < head >      < title >  Biodata Andymas  </ title >      < style >          body  {              font-family :  'Courier New' ;         }      </ style > </ head > < body   bg...
Baca selengkapnya