CSS ANIMATIONS - FULL CHAPTER

-

 <!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="pf">
        <img
          src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg"
          width="100px"
          height="100px"
          alt=""
        />
      </div>
      <div class="form">
        <label for="">Username</label><br />
        <input type="text" placeholder="Username" /><br />

        <label for="">Password</label><br />
        <input type="password" placeholder="minimum 8 digits" /><br />
      </div>
      <div class="link">
        <a href="">Forget password?</a>
      </div>
      <div class="bt">
        <button>Submit</button>
        <button>Cancel</button>
      </div>
    </div>
  </body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    padding: 50px;
    height: 450px;
    width: 450px;
    border: 2px solid rgb(0, 0, 0);

    font-family:poppins;
    text-align: center;

    animation: fontbulger 0.5s infinite ;

}

.pf {
    img {
        border-radius: 50%;
    }

}

input{
    border: 0;
    background-color: rgb(214, 212, 208);
    padding: 5px;
}

.link{
    font-size: x-small;
    margin-right: -80px;
}

button{
    font-family: poppins;
    font-size:x-small;
    background-color: #FF748B;
    color: aliceblue;
    border: 2px solid #F72C5B;
    padding: 5px;
    border-radius: 10px;
}
label{
    font-size: medium;
}

@keyframes c-change {
    from{
        background-color: #f72c3d;
    }
    to{
        background-color: #FF748B;
    }
}
@keyframes slide-right {
    from {
      margin-left: -100%;
    }
    to {
      margin-left: 0%;
    }
  }
  @keyframes fontbulger {
    100%{
      font-size: 10px;
    }

    50% {
      font-size: 50px;
    }
  }

Comments

Post a Comment