Skip to content

ParallelCodes

  • AngularJS
  • Android
    • Android-Creating Notepad
    • Android Widgets Tutorial
    • Android Send SMS Programmatically with Permissions
    • Making Phone Calls in Android
    • Android JSON Parsing
    • Upload Files from Android to PC Programmatically
    • Android Interview Ques & Ans
  • ASP.NET
  • MVC
  • Xamarin
  • C#
  • WPF
  • CSS Templates

ParallelCodes

  • AngularJS
  • Android
    • Android-Creating Notepad
    • Android Widgets Tutorial
    • Android Send SMS Programmatically with Permissions
    • Making Phone Calls in Android
    • Android JSON Parsing
    • Upload Files from Android to PC Programmatically
    • Android Interview Ques & Ans
  • ASP.NET
  • MVC
  • Xamarin
  • C#
  • WPF
  • CSS Templates

Create Dark Design Login Page with CSS and HTML

  • by ASH
  • March 31, 2019March 31, 2019
Dark Design Login Page with CSS and HTML 02
Post Views: 1,469

In this post we will see how we can create a dark design login form/page with css and html. We will also use Google fonts and Bootstrap in making our Login form. The login page will be having forget password and login with facebook and google option too.

So let’s begin.

We will use Google font and Bootstrap for the design.

  1. Google Font – Montserrat
  2. Bootstrap CSS

Please download the facebook and google page icon using the link below:

  1. Facebook icon
  2. Google icon
  3. Background image link

Create two files in your project’s folder with name:

  1. login.html
  2. site.css

My folder structure:

Dark Design Login Page with CSS and HTML 01

Edit login.html page as below:

login.html:

<html>
<head>
<title>
CSS Login Form
</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:300" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="site.css"/>
</head>
<body>
<div>
<div class="parent-container">
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<div class="loginholder">
<table class="table-condensed">
<tr>
<td align="center">
<h3>USER LOGIN</h3>
</td>
</tr>
<tr>
<td>
<hr style="background-color:#fff;height:1px;margin:0px"/>
</td>
</tr>
<tr>
<td>
<b class="labelc">User Id:</b>
</td>
</tr>

<tr>
<td>
<input type="text" class="inputbox"/>
</td>
</tr>

<tr>
<td>
<b class="labelc">Password:</b>
</td>
</tr>

<tr>
<td>
<input type="password" class="inputbox"/>
</td>
</tr>

<tr>
<td align="center">
<br/>
<a class="btn-normal" href="login.html">LOGIN</a>
</td>
</tr>

<tr>
<td align="left">
<a class="forgotpassword" >Forget Password?</a>
</td>
</tr>

<tr>
<td>
<hr style="background-color:#fff;height:1px;margin:0px"/>
</td>
</tr>

<tr>
<td align="center">
<span class="labelc">Login with</span>
</td>
</tr>

<tr>
<td>
<button class="btn-normal-logo">
<span>
<img src="fb.png" width="34px" height="34px"/>
FACEBOOK
</span>
</button>
&nbsp;&nbsp;
<button class="btn-normal-logo">
<span>
<img src="google.png" width="34px" height="34px"/>
GOOGLE
</span>
</button>
</td>
</tr>

</table>
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>

and site.css as below

site.css:

body
{
color:#464646;
font-weight:bold;
font-family:'Montserrat', sans-serif;
font-size:16px;
background-image:url(night.png);
width:100%;
height:100%;
padding:0px;
margin:0px;
}

.parent-container
{
width:100%;
height:100%;
background-color:#000;
opacity:0.9;
}

.loginholder
{
padding:25px 50px 25px 50px;
background-color:#00000000;
display:inline-block;
}

.inputbox
{
border:2px solid #464646;
padding:5px;
width:300px;
color:#fff;
background-color:#000;
border-radius:0px;
transition: all 0.5s;
font-weight:normal;
}

.inputbox:focus,.inputbox:hover
{
border:2px solid blue;
color:#fff;
background-color:#000;
font-weight:bold;
}

h2,.labelc,h1,h3,h4,h5
{
padding:0px;
margin:0px;
color:#fff;
}

.btn-normal
{
padding:5px 40px;
color:#fff;
background-color:#000;
transition: all 0.5s;
border-radius:5px;
border:2px solid #fff;
text-decoration:none;
font-weight:bold;
cursor:pointer;
}

.btn-normal:focus,.btn-normal:hover
{
color:#000;
border:2px solid #000;
background-color:#fff;
text-decoration:none;
}

.forgetpassword
{
font-weight:bold;
color:blue;
}

.forgotpassword:hover,.forgetpassword:focus
{
color:black;
}

.btn-normal-logo
{
color:#fff;
background-color:#000;
border:2px solid #fff;
text-decoration:none;
font-weight:bold;
cursor:pointer;
}

.btn-normal-logo:focus,.btn-normal-logo:hover
{
border:2px solid blue;
color:blue;
}

Result:

Dark Design Login Page with CSS and HTML 02

Also see:

Creating Awesome looking login page with CSS and HTML.

 


Share this:

  • Click to share on Facebook (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Reddit (Opens in new window)
  • Click to share on Telegram (Opens in new window)
  • Click to share on WhatsApp (Opens in new window)
  • Click to share on Skype (Opens in new window)
  • Click to share on Pinterest (Opens in new window)
  • Click to share on Tumblr (Opens in new window)
  • Click to print (Opens in new window)
  • Click to share on Pocket (Opens in new window)
  • Click to email a link to a friend (Opens in new window)

Related

Tags:cssdark designdark formlogin designlogin formlogin page

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get all the latest updates for free on Facebook

Get all the latest updates for free on Facebook
 

CSS
  • Create HTML Select Option with Icons using FontAwesome
  • Create Simple and Responsive Login page using HTML and CSS
  • CSS – Create Bottom Page Button Icon
  • JQuery DataTable Dark Theme CSS Design
  • Jquery Datatable Custom Design CSS
  • How to create Responsive Bootstrap Carousel
  • How to center div in HTML page using CSS
  • JQuery DatePicker Styling – Custom CSS
  • CSS – Easiest way to center Div horizontally
  • Create Dark Design Login Page with CSS and HTML
  • Awesome looking Login Page with CSS and HTML only
  • Free Open source CSS Templates for your next web Project
  • ASP.NET Custom Fonts using CSS
  • ASP.NET Styling Buttons Using Bootstrap CSS
  • Create CSS Text Gradient Pattern – An Easy way
  • CSS Typing animation example
  • CSS Parallax scrolling effect
  • ASP.NET menu control – A great looking alternative
  • CSS Selectors
  • ASP.NET CSS
  • Asp.net Button CSS
  • STYLING THE GRIDVIEW IN ASP.NET
  • STYLING THE GRIDVIEW IN ASP.NET
  • STYLING THE GRIDVIEW IN ASP.NET
  • STYLING THE GRIDVIEW IN ASP.NET

Neve | Powered by WordPress