Hello developers, today in this blog you’ll learn to create a Responsive Business Card Design with Flip Animation using only HTML & CSS.
A business card is one of the most important thing to a business by which you can provide the company’s contact to the viewers. You can also use hyperlinks to navigate viewers to your other websites.
In this blog (Responsive Business Card Design with Flip Animation), there is a business card with a company’s description and when you hover the card there are contact icons and the buttons for contact and to redirect the viewers to your other websites.
The logo of the company
is placed at the left top of the card, an image with the company name is placed
at the top of the card. The logo and the image of the company are made to be
fixed.
This flip animation is made only by using HTML & CSS code and this card is responsive for any device. We have used the CSS transform property to make the Business Card content rotate.
The source code of this Responsive Business Card Design with Flip Animation is given below, if you want the source code of this program, you can copy it. You can use this Business card design with your creativity and can take this card to the next level.
Responsive Business Card Design with Flip Animation [Source Code]
To make this website (Responsive Business Card Design with Flip Animation), you need to create two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
CSS provides style to an
HTML page. To make the page attractive create a CSS file with the name
style.css and remember that you have to create a file with a .css extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
body{
margin: 0px;
padding: 0px;
text-align: center;
font-family: Arial;
background: #DCE35B;
background: -webkit-linear-gradient(to left, #45B649, #DCE35B);
background: linear-gradient(to left, #45B649, #DCE35B);
}
img{
background: #000;
}
.logo{
width: 120px;
height: 120px;
border-radius: 50%;
margin: 50px 330px 0 0;
border: 5px solid #1f1a32;
position: relative;
z-index: 1;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.card{
width: 300px;
height: 430px;
border-radius: 12px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
overflow: hidden;
display: inline-block;
background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.upper{
height: 150px;
background-image: url("https://cdn.pixabay.com/photo/2020/12/29/11/51/hand-5870353__340.jpg");
background-size: 50%;
width: 600px;
background-repeat: no-repeat;
border-radius: 10px;
}
.rotate{
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 1s;
margin-left: -10px;
margin-top: 10px;
transform-style: preserve-3d;
}
.front{
height: 280px;
padding: 10px;
text-align: center;
margin: -20px 0 0 0;
}
h1, h4{
box-sizing: border-box;
line-height: 0.6;
}
h4{
color: #000;
opacity: 0.6;
font-weight: bold;
}
.front p{
font-size: 16px;
color: #000;
margin-bottom: 30px;
max-width: 90%;
margin-left: 20px;
}
.card:hover .rotate {
transform: rotateX(180deg);
}
.front, .back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.back {
transform: rotateX(180deg);
}
.content{
width: 100%;
padding: 50px;
margin-left: -45px;
margin-top: -70px;
}
.social-icons a{
position: relative;
height: 40px;
width: 40px;
margin: 50px 5px;
display: inline-flex;
text-decoration: none;
border-radius: 50%;
background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.social-icons a:hover::before{
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 50%;
background: #ecf0f3;
}
.social-icons a i{
position: relative;
z-index: 3;
text-align: center;
width: 100%;
height: 100%;
line-height: 40px;
color: #000;
}
.buttons{
position: relative;
cursor: pointer;
margin: -10px 0;
}
.buttons a:first-child{
margin-right: 20px;
padding : 10px;
border-radius:15px;
color:#000;
text-decoration: none;
text-align: center;
font-weight: 600;
background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.buttons a:last-child{
margin-left: 20px;
padding : 10px;
border-radius:15px;
text-decoration: none;
color:#000;
width:80px;
text-align: center;
font-weight: 600;
background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}We hope you would like this Responsive Business Card Design with Flip Animation using only HTML & CSS.
Thank you for reading our blog. If you face any problem in creating this Responsive Business Card Design with Flip Animation using only HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team