Published on September 27, 2021

Tugas Katalog Produk Pemrograman Web

Nama: Putu Ananda Satria Adi
NRP: 05111940000113
Kelas: Pemrograman Web B

Pada pertemuan ke-4 Pemrograman Web, kami diberikan tugas untuk membuat halaman katalog produk. Laman web dapat diakses disini, berikut merupakan screenshot dari halaman katalog produk yang telah saya buat.

Screenshot
Potongan kode dari laman diatas adalah sebagai berikut:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="icon" href="./favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DnnA Store</title>
    <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=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="custom.css" />
  </head>
  <body class="sans">
    <!-- <div class="header"> -->
    <header>
      <h1>
        <a href="./">DnnA</a>
      </h1>
      <h5 style="margin: -1rem 0 1rem">For Your Daily Style Needs</h5>
      <div class="navbar" style="padding-bottom: 1rem; margin-bottom: 4rem">
        <a class="nav-item" href="./index.html">Home</a>
        <a class="nav-item" href="./about.html">About</a>
      </div>
    </header>
    <!-- </div> -->

    <div class="content">
      <div class="item">
        <div class="item-image">
          <img src="images/topi.jpg" alt="topi" />
        </div>
        <div class="item-desc">
          <div class="desc">
            <h3>All New Caps Collections</h3>
            <p class="sans" style="padding-left: 1rem; text-indent: 1rem">
              This sunny season is the right time for a new caps. Check out our
              selection of new polo caps and shop your favorite now in store &
              online!⁠
            </p>
          </div>
          <div class="price sans">
            <h3 style="font-weight: 300">HARGA: &nbsp;</h3>
            <h3>Rp. 75.000</h3>
          </div>
          <div>
            <button onclick="alert('Barang Dibeli!')" class="btnBuy">
              Beli Sekarang!
            </button>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="item-image">
          <img src="images/jaket.jpg" alt="topi" />
        </div>
        <div class="item-desc">
          <div class="desc">
            <h3>Canvas Jacket Collections</h3>
            <p class="sans" style="padding-left: 1rem; text-indent: 1rem">
              Time to up your outerwear game! Jaket klasik yang selalu bisa
              memberikan kesan casual yang sangat kuat, tentu saja Trucker
              Jacket. Available in the best color this season. Grab yours now!⁠
            </p>
          </div>
          <div class="price sans">
            <h3 style="font-weight: 300">HARGA: &nbsp;</h3>
            <h3>Rp. 175.000</h3>
          </div>
          <div>
            <button onclick="alert('Barang Dibeli!')" class="btnBuy">
              Beli Sekarang!
            </button>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="item-image">
          <img src="images/bag.jpg" alt="topi" />
        </div>
        <div class="item-desc">
          <div class="desc">
            <h3>Sanca Mini Bag</h3>
            <p class="sans" style="padding-left: 1rem; text-indent: 1rem">
              A trend we want to stick around, our Sanca Mini Bag! Functional?
              Well, yes for fashionable purposes. Add this essential to any
              outfit for an instant upgrade.⁠
            </p>
          </div>
          <div class="price sans">
            <h3 style="font-weight: 300">HARGA: &nbsp;</h3>
            <h3>Rp. 125.000</h3>
          </div>
          <div>
            <button onclick="alert('Barang Dibeli!')" class="btnBuy">
              Beli Sekarang!
            </button>
          </div>
        </div>
      </div>
    </div>
    <footer id="kontak" class="sans">
      <p style="padding: 1rem 0 0">
        Built with ❤️ for &copy; 2021 Web Programming
      </p>
      <p style="padding: 0 0 1rem; font-size: small">
        DISCLAIMER! This webpage is built for course assignment, images are from
        Hanaka Store.
      </p>
    </footer>
  </body>
</html>

Selain halaman utama terdapat juga halaman about, berikut adalah screenshot serta potongan kode untuk halaman tersebut:

Screenshot

