Responsive Login and Registration Form in HTML and CSS

Hello, friend's how are you doing, today in this blog of HTML & CSS and project we are going to Responsive Login and Registration Form in HTML and CSS. ado let's get started.

There are lots of websites with lots of features on the internet and of course, we have made. All the website has different features and specialty. But many websites have limited colors that's why people always feel bored by the limited color on the website right? that's why in this HTML CSS project in our today's website.

Let's have a look at the given image of our website design. On the top side, we have a navigation menu bar, a home section with some text, and a beautiful button. At the right side of the navigation menu bar, we can see an icon that is for switching the website.

Responsive Login and Registration Form in HTML and CSS:

Video Tutorial

In the video, you have seen the demo of the Responsive Login and Registration Form in HTML and CSS. I hope you’ve understood the codes and concepts behind creating this responsive Login and Registration Form in HTML and CSS.

In the CSS codes, inside on event, first I got the All Text H3 of the Name. Name Section ready property Display. After I got the clear Name Display, Then Adjust Img what where You want the Set Cover of Position.

I have only explained only main things on this blog but in the video, I have explained each CSS line with written comments. If you want to understand which line of code is doing what then please watch the above video

You might like this:

        (1) How To Create A Simple Animate Portfolio

      (2) How To Create A Music Website

      (3) How To Create A Gallery Section

(4) How To Create A Glassmorphism Effect Clock

Responsive Login and Registration Form in HTML and CSS

[Source Codes]

Creating Responsive Login and Registration Form in HTML and CSS. First, you need to create two Files: HTML & CSS files. After creating these files just paste the following codes into your file. You can also download the source code files of this How To Make Search Box Using HTML CSS | Expandable Search Box Design. from the given download button.

First, create an HTML file with the name of index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with a .html extension.

That’s all, now you’ve successfully Responsive Login and Registration Form in HTML and CSS. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login and sing Up Form </title>

    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

</head>
<body>
    <div class="container">
        <input type="checkbox" id="flip">
        <div class="cover">
            <div class="front">
                <img src="images/pexels-alex-andrews-1983038.jpg" alt="">
                <div class="text">
                    <span class="text-1">Coding Karunadu</span>
                    <span class="text-2">SUBSCRIB</span>
                </div>
            </div>
            <div class="back">
                <img class="backImg" src="images/pexels-alex-andrews-1983038.jpg" alt="">
                <div class="text">
                    <span class="text-1">Coding Karunadu</span>
                    <span class="text-2">SUBSCRIB</span>
                </div>
            </div>
        </div>
        <div class="form">
            <div class="form-content">
                <div class="login-from">
                    <div class="title">Login</div>
                    <form action="#">
                        <div class="input-boxes">
                            <div class="input-box">
                                <i class="fas fa-envelope"></i>
                                <input type="text" placeholder="Enter Your Email" required>
                            </div>
                            <div class="input-box">
                                <i class="fas fa-lock"></i>
                                <input type="text" placeholder="Enter Your Password" required>
                            </div>
                            <div class="text"><a href="#">Forgot Password ?</a></div>
                            <div class="button input-box">
                                <input type="submit" value="Submit">
                            </div>
                            <div class="text login-text">Don't have an Account ? <label for="flip">SigUp Now</label></div>
                        </div>
                    </form>
                </div>
                <div class="signup-from">
                    <div class="title">SignUp</div>
                    <form action="#">
                        <div class="input-boxes">
                            <div class="input-box">
                                <i class="fas fa-user"></i>
                                <input type="text" placeholder="Enter Your Name" required>
                            </div>
                            <div class="input-box">
                                <i class="fas fa-envelope"></i>
                                <input type="text" placeholder="Enter Your Email" required>
                            </div>
                            <div class="input-box">
                                <i class="fas fa-lock"></i>
                                <input type="text" placeholder="Enter Your Password" required>
                            </div>
                            
                            <div class="button input-box">
                                <input type="submit" value="Submit">
                            </div>
                            <div class="text signup-text">Already have an Account ? <label for="flip">Login Now</label></div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS Code:

