Cara Membuat Profil Card Responsive di Blog (HTML + CSS)
Salam pengetahuan.
Di artikel kali ini, saya akan membagikan tutorial bagaimana cara membuat Profil Card yang keren dan menarik tentunya.
Profil Card sangat berguna untuk memperkenalkan diri sendiri di blog yang kamu miliki. Terlebih lagi, ini sangat bermanfaat untuk kamu yang memiliki website perusahaan. Dalam designya, tentu saja terdapat profil orang-orang yang berpengaruh di dalamnya, seperti CEO, CTO, dll.
Profil Card di tutorial ini dibalut dengan HTML dan CSS sederhana, sehingga sangat mudah untuk diikuti. Kelebihan lainya adalah disaignya dibuat dengan Display Flex yang membuatnya menjadi responsive. Jadi, hasilnya nanti dapat menyesuaikan ketika membuka di layar ukuran Mobile Phone, Tablet maupun PC tanpa memaksa ukurannya.
Tutorial ini juga berguna bagi teman-teman yang ingin memperdalam skill HTML dan CSS mu agar lebih terbiasa. Dimana keduanya merupakan fundamental dasar dalam pengembangan Website.
Bagi kamu yang pengen ngeliat bagaimana bentuknya, lihat gambar di bawah ini
 |
| Tampilan pada Mobile Phone dan Tablet |
 |