about.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="icon" href="./favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DnnA Store</title>
    <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=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="custom.css" />
  </head>
  <body class="sans">
    <div style="display: flex; flex-direction: column; min-height: 100vh">
      <!-- <div class="header"> -->
      <header>
        <h1>
          <a href="./">DnnA</a>
        </h1>
        <h5 style="margin: -1rem 0 1rem">For Your Daily Style Needs</h5>
        <div class="navbar" style="padding-bottom: 1rem">
          <a class="nav-item" href="./index.html">Home</a>
          <a class="nav-item" href="./about.html">About</a>
        </div>
      </header>
      <!-- </div> -->

      <div
        class="content sans"
        style="max-width: 40rem; flex-grow: 1; align-content: center"
      >
        <div style="margin: auto 0">
          <h1 style="text-align: center; margin-bottom: 2rem">
            Tentang DnnA Store
          </h1>
          <p style="text-indent: 2rem">
            DnnA Store merupakan hasil karya dari seorang mahasiswa yang
            ditugaskan untuk membuat website katalog produk. Segala konten baik
            foto maupun deskripsi produk diambil dari
            <a href="https://instagram.com/hanakaclasic">Hanaka Classic</a>.
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut, animi.
            Dicta nobis illo dolor, delectus maiores optio velit quos harum
            molestiae cum? Velit, ex minima. Explicabo assumenda cupiditate
            aspernatur placeat veniam reprehenderit repellat esse eligendi
            quibusdam pariatur? Repudiandae, numquam at. Perspiciatis alias
            quibusdam dolorum magni quod aliquam pariatur officiis excepturi.
            Quam necessitatibus distinctio eaque, qui quibusdam odit sequi
            voluptate. Facilis sapiente expedita ipsa vel minima fugit, eveniet
            ex atque. Architecto aliquid deserunt voluptatem aliquam ut
            perspiciatis, enim labore distinctio quae veniam ducimus impedit
            dolorem voluptates perferendis natus et minima laboriosam velit
            repudiandae, debitis ea sint. Ipsum laborum in consectetur
            veritatis!
          </p>
        </div>
      </div>
      <footer id="kontak" class="sans" style="bottom: 0">
        <p style="padding: 1rem 0 0">
          Built with ❤️ for &copy; 2021 Web Programming
        </p>
        <p style="padding: 0 0 1rem; font-size: small">
          DISCLAIMER! This webpage is built for course assignment, images are
          from Hanaka Store.
        </p>
      </footer>
    </div>
  </body>
</html>

Pada kedua halaman diatas, saya juga menggunakan CSS. Berikut adalah potongan kodenya:

custom.css

@media screen and (min-width: 768px) {
  img {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }

  .item-image {
    width: 50%;
    height: auto;
    float: left;
  }

  .item-desc {
    position: relative;
    min-height: 320px;
    text-align: justify;
    width: 45%;
    float: left;
    padding: 0px 10px;
    margin: 0 0 0 auto;
  }

  .item-desc .desc h3 {
    font-weight: 900;
    margin: 1rem 0 0.5rem;
  }
  .item-desc .desc p {
    font-size: 0.85rem;
    margin: 0 0 1rem;
  }
  .item-desc .price {
    display: flex;
  }
}

@media screen and (max-width: 767px) {
  img {
    width: 100%;
    object-fit: cover;
    max-height: 256px;
  }
  .item-image {
    width: 70%;
    height: auto;
    margin: 0 auto;
    /* background: #f8f8f8; */
  }

  .item-desc {
    position: relative;
    text-align: justify;
    width: 70%;
    padding: 0px 10px;
    margin: 0 auto;
    background: #2a2a2a;
  }

  .item-desc .desc h3 {
    font-weight: 900;
    margin: 1rem 0;
  }
  .item-desc .desc p {
    display: none;
    font-size: 0.5rem;
  }
}
.serif {
  font-family: "Merriweather", serif !important;
}

.sans {
  font-family: "Merriweather Sans", sans-serif !important;
}

body {
  background: #222222;
  color: #fefefe;
  width: 100%;
  margin: 0 auto;
}

header {
  background-color: #2a2a2a;
  width: 100%;
  height: auto;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 9999;
}

header a {
  color: #fefefe !important;
  text-decoration: none;
}

header h1 {
  font-size: 70px;
  margin: 0;
}

header h3 {
  font-size: 50px;
  margin-top: 0%;
  margin-bottom: 15px;
}

a,
a:visited {
  color: #ffa600;
}
a:hover {
  color: #ffffff;
}

.nav-item {
  font-size: 1.1rem;
}

a.nav-item {
  padding: 5px 20px;
  border-radius: 5px;
}

a.nav-item:hover {
  color: #222 !important;
  background: rgba(255, 255, 255, 0.75);
}

.content {
  display: grid;
  max-width: 50rem;
  margin: auto;
}

.item {
  margin-bottom: 4rem;
  background: #2a2a2a;
  border-radius: 20px;
}

.option {
  margin: 1rem 0;
}

.btn {
  text-align: center;
}

.btnBuy {
  position: absolute;
  bottom: 0;
  margin-top: 2rem;
  width: 100%;
  padding: 1rem 0;
  font-weight: bold;
  background-color: #f3f3f3;
  border-radius: 10px;
  border-width: 0;
}

.btnBuy:hover {
  background-color: #333;
  color: #f3f3f3;
}

.about {
  margin: auto;
  padding: 320px 0 80px 0;
  width: 40%;
  text-align: center;
  font-size: larger;
}

footer {
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #f3f3f3;
  background: #333;
}

footer i {
  padding: 30px;
  font-size: 48px;
  color: #f3f3f3;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}