This blog will show you how to make a profile card design with a hover effect using HTML and CSS. Profile card is used for a short introduction for a specific person.
Full video tutorial: https://youtu.be/9XXMJAuquCI
Note: Copy the code and make your own design. Also, go to our YouTube channel for more useful content.
Source code
👉 HTML
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Info-card</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" /></head><body> <div class="main"> <div class="card"> <div class="img-box"> <img src="img/p1.jpg" alt=""> </div> <div class="detail"> <div class="content"> <h2>Alex</h2> <span>Front-web developer</span> <div class="social-link"> <a href="#" class="link"><i class="fa fa-instagram" aria-hidden="true"></i></a> <a href="#" class="link"><i class="fa fa-github" aria-hidden="true"></i></a> <a href="#" class="link"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a> </div> </div> </div> </div> <div class="card"> <div class="img-box"> <img src="img/p2.jpg" alt=""> </div> <div class="detail"> <div class="content"> <h2>Jeni</h2> <span>Android developer</span> <div class="social-link"> <a href="#" class="link"><i class="fa fa-instagram" aria-hidden="true"></i></a> <a href="#" class="link"><i class="fa fa-github" aria-hidden="true"></i></a> <a href="#" class="link"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a> </div> </div> </div> </div> <div class="card"> <div class="img-box"> <img src="img/p3.jpg" alt=""> </div> <div class="detail"> <div class="content"> <h2>Roman</h2> <span>UI/UX designer</span> <div class="social-link"> <a href="#" class="link"><i class="fa fa-instagram" aria-hidden="true"></i></a> <a href="#" class="link"><i class="fa fa-github" aria-hidden="true"></i></a> <a href="#" class="link"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a> </div> </div> </div> </div> <div class="card"> <div class="img-box"> <img src="img/p4.jpg" alt=""> </div> <div class="detail"> <div class="content"> <h2>Max</h2> <span>Back-end developer</span> <div class="social-link"> <a href="#" class="link"><i class="fa fa-instagram" aria-hidden="true"></i></a> <a href="#" class="link"><i class="fa fa-github" aria-hidden="true"></i></a> <a href="#" class="link"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a> </div> </div> </div> </div> </div></body></html>👉 CSS
*{ margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif;}body{ display: flex; justify-content: center; align-items: center; min-height: 100vh;}.main{ position: relative; width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}.card{ position: relative; width: 300px; height: 400px; background: linear-gradient(red 30%, black 30%); border-radius: 20px; overflow: hidden; margin: 10px;}.img-box{ position: relative; top: 0; left: 0; width: 100%; height: 100%; transition: all 0.5s; z-index: 10000; transform-origin: top;}img{ position:absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 20px;}.card:hover .img-box{ transform: translateY(30px) scale(0.5);}.detail{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: flex-end; padding-bottom: 30px; color:white;}.content{ display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;}.content h2{ font-size: 30px; font-weight: 400;}.content span{ font-size: 15px; font-weight: 400; color:red;}.social-link{ position: relative; display: flex;}.social-link a{ text-decoration: none; margin: 8px; font-size: 25px; color: white; background: rgba(255, 255, 255, 0.109); padding: 15px; border-radius: 20px;}.social-link a:hover i{ color:red;}
You can support me to like this blog and share it with your programmer friends. Go to my youtube channel scoobcode and watch the full tutorial video.
Comments
Post a Comment