mirror of
https://github.com/wassname/bootstrap-landing-pages.git
synced 2026-08-11 11:16:01 +08:00
add some styles
This commit is contained in:
squirelo
@@ -1,4 +1,5 @@
|
||||
/*!
|
||||
* full image layout
|
||||
* Landing page by Hackerloop
|
||||
*/
|
||||
|
||||
@@ -7,9 +8,29 @@
|
||||
Typo
|
||||
*/
|
||||
|
||||
.fullbackground {
|
||||
background: url('http://lorempixel.com/1920/1080/cats/') no-repeat center center fixed;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
background-size: cover;
|
||||
-o-background-size: cover;
|
||||
}
|
||||
.background-image-overlay {
|
||||
display:block;
|
||||
position: fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
z-index:-1;
|
||||
background:url(../img/background-image-overlay.png) repeat;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
background: transparent;
|
||||
|
||||
}
|
||||
|
||||
@@ -22,54 +43,23 @@ p {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Left column
|
||||
*/
|
||||
|
||||
.logo {
|
||||
font-family: Montserrat, sans-serif;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-size: 2em;
|
||||
border: 2px solid white;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto 4em;
|
||||
height: 80px;
|
||||
|
||||
}
|
||||
.full-image {
|
||||
display: block;
|
||||
width: 50%;
|
||||
background: url('http://lorempixel.com/1280/900/cats/3') no-repeat center center scroll;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
background-size: cover;
|
||||
-o-background-size: cover;
|
||||
}
|
||||
|
||||
/*
|
||||
Right column
|
||||
*/
|
||||
|
||||
.content {
|
||||
padding: 1em 2.5em;
|
||||
}
|
||||
|
||||
.fork-button {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*
|
||||
Mailchimp form
|
||||
*/
|
||||
|
||||
.form-inline {
|
||||
|
||||
}
|
||||
#mc-form {
|
||||
padding: 1.5em 0;
|
||||
}
|
||||
|
||||
.error {
|
||||
@@ -95,22 +85,23 @@ Responsive variables
|
||||
}
|
||||
|
||||
@media(min-width:768px) {
|
||||
.content {
|
||||
padding-top: 10%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media(max-width:767px) {
|
||||
body {
|
||||
font-size: 15px;
|
||||
}
|
||||
.logo {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.full-image {
|
||||
width: 100%;
|
||||
max-height: 200px;
|
||||
|
||||
}
|
||||
.content {
|
||||
padding: 12px 24px;
|
||||
padding: 5%;
|
||||
}
|
||||
.form-inline {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html class="fullbackground" lang="en">
|
||||
<!-- Hackerloop landing pages -->
|
||||
<head>
|
||||
<script src="//cdn.optimizely.com/js/PLACEYOUROWNID.js"></script>
|
||||
@@ -28,36 +28,40 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 content">
|
||||
<h1>Easily deploy and customize landing pages on Github</h1>
|
||||
</br>
|
||||
<p>
|
||||
We create this landing page template to enable you testing your new startup idea in few minutes.
|
||||
</p>
|
||||
<p>
|
||||
Just create a github account, fork this repository, and that's it: you have a running landing page available on yourusername.github.io/bootstrap-landing-pages
|
||||
</p>
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=Hackerloop&repo=bootstrap-landing-pages&type=fork&size=large"
|
||||
allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
|
||||
<form class="form-inline" role="form" id="mc-form">
|
||||
<div class="form-group">
|
||||
<input type="email" class="form-control" id="mc-email" placeholder="Enter your email">
|
||||
</div>
|
||||
<button class="btn btn-success" type="submit">Be the first</button>
|
||||
<label class='mc-label'for="mc-email"></label>
|
||||
</form>
|
||||
<!-- jQuery Version 1.11.0 -->
|
||||
<script src="js/jquery-1.11.0.js"></script>
|
||||
<!-- Bootstrap Core JavaScript -->
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<script src="js/jquery.ajaxchimp.js"></script>
|
||||
<script type="text/javascript">
|
||||
$('#mc-form').ajaxChimp({
|
||||
url: 'http://hackerloop.us4.list-manage.com/subscribe/post?u=12b41fbdeef049e91e5115ef0&id=e5a5fd635d'
|
||||
});
|
||||
</script>
|
||||
<script type="text/javascript" src="js/global.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<div class="background-image-overlay">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-5 col-sm-offset-6 content">
|
||||
<h1>Easily deploy and customize landing pages on Github</h1>
|
||||
</br>
|
||||
<p>
|
||||
We create this landing page template to enable you testing your new startup idea in few minutes.
|
||||
</p>
|
||||
<p>
|
||||
Just create a github account, fork this repository, and that's it: you have a running landing page available on yourusername.github.io/bootstrap-landing-pages
|
||||
</p>
|
||||
|
||||
<form class="form-inline" role="form" id="mc-form">
|
||||
<div class="form-group">
|
||||
<input type="email" class="form-control" id="mc-email" placeholder="Enter your email">
|
||||
</div>
|
||||
<button class="btn btn-success" type="submit">Be the first</button>
|
||||
<label class='mc-label'for="mc-email"></label>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- jQuery Version 1.11.0 -->
|
||||
<script src="js/jquery-1.11.0.js"></script>
|
||||
<!-- Bootstrap Core JavaScript -->
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<script src="js/jquery.ajaxchimp.js"></script>
|
||||
<script type="text/javascript">
|
||||
$('#mc-form').ajaxChimp({
|
||||
url: 'http://hackerloop.us4.list-manage.com/subscribe/post?u=12b41fbdeef049e91e5115ef0&id=e5a5fd635d'
|
||||
});
|
||||
</script>
|
||||
<script type="text/javascript" src="js/global.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user