CARA MEMBUAT PROFILE CARD MENGGUNAKAN HTML & CSS

January 10, 2021 - (Updated: January 09, 2023)

FERDI ANANDA

CARA MEMBUAT PROFILE CARD MENGGUNAKAN HTML & CSS - FERDIANANDA

Assalamualaikum Wr.Wb.

Selamat datang di postingan pertama di blog ini, kali ini saya akan membagikan sebuah tutorial ' CARA MEMBUAT PROFILE CARD MENGGUNAKAN HTML & CSS '

Sebelum saya mulai tutorialnya, jangan lupa siapkan kopi dan cemilan kesukaan kalian, hehehe.

Okelah langsung saja saya mulai tutorialnya ya.

1. Silahkan Buat File Dengan Nama ' index.html', Lalu Copy Code HTML nya berikut ini.

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"/>
<body>
  <div class="profile-card">
    <div class="card-header">
      <div class="pic">
        <img src="ferdiananda.png" alt="Ferdi Ananda">
      </div>
      <div class="name">Ferdi Ananda</div>
      <div class="desc">Designer & Programmer</div>
      <div class="sm">
        <a href="@" class="fab fa-facebook-f"></a>
        <a href="#" class="fab fa-twitter"></a>
        <a href="#" class="fab fa-github"></a>
        <a href="#" class="fab fa-youtube"></a>
      </div>
      <a href="#" class="contact-btn">Contact Me</a>
    </div>
    <div class="card-footer">
      <div class="numbers">
        <div class="item">
          <span>38</span>
          Posts
        </div>
        <div class="border"></div>
        <div class="item">
          <span>526</span>
          Following
        </div>
        <div class="border"></div>
        <div class="item">
          <span>5.2K</span>
          Followers
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Silahkan kalian ganti url gambar ' FerdiAnanda.png ' dengan foto profil anda.

2. Silahkan buat file baru lagi dengan nama ' style.css ', lalu masukkan code CSS dibawah ini.

*{
  margin: 0;
  padding: 0;
  font-family: "Ubuntu", sans-serif;
  box-sizing: border-box;
  text-decoration: none;
}

body{
  height: 100vh;
  background: url(bg.jpg) no-repeat center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-card{
  width: 400px;
  text-align: center;
  border-radius: 8px;
  overflow: hidden;
}

.card-header{
  background: #2c3a47;
  padding: 60px 40px;
}

.pic{
  display: inline-block;
  padding: 8px;
  background: linear-gradient(130deg, #74b9ff, #e66767);
  margin: auto;
  border-radius: 50%;
  background-size: 200% 200%;
  animation: animated-gradient 2s linear infinite;
}

@keyframes animated-gradient{
  25%{
    background-position: left bottom;
  }
  50%{
    background-position: right bottom;
  }
  75%{
    background-position: right top;
  }
  100%{
    background-position: left top;
  }
}

.pic img{
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.name{
  color: #f2f2f2;
  font-size: 28px;
  font-weight: 600;
  margin: 10px 0;
}

.desc{
  font-size: 18px;
  color: #e66767;
}

.sm{
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.sm a{
  color: #f2f2f2;
  width: 56px;
  font-size: 22px;
  transition: .3s linear;
}

.sm a:hover{
  color: #e66767;
}

.contact-btn{
  display: inline-block;
  padding: 12px 50px;
  color: #e66767;
  border: 2px solid #e66767;
  border-radius: 6px;
  margin-top: 16px;
  transition: .3s linear;
}

.contact-btn:hover{
  background: #e66767;
  color: #f2f2f2;
}

.card-footer{
  background: #f4f4f4;
  padding: 60px 10px;
}

.numbers{
  display: flex;
  align-items: center;
}

.item{
  flex: 1;
  text-transform: uppercase;
  font-size: 13px;
  color: #e66767;
}

.item span{
  display: block;
  color: #2c3a47;
  font-size: 30px;
}

.border{
  width: 1px;
  height: 30px;
  background: #bbb;
}

Tambahkan dua foto, yang pertama foto profil anda, yang kedua foto background. Untuk foto profilnya kasih nama file ' namakamu.png ' contoh ' ferdiananda.png ', lalu untuk foto backgroundnya kasih nama ' bg.jpg '.

Silahkan download file Zip nya dibawah ini

Demo Klik disini

Download Klik disini

Kalau sudah, silahkan simpan file tersebut, lalu buka file index nya melalui localhost atau web server kalian.

Jika ada pertanyaan silahkan tanyakan saja di kolom komentar dibawah, nanti akan saya balas.

Sekian dulu postingan kali ini, jika ada salah ketik/kesalahan, mohon dimaklumi karena saya masih belajar menulis di blog.

Nantikan konten-konten berikutnya dari saya, stay tune

Saya sudahi dengan,

Wassalamu'alaikum wr.wb.