Today we are going to learn how to create a login form using HTML and CSS.

<!DOCTYPE html>
<html>
<head>
    <title>Login Form UI</title>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600|Work+Sans:400,500&display=swap" rel="stylesheet">

</head>
<body>
    
    <form class="form">
        <div class="form__image-box">
            
            <img src="https://i.imgur.com/cMZHiw8.png" class="form__image-box__icon"></img>
            
            <h1 class="form__image-box__heading">
                pixel labs
            
            </h1>
        </div>

        <div class="form__fields">
            
            <h3 class="form__fields__heading">
                Name
            </h3>
            <input type="text" class="form-field text-field" placeholder="Enter Your Name">
            
            <h3 class="form__fields__heading">
                Username
            </h3>
            <input type="text" class="form-field user-field" id="username" 
            placeholder="Choose Username">
            <label class="user-field-label" for="username">pixel.io/</label>

            <h3 class="form__fields__heading radio-heading">
                Who are you?
            </h3>
            <input type="radio" name="opt" id="opt1" class="form-radio">
            <label for="opt1" class="radio-label">
                <i class="fa fa-diamond" aria-hidden="true"></i>
                <span>Designer</span>
            </label>
            
            <input type="radio" name="opt" id="opt2" class="form-radio">
            <label for="opt2" class="radio-label">
                <i class="fa fa-code" aria-hidden="true"></i>
                <span>Developer</span>
            </label>

            <h3 class="form__fields__heading">
                Email Id
            </h3>
            <input type="email" class="form-field text-field" placeholder="Enter Your Email Address">    
            <h3 class="form__fields__heading">
                Password
            </h3>

            <input type="password" class="form-field text-field" placeholder="Enter Your Password">    
            <a href="#" class="btn">SUBMIT</a>

        </div>
    </form><br>
    
    <a href="https://youtu.be/XSWnKTiWYHg" target="_blank" class="link-yt">My Youtube Channel</a> 

</body>
</html>

Published by motivationbyprince

Student

Leave a comment

Create your own website, free on WordPress.com.Create your own website.
Start free