Pada tugas 4 ini diminta untuk memodifikasi web 'Belajar Membuat Layout dengan HTML dan CSS' menjadi website toko baju dan menampilkan katalog baju. Pada katalog baju terdapat detail produk, seperti foto baju, deskripsi baju, harga, dan detail lainnya.
Link Web :
https://erzajanitra.github.io/pweb-tugas-4/
Dokumentasi:
1. Tampilan Header
2. Tampilan Detail Baju
3. Tampilan Katalog Baju
4. Tampilan Footer
Sourcecode:
1. index.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
| <!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>Belajar CSS</title> | |
| <link rel="stylesheet" href="main.css"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Birthstone&display=swap" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="header"> | |
| <div class="jarak"> | |
| <h2>teralih</h2> | |
| <h3>clothes that matters</h3> | |
| </div> | |
| </div> | |
| <div class="menu"> | |
| <ul> | |
| <li><a href="http://">Home</a></li> | |
| <li><a href="http://">Catalog</a></li> | |
| <li><a href="http://">About</a></li> | |
| <li><a href="http://">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div class="content"> | |
| <div class="jarak"> | |
| <div class="kiri"> | |
| <h3> Catalog > 1950s Dress > 1950s Coat Dress </h3> | |
| <div class="border"> | |
| <div class="jarak"> | |
| <div class="row"> | |
| <div class=col"> | |
| <img src="img/dress`.jpg" > | |
| </div> | |
| <div class="col" style="margin-left: 50px;"> | |
| <h2>1950s Coat Dress</h2> | |
| <p style="font-size: 18px;" ><b> Rp250.000,-</b></p> | |
| <p style="font-size: 16px;"> <b>The coatdress </b>was another full-skirted version. It was slightly | |
| similar to the shirtwaist dress, but had the styling | |
| of a long coat instead of a shirt. These dresses buttoned | |
| all the way down to the bottom of the skirt and had no back zipper. | |
| </p> | |
| <p ><b> Size</b></p> | |
| <div class="round"> | |
| <button class="button" style="border-radius: 100%;">S</button> | |
| <button class="button" style="border-radius: 100%;">M</button> | |
| <button class="button" style="border-radius: 100%;">L</button> | |
| </div> | |
| <div class="square"> | |
| <button class="buttons">See Review</button> | |
| <button class="buttons">Add to Cart</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border" style="margin-top: 4rem;" > | |
| <div class="row" > | |
| <div class="jarak" style="margin-top: 10px; margin-right: 4rem;" > | |
| <h3 style="font-size: 18px;"><b>Explore</b></h3> | |
| <p><a href="" class="undecor">New In 2021</a></p> | |
| <p><a href="" class="undecor">1950s Dress</a></p> | |
| <p><a href="" class="undecor">Winter Coats</a></p> | |
| <p><a href="" class="undecor">Sweater</a></p> | |
| <p><a href="" class="undecor">Shirt</a></p> | |
| </div> | |
| <div class="kanan"> | |
| <div class="col" > | |
| <h3 font-size: 18px;><b>More from 1950s Dress</b></h3> | |
| <img src="img/dress7.jpg" style="width: 160px;"> | |
| <p ><b>Sheath Dress</b></p> | |
| <p > Rp250.000,-</p> | |
| </div> | |
| <div class="col"> | |
| <h3 style="color: white;"><b>Recommended Items</b></h3> | |
| <img src="img/dress4.jpg" style="width: 180px;"> | |
| <p><b>Prom Dress</b></p> | |
| <p > Rp250.000,-</p> | |
| </div> | |
| <div class="col"> | |
| <h3 style="color: white;"><b>Recommended Items</b></h3> | |
| <img src="img/dress6.jpg" style="width: 160px;"> | |
| <p><b>Trapeze Dress</b></p> | |
| <p > Rp250.000,-</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| <div class="jarak"> | |
| <p>© teralih 2021</p> | |
| </div> | |
| </footer> | |
| </body> | |
| </html> |
2. main.css
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
| body{ | |
| background: white; | |
| color: #333; | |
| width: 100%; | |
| font-family: sans-serif; | |
| margin: 0 auto; | |
| height: 100%; | |
| } | |
| .jarak{ | |
| padding: 0 2pc; | |
| } | |
| .header{ | |
| width: 90%; | |
| margin: auto; | |
| height: 80px; | |
| line-height: 3px; | |
| background:white; | |
| color: #000; | |
| text-align: center; | |
| } | |
| .header h2{ | |
| font-family: 'Birthstone', cursive; | |
| font-size: 50px; | |
| } | |
| .header h3{ | |
| font-size: 12px; | |
| font-family: 'Lato', sans-serif; | |
| } | |
| .menu{ | |
| background-color: black; | |
| height: 50px; | |
| line-height: 40px; | |
| position: relative; | |
| width: 90%; | |
| margin: 0 auto; | |
| padding: 0 auto; | |
| } | |
| .menu ul{ | |
| list-style: none; | |
| } | |
| .menu ul li a{ | |
| float: left; | |
| width:70px; | |
| display: block; | |
| font-size: 16px; | |
| padding-left: 10rem; | |
| margin-top: 5px; | |
| font-family: 'Lato', sans-serif; | |
| color:#fff; | |
| text-decoration: none; | |
| } | |
| .menu ul li a:hover{ | |
| color: rgb(218, 204, 204); | |
| display: block; | |
| } | |
| .content{ | |
| width: 90%; | |
| margin: auto; | |
| height: 1150px; | |
| padding: 0.1px; | |
| background: #fff; | |
| color: #333; | |
| font-family: 'Lato', sans-serif; | |
| text-align: justify; | |
| padding-right: 1rem; | |
| padding-left: 1rem; | |
| } | |
| .content h2{ | |
| font-size: 30px; | |
| } | |
| .content h3{ | |
| margin-top: 30px; | |
| margin-bottom: 30px; | |
| font-size: 15px; | |
| } | |
| .content img{ | |
| width: 400px; | |
| margin-left: 2px; | |
| margin-right: 2rem; | |
| } | |
| .kiri{ | |
| width: 90%; | |
| float: left; | |
| margin: auto; | |
| background:#fff; | |
| height: 420px; | |
| } | |
| .kanan{ | |
| width: 80%; | |
| float: right; | |
| margin: auto; | |
| background:#fff; | |
| height: 420px; | |
| } | |
| /* .border{ | |
| border: 2px solid #000000; | |
| margin-top: 1pc; | |
| padding: 0 2pc 1pc 2pc; | |
| } */ | |
| .undercor{ | |
| text-decoration: none; | |
| color: black; | |
| font-size: 16px; | |
| } | |
| .row { | |
| display: flex; | |
| } | |
| /* Create two equal columns that sits next to each other */ | |
| .col { | |
| float: left; | |
| padding: 10px; | |
| /* height: 300px; */ | |
| } | |
| .column { | |
| float: left; | |
| padding: 10px; | |
| /* Should be removed. Only for demonstration */ | |
| } | |
| .button { | |
| font-family: 'Lato', sans-serif; | |
| transition-duration: 0.4s; | |
| border: 2px solid black; | |
| padding-top: 10px; | |
| padding-bottom: 10px; | |
| padding-left: 15px; | |
| padding-right: 15px; | |
| } | |
| .button:hover { | |
| background-color: black; /* Green */ | |
| color: white; | |
| border: 2px solid black; | |
| } | |
| .buttons{ | |
| font-size: 15px; | |
| margin-top: 20px; | |
| /* padding-top: 2rem; */ | |
| padding: 10px 10rem; | |
| font-family: 'Lato', sans-serif; | |
| transition-duration: 0.4s; | |
| border: 2px solid black; | |
| } | |
| .buttons:hover { | |
| background-color: black; /* Green */ | |
| color: white; | |
| border: 2px solid black; | |
| } | |
| footer{ | |
| width: 90%; | |
| margin: auto; | |
| height: 40px; | |
| line-height: 40px; | |
| background: black; | |
| color: #fff; | |
| position:relative; | |
| font-family: 'Lato', sans-serif; | |
| font-size: 15px; | |
| text-align: center; | |
| } | |
| .kanan p{ | |
| font-size: 15px; | |
| } |
Comments
Post a Comment