Signing Form Using HTML & CSS

0
Share

What are the Tags are Used to create a Signing Form ?

  • <form>—It make a HTML form for used input.
  • <input>–This tag is used to take input from user.
  • <select>–It define a dropdown list.
  • <button>–It define a clickable button.
  • <textarea>–It used to create a multiline input box.
  • <option>—Define a option dropdown menu.
  • <lebel>—It define a lebel for an element.
  • <Fieldset>–Used to Group related element in a form.
  • <legand>– -It define a caption.
Step 1 : Adding HTML
Add an image inside a container and add inputs with matching labels for each field. Wrap a “form” element around them to process the input.

Step 2 : Adding CSS
Add the required CSS to design the login page try to keep the design as simple as possible.

Program: This code will guide you through comments that how to design design and which property is used for which design to create.

HTML & CSS Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form</title>
    <style>
        *{
    box-sizing: border-box;
}
body{
    margin: 0;
    height: 100vh;
    width: 100vh;
    overflow: hidden;
    font-family: sans-serif;
    font-weight: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    background-color: #ecf0f3;
}
.login{
    width: 387px;
    height: 620px;
     padding: 60px 35px 35px 35px;
     border-radius: 40px;
     background-color: #ecf0f3;
     box-shadow: 13px 13px 20px #cbced1,
                 -13px -13px 20px #ffffff;
}
.text-field{
    width: 100%;
    padding: 75px 5px 5px 5px;
}

img{
    height: 90px;
    margin-left: 110px;
    
}
svg{
    height: 25px;
    margin: 0px 10px -3px 25px;
}
input{
    border: none;
    outline: none;
    background: none;
    color: #555;
    font-size: 18px;
    color: #555;
    padding: 20px 10px 20px 5px;
}
.username{
    margin-bottom: 30px;
    border-radius: 20px;
    box-shadow: inset 8px 8px 8px #cbced1,inset -8px -8px 8px #ffffff;
    padding: 1px;
}
.password{
    margin-bottom: 30px;
    border-radius: 25px;
    box-shadow: inset 8px 8px 8px #cbced1,inset -8px -8px 8px #ffffff;
}
.signin-btn{
    width: 100%;
    height: 60px;
    border-radius: 30px;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 20px;
    font-weight: 700;
    font-family: sans-serif;
    background-color: rgb(8, 233, 64);
    box-shadow: inset 8px 8px 8px #cbced1,inset -8px -8px 8px #ffffff;


}

    </style>
</head>
<body>
    <div class="login">
        <div class="profile">
            <img src="profile.png" alt="profile">
        </div>
        <div class="text-field">
            <div class="username">
                <svg class="svg-icon" viewBox="0 0 20 20">
                    <path d="M12.075,10.812c1.358-0.853,2.242-2.507,2.242-4.037c0-2.181-1.795-4.618-4.198-4.618S5.921,4.594,5.921,6.775c0,1.53,0.884,3.185,2.242,4.037c-3.222,0.865-5.6,3.807-5.6,7.298c0,0.23,0.189,0.42,0.42,0.42h14.273c0.23,0,0.42-0.189,0.42-0.42C17.676,14.619,15.297,11.677,12.075,10.812 M6.761,6.775c0-2.162,1.773-3.778,3.358-3.778s3.359,1.616,3.359,3.778c0,2.162-1.774,3.778-3.359,3.778S6.761,8.937,6.761,6.775 M3.415,17.69c0.218-3.51,3.142-6.297,6.704-6.297c3.562,0,6.486,2.787,6.705,6.297H3.415z"></path>
                </svg>
                <input type="text" name="user_name" id="username" placeholder="Username" required>
            </div>
            <div class="password">
                <svg class="svg-icon" viewBox="0 0 20 20">
                    <path d="M10,6.978c-1.666,0-3.022,1.356-3.022,3.022S8.334,13.022,10,13.022s3.022-1.356,3.022-3.022S11.666,6.978,10,6.978M10,12.267c-1.25,0-2.267-1.017-2.267-2.267c0-1.25,1.016-2.267,2.267-2.267c1.251,0,2.267,1.016,2.267,2.267C12.267,11.25,11.251,12.267,10,12.267 M18.391,9.733l-1.624-1.639C14.966,6.279,12.563,5.278,10,5.278S5.034,6.279,3.234,8.094L1.609,9.733c-0.146,0.147-0.146,0.386,0,0.533l1.625,1.639c1.8,1.815,4.203,2.816,6.766,2.816s4.966-1.001,6.767-2.816l1.624-1.639C18.536,10.119,18.536,9.881,18.391,9.733 M16.229,11.373c-1.656,1.672-3.868,2.594-6.229,2.594s-4.573-0.922-6.23-2.594L2.41,10l1.36-1.374C5.427,6.955,7.639,6.033,10,6.033s4.573,0.922,6.229,2.593L17.59,10L16.229,11.373z"></path>
                </svg>
                <input type="password" name="password" id="pass" placeholder="Password" required>
            </div>
        </div>
        <Button class="signin-btn" type="submit">Signin Here
            <svg class="svg-icon" viewBox="0 0 20 20">
                <path d="M17.218,2.268L2.477,8.388C2.13,8.535,2.164,9.05,2.542,9.134L9.33,10.67l1.535,6.787c0.083,0.377,0.602,0.415,0.745,0.065l6.123-14.74C17.866,2.46,17.539,2.134,17.218,2.268 M3.92,8.641l11.772-4.89L9.535,9.909L3.92,8.641z M11.358,16.078l-1.268-5.613l6.157-6.157L11.358,16.078z"></path>
            </svg>
        </Button>
            
    </div>
</body>
</html>

Read more Post

  • What are the List of CSS3 New Features ?
    CSS3 is the latest version of the normal CSS . CSS3 adds several new styling features and improvements to enhance the web presentation capabilities. Text Effect in...
  • CSS Basic Property
    What is CSS ? CSS stands for Cascading Style Sheets. CSS basically used in designing the web tags & pages. CSS is the most popular used...
  • Java Program to swap two number use 3rd variable
    In this program, you’ll learn to Program to swap 2 number with 3rd variable in Java. After write the code, the final output is displayed on...
  • Java program to multiply two floating point number
    In this program, you’ll learn to Program to multiply two floating point number in Java. After write the code, the final output is displayed on the...
  • Java Program to find the ASCII value of a character
    In this program, you’ll learn to Program to find the ASCII value of a character in Java. After write the code, the final output is displayed...
  • Java Program to calculate quotient & reminder
    In this program, you’ll learn to Given Number is even or odd in Java. After write the code, the final output is displayed on the screen....
%d bloggers like this: