Gredient_Flip_Profile_Card

CSZONE

  Gredient_Flip_Profile_Card

index.html


<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
    <title>MissionEd | Team</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  

</head>
<body>

<center>
<div class="container-fluid">
 <br><br><br>
  <h1 style="color: white;">Profile Flip Card</h1>
<!------------------------Row--------------------------------------->
<ul class="team">
  <li>
<!-------------Flip Card----------------->
        <div class="flip-card">
     <div class="flip-card-inner">
       <div class="flip-card-front">
       <img class="profile"src="logo.jpg">
       <div class="name">Code Split</div>
    <div class="tag">Follow Us On Instagram</div>
    <div class="tag">Gredient Profile Flip Card</div>

      </div>
      <div class="flip-card-back">
       <div class="name">Code Split</div>
     <i class="fab fa-facebook"></i>
     <i class="fab fa-instagram"></i>
     <i class="fab fa-linkedin"></i>

       </div>

     </div>
  </div>
  <!-------------Flip Card----------------->
  </li>

 
</ul>

<!------------------------Row------------------------>


</div>

</center>
</body>
</html>

style.css
body{
   font-family: cursive;
   background-image: url(bg.jpg);
   color: white;
}
/*******Flip Card*****/
.profile{
  height: 140px;
  width: 140px;
  border-radius: 50%;
  padding: 5px;
  background: #2aece3;
  margin-top: 10px;

}
.name{
  font-size: 20px;
  padding-top: 35px;
  color: white;
}
.tag{
  padding: 5px 0;
  font-size:1rem;
  color: white;
  font-family: ;
}
i{
  font-size: 30px;
  padding-top: 50px;
  padding-left: 10px;
  cursor: pointer;
  color: white;
}
.flip-card {
  background: transparent;
  width: 250px;
  height: 320px;
  perspective: 1000px;
  color: white;
  font-weight: 100px;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  box-shadow: 1px 1px 10px 4px #9c2aec;
  border-radius:10px;
}
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg); 
}
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius:15px;
  background: black;
}
.flip-card-front {
  color: black;
}
.flip-card-back {
  transform: rotateY(180deg);
}
.team { 
  list-style-type: none;
  text-align: center;
  margin: 0;
  padding: 0;
}

.team li {
  display: inline-block;
  font-size: 20px;
  padding: 20px;
}

/*******Flip Card*****/
Source Code Download

Comments

Post a Comment

Popular posts from this blog

HTML Signup Login Form With Source Code

Image
CSZONE HTML Signup Login Form With Source Code Source Code :  For Login Page: login_page.html <!DOCTYPE html> <html> <head> <title>Login Page</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="content-language" content="en-gb"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="sty...
Read more