/* Google Font Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins" , sans-serif;
}

body
{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e6a415;
    padding: 30px;
}

.container
{
    position: absolute;
    max-width: 850px;
    width: 100%;
    background: #fff;
    padding: 40px 30px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    perspective: 2700px;
}

.container .cover img{
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 12;
    backface-visibility: hidden;
    
}

.container .cover
{
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    width: 50%;
    z-index: 98;
    transition: all 1s ease;
    transform-origin: left;
    transform-style: preserve-3d;
}

.container .cover::before
{
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background: #e6a415;
    opacity: 0.4;
    z-index: 100;
}

.container .cover::after
{
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background: #e6a415;
    opacity: 0.4;
    z-index: 100;
    transform: rotateY(180deg);
}

.container #flip:checked ~ .cover
{
    transform: rotateY(-180deg);
}

.container .cover .back .backImg
{
    transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.container .cover .text
{
    position: absolute;
    z-index: 111;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cover .text .text-1,
.cover .text .text-2
{
    font-size: 26px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    backface-visibility: hidden;
}

.cover .text .back .text-1,
.cover .text .back .text-2
{
    transform: rotateY(180deg);
}

.cover .text .text-2
{
    font-size: 15px;
    font-weight: 500;
}

.container .form
{
    height: 100%;
    width: 100%;
    background: #fff;
}

.container .form-content
{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.form-content .login-from,
.form-content .signup-from
{
    width: calc(100% / 2 - 25px);
}

.form .form-content .title
{
    position: relative;
    font-size: 24px;
    font-weight: 500;
    color: #333;
}

.form .form-content .title::before
{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 25px;
    background: #e6a415;
}

.form .signup-from .title::before
{
    width: 20px;
}

.form .form-content .input-boxes
{
    margin-top: 30px;
}

.form .form-content .input-box
{
    display: flex;
    align-items: center;
    height: 50px;
    width: 100%;
    margin: 10px 0;
    position: relative;
}

.form .form-content .input-box input
{
    height: 100%;
    width: 100%;
    outline: none;
    border: none;
    padding: 0 30px;
    font-size: 16px;
    font-weight: 500;
    border-bottom: 2px solid rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.form .form-content .input-box input:focus,
.form .form-content .input-box input:valid
{
    border-color: #e6a415;
}

.form-content .input-box i{
    position: absolute;
    color: #e6a415;
    font-size: 17px;
}

.form-content .input-box .text{
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.form .form-content .text a{
    text-decoration: none;
}

.form .form-content .text a:hover
{
    text-decoration: underline;
}

.form .form-content .button
{
    color: #fff;
    margin-top: 40px;
}

.form .form-content .button input
{
    color: #fff;
    background: #e6a415;
    border-radius: 6px;
    padding: 0;
    cursor: pointer;
    transition: all 0.4s ease;
}

.form .form-content .button input:hover
{
    background: #555;
}

.form .form-content .signup-text,
.form .form-content .login-text{
    text-align: center;
    margin-top: 25px;
}

.container #flip
{
    display: none;
}

@media (max-width: 730px){
    .container .cover{
        display: none;
    }

    .form-content .login-from,
    .form-content .signup-from{
        width: 100%;
    }

    .form-content .signup-from
    {
        display: none;
    }

    .container #flip:checked ~ .form .signup-from{
        display: block;
    }

    .container #flip:checked ~ .form .login-from{
        display: block;
    }
}

Download Here

You have to wait 40 seconds.

Responsive Login and Registration Form in HTML and CSS | Coding Karunadu

Hello, friend's how are you doing, today in this blog of HTML & CSS and project we are going to Responsive Login and Registration Form in HTML and CSS. ado let's get started.

Responsive Login and Registration Form in HTML and CSS:

Video Tutorial

You might like this:

(1) How To Create A Simple Animate Portfolio

      (2) How To Create A Music Website

      (3) How To Create A Gallery Section

(4) How To Create A Glassmorphism Effect Clock

Responsive Login and Registration Form in HTML and CSS

[Source Codes]

نموذج الاتصال

Responsive Login and Registration Form in HTML and CSS | Coding Karunadu

Hello, friend's how are you doing, today in this blog of HTML & CSS and project we are going to Responsive Login and Registration Form in HTML and CSS. ado let's get started.

Responsive Login and Registration Form in HTML and CSS:

Video Tutorial

You might like this:

(1) How To Create A Simple Animate Portfolio (2) How To Create A Music Website (3) How To Create A Gallery Section (4) How To Create A Glassmorphism Effect Clock

Responsive Login and Registration Form in HTML and CSS

[Source Codes]

نموذج الاتصال

(1) How To Create A Simple Animate Portfolio

(2) How To Create A Music Website

(3) How To Create A Gallery Section

(4) How To Create A Glassmorphism Effect Clock