card hover using css

Redxcyber
2 minute read

 



<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://kit.fontawesome.com/a2fa536777.js" crossorigin="anonymous"></script>
  <title></title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Indie+Flower&display=swap');

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      height: 100vh;
      background: #111;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .card {
      width: 250px;
      height: 570px;
    }

    .icon {
      width: 100%;
      height: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      transform: translateY(100%);
      z-index: 25578;
      background: #111;
      transition: all 0.5s linear;
    }

    .icon h1 {
      font-size: 40px;
      color: #333335;
      text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.9), -3px -3px 3px rgba(255, 255, 255, 0.05);
      letter-spacing: 4px;
      font-variant: small-caps;
      font-family: 'Fredoka One', impact;
     
    }

    .icon:hover {
      transform: translateY(0);
      box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.9), -5px -5px 10px rgba(255, 255, 255, 0.05);
    }

    .icon:hover h1 {
      color: crimson;
    }

    .content {
      width: 100%;
      height: 50%;
      text-align: center;
      background: transparent;
      padding: 10px;
      color: rgba(200,200,210,0.8);  
      font-family: arial;
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.8), -5px -5px 10px rgba(255, 255, 255, 0.05);
    }
   
    .heading{
      color: deepskyblue;
      margin: 5px 0;
      font-variant: small-caps;
      letter-spacing: 2px;
    }
   
   
    h1.number {
        font-size: 30px;
        color: rgb(200,200,210);
        height: 60px;
       
       
      }
     
     
     
      span {
        position: relative;
        top: 30px;
        animation: move 0.5s ease-in-out infinite alternate;
        z-index: -1;
        font-family: 'Fredoka One', impact;
      }
      span:nth-child(1){
        animation-delay: 0.1s;
      }
      span:nth-child(2){
        animation-delay: 0.25s;
      }
      span:nth-child(3){
        animation-delay: 0.4s;
      }
   
      @keyframes move {
        100%{
          top: 5px;
          text-shadow: 0 3px red, 0 6px grey, 0 9px gold, 0 11px green, 0 13px purple, 0 14px cyan, 0 15px orangered;
        }
      }
    a {
      display: inline-block;
      text-decoration: none;
      font-variant: small-caps;
      letter-spacing: 1px;
      padding: 6px 20px;
      margin-top: 14px;
      color: crimson;
      border-radius: 25px;
      font-weight: 450;
      border: 2px solid crimson;
      transition: all 0.5s ease-in-out;
    }
    a:hover{
      padding: 6px 40px;
      color: rgb(200,200,220);
      background: crimson;
     
    }
   
  </style>
</head>
<body>
  <div class="card">
   <div class="icon">
    <h1>Thankyou</h1>
   </div>
   <div class="content">
    <h3 class="heading">From Codexpranav</h3>
    <p> Thank you guys for supporting me. Today we are family of 300. I am really very happy, it's all because of you guys. Keep supporting i will bring more awesome projects.</p>
    <h1 class="number"> <span>3</span> <span>0</span> <span>0</span> </h1> <a href="https://instagram.com/codexpranav">Contact</a>
   </div>
  </div>
</body>
</html>