profile card html || html css card tutorial || hover card effects
profile card html || html css card tutorial || hover card effects
Hi everyone, welcome back to our channel. In this video, We’re going to show you profile card html || html css card tutorial || hover card effects.
Our channel is about coding. We cover a lot of cool stuff like HTML CSS BOOTSTRAP5 and JAVASCRIPT.
Visit Our Youtube Channel Here:
/ @skillbeginner Don't forget to like and subscribe.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen"
href="style.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/
releases/v5.15.3/
css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/
qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Card hover effects</title>
</head>
<body>
<div class="card">
<img src="man.jpg" alt="">
<h2>Full Name</h2>
<div class="cont">
<p>Short description about the person mentioned above.
Short description about the person mentioned above.
Short description about the person mentioned above.
</p>
<div class="link">
<a href="#"><i class="fab fa-codepen"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
</div>
</div>
</div>
</body>
</html>
CSS
/* Watch this video */
@import url('https://fonts.googleapis.com/css2?family=
Raleway:wght@400;500;600&display=swap');
*
{
margin:0;
padding: 0;
}
body
{
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: "Raleway", sans-serif;
background-color: rgb(240,240,240);
}
.card
{
display: flex;
flex-direction: column;
align-items: center;
border-radius: 0 0 15px 15px;
box-shadow: rgb(0,0,0,0.24) 0px 3px 8px;
width: 250px;
padding-bottom: 15px;
background-color: white;
}
.card img
{
width: 80px;
height: 80px;
border-radius: 50%;
background-image: linear-gradient(60deg, #2aaa8a,
#4169e1);
padding: 5px;
margin-top: -45px;
}
.card h2
{
margin: 10px 0;
}
.cont
{
width: 90%;
height: 0;
overflow: hidden;
text-align: center;transition: all 0.6s ease;
}
.card .cont .link i
{
font-size: 25px;
color: rgb(82,82,82);
transition: all 0.2s ease;
}
.card .cont .link i:hover
{
color: black;
cursor: pointer;
}
.card:hover > .cont
{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 150px;
}
.card:hover > .link
{
width: 40%;
display: flex;
justify-content: space-between;
}
Just copy it on your project
And Don't forget to Subscribe To my youtube channel link
Subscribe me
Tags:
cards
