Cara Membuat Profil Card dengan Antarmuka yang Keren

W3bdav - Pada umumnya, membuat sebuah profil card di blog, website, maupun yang lainnya, adalah hal yang wajib agar blog atau website kita terlihat lebih profesional dan mudah dikenali.

Dengan adanya profil card ini, para pengunjung dapat mengetahui siapa pemilik dari blog atau website tersebut. Dan memungkinkan mereka bisa berinteraksi dengan kita langsung dengan cara mengirimi email, mengunjungi sosial media kita, dan lain sebagainya.

Nah, maka dari itu pada pembahasan kali ini saya akan berbagi pada Anda cara membuat profil card dengan antarmuka yang sangat keren. Bagaimana cara membuat profil card ini? Caranya cukup mudah, Anda hanya perlu mengikuti langkah demi langkah yang sudah saya jabarkan di bawah.

Cara Membuat Profil Card Keren

Berikut ini adalah langkah-langkah pembuatan profil cardnya:

Struktur HTML

Buat atau tambahkan struktur elemen HTML untuk pembuatan profil card. Berikut adalah contoh kode HTML nya:

<div class="card" data-state="#about">
  <div class="card-header">
    <div class="card-cover" style="background-image: url('https://2.bp.blogspot.com/-b_lqelKRB4k/Xj-rBvoSxUI/AAAAAAAACHg/G19lzRiO6qYQmquCqut44r1cMdF53HQ0QCLcBGAsYHQ/s1600/anime3.png')"></div>
    <img class="card-avatar" src="https://2.bp.blogspot.com/-b_lqelKRB4k/Xj-rBvoSxUI/AAAAAAAACHg/G19lzRiO6qYQmquCqut44r1cMdF53HQ0QCLcBGAsYHQ/s1600/anime3.png" alt="avatar" />
    <h1 class="card-fullname">Virm Aditya</h1>
    <h2 class="card-jobtitle">UI Developer / Blogger</h2>
  </div>
  <div class="card-main">
    <div class="card-section is-active" id="about">
      <div class="card-content">
        <div class="card-subtitle">ABOUT</div>
        <p class="card-desc">Whatever tattooed stumptown art party sriracha gentrify hashtag intelligentsia readymade schlitz brooklyn disrupt.
        </p>
      </div>
      <div class="card-social">
        <a href="#"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M15.997 3.985h2.191V.169C17.81.117 16.51 0 14.996 0c-3.159 0-5.323 1.987-5.323 5.639V9H6.187v4.266h3.486V24h4.274V13.267h3.345l.531-4.266h-3.877V6.062c.001-1.233.333-2.077 2.051-2.077z" /></svg></a>
        <a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path d="M512 97.248c-19.04 8.352-39.328 13.888-60.48 16.576 21.76-12.992 38.368-33.408 46.176-58.016-20.288 12.096-42.688 20.64-66.56 25.408C411.872 60.704 384.416 48 354.464 48c-58.112 0-104.896 47.168-104.896 104.992 0 8.32.704 16.32 2.432 23.936-87.264-4.256-164.48-46.08-216.352-109.792-9.056 15.712-14.368 33.696-14.368 53.056 0 36.352 18.72 68.576 46.624 87.232-16.864-.32-33.408-5.216-47.424-12.928v1.152c0 51.008 36.384 93.376 84.096 103.136-8.544 2.336-17.856 3.456-27.52 3.456-6.72 0-13.504-.384-19.872-1.792 13.6 41.568 52.192 72.128 98.08 73.12-35.712 27.936-81.056 44.768-130.144 44.768-8.608 0-16.864-.384-25.12-1.44C46.496 446.88 101.6 464 161.024 464c193.152 0 298.752-160 298.752-298.688 0-4.64-.16-9.12-.384-13.568 20.832-14.784 38.336-33.248 52.608-54.496z" /></svg></a>
        <a href="#"><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
            <path d="M301 256c0 24.852-20.148 45-45 45s-45-20.148-45-45 20.148-45 45-45 45 20.148 45 45zm0 0" />
            <path d="M332 120H180c-33.086 0-60 26.914-60 60v152c0 33.086 26.914 60 60 60h152c33.086 0 60-26.914 60-60V180c0-33.086-26.914-60-60-60zm-76 211c-41.355 0-75-33.645-75-75s33.645-75 75-75 75 33.645 75 75-33.645 75-75 75zm86-146c-8.285 0-15-6.715-15-15s6.715-15 15-15 15 6.715 15 15-6.715 15-15 15zm0 0" />
            <path d="M377 0H135C60.562 0 0 60.563 0 135v242c0 74.438 60.563 135 135 135h242c74.438 0 135-60.563 135-135V135C512 60.562 451.437 0 377 0zm45 332c0 49.625-40.375 90-90 90H180c-49.625 0-90-40.375-90-90V180c0-49.625 40.375-90 90-90h152c49.625 0 90 40.375 90 90zm0 0" /></svg></a>
        <a href="#"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M23.994 24v-.001H24v-8.802c0-4.306-.927-7.623-5.961-7.623-2.42 0-4.044 1.328-4.707 2.587h-.07V7.976H8.489v16.023h4.97v-7.934c0-2.089.396-4.109 2.983-4.109 2.549 0 2.587 2.384 2.587 4.243V24zM.396 7.977h4.976V24H.396zM2.882 0C1.291 0 0 1.291 0 2.882s1.291 2.909 2.882 2.909 2.882-1.318 2.882-2.909A2.884 2.884 0 002.882 0z" /></svg></a>
      </div>
    </div>
    <div class="card-section" id="experience">
      <div class="card-content">
        <div class="card-subtitle">WORK EXPERIENCE</div>
        <div class="card-timeline">
          <div class="card-item" data-year="2014">
            <div class="card-item-title">Front-end Developer at <span>JotForm</span></div>
            <div class="card-item-desc">Disrupt stumptown retro everyday carry unicorn.</div>
          </div>
          <div class="card-item" data-year="2016">
            <div class="card-item-title">UI Developer at <span>GitHub</span></div>
            <div class="card-item-desc">Developed new conversion funnels and disrupt.</div>
          </div>
          <div class="card-item" data-year="2018">
            <div class="card-item-title">Illustrator at <span>Google</span></div>
            <div class="card-item-desc">Onboarding illustrations for App.</div>
          </div>
          <div class="card-item" data-year="2020">
            <div class="card-item-title">Full-Stack Developer at <span>CodePen</span></div>
            <div class="card-item-desc">Responsible for the encomposing brand expreience.</div>
          </div>
        </div>
      </div>
    </div>
    <div class="card-section" id="contact">
      <div class="card-content">
        <div class="card-subtitle">CONTACT</div>
        <div class="card-contact-wrapper">
          <div class="card-contact">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
              <circle cx="12" cy="10" r="3" /></svg>
            Jalan Mandor Naiman, Bogor, 16710
          </div>
          <div class="card-contact">
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z" /></svg>(+62) 8569478xxxx</div>
          <div class="card-contact">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
              <path d="M22 6l-10 7L2 6" /></svg>
            contact@seotechman.com
          </div>
          <button class="contact-me">WORK TOGETHER</button>
        </div>
      </div>
    </div>
    <div class="card-buttons">
      <button data-section="#about" class="is-active">ABOUT</button>
      <button data-section="#experience">EXPERIENCE</button>
      <button data-section="#contact">CONTACT</button>
    </div>
  </div>
