How To Create Master Card in use Html & Css Master Card animation Project || html and css से Master Card कैसे बनाये
How To Create Master Card in use Html & Css Master Card animation Project || html and css से Master Card कैसे बनाये
HTML Code
</head>CSS Code
<style>
/* Google Font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
section {
position: relative;
min-height: 100vh;
width: 100%;
background: #121321;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
perspective: 1000px;
}
section::before {
content: "";
position: absolute;
height: 240px;
width: 240px;
border-radius: 50%;
transform: translate(-150px, -100px);
background: linear-gradient(90deg, #9c27b0, #f3f5f5);
}
section::after {
content: "";
position: absolute;
height: 240px;
width: 240px;
border-radius: 50%;
transform: translate(150px, 100px);
background: linear-gradient(90deg, #9c27b0, #f3f5f5);
}
.container {
position: relative;
height: 225px;
width: 375px;
z-index: 100;
transition: 0.6s;
transform-style: preserve-3d;
}
.container:hover {
transform: rotateY(180deg);
}
.container .card {
position: absolute;
height: 100%;
width: 100%;
padding: 25px;
border-radius: 25px;
backdrop-filter: blur(25px);
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.1);
backface-visibility: hidden;
}
.front-face header,
.front-face .logo {
display: flex;
align-items: center;
}
.front-face header {
justify-content: space-between;
}
.front-face .logo img {
width: 48px;
margin-right: 10px;
}
h5 {
font-size: 16px;
font-weight: 400;
}
.front-face .chip {
width: 50px;
}
.front-face .card-details {
display: flex;
margin-top: 40px;
align-items: flex-end;
justify-content: space-between;
}
h6 {
font-size: 10px;
font-weight: 400;
}
h5.number {
font-size: 18px;
letter-spacing: 1px;
}
h5.name {
margin-top: 20px;
}
.card.back-face {
border: none;
padding: 15px 25px 25px 25px;
transform: rotateY(180deg);
}
.card.back-face h6 {
font-size: 8px;
}
.card.back-face .magnetic-strip {
position: absolute;
top: 40px;
left: 0;
height: 45px;
width: 100%;
background: #000;
}
.card.back-face .signature {
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 80px;
height: 40px;
width: 85%;
border-radius: 6px;
background: repeating-linear-gradient(
#fff,
#fff 3px,
#efefef 0px,
#efefef 9px
);
}
.signature i {
color: #000;
font-size: 12px;
padding: 4px 6px;
border-radius: 4px;
background-color: #fff;
margin-right: -30px;
z-index: -1;
}
.card.back-face h5 {
font-size: 8px;
margin-top: 15px;
}
</style >
Comments
Post a Comment