mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2024-11-18 09:04:35 +01:00
Added HTML and CSS for About page.
This commit is contained in:
Razi KAntorp
parent
fd39236e9e
commit
9d39f6cdaa
@ -9,7 +9,19 @@
|
||||
@stop
|
||||
|
||||
@section('body')
|
||||
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
var $window = $(window);
|
||||
$('section[data-type="background"]').each(function () {
|
||||
var $bgobj = $(this);
|
||||
$(window).scroll(function () {
|
||||
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
|
||||
var coords = '50% ' + yPos + 'px';
|
||||
$bgobj.css({ backgroundPosition: coords });
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<div class="navbar" style="margin-bottom:0px">
|
||||
<div class="container">
|
||||
<div class="navbar-inner">
|
||||
@ -23,4 +35,186 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="hero3" data-speed="2" data-type="background">
|
||||
<div class="container">
|
||||
<div class="caption">
|
||||
<h1>WHY INVOICE NINJA?
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="about center">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<h2>This is a really nice headline about the app.</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus.
|
||||
Fusce dapibus, tellus ac cursus commodo, tortor mauris
|
||||
condimentum nibh, ut fermentum massa justo sit amet
|
||||
risus. Etiam porta sem malesuada magna mollis euismod.
|
||||
Donec sed odio dui.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="about white-bg">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<div class="screendump">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
<h2>This is a really nice headline about the app.</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus.
|
||||
Fusce dapibus, tellus ac cursus commodo, tortor mauris
|
||||
condimentum nibh, ut fermentum massa justo sit amet
|
||||
risus. Etiam porta sem malesuada magna mollis euismod.
|
||||
Donec sed odio dui.</p>
|
||||
<p>Donec id elit non mi porta gravida at eget metus.
|
||||
Fusce dapibus, tellus ac cursus commodo, tortor mauris
|
||||
condimentum nibh, ut fermentum massa justo sit amet
|
||||
risus. Etiam porta sem malesuada magna mollis euismod.
|
||||
Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod.
|
||||
Donec sed odio dui.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="about">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-7">
|
||||
<h2>This is a really nice headline about the app.</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus.
|
||||
Fusce dapibus, tellus ac cursus commodo, tortor mauris
|
||||
condimentum nibh, ut fermentum massa justo sit amet
|
||||
risus. Etiam porta sem malesuada magna mollis euismod.
|
||||
Donec sed odio dui.</p>
|
||||
<p>Donec id elit non mi porta gravida at eget metus.
|
||||
Fusce dapibus, tellus ac cursus commodo, tortor mauris
|
||||
condimentum nibh, ut fermentum massa justo sit amet
|
||||
risus. Etiam porta sem malesuada magna mollis euismod.
|
||||
Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod.
|
||||
Donec sed odio dui.</p>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<div class="screendump">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="about white-bg">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<div class="screendump">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
<h2>This is a really nice headline about the app.</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus.
|
||||
Fusce dapibus, tellus ac cursus commodo, tortor mauris
|
||||
condimentum nibh, ut fermentum massa justo sit amet
|
||||
risus. Etiam porta sem malesuada magna mollis euismod.
|
||||
Donec sed odio dui.</p>
|
||||
<p>Donec id elit non mi porta gravida at eget metus.
|
||||
Fusce dapibus, tellus ac cursus commodo, tortor mauris
|
||||
condimentum nibh, ut fermentum massa justo sit amet
|
||||
risus. Etiam porta sem malesuada magna mollis euismod.
|
||||
Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod.
|
||||
Donec sed odio dui.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="about">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-7">
|
||||
<h2>This is a really nice headline about the app.</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus.
|
||||
Fusce dapibus, tellus ac cursus commodo, tortor mauris
|
||||
condimentum nibh, ut fermentum massa justo sit amet
|
||||
risus. Etiam porta sem malesuada magna mollis euismod.
|
||||
Donec sed odio dui.</p>
|
||||
<p>Donec id elit non mi porta gravida at eget metus.
|
||||
Fusce dapibus, tellus ac cursus commodo, tortor mauris
|
||||
condimentum nibh, ut fermentum massa justo sit amet
|
||||
risus. Etiam porta sem malesuada magna mollis euismod.
|
||||
Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod.
|
||||
Donec sed odio dui.</p>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<div class="screendump">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="about center white-bg">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<h2>This is a really nice headline about the app.</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus.
|
||||
Fusce dapibus, tellus ac cursus commodo, tortor mauris
|
||||
condimentum nibh, ut fermentum massa justo sit amet
|
||||
risus. Etiam porta sem malesuada magna mollis euismod.
|
||||
Donec sed odio dui.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="upper-footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-3 center-block">
|
||||
<a href="#">
|
||||
<div class="cta">
|
||||
<h2 onclick="getStarted()">Invoice Now <span>+</span></h2>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="navbar" style="margin-bottom:0px">
|
||||
<div class="container">
|
||||
<div class="social">
|
||||
<!--
|
||||
<a href="http://twitter.com/eas_id"><span class=
|
||||
"socicon">c</span></a>
|
||||
-->
|
||||
<a href=
|
||||
"http://facebook.com/invoiceninja" target="_blank"><span class=
|
||||
"socicon">b</span></a> <a href=
|
||||
"http://twitter.com/invoiceninja" target="_blank"><span class=
|
||||
"socicon">a</span></a>
|
||||
<p>Copyright © 2014 InvoiceNinja. All rights reserved.</p>
|
||||
</div>
|
||||
|
||||
<div class="navbar-inner">
|
||||
<ul class="navbar-list">
|
||||
<li>{{ link_to('login', Auth::check() ? 'Continue' : 'Login' ) }}</li>
|
||||
</ul>
|
||||
|
||||
<!--
|
||||
<ul class="navbar-list">
|
||||
<li><a href="#">For developers</a></li>
|
||||
<li><a href="#">Jobs</a></li>
|
||||
<li><a href="#">Terms & Conditions</a></li>
|
||||
<li><a href="#">Our Blog</a></li>
|
||||
</ul>
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer><script src="{{ asset('/js/retina-1.1.0.min.js') }}" type="text/javascript"></script>
|
||||
|
||||
@stop
|
||||
@ -27,6 +27,9 @@ a, a .cta h2, .socicon {
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.center { text-align:center; }
|
||||
|
||||
.white-bg { background-color:#fff; }
|
||||
|
||||
.navbar {
|
||||
background: #2e2b2b;
|
||||
@ -127,7 +130,15 @@ a .cta:hover span {
|
||||
background-position: bottom center;
|
||||
background-size: cover;
|
||||
}
|
||||
.hero2 h1 {
|
||||
.hero3 {
|
||||
text-align: center;
|
||||
background-image: url(/images/hero-bg-3.jpg);
|
||||
padding: 150px 0;
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom center;
|
||||
background-size: cover;
|
||||
}
|
||||
.hero2 h1, .hero3 h1 {
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
@ -186,6 +197,10 @@ section.blue .col-md-6 h1 span {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
section.about { padding: 70px 0; }
|
||||
section.about h2 { margin: 0 0 25px 0; font-size: 25px; text-transform:none;}
|
||||
section.about .screendump { background-color:#ccc; height:220px;}
|
||||
|
||||
footer .navbar-inner {
|
||||
float: right;
|
||||
}
|
||||
@ -296,9 +311,10 @@ margin-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.hero2 {
|
||||
.hero2, .hero3 {
|
||||
padding: 50px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.background {
|
||||
background-attachment: scroll;
|
||||
background-size: cover;
|
||||
@ -308,8 +324,8 @@ margin-bottom: 10px;
|
||||
padding: 50px 0;
|
||||
}
|
||||
section.features, section.upper-footer {
|
||||
margin: 30px 0;
|
||||
}
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
section.features .col-md-3 .box{
|
||||
margin-bottom: 10px;
|
||||
@ -326,6 +342,25 @@ section.blue .col-md-6 h1 span {
|
||||
display: block;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
section.about {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
}
|
||||
section.about p {
|
||||
margin-bottom: 0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
section.about .screendump {
|
||||
margin-top: 25px;
|
||||
}
|
||||
section.about.white-bg .screendump {
|
||||
margin-top: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
section.about h2 {
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
footer .navbar-inner {
|
||||
float: none;
|
||||
}
|
||||
@ -342,6 +377,7 @@ footer .social .socicon {
|
||||
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'socicon';
|
||||
src: url('/fonts/socicon-webfont.eot');
|
||||
|
||||
Binary file not shown.
BIN
public/images/hero-bg-3.jpg
Normal file
BIN
public/images/hero-bg-3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Loading…
Reference in New Issue
Block a user