<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<div class="container">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="js.js" rel="stylesheet">
<link href="stylesheet.css" rel="stylesheet">
<div class="row" style="margin-top:20px">
<div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
<form role="form" style="background:white; padding-top: 21px; padding-bottom: 36px; padding-left: 36px; padding-right: 36px; border-radius:3px;">
<fieldset>
<h2 class="landing">Let's get social!</h2>
<hr class="colorgraph">
<div class="form-group">
<input type="email" name="email" id="email" class="form-control input-lg" placeholder="Email Address">
</div>
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password">
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<input type="submit" class="btn btn-lg btn-success btn-block" value="Sign In">
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<a href="" class="btn btn-lg btn-primary btn-block">Get Started</a>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
body {
background: url("https://d13yacurqjgara.cloudfront.net/users/576253/screenshots/1708124/health_fitness_pattern.png");
background-repeat: repeat;
}
/* Credit to bootsnipp.com for the css for the color graph */
.colorgraph {
height: 5px;
border-top: 0;
background: #e6d3a7;
border-radius: 3px;
background-image: -webkit-linear-gradient(left, #e6d3a7 0%, #1bbb95 48%, #392f2f 100%);
background-image: -moz-linear-gradient(left, #e6d3a7 0%, #1bbb95 48%, #392f2f 100%));
background-image: -o-linear-gradient(left, #e6d3a7 0%, #1bbb95 48%, #392f2f 100%));
background-image: linear-gradient(to right, #e6d3a7 0%, #1bbb95 48%, #392f2f 100%));
}
.body, .btn, .container {
font-family: 'Roboto', sans-serif;
}
.btn-success {
background: #1BBB95;
border:none;
}
.btn-success:hover {
background: #1BBB95;
border-left,border-right,border-top:none;
border-bottom: 3px solid #18A987;
}
.btn-primary {
background: #e6d3a7;
border:none;
}
.btn-primary:hover {
background: #e6d3a7;
border-left,border-right,border-top:none;
border-bottom: 3px solid #CDBB91;
}
.btn-checkbox {
background: #e6d3a7;
}
h2.landing {
color:#1BBB95;
text-align:center;
font-size:45px;
}
input{
color:#392F2F;
}
.input-lg:focus {
outline: none !important;
border-color: #e6d3a7;
box-shadow: 0 0 5px #e6d3a7;
}
body {
background-color:#1BBB95;
}
$(function(){
$('.button-checkbox').each(function(){
var $widget = $(this),
$button = $widget.find('button'),
$checkbox = $widget.find('input:checkbox'),
color = $button.data('color'),
settings = {
on: {
icon: 'glyphicon glyphicon-check'
},
off: {
icon: 'glyphicon glyphicon-unchecked'
}
};
$button.on('click', function () {
$checkbox.prop('checked', !$checkbox.is(':checked'));
$checkbox.triggerHandler('change');
updateDisplay();
});
$checkbox.on('change', function () {
updateDisplay();
});
function updateDisplay() {
var isChecked = $checkbox.is(':checked');
// Set the button's state
$button.data('state', (isChecked) ? "on" : "off");
// Set the button's icon
$button.find('.state-icon')
.removeClass()
.addClass('state-icon ' + settings[$button.data('state')].icon);
// Update the button's color
if (isChecked) {
$button
.removeClass('btn-default')
.addClass('btn-' + color + ' active');
}
else
{
$button
.removeClass('btn-' + color + ' active')
.addClass('btn-default');
}
}
function init() {
updateDisplay();
// Inject the icon if applicable
if ($button.find('.state-icon').length == 0) {
$button.prepend('<i class="state-icon ' + settings[$button.data('state')].icon + '"></i> ');
}
}
init();
});
});