Login-Form-popup

Responsive Login Form Html & CSS

Table of Contents

A login form is an essential component of websites and applications, allowing users to securely access their accounts. With the rising demand for responsive design, it has become crucial to create login forms that adapt seamlessly to different devices and screen sizes. In this article, we will explore the implementation of a responsive login form using HTML and CSS, ensuring a smooth and user friendly login experience.

In the previous articles, we created a responsive navbar with a search box

and we added a Modal Popup to the User Icon

today we will add a login form inside that popup modal

it contains two inputs, one for email address and the other for password

with icons in each input

in the bottom, we added social media icons to our Login Form using BoxIcons

HTML

<!DOCTYPE html>

<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
	<nav class="navbar">
		<div class="container">
			<!--This is navbar left area contains logo-->
			<div class="nav-left">
				<a href="https://www.dzcoding.com/" class="logo">DZCoding</a>
			</div>
			<!--This is navbar center area contains search bar-->
			<div class="nav-center">
				<i class='bx bx-sm bx-left-arrow-alt'></i>
				<input type="text"  placeholder="Search">
                <button class="nav-center-search-btn"><i class='bx bx-sm bx-search'></i></i></button>
			</div>
			<!--This is a navbar right area contains icons and links-->
			<div class="nav-right">
				<i class='bx bx-sm bx-search nav-right'></i>
				<i class='bx bx-sm bx-category'></i>
				<a href="#" id="openmodal"><i class='bx bx-sm bxs-user-circle'></i></a>
				<div id="modal" class="modal">					
					<div class="modal-content">
						<i class='bx bx-x modal-close'></i>						
						<div class="login-form">
							<div class="form-group">
								<input type="email" name="email" placeholder="E-mail Address">
								<span class="input-icon"><i class='bx bx-envelope'></i></span>
							</div>
							<div class="form-group">
								<input type="password" name="password" placeholder="Password">
								<span class="input-icon"><i class='bx bx-lock-alt' ></i></span>
							</div>
							<button class="login-btn">Login</button>
							<div class="seperator"><b>or</b></div>
							<div class="social">
								<i class='bx bxl-twitter' ></i>
								<i class='bx bxl-facebook' ></i>
								<i class='bx bxl-instagram' ></i>
								<i class='bx bxl-whatsapp' ></i>
								<i class='bx bxl-linkedin' ></i>
							</div>
						</div>	
									
				  </div>
			</div>
		</div>
	</nav>
</body>
</html>

CSS

@font-face {font-family: ubuntu; src: url(../fonts/Ubuntu-Regular.ttf);}

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

body{
	font-family: ubuntu;
}

