Cara Membuat Desain Card Profile dengan HTML & CSS

Cara Membuat Desain Card Profile dengan HTML & CSS - Pernahkah kalian melihat desain kartu profil (Card Profile) ? pasti sudah sering yah kalian melihat nya. Desain nya yang sangat beragam dan tentunya sangat menarik untuk di lihat. Nah, Pada kesempatan kali ini saya akan memberikan tutorial bagaimana Cara Membuat Desain Card Profile dengan HTML & CSS. Desain ini nanti nya bisa kalian gunakan sebagai tambahan fitur pada website untuk kartu profile (card profile), Bagaimana cara membuat nya. Simak langkah - langkah membuat desain kartu profil (card profile) berikut ini.

Kode HTML

Baik kita mulai langkah pertama, yakni kita akan membuat kerangka desain kartu profil dengan kode HTML. Silahkan kalian bisa ketikan kode HTML nya berikut ini dengan benar.

<body>
 
  <figure class="card">
    <figcaption>
      <h2>Katherine <span>Karen</span></h2>
      <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
      <div class="icons">
        <i class="fab fa-facebook-square"></i>
        <i class="fab fa-instagram"></i>
        <i class="fab fa-snapchat-square"></i>
      </div>
    </figcaption>
    <img src="img-1.jpg"/>
    <div class="position">Web Designer</div>
  </figure>

</body>

Pada bagian tag img kalian bisa isikan gambar bebas atau bisa juga foto profil kalian agar terlihat lebih menarik lagi ya :). Silahkan kalian isikan dan sesuaikan untuk konten berupa paragraf dan yang lain - lain nya pada kerangka desain kartu profil (card profile).

Kode CSS

Langkah selanjutnya, setelah membuat kerangka HTML desain kartu profil (card profile) seperti diatas kita akan percantik tampilan desain kartu profil (card profile) dengan kode CSS. Pada bagian ini kita akan sedikit bermain dengan efek sederhana agar desain kartu profil (card profile) terlihat lebih hidup. Nah, silahkan kalian bisa ketikan sintak CSS nya berikut ini.

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
html {
  height: 100%;
}
body {
  font-family: 'Muli', sans-serif;
  background-color: #1e272e;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: wrap;
  margin: 0;
  height: 100%;
}

figure.card {
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 380px;
  max-width: 480px;
  width: 100%;
  background: #ffffff;
  color: #000000;
}
figure.card * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.card > img {
  width: 50%;
  border-radius: 50%;
  border: 4px solid #ffffff;
  -webkit-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  -webkit-transform: scale(1.6);
  transform: scale(1.6);
  position: relative;
  float: right;
  right: -15%;
  z-index: 1;
}
figure.card figcaption {
  padding: 20px 30px 20px 20px;
  position: absolute;
  left: 0;
  width: 50%;
}
figure.card figcaption h2,
figure.card figcaption p {
  margin: 0;
  text-align: left;
  padding: 10px 0;
  width: 100%;
}
figure.card figcaption h2 {
  font-size: 1.2em;
  font-weight: bold;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
figure.card figcaption h2 span {
  font-weight: 800;
  color: #b71540;
}
figure.card figcaption p {
  font-size: 0.9em;
  opacity: 0.8;
}
figure.card figcaption .icons {
  width: 100%;
  text-align: left;
}
figure.card figcaption .icons i {
  font-size: 26px;
  padding: 5px;
  top: 50%;
  color: #000000;
}
.icons i:hover {color: #b71540 !important; cursor: pointer;}
figure.card figcaption a {
  opacity: 0.3;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}

figure.card .position {
  width: 100%;
  padding: 15px 20px;
  font-size: 0.9em;
  opacity: 1;
  color: #ffffff;
  background: #b71540;
  clear: both;
  font-weight: bold;
}
figure.card:hover > img,
figure.card.hover > img {
  right: -12%;
}

Setelah semua sintak HTML dan CSS telah kalian ketikan semua, silahkan simpan file nya. Kemudian kalian bisa lihat hasil kartu profil (card profile) di browser masing - masing.

Bagaimana, Menarik bukan desain kartu profil (card profile) nya ? Silahkan kalian bisa tingkatkan lagi desain atau efek yang sesuai ke inigina agar desain kartu profile (card profile) semakin terlihat menarik lagi. Baiklah, cukup sekian tutorial sederhana HTML & CSS tentang bagaimana Cara Membuat Desain Card Profile dengan HTML & CSS, semoga tutorial ini bisa bermanfaat dan menambah referensi dalam membuat desain website. Selamat mencoba dan sampai jumpa di artikel selanjutnya :)

21 Mei 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat