"Social Login Page with CSS Background"
Bootstrap 3.3.0 Snippet by arjunkomath

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/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href='http://fonts.googleapis.com/css?family=Raleway:500' rel='stylesheet' type='text/css'>
<body>
<div class="middlePage">
<div class="page-header">
<h1 class="logo">Techulus <small>Welcome to our place!</small></h1>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Please Sign In</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-5" >
<a href="#"><img src="http://techulus.com/buttons/fb.png" /></a><br/>
<a href="#"><img src="http://techulus.com/buttons/tw.png" /></a><br/>
<a href="#"><img src="http://techulus.com/buttons/gplus.png" /></a>
</div>
<div class="col-md-7" style="border-left:1px solid #ccc;height:160px">
<form class="form-horizontal">
<fieldset>
<input id="textinput" name="textinput" type="text" placeholder="Enter User Name" class="form-control input-md">
<div class="spacing"><input type="checkbox" name="checkboxes" id="checkboxes-0" value="1"><small> Remember me</small></div>
<input id="textinput" name="textinput" type="text" placeholder="Enter Password" class="form-control input-md">
<div class="spacing"><a href="#"><small> Forgot Password?</small></a><br/></div>
<button id="singlebutton" name="singlebutton" class="btn btn-info btn-sm pull-right">Sign In</button>
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
@charset "UTF-8";
/* CSS Document */
body {
width:100px;
height:100px;
background: -webkit-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* Chrome 10+, Saf5.1+ */
background: -moz-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* FF3.6+ */
background: -ms-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* IE10 */
background: -o-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* Opera 11.10+ */
background: linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* W3C */
font-family: 'Raleway', sans-serif;
}
p {
color:#CCC;
}
.spacing {
padding-top:7px;
padding-bottom:7px;
}
.middlePage {
width: 680px;
height: 500px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.logo {
color:#CCC;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: