Tugas 4 PWEB - D
Pada postingan kali ini, saya akan memaparkan hasil pembuatan katalog toko baju menggunakan html dan css. Berikut adalah code untuk html dan css nya :
Sekian pemaparan untuk tugas kali ini, terima kasih.
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>Jual Baju</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>Berkah Store</h2> | |
| <h3>Berkah disetiap jahitannya</h3> | |
| </div> | |
| </div> | |
| <div class="menu"> | |
| <ul> | |
| <li><a href="">Home</a></li> | |
| <li><a href="">Article</a></li> | |
| <li><a href="">Catalog</a></li> | |
| <li><a href="">About</a></li> | |
| <li><a href="">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div class="content"> | |
| <div class="jarak"> | |
| <div class="kiri"> | |
| <h3> Catalog > Baju Pria > Kemeja ABC </h3> | |
| <div class="border"> | |
| <div class="jarak"> | |
| <div class="row"> | |
| <div class="col"> | |
| <img src="https://images.tokopedia.net/img/cache/700/product-1/2018/9/4/35734172/35734172_2baeece8-bd76-4aab-9a8b-817374dd83a8_1536_1536.jpeg" > | |
| </div> | |
| <div class="col" style="margin-left: 50px;"> | |
| <h2>Kemeja ABC</h2> | |
| <p style="font-size: 20px;" ><b> Rp250.000,-</b></p> | |
| <p> <b>Kemeja ABC </b>Lorem lorem ipsum ipsum ini caption ya | |
| </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> | |
| <button class="button" style="border-radius: 100%;">X</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">Kemeja Terkini</a></p> | |
| <p><a href="" class="undecor">Vibes Jadul</a></p> | |
| <p><a href="" class="undecor">Pakaian Musim Panas</a></p> | |
| <p><a href="" class="undecor">Jaket</a></p> | |
| <p><a href="" class="undecor">Kaos Oblong</a></p> | |
| </div> | |
| <div class="kanan"> | |
| <div class="col" > | |
| <h3 font-size: 18px;><b>Lebih Banyak Lagi</b></h3> | |
| <img src="https://cf.shopee.co.id/file/b9cbd4db2d6b2acd9065cc67a6bf403b" style="width: 160px;"> | |
| <p><b>Kemeja Greenlight</b></p> | |
| <p > Rp200.000,-</p> | |
| </div> | |
| <div class="col"> | |
| <h3 style="color: black;"><b>Recommended Items</b></h3> | |
| <img src="data:image/jpeg;base64,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" style="width: 180px;"> | |
| <p><b>Kaos Greenlight</b></p> | |
| <p > Rp150.000,-</p> | |
| </div> | |
| <div class="col"> | |
| <h3 style="color: black;"><b>Recommended Items</b></h3> | |
| <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqT_wRyNFYYZHVXMZa3-m5QNAqE6DOSBsjRw&usqp=CAU" style="width: 160px;"> | |
| <p><b>Kaos Flava</b></p> | |
| <p > Rp170.000,-</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| <div class="jarak"> | |
| <p>© Berkah Store 2021</p> | |
| </div> | |
| </footer> | |
| </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
| @import url('https://fonts.googleapis.com/css2?family=Bonheur+Royale&display=swap'); | |
| 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: rgb(5, 89, 138); | |
| text-align: center; | |
| } | |
| .header h2{ | |
| font-family: 'Bonheur Royale', cursive; | |
| font-size: 50px; | |
| } | |
| .header h3{ | |
| font-size: 12px; | |
| font-family: 'Lato', sans-serif; | |
| } | |
| .menu{ | |
| background-color: rgb(5, 89, 138); | |
| 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:40px; | |
| display: block; | |
| font-size: 15px; | |
| 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: 1000px; | |
| 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; | |
| } | |
| .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: rgb(5, 89, 138); /* 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: rgb(5, 89, 138); /* Green */ | |
| color: white; | |
| border: 2px solid black; | |
| } | |
| footer{ | |
| width: 90%; | |
| margin: auto; | |
| height: 40px; | |
| line-height: 40px; | |
| background: rgb(5, 89, 138); | |
| color: #fff; | |
| position:relative; | |
| font-family: 'Lato', sans-serif; | |
| font-size: 15px; | |
| text-align: center; | |
| } |
-han
Komentar
Posting Komentar