<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 ---------->
<!DOCTYPE html>
<head>
<title>Learning Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body { background: url(assets/bglight.png); }
.hero-unit { background-color: #fff; }
.center { display: block; margin: 0 auto; }
</style>
</head>
<body>
<div class="wrapper">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand text-uppercase" href="#">Grey Campus <span class="label label-success text-capitalize">Free</span></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navigation">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About</a></li>
<li><a href="#">Features</a></li>
<li><button type="button" class="btn btn-success navbar-btn btn-circle">Sign in</button></li>
</ul>
</div>
</div>
</nav>
<header class="header">
<div class="container">
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="content">
<div class="pull-middle">
<h1 class="page-header">Download our Free App To Be In Contact With Us!!</h1>
<p class="lead">Grey Campus.</p>
<div class="panel panel-default">
<div class="panel-body">
<form action="#" role="form">
<div class="input-group">
<input type="email" class="form-control" placeholder="Email Address" required>
<span class="input-group-btn">
<button class="btn btn-success btn-circle" type="submit">Sign up for free</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-md-offset-1 text-center mt-100 mb-100">
<div class="phone">
<img class="img-responsive img-rounded" src="https://pbs.twimg.com/media/B5xxPZ1CAAAKmVO.png:large">
</div>
</div>
</div>
</div>
</header>
<section class="section">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-1 text-center mt-100 mb-100">
<div class="phone">
<img class="img-responsive img-rounded" src="https://pbs.twimg.com/media/B5xxPZ1CAAAKmVO.png:large">
</div>
</div>
<div class="col-md-5 col-md-offset-1">
<div class="content">
<div class="pull-middle">
<h2 class="h1 page-header">Discover more about features.</h2>
<ul class="media-list">
<li class="media">
<a class="media-left" href="#">
<span class="glyphicon glyphicon-cloud icon text-success"></span>
</a>
<div class="media-body">
<h3 class="media-heading">Praesent porttitor urna ut enim.</h3>
<p>Maecenas vitae ex iaculis, efficitur est eu, fermentum quam.</p>
</div>
</li>
<li class="media">
<a class="media-left" href="#">
<span class="glyphicon glyphicon-lock icon text-success"></span>
</a>
<div class="media-body">
<h3 class="media-heading">Cras consequat est et elit.</h3>
<p>Integer suscipit massa at tellus semper, at aliquam ante bibendum.</p>
</div>
</li>
<li class="media">
<a class="media-left" href="#">
<span class="glyphicon glyphicon-user icon text-success"></span>
</a>
<div class="media-body">
<h3 class="media-heading">Aenean vel enim quis dui blandit.</h3>
<p>Maecenas vitae ex iaculis, efficitur est eu, fermentum quam.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="row">
<div class="col-md-3 text-right">
<div class="content">
<div class="pull-middle">
<h4><strong>Describe your product.</strong></h4>
<p>Proin sapien neque, consequat ac tempus aliquam, gravida in urna. Phasellus et lectus in odio imperdiet tempus. Aenean posuere, nunc a tristique imperdiet, massa dolor dictum eros, sit amet tempor turpis turpis vel tortor.</p>
<small>Phasellus feugiat at lorem a tincidunt. Nam hendrerit leo vitae orci pellentesque, nec euismod dolor condimentum.</small>
</div>
</div>
</div>
<div class="col-md-4 col-md-offset-1 mt-100 mb-100">
<div class="phone">
<img class="img-responsive img-rounded" src="https://pbs.twimg.com/media/B5xxPZ1CAAAKmVO.png:large">
</div>
</div>
<div class="col-md-3 col-md-offset-1">
<div class="content">
<div class="pull-middle">
<h4><strong>Even more stuff.</strong></h4>
<p>Proin sapien neque, consequat ac tempus aliquam, gravida in urna. Phasellus et lectus in odio imperdiet tempus. Aenean posuere, nunc a tristique imperdiet, massa dolor dictum eros, sit amet tempor turpis turpis vel tortor.</p>
<a class="btn btn-success btn-circle" href="#">Sign up for free</a>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="footer text-center">
<div class="container">
<small>© Copyright 2015. Crafted with love by <a href="https://www.twitter.com/maridlcrmn">@maridlcrmn</a></small>
</div>
</footer>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="../../assets/js/vendor/holder.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</html>
.container1
{
background-color: yellowgreen;
}
.jumbotron {
position: relative;
padding: 40px 0;
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
background: #020031;
background: -moz-linear-gradient(45deg, #020031 0%, #6d3353 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353));
background: -webkit-linear-gradient(45deg, #020031 0%,#6d3353 100%);
background: -o-linear-gradient(45deg, #020031 0%,#6d3353 100%);
background: -ms-linear-gradient(45deg, #020031 0%,#6d3353 100%);
background: linear-gradient(45deg, #020031 0%,#6d3353 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 );
-webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
-moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
}
/*
.jumbotron::after {
content: '';
display: block;
position: relative; /* changed by me */
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(../img/bs-docs-masthead-pattern.png) repeat center center;
opacity: .4;
}
.jumbotron {
margin-bottom: 0px;
background-image: src(images/screenshot.png);
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
color: white;
text-shadow: black 0.3em 0.3em 0.3em;
}
.profile-img-card {
width: 96px;
height: 96px;
margin: 0 auto 10px;
display: block;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.btn-signin {
/*background-color: #4d90fe; */
background-color: #ff6600;
/* background-color: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33));*/
padding: 0px;
font-weight: 700;
font-size: 14px;
height: 36px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: none;
-o-transition: all 0.218s;
-moz-transition: all 0.218s;
-webkit-transition: all 0.218s;
transition: all 0.218s;
}
.card-container.card {
width: 350px;
padding: 40px 40px;
}
body, html {
height: 100%;
background-repeat: no-repeat;
background-image: linear-gradient(rgb(255, 230, 209), rgb(146, 164, 133));
}
.card {
background-color: #F7F7F7;
/* just in case there no content*/
padding: 20px 25px 30px;
margin: 0 auto 25px;
margin-top: 50px;
/* shadows and rounded borders */
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.card-container.card {
width: 350px;
padding: 40px 40px;
}
/*
Free App template for Bootstrap 3
Code snippet by maridlcrmn for Bootsnipp.com
Follow me on Twitter @maridlcrmn
Image credits: unsplash.com
Image placeholders: placemi.com
*/
.mt-100 {
margin-top: 100px;
}
.mb-100 {
margin-bottom: 100px;
}
.icon {
width: 32px;
height: 32px;
text-align: center;
padding: 7px 8px;
border: 2px solid;
border-radius: 50%;
}
.header {
padding-top: 50px;
background-color: #eee;
overflow: hidden;
}
.footer {
color: #887;
background-color: #eee;
padding-top: 30px;
padding-bottom: 30px;
}
.content {
position: relative;
display: table;
width: 100%;
min-height: 100vh;
}
.pull-middle {
display: table-cell;
vertical-align: middle;
}
.btn {
padding-left: 25px;
padding-right: 25px;
}
.btn-circle {
border-radius: 20px;
}
.input-group input {
border: 0;
box-shadow: none;
padding-right: 30px;
}
.input-group input:focus,
.input-group input:active {
outline: 0;
box-shadow: none;
}
.input-group-btn:last-child>.btn {
z-index: 2;
margin-left: -18px;
border-radius: 20px;
}
.phone {
position: relative;
max-width: 276px;
margin: 80px auto;
padding: 45px 9px 68px;
border: 2px solid #ddd;
border-radius: 20px;
background-color: #222;
box-shadow: 20px 20px 40px #887;
}