</div>

Jika sudah, simpan terlebih dulu kode HTML di atas pada notepad Anda sebelum memasangnya.

Style CSS

Buat kembali atau tambahkan elemen untuk style CSS nya. Perhatikan contoh kode lengkapnya di bawah ini:

              
                @import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500|Jost:400,500,600&display=swap");
* {
  box-sizing: border-box;
}
body {
  color: #2b2c48;
  font-family: "Jost", sans-serif;
  background-image: url(https://cdn.staticaly.com/gh/Seo90/underman/df866c97/virm.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 100vh;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
}
.card {
  max-width: 340px;
  margin: auto;
  overflow-y: auto;
  position: relative;
  z-index: 1;
  overflow-x: hidden;
  background-color: white;
  display: -webkit-box;
  display: flex;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  border-radius: 10px;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2);
}
.card[data-state="#about"] {
  height: 450px;
}
.card[data-state="#about"] .card-main {
  padding-top: 0;
}
.card[data-state="#contact"] {
  height: 430px;
}
.card[data-state="#experience"] {
  height: 550px;
}
.card.is-active .card-header {
  height: 80px;
}
.card.is-active .card-cover {
  height: 100px;
  top: -50px;
}
.card.is-active .card-avatar {
  -webkit-transform: none;
          transform: none;
  left: 20px;
  width: 50px;
  height: 50px;
  bottom: 10px;
}
.card.is-active .card-fullname,
.card.is-active .card-jobtitle {
  left: 86px;
  -webkit-transform: none;
          transform: none;
}
.card.is-active .card-fullname {
  bottom: 18px;
  font-size: 19px;
}
.card.is-active .card-jobtitle {
  bottom: 16px;
  letter-spacing: 1px;
  font-size: 10px;
}
.card-header {
  position: relative;
  display: -webkit-box;
  display: flex;
  height: 200px;
  flex-shrink: 0;
  width: 100%;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.card-header * {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.card-cover {
  width: 100%;
  height: 100%;
  position: absolute;
  height: 160px;
  top: -20%;
  left: 0;
  will-change: top;
  background-size: cover;
  background-position: center;
  -webkit-filter: blur(30px);
          filter: blur(30px);
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.card-avatar {
  width: 100px;
  height: 100px;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  -o-object-position: center;
     object-position: center;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-64px);
          transform: translateX(-50%) translateY(-64px);
}
.card-fullname {
  position: absolute;
  bottom: 0;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  -webkit-transform: translateY(-10px) translateX(-50%);
          transform: translateY(-10px) translateX(-50%);
  left: 50%;
}
.card-jobtitle {
  position: absolute;
  bottom: 0;
  font-size: 11px;
  white-space: nowrap;
  font-weight: 500;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-7px);
          transform: translateX(-50%) translateY(-7px);
}
.card-main {
  position: relative;
  -webkit-box-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: flex;
  padding-top: 10px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}
.card-subtitle {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 8px;
}
.card-content {
  padding: 20px;
}
.card-desc {
  line-height: 1.6;
  color: #636b6f;
  font-size: 14px;
  margin: 0;
  font-weight: 400;
  font-family: "DM Sans", sans-serif;
}
.card-social {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  padding: 0 20px;
  margin-bottom: 30px;
}
.card-social svg {
  fill: #a5b5ce;
  width: 16px;
  display: block;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.card-social a {
  color: #8797a1;
  height: 32px;
  width: 32px;
  border-radius: 50%;
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  background-color: rgba(93, 133, 193, 0.05);
  border-radius: 50%;
  margin-right: 10px;
}
.card-social a:hover svg {
  fill: #637faa;
}
.card-social a:last-child {
  margin-right: 0;
}
.card-buttons {
  display: -webkit-box;
  display: flex;
  background-color: #fff;
  margin-top: auto;
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  left: 0;
}
.card-buttons button {
  -webkit-box-flex: 1;
          flex: 1 1 auto;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background: 0;
  font-size: 13px;
  border: 0;
  padding: 15px 5px;
  cursor: pointer;
  color: #5c5c6d;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  font-family: "Jost", sans-serif;
  font-weight: 500;
  outline: 0;
  border-bottom: 3px solid transparent;
}
.card-buttons button.is-active, .card-buttons button:hover {
  color: #2b2c48;
  border-bottom: 3px solid #09f;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(127, 199, 231, 0)), color-stop(44%, rgba(207, 204, 255, 0.2)), to(rgba(211, 226, 255, 0.4)));
  background: linear-gradient(to bottom, rgba(127, 199, 231, 0) 0%, rgba(207, 204, 255, 0.2) 44%, rgba(211, 226, 255, 0.4) 100%);
}
.card-section {
  display: none;
}
.card-section.is-active {
  display: block;
  -webkit-animation: fadeIn 0.6s both;
          animation: fadeIn 0.6s both;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-transform: translatey(40px);
            transform: translatey(40px);
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-transform: translatey(40px);
            transform: translatey(40px);
  }
  100% {
    opacity: 1;
  }
}
.card-timeline {
  margin-top: 30px;
  position: relative;
}
.card-timeline:after {
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(134, 214, 243, 0)), to(#516acc));
  background: linear-gradient(to top, rgba(134, 214, 243, 0) 0%, #516acc 100%);
  content: "";
  left: 42px;
  width: 2px;
  top: 0;
  height: 100%;
  position: absolute;
  content: "";
}
.card-item {
  position: relative;
  padding-left: 60px;
  padding-right: 20px;
  padding-bottom: 30px;
  z-index: 1;
}
.card-item:last-child {
  padding-bottom: 5px;
}
.card-item:after {
  content: attr(data-year);
  width: 10px;
  position: absolute;
  top: 0;
  left: 37px;
  width: 8px;
  height: 8px;
  line-height: 0.6;
  border: 2px solid #fff;
  font-size: 11px;
  text-indent: -35px;
  border-radius: 50%;
  color: rgba(134, 134, 134, 0.7);
  background: -webkit-gradient(linear, left top, left bottom, from(#a0aee3), to(#516acc));
  background: linear-gradient(to bottom, #a0aee3 0%, #516acc 100%);
}
.card-item-title {
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 5px;
}
.card-item-desc {
  font-size: 13px;
  color: #6f6f7b;
  line-height: 1.5;
  font-family: "DM Sans", sans-serif;
}
.card-contact-wrapper {
  margin-top: 20px;
}
.card-contact {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  font-size: 13px;
  color: #6f6f7b;
  font-family: "DM Sans", sans-serif;
  line-height: 1.6;
  cursor: pointer;
}
.card-contact + .card-contact {
  margin-top: 16px;
}
.card-contact svg {
  flex-shrink: 0;
  width: 30px;
  min-height: 34px;
  margin-right: 12px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  padding-right: 12px;
  border-right: 1px solid #dfe2ec;
}
.contact-me {
  border: 0;
  outline: none;
  background: linear-gradient(to right,#735ce7,#acc3ff);
  box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.15);
  color: #fff;
  padding: 12px 16px;
  width: 100%;
  border-radius: 5px;
  margin-top: 25px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  font-family: "Jost", sans-serif;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
              
            

Simpan kembali di notepad Anda.

Javascript

Tambahkan Javascript untuk interaksi menu yang ada pada profil card. Anda bisa lihat contoh kode berikut ini:

const buttons = document.querySelectorAll(".card-buttons button");
const sections = document.querySelectorAll(".card-section");
const card = document.querySelector(".card");
const handleButtonClick = e => {
  const targetSection = e.target.getAttribute("data-section");
  const section = document.querySelector(targetSection);
  targetSection !== "#about" ?
  card.classList.add("is-active") :
  card.classList.remove("is-active");
  card.setAttribute("data-state", targetSection);
  sections.forEach(s => s.classList.remove("is-active"));
  buttons.forEach(b => b.classList.remove("is-active"));
  e.target.classList.add("is-active");
  section.classList.add("is-active");
};
buttons.forEach(btn => {
  btn.addEventListener("click", handleButtonClick);
});

Pastikan Anda menyimpan ketiga file tersebut dalam satu direktori!

Langkah terakhir yaitu, lihat bagaimana hasilnya dengan membukanya melalui browser Anda masing-masing.

Note:

Anda dapat mengubah warna, ukuran background, ukuran gambar untuk profil card tersebut, dan efek-efek lainnya. Sesuaikan dengan kebutuhan desain Anda.

Demikian tutorial cara membuat profil card dengan antarmuka yang keren ini saya buat dengan sebenar-benarnya. Semua kode-kode di atas sudah di uji coba terlebih dulu sebelum saya membagikannya kepada Anda.

Semoga tutorial kali ini bermanfaat untuk Semuanya! Dan saya ucapkan terimakasih sudah berkunjung dan membaca blog sederhana ini.

Artikel ini pertama kali tayang di w3bdav pada Sabtu, 07/12/2024.