"Elegant Login Page"
Bootstrap 4.1.1 Snippet by SamimOnline

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<!--Made with love by Mutiullah Samim -->
<!--Bootsrap 4 CDN-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!--Fontawesome CDN-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<!--Custom styles-->
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<div class="d-flex justify-content-center h-100">
<div class="card">
<div class="card-header">
<h3>Sign In</h3>
<div class="d-flex justify-content-end social_icon">
<span><i class="fab fa-facebook-square"></i></span>
<span><i class="fab fa-google-plus-square"></i></span>
<span><i class="fab fa-twitter-square"></i></span>
</div>
</div>
<div class="card-body">
<form>
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-user"></i></span>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* Made with love by Mutiullah Samim*/
@import url('https://fonts.googleapis.com/css?family=Numans');
html,body{
background-image: url('http://getwallpapers.com/wallpaper/full/a/5/d/544750.jpg');
background-size: cover;
background-repeat: no-repeat;
height: 100%;
font-family: 'Numans', sans-serif;
}
.container{
height: 100%;
align-content: center;
}
.card{
height: 370px;
margin-top: auto;
margin-bottom: auto;
width: 400px;
background-color: rgba(0,0,0,0.5) !important;
}
.social_icon span{
font-size: 60px;
margin-left: 10px;
color: #FFC312;
}
.social_icon span:hover{
color: white;
cursor: pointer;
}
.card-header h3{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

hello im so interested in the elegant login form is anywhere to convert the html file in haml file for my rails app? help please!

elie (-2) - 5 years ago - Reply -2


Hello, thanks for your interest. You can convert HTML to HAML here at http://htmltohaml.com

SamimOnline (-1) - 5 years ago - Reply 1


I just love this elegant login form

PaariDhanush (-3) - 5 years ago - Reply -3


How set CDs and Js files in my webpage in above example

Koli (-5) - 4 years ago - Reply -5


a

Danush93 () - 2 years ago - Reply 0


The list is Great, well designed and very creative thinking. I suggest a website that we can get more knowledge about web developing, It helped me to success my various projects. https://w3schoolweb.com/

Use this link to access.

Danush93 () - 2 years ago - Reply 0


The list is Great, well designed and very creative thinking. I suggest a website that we can get more knowledge about web developing, It helped me to success my various projects. https://w3schoolweb.com/

Use this link to access.

Danush93 () - 2 years ago - Reply 0


The list is Great, well designed and very creative thinking. I suggest a website that we can get more knowledge about web developing, It helped me to success my various projects. https://w3schoolweb.com/

Use this link to access.

Danush93 () - 2 years ago - Reply 0


poggers

MartinB () - 3 years ago - Reply 0


poggers

MartinB () - 3 years ago - Reply 0


poggers

MartinB () - 3 years ago - Reply 0


poggers

MartinB () - 3 years ago - Reply 0


poggers

MartinB () - 3 years ago - Reply 0


poggers

MartinB () - 3 years ago - Reply 0


poggers

MartinB () - 3 years ago - Reply 0


Bro thanks for share this login, it was very useful for me, i really apreciate your work. THANKS

Masters2397 () - 4 years ago - Reply 0


It's very helpful to me.. thank you sir

satyabali () - 4 years ago - Reply 0


Hi,

I have been looking for something like this Elegant Login Page for some time now.

The one question that puzzles me as I have a little knowledge about website development is where to place the code?

Elsherif () - 4 years ago - Reply 0


Hi,

I have been looking for something like this Elegant Login Page for some time now.

The one question that puzzles me as I have a little knowledge about website development is where to place the code?

Elsherif () - 4 years ago - Reply 0


can i use this with php?

jane0228 () - 5 years ago - Reply 0


yes you can, i used it with php, just put your php code at the begining with php tags and save the file as "login.php"

Masters2397 () - 4 years ago - Reply 0