Download Files
HTML Portion
<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>Flip Card</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="text" contenteditable="true">
<h1>FLIP <span class="card">CARD</span></h1>
</div>
<div class="flip-card" onmouseover="clr()" onmouseout="clrr()">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://i.ibb.co/Yh6XmtC/iron-man-2.jpg" alt="Avatar" style="width:300px;height:300px; border-radius:10px;">
<!--Img Link - https://i.ibb.co/MPMB5c9/iron.jpg -->
</div>
<div class="flip-card-back">
<img class="iron" src="https://i.ibb.co/jHxxW4g/robert.jpg" alt="https://i.ibb.co/jHxxW4g/robert.jpg">
<!--Image Link - https://i.ibb.co/vqDsM0N/iron-man-2.jpg -->
<h1>Robert Downey Jr.</h1>
<p class="par">Iron <span>Man</span></p>
<p>USA</p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Html Portion Ends Here
CSS Portion
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');
*{
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
cursor: pointer;
perspective: 5000px; /* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: rgb(252, 166, 67);
color: black;
border-radius: 10px;
box-shadow: 0 0 20px rgb(118, 118, 118);
}
/* Style the back side */
.flip-card-back {
background-color:#edcd44;
color: black;
font-weight: bold;
border-radius: 10px;
box-shadow:0 0 20px #edcd44 ;
transform: rotateY(180deg);
}
.iron{
border-radius: 50%;
height: 100px;
width: 100px;
margin-top: 15px;
box-shadow: 0 0 0 10px #81cad6;
}
.par span{
padding: 5px;
background-color: #81cad6;
box-shadow:0 0 20px #81cad6 ;
border-radius: 10px;
}
#text{
margin-top: -500px;
position: absolute;
margin-left: 10px;
}
#text h1{
letter-spacing:5px ;
}
.card{
padding: 5px;
background: #edcd44;
border-radius: 15px;
padding-left: 5px;
box-shadow: 0 0 20px #fce064;
color: #09525e;
}
CSS Portion Ends Here
JavaScript Portion
function clr() {
document.body.style.backgroundColor = '#81cad6';
}
function clrr() {
document.body.style.backgroundColor = 'whitesmoke';
document.body.style.transition = 'all 1s';
}
hello 👋
ReplyDeletehello 👋
Delete