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.
Top comments (0)