Membuat Responsive Product Card

Membuat Responsive Product Card

Candil.eu.org. - Hallo Programmer kembali lagi di blog saya yang sangat sederhana ini, hari ini kita akan belajar web design mebuat tampilan Responsive Product Card, sebuah tutorial pemrograman dasar hanya menggunakan CSS dan HTML yang bisa dijadikan refferensi pembelajaran untuk anda para pengunjung setia blog dan juga youtube channel Candil Code, Silahkan di simak dan perhatikan baik-baik code HTML dsn CSS tanpa menggunakan Javascript yang sudah saya sediakan di bawah ini.

Tutorial Responsive Product Card

<section class="section-card">
  <div class="card">
    <div class="img-container">
      <img src="https://www.downloadclipart.net/large/sony-headphone-png-photos.png" alt="">
    </div>
    <div class="infos">
      <h3 class="name">
        Wirless Headphone
      </h3>
      <h2 class="price">
        $255.3
      </h2>
      <button class="btn btn-buy">Buy now</button>
    </div>
  </div>
</section>

@import url("https://fonts.googleapis.com/css2?family=Radio+Canada:wght@700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Radio Canada", sans-serif;
  background-color: #f2f2f2;
}
img {
  width: 100%;
  display: block;
}

.section-card {
  padding: 0 30px;
  height: 100vh;
  display: flex;
  align-items: center;
}
.section-card .card {
  margin: 20px auto;
  max-width: 300px;
  border-radius: 10px;
  overflow: hidden;
  background-image: linear-gradient(
    140deg,
    #132936,
    #132936 20%,
    #2196f3 20.5%,
    #2196f3
  );
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}
.section-card .card .img-container {
  padding: 10px 0 0 0;
}
.section-card .card .img-container img {
  filter: drop-shadow(0px -5px 25px rgba(0, 0, 0, 0.7));
  transform: scale(1.15);
}
.section-card .card .infos {
  padding: 30px 15px;
  text-align: center;
}

.section-card .card .infos .name,
.section-card .card .infos .price {
  color: #fff;
}
.section-card .card .infos .name {
  font-size: 1.1rem;
}
.section-card .card .infos .price {
  margin: 10px 0 15px 0;
  font-size: 2rem;
}
.section-card .card .infos .btn {
  font-family: "Radio Canada", sans-serif;
  padding: 0.8rem 1.6rem;
  border-radius: 50px;
  border: 1px solid #f2f2f2;
  font-size: 1rem;
  font-weight: 300;
  min-width: 150px;
  cursor: pointer;
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);
  background-color: #f2f2f2;
  transition: all 0.2s ease-in;
}
.section-card .card .infos .btn:hover {
  background-color: transparent;
  color: #fff;
  box-shadow: none;
}

@media screen and (min-width: 700px) {
  .section-card .card {
    display: flex;
    align-items: center;
    min-width: 550px;
    padding: 15px 20px;
  }
  .section-card .card .img-container {
    padding-top: 0;
    width: 60%;
  }
}

Your_code_is_here

Demo code Responsive Product Card

Demo Video

Saya membagikan code ini hanya untuk tujuan pengujian dan pembelajaran. Jika dirasa Artikel Yang saya tulis melanggar Hak Cipta Silahkan kirimkan pesan kepada Saya Melalui Halaman Kontak dan Saya akan menghapusnya sesegera mungkin.

Untuk para pengunjung Blog yang saat ini sedang mencari layanan jasa pembuatan website, anda bisa kunjungi Jasa Candil Kuya di google.

Penutup

Bagaimana sobat Candil cukup mudah bukan? blog ini sengaja saya sediakan khusus untuk anda yang masih pemula di dalam dunia pemrograman, Semoga dapat bermanfaat bagi sobat Candil yang ingin belajar dasar pemrograman seperti HTML, CSS dan Juga Javascript.

Jangan lupa share dan jika ada kekurangan serta koreksi di dalam penulisan code Responsive Product Card silahkan tulis melalui kolom komentar di bawah ini ya. Terima kasih!

Code:
Ayoub Mkira