.container{
	width: 100%;
    max-width: 1250px;
    margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.navbar{
	background: #fff;
	padding: 12px 10px;
	border-bottom: 5px solid #16a085;
}

.nav-left{
	display: flex;
	align-items: center;
	flex: 1;
  }

.nav-left .logo{
	text-decoration: none;
	color: #16a085;
	font-size: 20px;
}

.nav-center{
	display: flex;
	justify-content: center;
	margin: 0;
	flex:8;
}

.nav-center .bx-left-arrow-alt{
	color: #16a085;
	font-size: 1.25rem;
	align-self: center;
	margin-right: 1.5rem;
	cursor: pointer;
	display: none;
}
.nav-center input{
	background: #fff;
	width: 70%;
	max-width:600px;
	border: 1px solid #16a085;
	border-right: none;
	padding-left: 10px;
	margin: 0;
	outline: none;
	color: #858585;
	font-size: 16px;
}

.nav-center input::placeholder{
	color: #858585;
	padding-left: 0.2em;
}


.nav-center .nav-center-search-btn{
	padding: 6px 30px;
	max-width: 10%;
	background: #fff;
	color: #16a085;
	border: 1px solid #16a085;
	border-left: none;
	margin: 0;
	max-width: 20%;
	cursor: pointer;
  }
  
.nav-center .nav-center-search-btn:hover i {
	color: #1abc9c;
}

.nav-right{
	flex: 3;
	display: flex;
	justify-content: flex-end;
}

.nav-right .bx-search{
    display: none;
}

.nav-right .bx{
	margin-right: 10px;
	color: #16a085;
	cursor: pointer;
}

.nav-right .bx:hover{
	color: #1abc9c;
}

@media (max-width: 600px) {

	.nav-right .bx-search{
	  display: inline;
	}
	.nav-center {
		visibility:hidden;
	}
  }
  

  /*Modal*/
  /* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	border-radius: 10px;
}

.slide{
	background: red;
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    border: 1px solid #888;
    width: 400px;
}

/* The Close Button */
.modal-close{
    color: #000 !important;
    float: right;
    font-size: 18px;
    font-weight: bold;
	z-index: 60;
	margin: 10px;
}

.login-form {
    background: #fff;
    width: 350px;
    margin: 0 auto;
    display: table;
    padding: 30px 10px 30px 30px;
    box-sizing: border-box;
}

.form-group {
  float: left;
  width: 100%;
  margin: 0 0 15px;
  position: relative;
}
.login-form input {
    width: 100%;
    padding: 5px;
    height: 56px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-size: 15px;
    padding-left: 75px;
}
.login-form .form-group .input-icon {
    font-size: 15px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    position: absolute;
    border-radius: 25px;
    bottom: 0;
    height: 100%;
    padding-left: 35px;
    color: #666;
}
.login-form .login-btn {
  background: #16a085;
  padding: 11px 50px;
  color: #fff;
  text-align: center;
  margin: 0 auto;
  border: none;
  font-size: 20px;
  width: 100%;
  height: 56px;
  cursor: pointer;
  align-items: center;
  display: flex;
  justify-content: center;
}

.login-form .seperator {
	float: left;
	width: 100%;
	border-top: 1px solid #ccc;
	text-align: center;
	margin: 50px 0 0;
  }
  .login-form .seperator b {
	width: 40px;
	height: 40px;
	font-size: 16px;
	text-align: center;
	line-height: 40px;
	background: #fff;
	display: inline-block;
	border: 1px solid #e0e0e0;
	border-radius: 50%;
	position: relative;
	top: -22px;
	z-index: 1;
  }

  .login-form .social{
	text-align: center;
}

.login-form .social .bx{
	margin-right: 10px;
	font-size: 25px;
}

JAVASCRIPT


let searchBtn = document.querySelector(".nav-right .bx-search");
let navbarCenter = document.querySelector(".nav-center");
let navbarRight = document.querySelector(".nav-right");
let navbarCenterInput = document.querySelector(".nav-center input");
let navbarLeft = document.querySelector(".nav-left");
let navbarCenterArrow = document.querySelector(".bx-left-arrow-alt");



searchBtn.addEventListener("click", function(){
  navbarCenter.style.visibility = "visible";
  navbarCenterArrow.style.display = "inline";
  navbarCenter.style.width = "100%";
  navbarCenterArrow.style.maxWidth = "20%";
  navbarCenterInput.style.maxWidth = "70%";
  
  
  navbarRight.style.display = "none";
  navbarLeft.style.display = "none";
  
});


      
navbarCenterArrow.addEventListener("click", function(){

  navbarRight.removeAttribute("style");
  navbarLeft.removeAttribute("style");
  navbarCenter.removeAttribute("style");
  navbarCenterArrow.removeAttribute("style");
  navbarCenterInput.removeAttribute("style");
  
});

// Get the modal
var ebModal = document.getElementById('modal');

// Get the button that opens the modal
var ebBtn = document.getElementById("openmodal");

// Get the <span> element that closes the modal
var ebSpan = document.getElementsByClassName("modal-close")[0];

// When the user clicks the button, open the modal 
ebBtn.onclick = function() {
    ebModal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
ebSpan.onclick = function() {
    ebModal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == ebModal) {
        ebModal.style.display = "none";
    }
}

/**
 * Variables
 */
const btnLogin = document.querySelector('.btn__login');
const btnSignup = document.querySelector('.btn__signup');
const formLogin = document.querySelector('.form__login');
const formSignup = document.querySelector('.form__signup');
const overlay = document.querySelector('.overlay');

function moveOverlay(e) {
   e.preventDefault();
   overlay.style.left = '335px';
   formLogin.style.display = "none";
   formSignup.style.display = "flex";
}

function removeOverlay(e) {
   e.preventDefault();
   overlay.style.left = '15px';
   formLogin.style.display = "flex";
   formSignup.style.display = "none";
}

btnSignup.addEventListener('click', moveOverlay);
btnLogin.addEventListener('click', removeOverlay);
Live Preview
Tags

Related Posts