Hi dear welcome to Ascode Blog . In this post we are going to learn how to make flipable css profile/portfolio card. First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it then open the file with your browser.
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>Portfolio Card Design</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<div class="card">
<div class="front">
<img src="logo.png" >
<h1>AS Code</h1>
</div>
<div class="back">
<div class="col-1">
<img src="logo.png" >
<h2>AS Code</h2>
</div>
<div class="col-2">
<div class="container">
<div class="tittle">Abdullah Sheikh</div>
<div class="profesion">Web Design & Development</div>
<div class="content">
<h3>Mobile: 0187848**38</h3>
<h3>Website: www.ascode.com</h3>
</div>
<div class="social-links">
<a href="#"><span><i class="fab fa-facebook-square"></i></span></a>
<a href="#"><span><i class="fab fa-twitter-square"></i></span></a>
<a href="#"><span><i class="fab fa-instagram-square"></i></span></a>
<a href="#"><span><i class="fab fa-linkedin"></i></span></a>
<a href="#"><span><i class="fab fa-youtube-square"></i></span></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
box-sizing: border-box;
font-style: italic;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-image: url(https://i.ytimg.com/vi/NoFfgJbkl-o/maxresdefault.jpg);
background-size: cover;
}
.card {
position: relative;
width: 600px;
height: 300px;
border-radius: 10px;
}
.card:hover .back {
transform: rotateY(0deg);
}
.card:hover .front {
transform: rotateY(180deg);
}
.back {
backface-visibility: hidden;
transform: rotateY(180deg);
transition: 0.5s ease-out;
}
.front {
position: absolute;
background: #000;
height: 300px;
width: 600px;
border-radius: 10px;
justify-content: center;
align-items: center;
text-align: center;
backface-visibility: hidden;
transform: rotateY(0deg);
transition: 0.5s ease-out;
z-index: 2;
}
.front img {
width: 200px;
margin-top: 5% ;
}
.front h1 {
font-size: 25px;
color: #fff;
letter-spacing: 0.5px;
margin-top: -15px;
}
.col-1 {
width: 160px;
height: 300px;
background: #000;
border-radius: 10px 0 0 10px;
float: left;
text-align: center;
}
.col-1 img {
width: 140px;
margin:0 10px;
margin-top: 20px;
}
.col-1 h2 {
font-size: 20px;
color: #fff;
margin-top: -15px;
}
.col-2 {
width: 440px;
height: 300px;
background: #fff;
border-radius: 0 10px 10px 0;
float: right;
}
.container {
margin: 20px;
}
.tittle {
font-size: 2.4rem;
color: #000;
font-weight: 500;
}
.profesion {
font-size: 1.4rem;
color: #000;
font-weight: 500;
padding: 5px 0;
border-bottom: 3px solid #000;
width: 75%;
}
.content {
margin: 20px 0;
}
.content h3{
color: #000;
font-size: 18px;
font-weight: 500;
margin: 5px 0;
}
.social-links {
margin: 20px 0;
}
.social-links a {
text-decoration: none;
}
.social-links a span {
color: #fff;
background: #000;
font-size: 20px;
margin: 5px;
padding: 4px 8px;
border-radius: 5px;
transition: 0.4s;
}
.social-links a span:hover {
background: #ff056d;
}
0 Comments