Social network login with image

This bootstrap snippet called "Social network login with image" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: login,form

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
	<div class="row equal-height-columns">
		<div class="col-md-6 col-sm-6 hidden-xs image-block equal-height-column" style="height: 793px;">
            <div class="backstretch" style="left: 0px; top: 0px; overflow: hidden; margin: 0px; padding: 0px; height: 793px; width: 713px; z-index: -999998; position: absolute;">
                <img src="http://htmlstream.com/preview/unify-v1.9.4/assets/img/bg/img11.jpg" style="position: absolute; margin: 0px; padding: 0px; border: none; width: 1208.38px; height: 793px; max-width: none; z-index: -999999; left: -247.69px; top: 0px;">
            </div>
            
        </div>

		<div class="col-md-6 col-sm-6 form-block equal-height-column" style="height: 793px;">
			<a href="index.html">
				<img src="http://htmlstream.com/preview/unify-v1.9.4/assets/img/themes/logo1-blue.png" alt="">
			</a>
			<h2 class="margin-bottom-30">Login To Your Account</h2>
			<form action="#">
				<div class="login-block">
					<div class="input-group margin-bottom-20">
						<span class="input-group-addon rounded-left"><i class="fa fa-user color-blue"></i></span>
						<input type="text" class="form-control rounded-right" placeholder="Username">
					</div>

					<div class="input-group margin-bottom-20">
						<span class="input-group-addon rounded-left"><i class="fa fa-lock color-blue"></i></span>
						<input type="password" class="form-control rounded-right" placeholder="Password">
					</div>

					<div class="checkbox">
						<ul class="list-inline">
							<li>
								<label>
									<input type="checkbox"> Remember me
								</label>
							</li>

							<li class="pull-right">
								<a href="#">Forgot password?</a>
							</li>
						</ul>
					</div>

					<div class="row margin-bottom-70">
						<div class="col-md-12">
							<button type="submit" class="btn btn-info btn-block">Sign In</button>
                            <br>
						</div>
					</div>

					<div class="social-login text-center">
						<ul class="list-inline margin-bottom-20">
							<li>
								<button class="btn rounded btn-lg btn-facebook">
									<i class="fa fa-facebook"></i> Facebook Sign in
								</button>
							</li>
							<li>
								<button class="btn rounded btn-lg btn-twitter">
									<i class="fa fa-twitter"></i> Twitter Sign in
								</button>
							</li>
						</ul>
						<p>Don't have an account? <a href="page_registration2.html">Create New</a></p>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

body{margin-top:20px;
background:#eee;
}

/*--------------------------------------------------
  Registration and Login Page v4
----------------------------------------------------*/
html {
    min-height: 100%;
	position: relative;
}
body {
	margin-bottom: 178px;
	font-size: 14px;
}
.image-block {
	padding: 70px 0;
	overflow: hidden;
}

/* Form block */
.form-block {
	padding: 70px 59px;
	background: #fff;
}
.form-block img {
	margin-bottom: 100px;
}

/* Form Header */
.form-block h2 {
	text-transform: uppercase;
}

/* Input fields */
.form-block .input-group input.form-control {
	background: transparent;
	border-left: none;
	padding-left: 10px;
	padding-right: 10px;
	height: 50px;
	border-color: rgba(214,214,214,.5);
	border-left: none;
	color: #969595;
}

.form-block .list-unstyled {
	margin: 0 -5px;
	padding: 10px 0 13px;
}

/* Input fields icons */
.form-block .input-group-addon {
	min-width: 40px;
	background: transparent;
	border-color: rgba(214,214,214,.5);
	padding-right: 0;
}
.form-block .input-group-addon i {
	font-size: 16px;
	position: relative;
	top: 1px;
}
.form-block .form-control:focus {
  box-shadow: none;
  border-color: #999;
}

/* Buttons */
.form-block .btn-u,
.form-block .btn {
	padding-top: 12px;
	padding-bottom: 12px;
	text-transform: uppercase;
}

.login-block .btn {
	padding: 12px 20px;
	font-size: 13px;
}
.login-block .btn .fa {
	position: relative;
	top: 2px;
	font-size: 18px;
	margin-right: 10px;
}

.login-block .btn-facebook:focus {
	color: #4863ae;
}
.login-block .btn-twitter:focus {
	color: #46c0fb;
}

/* Bottom part */
.login-block .bottom p {
	text-transform: uppercase;
}
.login-block .bottom .btn-u {
	width: 190px;
	text-align: center;
	line-height: 38px;
}
.login-block .bottom .btn-u:hover {
	color: #fff;
}

/* Registration form */
.reg-block .checkbox label {
	display: list-item;
	list-style: none;
}
.reg-block .checkbox label {
	max-width: 230px
}

/* Sticky-Footer */
.sticky-footer {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 50px 15px 40px;
	text-align: center;
	border-top: 1px solid #eee;
	background: #fff;
}

/* Social links */
.sticky-footer .copyright-space {
	margin: 0;
}

@media (min-width: 992px) {
	.login-block,
	.reg-block {
		min-width: 400px;
	}
	.login-block .social-login:before,
	.login-block .social-login:after {
		position: absolute;
		top: -2px;
		height: 2px;
		background: #fff;
		width: 110px;
		content: "";
	}
	.login-block .social-login:before {
		left: 0;
	}
	.login-block .social-login:after {
		right: 0;
	}
}

@media (max-width: 1138px) {
	.form-block {
		padding-right: 85px;
		padding-left: 85px;
	}
	.login-block .social-login,
	.login-block .bottom {
		text-align: center;
	}
	.social-login ul li:first-child,
	.bottom ul li:first-child {
		margin-bottom: 20px;
	}
}

@media (max-width: 991px) {
	.form-block {
		padding: 70px 40px;
	}
}

@media (max-width: 767px) {
	body {
		margin-bottom: 0;
	}
	.sticky-footer {
		position: static;
	}
}

@media (max-width: 418px) {
	.login-block .checkbox {
		margin-bottom: 30px;
	}
	.login-block .checkbox ul li:first-child {
		margin-bottom: 10px;
	}
	.login-block .checkbox ul li:last-child {
		float: none !important;
	}
}

.form-block .input-group-addon {
    min-width: 40px;
    background: transparent;
    border-color: rgba(214,214,214,.5);
    padding-right: 0;
}

.form-block .input-group input.form-control {
    background: transparent;
    border-left: none;
    padding-left: 10px;
    padding-right: 10px;
    height: 50px;
    border-color: rgba(214,214,214,.5);
    border-left: none;
    color: #969595;
}

.form-control {
    box-shadow: none;
    border-radius: 0;
}
.input-group-addon:first-child {
    border-right: 0;
}

#topcontrol:hover {
	background: #e74c3c;
}

.form-block h2 {
    text-transform: uppercase;
}
.margin-bottom-30 {
    margin-bottom: 30px;
}

h2 {
    font-size: 24px;
    line-height: 33px;
}

.margin-bottom-20 {
    margin-bottom: 20px;
}

.color-blue {
    color: #3498db;
}

.form-block .input-group-addon i {
    font-size: 16px;
    position: relative;
    top: 1px;
}

.icon-lock {
    font-family: 'Simple-Line-Icons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Apr 28th 2016, 00:16

Views: 308