| Tampilan pada Dekstop PC |
Bagaimana sangat kerenkan? Profil Card ini bergay Neumorphism yang membawa konsep abu-abu nan elegant.
Nah, bagaimana cara pembuatannya? Yuk simak
Cara Membuat Profil Card HTML dan CSS (Neumorphism)
1. Copy dan Paste HTML Untuk Kerangkanya
Pertama, salin HTML di bawah ini. lalu, letakan di dalam salah satu postingan / Halaman dalam tampilan HTML bukan tampilan Menulis.
Untuk teman-teman yang ingin memperdalam skill html disarankan untuk menulisnya bukan disalin.
Berikut codenya :
<div class="ding"><i class="fas fa-user"></i> Team Members </div>
<div class="profilcard">
<div class="wrapper">
<div class="img-area">
<div class="inner-area">
<img alt="logo" height="20px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-xKYT5QMIYy4Mcb_m7p6z_Jbd0_8Ak9XZjadp6hI3d-omq_G-4m7ia70g5FIPCG6UXLWhytLbgVtWRRdarq5LIfLYBt6Psw6hRROd23UjNjY9fWrXAcmwqunvQi8aVOGrUMBUTikV2zE/'" width="20px" />
</div>
</div>
<div class="name" data-aos="fade-down"><b>Andri</b> Rahmadani</div>
<div class="about" data-aos="fade-up">Founder, CEO</div>
<p style="text-align: center;"><span style="font-size: large;">"</span>Bersungguh-sungguhlah mempelajari hal yang dirasa bermanfaat<span style="font-size: large;">"</span></p><div class="social-icons">
<a class="fb" href="https://www.facebook.com/profile.php?id=100013388593648"><i class="fab fa-facebook-f" rel="nofollow"></i></a>
<a class="insta" href="https://www.instagram.com/gaamee01/" rel="nofollow"><i class="fab fa-instagram"></i></a>
</div>
<div class="buttons">
<button><a href="http://mywa.link/re8zgmhn" rel="nofollow">Message</a></button>
<button><a href="https://www.instagram.com/gaamee01/" rel="nofollow"> Subscribe</a></button>
</div>
<div class="social-share">
<div class="row">01 Des</div>
<div class="row">BJM</div>
<div class="row">Indonesia</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="inner-area">
<img alt="logo" height="20px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-xKYT5QMIYy4Mcb_m7p6z_Jbd0_8Ak9XZjadp6hI3d-omq_G-4m7ia70g5FIPCG6UXLWhytLbgVtWRRdarq5LIfLYBt6Psw6hRROd23UjNjY9fWrXAcmwqunvQi8aVOGrUMBUTikV2zE/'" width="20px" />
</div>
</div>
<div class="name" data-aos="fade-down"><b>M. Kaspul </b>Anwar</div>
<div class="about" data-aos="fade-up">Co-Founder, CTO</div>
<p style="text-align: center;"><span style="font-size: large;">"</span><span>We Do What We Want Because We Can</span><span style="font-size: large;">"</span></p><br /><div class="social-icons">
<a class="fb" href="https://m.facebook.com/profile.php?id=100055081038640&ref=content_filter"><i class="fab fa-facebook-f" rel="nofollow"></i></a>
<a class="insta" href="https://www.instagram.com/mkasplanwr/" rel="nofollow"><i class="fab fa-instagram"></i></a>
</div>
<div class="buttons">
<button><a href="mywa.link/7arp0mpx" rel="nofollow">Message</a></button>
<button><a href="https://www.instagram.com/mkasplanwr/" rel="nofollow"> Subscribe</a></button>
</div>
<div class="social-share">
<div class="row">17 Juni</div>
<div class="row">BJM</div>
<div class="row">Indonesia</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="inner-area">
<img alt="logo" height="20px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-xKYT5QMIYy4Mcb_m7p6z_Jbd0_8Ak9XZjadp6hI3d-omq_G-4m7ia70g5FIPCG6UXLWhytLbgVtWRRdarq5LIfLYBt6Psw6hRROd23UjNjY9fWrXAcmwqunvQi8aVOGrUMBUTikV2zE/'" width="20px" />
</div>
</div>
<div class="name" data-aos="fade-down"><b>M. Iskandar </b>Jailani</div>
<div class="about" data-aos="fade-up">Co-Founder, CFO</div>
<p style="text-align: center;"><span style="font-size: large;">"</span>Just do it and just duit<span style="font-size: large;">"</span></p><br /><br /><div class="social-icons">
<a class="insta" href="https://www.instagram.com/isknjai/" rel="nofollow"><i class="fab fa-instagram"></i></a>
</div>
<div class="buttons">
<button><a href="mywa.link/bhp9lq11" rel="nofollow">Message</a></button>
<button><a href="https://t.me/KolektorKoin" rel="nofollow"> Subscribe</a></button>
</div>
<div class="social-share">
<div class="row">02 jan</div>
<div class="row">BJM</div>
<div class="row">Indonesia</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="inner-area">
<img alt="logo" height="20px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-xKYT5QMIYy4Mcb_m7p6z_Jbd0_8Ak9XZjadp6hI3d-omq_G-4m7ia70g5FIPCG6UXLWhytLbgVtWRRdarq5LIfLYBt6Psw6hRROd23UjNjY9fWrXAcmwqunvQi8aVOGrUMBUTikV2zE/'" width="20px" />
</div>
</div>
<div class="name" data-aos="fade-down"><b>Eko </b>Nurmahdi</div>
<div class="about" data-aos="fade-up">Writer</div>
<p style="text-align: center;"><span style="font-size: large;">"</span><span>You Dont Become A Star Until You Get The Scar</span><span style="font-size: large;">"</span></p><br /><div class="social-icons">
<a class="insta" href="https://www.instagram.com/isknjai/" rel="nofollow"><i class="fab fa-instagram"></i></a>
</div>
<div class="buttons">
<button><a href="mywa.link/bhp9lq11" rel="nofollow">Message</a></button>
<button><a href="https://t.me/KolektorKoin" rel="nofollow"> Subscribe</a></button>
</div>
<div class="social-share">
<div class="row">05 Agu</div>
<div class="row">JAWA</div>
<div class="row">Indonesia</div>
</div>
</div>Catatan :
1. Pada bagian code
<div class="name" data-aos="fade-down"><b>Andri</b> Rahmadani</div>
<div class="about" data-aos="fade-up">Founder, CEO</div>Ubah kata yang bertanda kuning tersebut dengan nama tim dan jabatan members kalian
2. Pada bagian code
<div class="img-area">
<div class="inner-area">
<img alt="logo" height="20px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-xKYT5QMIYy4Mcb_m7p6z_Jbd0_8Ak9XZjadp6hI3d-omq_G-4m7ia70g5FIPCG6UXLWhytLbgVtWRRdarq5LIfLYBt6Psw6hRROd23UjNjY9fWrXAcmwqunvQi8aVOGrUMBUTikV2zE/'" width="20px" />
</div>
</div> Ubah bagian yang bertanda kuning untuk gambar/poto tim.
3. Pada bagian code
<div class="row">01 Des</div>
<div class="row">BJM</div>
<div class="row">Indonesia</div>Ubah kata yang bertanda kuning tersebut dengan Tgl lahir, Tempat lahir.
4. Pada code bagian
<p style="text-align: center;"><span style="font-size: large;">"</span>Bersungguh-sungguhlah mempelajari hal yang dirasa bermanfaat<span style="font-size: large;">"</span></p>Ubah yang bertanda kuning untuk Quetes anggota tim.
5. Pada code bagian,
<a class="fb" href="https://www.facebook.com/profile.php?id=100013388593648"><i class="fab fa-facebook-f" rel="nofollow"></i></a>
<a class="insta" href="https://www.instagram.com/gaamee01/" rel="nofollow"><i class="fab fa-instagram"></i></a> Ubah yang bertanda kuning untuk Link media sosial Facebook dan Instagram.
6. Pada code bagian
<div class="buttons">
<button><a href="http://mywa.link/re8zgmhn" rel="nofollow">Message</a></button>
<button><a href="https://www.instagram.com/gaamee01/" rel="nofollow"> Subscribe</a></button>
</div>Ubah yang bertanda kuning untuk Link WA, kanal Youtube (jika ada).
7. Kode di atas hanya untuk 3 Anggota tim, jika ingin menambahkan anggota lagi, tambahkan code di bawah ini sebelum kode </div> yang terakhir
<div class="wrapper">
<div class="img-area">
<div class="inner-area">
<img alt="logo" height="20px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-xKYT5QMIYy4Mcb_m7p6z_Jbd0_8Ak9XZjadp6hI3d-omq_G-4m7ia70g5FIPCG6UXLWhytLbgVtWRRdarq5LIfLYBt6Psw6hRROd23UjNjY9fWrXAcmwqunvQi8aVOGrUMBUTikV2zE/'" width="20px" />
</div>
</div>
<div class="name" data-aos="fade-down"><b>Andri</b> Rahmadani</div>
<div class="about" data-aos="fade-up">Founder, CEO</div>
<p style="text-align: center;"><span style="font-size: large;">"</span>Bersungguh-sungguhlah mempelajari hal yang dirasa bermanfaat<span style="font-size: large;">"</span></p><div class="social-icons">
<a class="fb" href="https://www.facebook.com/profile.php?id=100013388593648"><i class="fab fa-facebook-f" rel="nofollow"></i></a>
<a class="insta" href="https://www.instagram.com/gaamee01/" rel="nofollow"><i class="fab fa-instagram"></i></a>
</div>
<div class="buttons">
<button><a href="http://mywa.link/re8zgmhn" rel="nofollow">Message</a></button>
<button><a href="https://www.instagram.com/gaamee01/" rel="nofollow"> Subscribe</a></button>
</div>
<div class="social-share">
<div class="row">01 Des</div>
<div class="row">BJM</div>
<div class="row">Indonesia</div>
</div>
</div>2. Tambahkan CSS Untuk Designnya
Berikut Code CSS nya :
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
.ding {
font-size: 1.3rem;
color: #2c2c2c;
font-weight: 500;
display: flex;
align-items: center;
margin: 20px;
}
.ding i{
background-color: #507bfc;
box-shadow: 2px 5px 30px rgba(80,123,252,0.4);
color: #ffffff;
width:40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.9rem;
margin: 0px 20px;
}
.profilcard {
position: relative;
display: flex;
justify-content: center;
max-width: 1200px;
flex-wrap: wrap;
z-index: 1;
align-items: center;
}
.wrapper,
.wrapper .img-area,
.social-icons a,
.buttons button{
background: #ecf0f3;
box-shadow: -3px -3px 7px #ffffff,
3px 3px 5px #ceced1;
width: 100%;
}
.profil {
background: #ecf0f3;
box-shadow: inset -3px -3px 7px #ffffff,
inset 3px 3px 5px #ceced1;
border:1px solid transparent;
padding :5px;
border-radius: 12px;
}
.wrapper{
position: relative;
padding: 30px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width:320px;
margin: 10px;
}
.wrapper .icon{
font-size: 17px;
color: #31344b;
position: absolute;
cursor: pointer;
opacity: 0.7;
top: 15px;
height: 35px;
width: 35px;
text-align: center;
line-height: 35px;
border-radius: 50%;
font-size: 16px;
}
.wrapper .icon i{
position: relative;
z-index: 9;
}
.wrapper .icon.arrow{
left: 15px;
}
.wrapper .icon.dots{
right: 15px;
}
.wrapper .img-area{
height: 80px;
width: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.img-area .inner-area{
height: calc(100% - 25px);
width: calc(100% - 25px);
border-radius: 50%;
}
.inner-area img{
height: 100%;
width: 100%;
border-radius: 50%;
object-fit: cover;
}
.wrapper .name{
font-size: 23px;
font-weight: 500;
color: #31344b;
margin: 10px 0 5px 0;
}
.wrapper .about{
color: #44476a;
font-weight: 400;
font-size: 16px;
}
.wrapper .social-icons{
margin: 15px 0 25px 0;
}
.social-icons a{
position: relative;
height: 40px;
width: 40px;
margin: 0 5px;
display: inline-flex;
text-decoration: none;
border-radius: 50%;
}
.social-icons a:hover::before,
.wrapper .icon:hover::before,
.buttons button:hover:before{
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 50%;
background: #ecf0f3;
box-shadow: inset -3px -3px 7px #ffffff,
inset 3px 3px 5px #ceced1;
}
.buttons button:hover:before{
z-index: -1;
border-radius: 5px;
}
.social-icons a i{
position: relative;
z-index: 3;
text-align: center;
width: 100%;
height: 100%;
line-height: 40px;
}
.social-icons a.fb i{
color: #4267B2;
}
.res{
overflow-x:auto;
}
.social-icons a.twitter i{
color: #1DA1F2;
}
.social-icons a.insta i{
color: #E1306C;
}
.social-icons a.yt i{
color: #ff0000;
}
.wrapper .buttons{
display: flex;
width: 100%;
justify-content: space-between;
}
.buttons button{
position: relative;
width: 100%;
border: none;
outline: none;
padding: 12px 0;
color: #31344b;
font-size: 17px;
font-weight: 400;
border-radius: 5px;
cursor: pointer;
z-index: 4;
}
.buttons button:first-child{
margin-right: 10px;
}
.buttons button:last-child{
margin-left: 10px;
}
.wrapper .social-share{
display: flex;
width: 100%;
margin-top: 30px;
padding: 0 5px;
justify-content: space-between;
}
.social-share .row{
color: #31344b;
font-size: 17px;
cursor: pointer;
position: relative;
}
.social-share .row::before{
position: absolute;
content: "";
height: 100%;
width: 2px;
background: #e0e6eb;
margin-left: -25px;
}
.row:first-child::before{
background: none;
}
.social-share .row i.icon-2{
position: absolute;
left: 0;
top: 50%;
color: #31344b;
transform: translateY(-50%);
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
}
.row:nth-child(1):hover i.fa-heart,
.row:nth-child(2):hover i.fa-comment{
opacity: 1;
pointer-events: auto;
}
Selesai. Pembuatan Profil Cardnya sudah selesai kamu buat. Untuk membuatnya lebih menarik lagi, mungkin kamu tertarik untuk mengikuti tutorial selanjutnya yaitu memberi efek animasi pada profil.
3. Tambahkan Efek Animasi Biar Keren
Nah, supaya keren, kita akan menggunakan efek animasi dari AOS - Animated On Scroll Library yang berguna ketika kita menscroll maka akan ada efek animasi seperti Fade, Zoom, Dll. Di Card ini, saya akan memake efek fade-up dan fade-down.
Seperti apa caranya? ada 3 steps yang harus kamu ikuti, yaitu :
1. Mari salin code Js dan CSS di bawah ini. Lalu, pastekan di Theme >> edit Html >> Letakan di atas tag </head>
•Java Script :
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">•CSS :
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>2. Setelah melakukan cara yang di atas, selanjutnya, salin code js pendukung ini, lalu letakan di halaman/postingan melalui mode Html bukan mode menulis. (letakan di atas / di bawah, sama saja)
<script> AOS.init(); </script>
Penutup
Demikian cara membuat profil Card Neumorphism di blogger dengan Html dan Css. Tutorial ini mungkin kelihatan agak ribet, tetapi sebenarnya tidak sama sekali, asalkan kamu mengikuti tutorial ini dengan seksama. Jika kamu punya pertanyaan, silahkan bertanya di kolom komentar di bawah ini.
Semoga berhasil!
Posting Komentar