Skip to content Skip to blog sidebar
  • Contacts
  • Privacy Policy
  • Disclaimer
Schauhan.in |

Schauhan.in |

Technology Updates




  • HTML
  • CSS
  • C# Solutions
  • Bootstrap Examples
    • All Bootstrap Example
    • Bootstrap 3 Tutorials
    • Bootstrap 4 Tutorials
    • Bootstrap Header Templates
    • Bootstrap Footer Templates
    • Bootstrap Login Templates
    • Bootstrap Form Examples
    • Bootstrap Pricing Tables
  • Javascript
  • Website Designing
  • Portfolio
    • Logo Portfolio
    • Website Portfolio
  • Flyer’s Download
    • Night Club Flyer Free Download
    • Festival Flyer
    • Corporate Flyer
    • Digital Marketing Flyer
Home » Bootstrap Login » Responsive Mobile Login Templates Free Download

Responsive Mobile Login Templates Free Download

Posted on: January 20, 2020 | By: sandeepchhn – Comments Off
Responsive Login Free Download
Responsive Login Free Download
Responsive Login Free Download

Hello Friends Today in this article we will learn how to create beautiful responsive login using html and css .

We will create responsive login page without using Bootstrap.

Live View
Download Source

Step-1 Add HTML :

<div class="design">Designed By : <a href="http://www.schauhan.in">SCHAUHAN.IN</a></div>
   <div class="container">
     
     <h1>LOGIN HERE</h1>
     <div class="form_group mt">
       <input type="text" placeholder="@Username" />
     </div>
     
      <div class="form_group">
       <input type="text" placeholder="Password" />
     </div>
     
     <div class="form_group mb">
       <input type="button" class="bt" placeholder="Password" value="LOGIN" />
     </div>
     
     <div class="b1 mt1"><a href="#">>>Forget Password ?</a></div>
     <div class="b2"><a href="#">>>Register Here<<</a></div>
     
   </div>

Step-2 Add CSS

body
{
	font-family:Bahnschrift, sans-serif;
	margin:0px;
	padding:0px;
	background:#333333;
	background:url(../images/bg-image-16.jpg);
}

.container
{
	width:350px;
	height:500px;
	border-radius:5px;
	background:url(../images/bg.jpg);
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	text-align:center;
	-webkit-box-shadow: 0px 0px 29px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 29px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 29px 0px rgba(0,0,0,1);
}

.container h1
{
	text-align:center;
	margin-top:74px;
	font-size:24px;
}

.mt
{
	margin-top:54px;
}

.form_group input
{
	background:#282828;
	border-radius:8px;
	text-align:center;
	outline:none;
	height:44px;
	width:80%;
	border:none;
	margin:5px auto;
	color:#f2f2f2;
	font-family:Bahnschrift, sans-serif;
	font-size:16px;
}

.form_group .bt
{
	background:#e0a517;
	color:#333;
	cursor:pointer;
}

.mb
{
	margin-bottom:25px;
}

.b1
{
	width:80%;
	border-radius:8px;
	height:30px;
	line-height:30px;
	display:block;
	margin:auto;
	transition:all ease-in-out 0.3s;
} 


.b1 a
{
	text-decoration:none;
	color:#000;
}

.b2
{
	width:100%;
	padding:10px auto;
	background:#ffd673;
	height:40px;
	line-height:40px;
	display:block;
	margin:10px auto;
} 

.b2 a
{
	color:#000;
	text-decoration:none;
}

.design
{
	position:fixed;
	bottom:30px;
	right:50px;
	color:#5c5a54;
}

.design a
{
	color:#5c5a54;
	text-decoration:none;
}



@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and  only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
	
	.container
{
	width:100%;
	height:100%;
	border-radius:none;
	background:url(../images/bg.jpg);
	background-size:cover;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	text-align:center;
	-webkit-box-shadow: 0px 0px 29px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 29px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 29px 0px rgba(0,0,0,1);
}

.container h1
{
	text-align:center;
	margin-top:120px;
	font-size:24px;
}

.b2
{
	width:40%;
	padding:10px auto;
	background:#ffd673;
	height:40px;
	line-height:40px;
	display:block;
	margin:40px auto;
} 

.b2 a
{
	color:#000;
	text-decoration:none;
}

.design
{
	position:fixed;
	bottom:20px;
	right:20px;
	color:#000;
	font-size:12px;
	z-index:1;
	
}

.design a
{
	color:#000;
	text-decoration:none;
}
	
}

Responsive Login Page Free Download
How to Create Responsive Login Page Using Bootstrap
How to Create Beautiful Login Using Fieldset and Legend
Filed Under: Filed Under:Bootstrap Login, CSS TRICKS, General, Login Templates
Tagged With: Tagged With:Download Responsive Login, login page template, login page templates, login template

Post navigation

« What is CAA and NRC ?
Android App Layout Using HTML And CSS free Download »
Avatar for sandeepchhn

About The Author

sandeepchhn
Hello Friend, My Name is Sandeep Chauhan, I am the owner of SCHAUHAN.IN. I Have Passed B.Sc(IT) from Shobhit Univercity Uttar Pradesh, and i have the Diploma of Arena Animation, I Leave in Varanasi Uttar Pradesh.

Related Articles

How To Create a Notification Button using Bootstrap

How To Create a Notification Button using Bootstrap

HTML 404 Error Page templates Free download

HTML 404 Error Page templates Free download

How to Remove Textbox Outline hover Effect in chrome

How to Remove Textbox Outline hover Effect in chrome

Ajab Gajab News

  • How To Make Beautiful Responsive Login Page

    How To Make Beautiful Responsive Login Page

  • Product Page Using HTML and CSS

    Product Page Using HTML and CSS

  • Bootstrap Form Examples and Tutorials

    Bootstrap Form Examples and Tutorials

  • Bootstrap Registration form Template free download

    Bootstrap Registration form Template free download

  • Product Carousel bootstrap Free Download

    Product Carousel bootstrap Free Download

  • Bootstrap Mobile Admin Panel Free Download

    Bootstrap Mobile Admin Panel Free Download

  • Admin Panel Template using Bootstrap Free Download

    Admin Panel Template using Bootstrap Free Download

  • Bootstrap pricing table template Free Download

    Bootstrap pricing table template Free Download

  • How to Create Bootstrap 4 Responsive Header Free Download

    How to Create Bootstrap 4 Responsive Header Free Download

  • Bootstrap Carousel Examples Free Download

    Bootstrap Carousel Examples Free Download

  • Bootstrap carousel with thumbnails slider Example Free Download

    Bootstrap carousel with thumbnails slider Example Free Download

  • Bootstrap Modal Plugin

    Bootstrap Modal Plugin

  • Responsive Login Page Free Download

    Responsive Login Page Free Download

Logo Designing In Varanasi
3D Logo Designing in Varanasi
Website Designing in Varanasi
Dynamic Website Development in Varanasi
Wordpress Website Designing in Varanasi
Cheap Website Designing in Varanasi
Cheap 3D Logo Designing in Varanasi
E-commerce Website Designing in Varanasi
Shopping Website Designing in Varanasi
Cheap Wordpress Website Designing



© 2022 Schauhan.in |. All Rights Reserved.  
  • Disclaimer
  • Privacy Policy