Dokumentasi CSS PWEB 2021

on

 

Tugas Pemrograman Web - D

 Jonathan Timothy Siregar

0511194000120


    Hai, Saya Jonathan Timothy Siregar mahasiswa Teknik Informatika ITS angkatan 2019. Pada mata kuliah Pemrograman Web ini diberikan sebuah tugas untuk membangun sebuah situs berisikan CSS  dari suatu toko pakaian. 

    Pada HTML yang saya buat, terdapat file html yang telah berisikan style, serta beberapa file gambar bertipe jpg. Kombinasi dari keseluruhan file ini akan dilampirkan di bawah.

Berikut Lampiran dari pengerjaan web saya :

https://css-jogar.netlify.app/



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>CSS PWEB</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="header">
        <div class="header-title">
            <h1>Toko Baju</h1>
        </div>
       
        <ul class="header-menu">
            <li><a href="">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Contact</a></li>
        </ul>
        <br><br>
    </div>
<div class="sub">
    <div class="card">
        <img src="baju1.jpg" alt="Baju Baru" style="width:100%">
        <h1>Baju Baru Lebaran</h1>
        <p class="price">Rp145,000</p>
        <p>Baju baru lebaran sangat cocok dipakai di hari yang suci. SEGERA BELI !!!</p>
        <p><button>Add to Cart</button></p>
    </div>
    <div class="card">
        <img src="baju2.jpg" alt="Minal Aidin" style="width:100%">
        <h1>Minal Aidin</h1>
        <p class="price">Rp155,000</p>
        <p>Baju minal aidin walfaizin sangat cocok dipakai di hari yang suci. SEGERA BELI !!!</p>
        <p><button>Add to Cart</button></p>
    </div>

    <div class="card">
        <img src="baju3.jpg" alt="Kaos Khusus" style="width:100%">
        <h1>Kaos Khusus Lebaran</h1>
        <p class="price">Rp165,000</p>
        <p>Kaos khusus lebaran sangat cocok dipakai di hari yang suci. SEGERA BELI !!!</p>
        <p><button>Add to Cart</button></p>
    </div>

    <div class="card">
        <img src="baju4.jpg" alt="THR" style="width:100%">
        <h1>THR</h1>
        <p class="price">Rp175,000</p>
        <p>Baju THR lebaran sangat cocok dipakai di hari yang suci. SEGERA BELI !!!</p>
        <p><button>Add to Cart</button></p>
    </div>
</div>
    <footer>
        &copy; CSS PWEB
    </footer>
</body>
</html>


CSS :

.header h1{
    text-align: center;
    color:rgb(0, 0, 0);
    padding: 30px 30px 30px 30px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 70px;
}
.header {
    margin-top: 50px;
    margin-bottom: 60px;
    background-color: rgba(211, 112, 0, 0.808);
   
}
.header-menu{
    list-style: none;
    margin: 0;
    padding :0;
    text-align: center;
    font-size:x-large    
}

.header-menu li{
    display: inline;
}
.header-menu a{
    display: inline-block;
    color: rgb(0, 0, 0);
    padding: 10px 30px;
    text-decoration: none;
    display: inline-block;

}

.header-menu a:hover{
    color: rgb(255, 255, 255);
}

.card{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 300px;
    text-align: center;
    font-family: arial;
    display: inline-block;
    margin: 3% 3% 3% 3%;
    padding: 5% 10% 5% 10%;

}
 
  .price {
    color: grey;
    font-size: 22px;
  }
 
  .card button {
    border: none;
    outline: 0;
    padding: 12px;
    color: white;
    background-color: rgb(255, 147, 6);
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-size: 18px;
  }
 
  .card button:hover {
    opacity: 0;
  }
 
footer {
    font-size: 90%;
    padding: 30px 30px 30px 30px;
    text-align: center;
    background-color: rgb(116, 56, 0);
    color: rgb(251, 251, 251);
}


Sekian Dokumentasi CSS saya, terima kasih 

Comments

Post a Comment