How to build a mobile responsive login form using html and css

This is most likely going to be a very short tutorial as i'll only be sharing the code for the project.

if you will like to learn how I wrote the code line by line, please check out my youtube channel.

I will really appreciate if you support me by clicking on the subsribe button as it is literally a new channel 😃 😌

moving on, here is the html code

<main>
        <section class="form-cover">
            <div class="image-div">
                <img src="img/2.jpg" alt="">
            </div>
            <div class="form-div">
                <div class="form-control">
                    <input type="email" placeholder="enter your email">
                    <i class="fa fa-envelope"></i>
                </div>
                <div class="form-control">
                    <input type="password" placeholder="enter your password">
                    <i class="fa fa-eye"></i>
                </div>
                <div class="form-control">
                    <input type="checkbox" name="remember">
                    <label for="name">remember me</label>
                </div>
                <div class="form-control">
                    <button type="submit">Login</button>
                </div>
                <div class="form-control button-control">
                    <a href="">Forgot password</a>
                    <a href="">Create account</a>
                </div>
            </div>
        </section>
    </main>

I guess the code is pretty easy to understand... 😊
here is the css

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;

}
main{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.form-cover{
    display: flex;
}
.image-div img{
    width: 100%;
    height: 400px;
}
.image-div{
    box-shadow: 0px 3px 10px rgb(0,0,0,0.2); 
}
.form-div{
    width: 50%;
    box-shadow: 0px 3px 10px rgb(0,0,0,0.2);
}
.form-control{
    margin: 45px 30px 0px 15px;
    position: relative;
}
.form-control input[type="email"],
.form-control input[type="password"]{
    width: 100%;
    padding: 10px;
    font-size: 1.2rem;
    border: 1px solid teal;
    outline: none;
}
.form-control input[type="email"],
.form-control input[type="password"]:focus{
    border: 2px solid #e3e3e3;
}
.form-control i{
    position: absolute;
    font-size: 1.2rem;
    right: 20px;
    top: 15px;
    color: teal;
}
.form-control button{
    width: 100%;
    padding: 10px;
    border: 0;
    outline: 0;
    background-color: teal;
    color: #fff;
    transition: 0.5s ease-in;
}
.form-control button:hover{
    background-color: rgb(94, 40, 40);
}
.button-control{
    display: flex;
    justify-content: space-between;
}
.button-control>*:first-child{
    color: red;
}
.button-control>*:nth-child(2){
    color: rgb(53, 51, 58);
}
@media (max-width:768px) {
    .form-cover{
        flex-direction: column;
    }
    .form-div{
        width: 100%;
    }
}

I hope this helps 😊 😊 meanwhile, please... do not forget to like and subscribe to my youtube channel.

I really appreciate your time,
until next time.