TUGAS PWEB-4 --Catalog Produk
Catalog Produk
Berikut adalah hasil dari catalog produk yang saya buat: klik di sini untuk demo
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" /> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link | |
| rel="icon" | |
| type="image/svg+xml" | |
| href="//cdn.shopify.com/s/files/1/0090/9236/6436/t/7/assets/favicon.png?v=15710722099172434620" | |
| /> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" | |
| rel="stylesheet" | |
| /> | |
| <link | |
| rel="stylesheet" | |
| href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" | |
| integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" | |
| crossorigin="anonymous" | |
| referrerpolicy="no-referrer" | |
| /> | |
| <link rel="stylesheet" href="style.css" /> | |
| <title>Catalog Produk</title> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <h1 class="store-name">Mantap Store.io</h1> | |
| <nav class="main-nav"> | |
| <ul> | |
| <li><a href="#" class="nav-link">Home</a></li> | |
| <li><a href="#" class="nav-link">About</a></li> | |
| <li><a href="#" class="nav-link">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <section class="section-catalog"> | |
| <h2 class="catalog-title">Let's improve your style!</h2> | |
| <div class="container"> | |
| <div class="product"> | |
| <div class="product-img"> | |
| <img | |
| src="https://dynamic.zacdn.com/NC4UnyO2WeOmz3fxm6FF_loIMB8=/fit-in/236x345/filters:quality(90):fill(ffffff)/http://static.id.zalora.net/p/hm-1141-0581182-1.jpg" | |
| alt="Man with grey t-shirt" | |
| /> | |
| </div> | |
| <div class="product-text"> | |
| <h3 class="product-name">Grey H&M</h3> | |
| <h4 class="product-price">Rp. 149.000,-/pcs</h4> | |
| <p class="product-desc"> | |
| Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor | |
| dolorum cum veritatis, quasi asperiores laboriosam. Accusantium | |
| modi cumque optio perferendis esse culpa eos ex expedita i | |
| </p> | |
| <div class="product-rating"> | |
| <div class="rate-star"> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star-half" aria-hidden="true"></i> | |
| </div> | |
| <div class="rate-text"> | |
| <p class="point">4.8<span class="respond">(490)</span></p> | |
| </div> | |
| </div> | |
| <a href="order-form.html" class="product-btn">Order now</a> | |
| <div class="reviews"> | |
| <div class="review"> | |
| <div class="review-account"> | |
| <i class="fa fa-user" aria-hidden="true"></i> | |
| <p class="review-name">junadiakbar</p> | |
| <div class="review-star"> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star-half" aria-hidden="true"></i> | |
| </div> | |
| </div> | |
| <p class="review-text"> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero | |
| vel nesciunt ullam distinctio eius labore hic minima culpa | |
| incidunt accusamus quidem quas dolor dolores accusantium | |
| commodi nemo, reiciendis recusandae vitae. | |
| </p> | |
| </div> | |
| <div class="review"> | |
| <div class="review-account"> | |
| <i class="fa fa-user" aria-hidden="true"></i> | |
| <p class="review-name">junadiakbar</p> | |
| <div class="review-star"> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star-half" aria-hidden="true"></i> | |
| </div> | |
| </div> | |
| <p class="review-text"> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero | |
| vel nesciunt ullam distinctio eius labore hic minima culpa | |
| incidunt accusamus quidem quas dolor dolores accusantium | |
| commodi nemo, reiciendis recusandae vitae. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="product"> | |
| <div class="product-img"> | |
| <img | |
| src="https://dynamic.zacdn.com/NC4UnyO2WeOmz3fxm6FF_loIMB8=/fit-in/236x345/filters:quality(90):fill(ffffff)/http://static.id.zalora.net/p/hm-1141-0581182-1.jpg" | |
| alt="Man with grey t-shirt" | |
| /> | |
| </div> | |
| <div class="product-text"> | |
| <h3 class="product-name">Grey H&M</h3> | |
| <p class="product-desc"> | |
| Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor | |
| dolorum cum veritatis, quasi asperiores laboriosam. Accusantium | |
| modi cumque optio perferendis esse culpa eos ex expedita i | |
| </p> | |
| <div class="product-rating"> | |
| <div class="rate-star"> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star-half" aria-hidden="true"></i> | |
| </div> | |
| <div class="rate-text"> | |
| <p class="point">4.8<span class="respond">(490)</span></p> | |
| </div> | |
| </div> | |
| <a href="order-form.html" class="product-btn">Order now</a> | |
| <div class="reviews"> | |
| <div class="review"> | |
| <div class="review-account"> | |
| <i class="fa fa-user" aria-hidden="true"></i> | |
| <p class="review-name">junadiakbar</p> | |
| <div class="review-star"> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star-half" aria-hidden="true"></i> | |
| </div> | |
| </div> | |
| <p class="review-text"> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero | |
| vel nesciunt ullam distinctio eius labore hic minima culpa | |
| incidunt accusamus quidem quas dolor dolores accusantium | |
| commodi nemo, reiciendis recusandae vitae. | |
| </p> | |
| </div> | |
| <div class="review"> | |
| <div class="review-account"> | |
| <i class="fa fa-user" aria-hidden="true"></i> | |
| <p class="review-name">junadiakbar</p> | |
| <div class="review-star"> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star-half" aria-hidden="true"></i> | |
| </div> | |
| </div> | |
| <p class="review-text"> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero | |
| vel nesciunt ullam distinctio eius labore hic minima culpa | |
| incidunt accusamus quidem quas dolor dolores accusantium | |
| commodi nemo, reiciendis recusandae vitae. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="product"> | |
| <div class="product-img"> | |
| <img | |
| src="https://dynamic.zacdn.com/NC4UnyO2WeOmz3fxm6FF_loIMB8=/fit-in/236x345/filters:quality(90):fill(ffffff)/http://static.id.zalora.net/p/hm-1141-0581182-1.jpg" | |
| alt="Man with grey t-shirt" | |
| /> | |
| </div> | |
| <div class="product-text"> | |
| <h3 class="product-name">Grey H&M</h3> | |
| <p class="product-desc"> | |
| Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor | |
| dolorum cum veritatis, quasi asperiores laboriosam. Accusantium | |
| modi cumque optio perferendis esse culpa eos ex expedita i | |
| </p> | |
| <div class="product-rating"> | |
| <div class="rate-star"> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star-half" aria-hidden="true"></i> | |
| </div> | |
| <div class="rate-text"> | |
| <p class="point">4.8<span class="respond">(490)</span></p> | |
| </div> | |
| </div> | |
| <a href="order-form.html" class="product-btn">Order now</a> | |
| <div class="reviews"> | |
| <div class="review"> | |
| <div class="review-account"> | |
| <i class="fa fa-user" aria-hidden="true"></i> | |
| <p class="review-name">junadiakbar</p> | |
| <div class="review-star"> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star-half" aria-hidden="true"></i> | |
| </div> | |
| </div> | |
| <p class="review-text"> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero | |
| vel nesciunt ullam distinctio eius labore hic minima culpa | |
| incidunt accusamus quidem quas dolor dolores accusantium | |
| commodi nemo, reiciendis recusandae vitae. | |
| </p> | |
| </div> | |
| <div class="review"> | |
| <div class="review-account"> | |
| <i class="fa fa-user" aria-hidden="true"></i> | |
| <p class="review-name">junadiakbar</p> | |
| <div class="review-star"> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star-half" aria-hidden="true"></i> | |
| </div> | |
| </div> | |
| <p class="review-text"> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero | |
| vel nesciunt ullam distinctio eius labore hic minima culpa | |
| incidunt accusamus quidem quas dolor dolores accusantium | |
| commodi nemo, reiciendis recusandae vitae. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </body> | |
| </html> |
Berikut adalah script HTML dari order-product:
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" /> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link | |
| rel="icon" | |
| type="image/svg+xml" | |
| href="//cdn.shopify.com/s/files/1/0090/9236/6436/t/7/assets/favicon.png?v=15710722099172434620" | |
| /> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" | |
| rel="stylesheet" | |
| /> | |
| <link | |
| rel="stylesheet" | |
| href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" | |
| integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" | |
| crossorigin="anonymous" | |
| referrerpolicy="no-referrer" | |
| /> | |
| <link rel="stylesheet" href="style.css" /> | |
| <title>Order Form</title> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <h1 class="store-name">Mantap Store.io</h1> | |
| <nav class="main-nav"> | |
| <ul> | |
| <li><a href="#" class="nav-link">Home</a></li> | |
| <li><a href="#" class="nav-link">About</a></li> | |
| <li><a href="#" class="nav-link">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <section class="section-catalog"> | |
| <h2 class="catalog-title">Let's improve your style!</h2> | |
| <div class="container"> | |
| <div class="product product--catalog"> | |
| <div class="product-text"> | |
| <h3 class="product-name">Grey H&M</h3> | |
| <p class="product-desc"> | |
| Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor | |
| dolorum cum veritatis, quasi asperiores laboriosam. Accusantium | |
| modi cumque optio perferendis esse culpa eos ex expedita i | |
| </p> | |
| <div class="product-rating"> | |
| <div class="rate-star"> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star" aria-hidden="true"></i> | |
| <i class="fa fa-star-half" aria-hidden="true"></i> | |
| </div> | |
| <div class="rate-text"> | |
| <p class="point">4.8<span class="respond">(490)</span></p> | |
| </div> | |
| </div> | |
| <form action="#" class="product-form"> | |
| <p class="size-title">Please select your size:</p> | |
| <div class="product-size"> | |
| <div> | |
| <input type="radio" id="s" name="fav_language" value="S" /> | |
| <label for="s">S</label><br /> | |
| </div> | |
| <div> | |
| <input type="radio" id="m" name="fav_language" value="M" /> | |
| <label for="m">M</label><br /> | |
| </div> | |
| <div> | |
| <input type="radio" id="l" name="fav_language" value="L" /> | |
| <label for="l">L</label><br /> | |
| </div> | |
| <div> | |
| <input type="radio" id="xl" name="fav_language" value="XL" /> | |
| <label for="xl">XL</label> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="alamat">Alamat :</label> | |
| <input type="text" id="alamat" /> | |
| </div> | |
| <div class="product-count"> | |
| <label for="jml">Jumlah Produk :</label> | |
| <select name="jumlah" id="jml"> | |
| <option value="1">1</option> | |
| <option value="2">2</option> | |
| <option value="3">3</option> | |
| <option value="4">4</option> | |
| <option value="5">5</option> | |
| <option value="6">6</option> | |
| </select> | |
| </div> | |
| <button class="product-btn">Order Now</button> | |
| </form> | |
| </div> | |
| <div class="product-img"> | |
| <img | |
| src="https://dynamic.zacdn.com/NC4UnyO2WeOmz3fxm6FF_loIMB8=/fit-in/236x345/filters:quality(90):fill(ffffff)/http://static.id.zalora.net/p/hm-1141-0581182-1.jpg" | |
| alt="Man with grey t-shirt" | |
| /> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </body> | |
| </html> |
Berikut adalah script CSS dari keduanya:
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
| /* | |
| --COLOR | |
| Background: #f1f3f5 | |
| text : #228be6 | |
| --SHADOW | |
| */ | |
| * { | |
| padding: 0; | |
| margin: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| font-size: 62.5%; | |
| } | |
| body { | |
| font-family: "inter", sans-serif; | |
| background-color: #f1f3f5; | |
| color: #343a40; | |
| } | |
| label { | |
| font-size: 1.4rem; | |
| } | |
| .header { | |
| padding: 3.2rem 9.6rem; | |
| display: flex; | |
| align-items: center; | |
| flex-direction: column; | |
| gap: 2.4rem; | |
| text-transform: uppercase; | |
| border-bottom: 1px solid rgba(52, 58, 64, 0.041); | |
| } | |
| .store-name { | |
| font-size: 3.2rem; | |
| font-weight: 700; | |
| } | |
| .main-nav ul { | |
| display: flex; | |
| gap: 3.2rem; | |
| list-style: none; | |
| } | |
| .nav-link:link, | |
| .nav-link:visited { | |
| text-decoration: none; | |
| font-size: 1.8rem; | |
| color: #343a40; | |
| padding: 0.4rem; | |
| font-weight: 500; | |
| transition: all 0.2 ease-in; | |
| } | |
| .nav-link:hover, | |
| .nav-link:active { | |
| border-bottom: 2px solid #343a40; | |
| } | |
| /* ******************************* */ | |
| /* SECTION CATALOG */ | |
| /* ******************************* */ | |
| .section-catalog { | |
| padding: 3.2rem 9.6rem; | |
| max-width: 130rem; | |
| } | |
| .catalog-title { | |
| font-size: 3.2rem; | |
| margin-bottom: 2.4rem; | |
| letter-spacing: -0.8px; | |
| } | |
| .container { | |
| display: grid; | |
| grid-template-rows: 1fr; | |
| gap: 2.4rem; | |
| } | |
| .product { | |
| border: 2px solid #e9ecef; | |
| box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.032); | |
| padding-bottom: 0; | |
| display: grid; | |
| grid-template-columns: 1fr 2fr; | |
| } | |
| .product-img { | |
| padding: 1.8rem; | |
| display: flex; | |
| align-items: center; | |
| width: 100%; | |
| } | |
| .product-img img { | |
| width: 100%; | |
| } | |
| .product-text { | |
| padding: 1.8rem 3.2rem 1.8rem 1.8rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.8rem; | |
| } | |
| .product-name { | |
| font-size: 2.4rem; | |
| } | |
| .product-price { | |
| font-size: 1.8rem; | |
| color: #212529; | |
| letter-spacing: 1px; | |
| } | |
| .product-desc { | |
| line-height: 1.8; | |
| font-size: 1.2rem; | |
| text-align: justify; | |
| letter-spacing: 1.2px; | |
| } | |
| .product-rating { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.2rem; | |
| } | |
| .rate-star { | |
| display: flex; | |
| gap: 0.8rem; | |
| } | |
| .rate-star i { | |
| font-size: 1.8rem; | |
| color: #fcc419; | |
| } | |
| .rate-text { | |
| display: flex; | |
| color: #f08c00; | |
| } | |
| .point { | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .respond { | |
| position: absolute; | |
| font-weight: 400; | |
| font-size: 1rem; | |
| bottom: 12%; | |
| right: -100%; | |
| } | |
| .product-form { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.2rem; | |
| } | |
| .product-size { | |
| display: flex; | |
| align-items: center; | |
| gap: 1.8rem; | |
| margin-bottom: 2.4rem; | |
| } | |
| .product-size div { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.8rem; | |
| } | |
| .size-title { | |
| font-size: 1.2rem; | |
| } | |
| .product-count { | |
| display: flex; | |
| align-items: center; | |
| gap: 1.2rem; | |
| margin-bottom: 2.4rem; | |
| } | |
| .product-count label { | |
| font-size: 1.2rem; | |
| } | |
| #jml { | |
| padding: 0 0.8rem 0 1.8rem; | |
| background-color: white; | |
| border: 1px solid #343a40; | |
| } | |
| .product-btn { | |
| border: none; | |
| background-color: #343a40; | |
| color: #e9ecef; | |
| padding: 0.8rem 0; | |
| } | |
| .product-btn:link, | |
| .product-btn:visited { | |
| text-align: center; | |
| color: #e9ecef; | |
| text-decoration: none; | |
| font-size: 1.2rem; | |
| } | |
| .reviews { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.2rem; | |
| } | |
| .review { | |
| display: flex; | |
| flex-direction: column; | |
| border: 1px solid #ced4da; | |
| padding: 1.2rem; | |
| } | |
| .review-account { | |
| display: flex; | |
| gap: 0.8rem; | |
| align-items: center; | |
| margin-bottom: 1.2rem; | |
| } | |
| .review-text { | |
| letter-spacing: 1.1px; | |
| } | |
| .review-star i { | |
| color: #fcc419; | |
| } | |
| /* Media Query */ | |
| /* 1168px */ | |
| @media (max-width: 73em) { | |
| .product-text { | |
| padding: 1.8rem; | |
| } | |
| } | |
| #alamat { | |
| width: 100%; | |
| padding: 1.2rem; | |
| height: 4.8rem; | |
| } | |
| /* 1104px */ | |
| @media (max-width: 69em) { | |
| .review-text { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 1; /* number of lines to show */ | |
| -webkit-box-orient: vertical; | |
| } | |
| } | |
| /* asspx */ | |
| @media (max-width: 60em) { | |
| .section-catalog { | |
| padding: 3.2rem 4.8rem; | |
| } | |
| .product-desc { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; /* number of lines to show */ | |
| -webkit-box-orient: vertical; | |
| line-height: 1.4; | |
| } | |
| .product-text { | |
| gap: 1.2rem; | |
| } | |
| .rate-star { | |
| display: flex; | |
| gap: 0.8rem; | |
| } | |
| .rate-star i { | |
| font-size: 1.2rem; | |
| color: #343a40; | |
| } | |
| .point { | |
| font-size: 1.2rem; | |
| } | |
| .respond { | |
| font-size: 0.8rem; | |
| bottom: 10%; | |
| right: -120%; | |
| } | |
| .review { | |
| padding: 0.8rem; | |
| } | |
| .product-img { | |
| padding-right: 0; | |
| } | |
| .product-name { | |
| font-size: 1.8rem; | |
| } | |
| .catalog-title { | |
| font-size: 2.4rem; | |
| } | |
| } | |
| /* 736px */ | |
| @media (max-width: 46em) { | |
| .review:not(first-child) { | |
| display: none; | |
| } | |
| .review:first-child { | |
| display: block; | |
| } | |
| } | |
| /* 640px */ | |
| @media (max-width: 40em) { | |
| .reviews { | |
| display: none; | |
| } | |
| .product-text { | |
| gap: 0.8rem; | |
| } | |
| .product-desc { | |
| font-size: 0.8rem; | |
| } | |
| .product-name { | |
| font-size: 1.4rem; | |
| } | |
| .rate-star { | |
| gap: 0.4rem; | |
| } | |
| .rate-star i { | |
| font-size: 0.8rem; | |
| } | |
| .product-rating { | |
| gap: 0.4rem; | |
| } | |
| .point { | |
| font-size: 0.8rem; | |
| } | |
| .respond { | |
| font-size: 0.4rem; | |
| right: -90%; | |
| bottom: 15%; | |
| } | |
| } | |
| /* 512 rem */ | |
| @media (max-width: 32em) { | |
| .section-catalog { | |
| padding: 3.2rem 4.8rem; | |
| } | |
| .store-name { | |
| font-size: 2.4rem; | |
| } | |
| .header { | |
| padding: 2.4rem 4.8rem; | |
| } | |
| .nav-link:link, | |
| .nav-link:visited { | |
| font-size: 1.2rem; | |
| } | |
| .product-btn { | |
| padding: 0.4rem 0; | |
| } | |
| .product-btn:link, | |
| .product-btn:visited { | |
| font-size: 1rem; | |
| } | |
| .catalog-title { | |
| font-size: 1.8rem; | |
| } | |
| } | |
| .product--catalog { | |
| grid-template-columns: 2fr 1fr; | |
| } |
Comments
Post a Comment