RESPONSIVE LOGIN PAGE WITHOUT USING BOOTSTRAP AND MEDIA QUERY
We have designed a login page without using any bootstrap and media query code. We have used only html and css code.It is fully responsive page for all views.
Given below code copy and paste in your css page.
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
body{
margin:10 auto;
background-image:url('http://codextips.net/wp-content/uploads/2016/10/bg-images.jpg');
background-repeat:repeat;
background-position:center;
font-family: Tahoma, Geneva, sans-serif;
}
h1,h3{
margin:0; padding:0;
}
.main{
margin:0 auto;
max-width:460px;
}
.login-header{
color:#fff;
text-align:center;
font-size:200%;
}
.login-header h1 {
text-shadow: 0px 8px 10px #000;
}
.login-field {
background: rgba(60, 93, 125, 0.42);
border-radius: 5px;
box-shadow: 1px 5px 13px rgb(24, 25, 22);
border-radius:5px;
/*border:2px solid #3c5d7d;
background:#3c5d7d;
box-shadow:2px 5px 15px #000;*/
margin:50px auto;
padding:30px;
overflow: hidden;
text-align:center;
opcity
}
.uname,.upass {
width: 100%;
max-width:95%;
height:30px;
margin:10px 0;
border-radius:5px;
border:2px solid #FFF;
outline:none;
font-size:14px;
padding-left:10px;
}
.btn{
height:30px;
width:100px;
font-size:100%;
font-weight:bold;
background:#800000;
border:1px solid #660000;
border-radius:5px;
color: #fff;
text-transform:uppercase;
cursor:pointer;
}
.btn:hover{
background:#fff;
color: #800000;
}
.login-field h3{
text-align:left;
margin-left:4px;
color:#fff;
}
.register{
float:right;
color:#fff;
}
|
Given below code copy and paste in your login page.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<div class="main">
<div class="login-header">
<h1>Login User</h1>
</div>
<div class="login-field">
<h3>User Name :</h3>
<input type="text" class="uname" placeholder="username"/>
<h3>Password :</h3>
<input type="text" class="upass" placeholder="password"/>
<input type="button" class="btn" value="Login"/><br/>
<a class="register" href="#">Sign Up!..</a>
</div>
</div>
|
Output :
View Demo
