How to HTML CSS Form Design in Animation border

Code Zara 2025-04-20 14:48:02

How to HTML CSS Form Design in Animation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Design</title>
    <style>
      *{
    margin: 0;
}
body{
    background-color: #232338;
}
.title
{
    background-color: #004f55;
    padding: 20px 0px;
    text-align: center;
    color: white;
    font-weight: 900;
    font-family: Arial, Helvetica, sans-serif;
    color: #9c9cc7;
    font-size: 2vw;
}
.form-register{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.container-register{
    position: relative;
    width: 440px;
    height: 600px;
    background-image: linear-gradient(to right, #550000, #550000,#000055,#997755);
    animation: alina 1s infinite;
    animation-timing-function: linear;
    border-radius: 50px;
}

@keyframes alina {
    0%{background-image: linear-gradient(to right, #005500, #f55454,#000055,#997755)}
    25%{background-image: linear-gradient(to right, #fe0707, #05eafb,#4e0055,#ff0707)}
    50%{background-image: linear-gradient(to right, #07ff07, #004f55,#e304f8,#8c7575)}

    75%{background-image: linear-gradient(to right, #c4f6c4, #00eafa,#e604fb,#f88787)}

    100%{background-image: linear-gradient(to right, #04fc04, #06eafa,#e901fe,#53fa05)}
  
}

.box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    height: 580px;
    background-color: rgba(0,0,0,0.8);
    border-radius: 50px;
}
form{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
form h2{
    font-size: 33px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    color: rgb(165, 165, 237);
    padding: 20px 0px;
}
.form-div{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.form-div label{
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: white;
}
.form-div input{
    width: 100%;
    height: auto;
    padding: 13px 5px;
    font-size: 16px;
    outline: none;
    border: none;
    box-shadow: 1px 1px 1px 1px #bfc4c3;
    border-radius: 5px;

}
 .register-btn{
    width: 100%;
    background-color: #005500;
    text-align: center;
    color: #e2eded;
    font-weight: bold;
    letter-spacing: 0.1rem;
    transition: 0.5s ease;
 }
 .register-btn:hover{
    background-color: transparent;
    color: #000055;
    cursor: pointer;
 }

    </style>
</head>
<body>
    <div class="title">
        <h1>Register Form design html css</h1>
    </div>
    <div class="form-register">
        <div class="container-register">
            <div class="box">
               <form action="" method="post">
                  <h2>Register Form</h2>
                  <div class="form-div">
                    <label for="">Name:</label>
                      <input type="text" placeholder="Enter Your name" name="name" required>
                  </div>
                  <div class="form-div">
                    <label for="">Email:</label>
                      <input type="email" placeholder="Enter Your email" name="email" required>
                  </div>
                  <div class="form-div">
                    <label for="">Phone:</label>
                      <input type="number" placeholder="Enter Your phone" name="phone" required>
                  </div>
                  <div class="form-div">
                    <label for="">Address:</label>
                      <input type="text" placeholder="Enter Your address" name="address" required>
                  </div>
      
                  <div class="form-div">
                      <input type="submit" value="Register Now" class="register-btn">
                  </div>
               </form>
            </div>
          </div>
    </div>
</body>
</html>

YouTube Tutorial Video

JavaScript Introduction

How To Responsive Navbar HTML CSS and JavaScript

Responsive Navbar HTML CSS And JavaScript

How to Design Calculator with HTML CSS JavaScript

Calculator design

How to HTML CSS Form Design in Animation border

YouTube Tutorial Video

How To Carousel Slider Bootstrap 5.3

How to add to cart shopping in HTML,CSSs, JavaScript

How to HTML CSS Form Design in Animation border

How To Responsive Navbar HTML CSS

JavaScript Introduction

How To Responsive Navbar HTML CSS and JavaScript

How to Design Calculator with HTML CSS JavaScript