Tugas 4 Pemrograman Web - Membuat Website Katalog dengan HTML dan CSS
Tugas keempat kali ini adalah membuat website yang berisi katalog dari produk. Pada katalog, terdapat foto produk, nama, deskripsi, harga dan button untuk membeli.
Berikut merupakan dokumentasi dari tugas 4,
Source Code
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>regular-irregular shop</title> | |
| <link rel="stylesheet" href="style.css"/> | |
| </head> | |
| <body> | |
| <div class="header"> | |
| <div class="jarak"> | |
| <img src="logo.png" alt="logo" class="logo"> | |
| </div> | |
| </div> | |
| <div class="menu"> | |
| <ul class="nav"> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="#">Shop</a></li> | |
| <li><a href="#">About</a></li> | |
| <li><a href="#">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div class="content"> | |
| <div class="jarak"> | |
| <div class="wrapper"> | |
| <div class="border"> | |
| <img src="reg.jpg" class="album"/> | |
| <h3>Regular-Irregular</h3> | |
| <p>NCT 127<br> | |
| The 1st Full Album of NCT 127<br> | |
| Released in 2018</p> | |
| <h4>$24.00</h4> | |
| <button class="button">Buy Now</button> | |
| </div> | |
| <div class="border"> | |
| <img src="awaken.jpg" class="album"/> | |
| <h3>Awaken The World</h3> | |
| <p>WayV<br> | |
| The 1st Full Album of WayV<br> | |
| Released in 2020</p> | |
| <h4>$15.40</h4> | |
| <button class="button">Buy Now</button> | |
| </div> | |
| <div class="border"> | |
| <img src="reload.jpg" class="album"/> | |
| <h3>Regular-Irregular</h3> | |
| <p>NCT Dream<br> | |
| The 3rd Mini Album of NCT Dream<br> | |
| Released in 2020</p> | |
| <h4>$20.00</h4> | |
| <button class="button">Buy Now</button> | |
| </div> | |
| <div class="border"> | |
| <img src="resonance.jpg" class="album"/> | |
| <h3>Resonance</h3> | |
| <p>NCT 2020<br> | |
| 2nd Repackaged Full Album of NCT 2020<br> | |
| Released in 2020</p> | |
| <h4>$27.98</h4> | |
| <button class="button">Buy Now</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <div class="jarak"> | |
| <p>© 2021, regular-irregular shop</p> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .header { | |
| width: 100%; | |
| margin: center; | |
| height: 40px; | |
| line-height: 80px; | |
| } | |
| .logo { | |
| display: block; | |
| margin-left: auto; | |
| margin-right: auto; | |
| width: 100px; | |
| } | |
| .jarak{ | |
| padding: 0 2pc; | |
| } | |
| .menu{ | |
| height: 50px; | |
| line-height: 50px; | |
| list-style: none; | |
| font-family: sans-serif; | |
| } | |
| .nav{ | |
| text-align: center; | |
| } | |
| .nav li{ | |
| display: inline; | |
| } | |
| .nav a{ | |
| text-decoration: none; | |
| padding: 0 30px; | |
| color: black; | |
| font-weight: 700; | |
| } | |
| .nav li a:hover{ | |
| color: gray; | |
| } | |
| .content { | |
| display: flex; | |
| flex-wrap: wrap; | |
| font-family: sans-serif; | |
| } | |
| .wrapper{ | |
| display: grid; | |
| grid-auto-flow: column; | |
| align-items: center; | |
| grid-gap: 10px; | |
| } | |
| .border{ | |
| border: 2px solid #ddd; | |
| margin-top: 1pc; | |
| padding-bottom: 1pc; | |
| padding-left: 2pc; | |
| padding-right: 2pc; | |
| align-self: center; | |
| } | |
| .album{ | |
| width: 300px; | |
| } | |
| .button{ | |
| background-color: lightgray; | |
| color: black; | |
| border: none; | |
| padding: 10px 110px; | |
| text-align: center; | |
| font-size: 16px; | |
| margin: 4px 2px; | |
| transition: 0.3s; | |
| opacity: 0.9; | |
| } | |
| .button:hover { | |
| background-color: black; | |
| border: none; | |
| color: white; | |
| } | |
| .footer{ | |
| width: 100%; | |
| position: relative; | |
| left: 0; | |
| bottom: 0; | |
| background: darkslategrey; | |
| color: #fff; | |
| text-align: center; | |
| opacity: 0.8; | |
| } |
Comments
Post a Comment