Create Responsive Login Page Using HTML/CSS Bootstrap By Indian Coding Wala

Omnath Dubey 5/13/2023 08:37:00 AM

HTML Source 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" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<link rel="stylesheet" href="style.css" />
<title>Indian Coding Wala Login Page</title>
</head>
<body>
<div class="container">
<div class="container__left">
<div class="content">
<div class="header">

<span class="back__btn">
<p class="submit__btn" type="submit">Sign up</p>
</span>
</div>
<div class="form__content">
<h3 class="form__title">Login</h3>
<p class="form__subtitle">
Welcome! Fill Your Username And Password To Login in To Your
Account.
</p>
<form action="">
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<p class="forgot__password">Forgot Password<i class="bi bi-arrow-bar-right"></i></p>
<button class="submit__btn" type="submit">Login Now</button>
</form>
<span class="bottom__line"></span>
<p class="footer__title">Login Now</p>
<div class="social__icons">
<i class="bi bi-github"></i>
<i class="bi bi-git"></i>
<i class="bi bi-google"></i>
<i class="bi bi-youtube"></i>
<i class="bi bi-facebook"></i>
<i class="bi bi-whatsapp"></i>
</div>
</div>
</div>
</div>
<div class="container__right">
<div class="image">
<h3>Indian Coding Wala</h3>
<p>
Create Login Page With Free Source Code Using HTML CSS Bootstrap By Indian Coding Wala....!!
</p>
</div>
</div>
</div>
</body>
</html>

CSS Source Code :-

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap");

:root {
--primary-color: #071214;
--primary-color-dark: #4855dc;
--text-dark: #1f2937;
--text-light: #6b7280;
--extra-light: #f3f4f6;
}

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

body {
font-family: "Lato", sans-serif;
}

.container {
display: flex;
min-height: 100vh;
min-height: 100svh;
}

.container__left {
flex: 1;
}

.content {
max-width: 450px;
padding: 1rem;
margin: auto;
}

.header {
display: flex;
align-items: center;
justify-content: space-between;
color: var(--text-light);
margin: 1rem 0;
}

.header .register {
font-size: 1rem;
font-weight: 700;
cursor: pointer;
}

.header .back__btn {
font-size: 1.2rem;
cursor: pointer;
}

.form__content {
max-width: 350px;
margin: 4rem auto 0;
}

.form__content .form__title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--text-dark);
}

.form__content .form__subtitle {
font-size: 1rem;
margin-bottom: 2.5rem;
color: var(--text-light);
}

.form__content input {
display: block;
width: 100%;
margin-bottom: 1rem;
outline: none;
border: none;
border-radius: 2px;
padding: 0.75rem;
font-size: 1rem;
background-color: var(--extra-light);
}

.form__content .forgot__password {
text-align: right;
font-weight: 700;
margin-bottom: 1.5rem;
cursor: pointer;
color: var(--text-light);
}

.form__content .submit__btn {
width: 100%;
padding: 1rem;
background-color: var(--primary-color);
color: #ffffff;
font-size: 1rem;
border: none;
border-radius: 5rem;
cursor: pointer;
transition: 0.3s;
}
.form__content .submit__btn:hover {
background-color: var(--primary-color-dark);
}

.form__content .bottom__line {
display: block;
height: 3px;
width: 100%;
background-color: var(--extra-light);
margin: 2rem 0;
}

.footer__title {
text-align: center;
font-weight: 700;
margin-bottom: 1rem;
color: var(--text-light);
}

.social__icons {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
}

.social__icons i {
font-size: 1.5rem;
color: var(--primary-color);
cursor: pointer;
transition: 0.3s;
}
.social__icons i:hover {
color: var(--primary-color-dark);
}

.container__right {
display: flex;
flex: 1.5;
background: url(https://images.pexels.com/photos/1761279/pexels-photo-1761279.jpeg?auto=compress&cs=tinysrgb&w=600);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
}

.container__right::before {
content: "";
position: absolute;
height: 75%;
width: 100%;
left: 0;
bottom: 0;
background: linear-gradient(to top, #000000, #00000000);
}

.image {
position: absolute;
top: 75%;
left: 50%;
transform: translateX(-50%);
display: grid;
gap: 1rem;
width: 80%;
max-width: 30rem;
color: #ffffff;
}

.image h3 {
font-size: 2rem;
position: relative;
}

.image h3::before {
content: "";
position: absolute;
top: 50%;
left: -4rem;
height: 2px;
width: 3rem;
background-color: #ffffff;
}

.image p {
font-size: 1rem;
}

@media screen and (width < 750px) {
.container__right {
display: none;
}
}

Responsive Login Page

There are millions of websites created every day, also, there is much fake content spread on the internet. So, Our main goal is to provide you with 100% Original and Safe content that provides you a great and better experience on the world wide web. We mainly focus on our service so and improving it regularly to provide a better user experience to all users. Basically, we focus on the News niche so, our main priority is to search for new content and present it in front of you to learn something new.