mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2024-11-10 05:02:36 +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
|
@stop
|
||||||
|
|
||||||
@section('body')
|
@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="navbar" style="margin-bottom:0px">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="navbar-inner">
|
<div class="navbar-inner">
|
||||||
@ -23,4 +35,186 @@
|
|||||||
</div>
|
</div>
|
||||||
</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
|
@stop
|
||||||
@ -27,6 +27,9 @@ a, a .cta h2, .socicon {
|
|||||||
a:hover {
|
a:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
.center { text-align:center; }
|
||||||
|
|
||||||
|
.white-bg { background-color:#fff; }
|
||||||
|
|
||||||
.navbar {
|
.navbar {
|
||||||
background: #2e2b2b;
|
background: #2e2b2b;
|
||||||
@ -127,7 +130,15 @@ a .cta:hover span {
|
|||||||
background-position: bottom center;
|
background-position: bottom center;
|
||||||
background-size: cover;
|
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;
|
color: #fff;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
@ -186,6 +197,10 @@ section.blue .col-md-6 h1 span {
|
|||||||
text-transform: lowercase;
|
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 {
|
footer .navbar-inner {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
@ -296,9 +311,10 @@ margin-bottom: 10px;
|
|||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.hero2 {
|
.hero2, .hero3 {
|
||||||
padding: 50px 0;
|
padding: 50px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.background {
|
.background {
|
||||||
background-attachment: scroll;
|
background-attachment: scroll;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
@ -308,8 +324,8 @@ margin-bottom: 10px;
|
|||||||
padding: 50px 0;
|
padding: 50px 0;
|
||||||
}
|
}
|
||||||
section.features, section.upper-footer {
|
section.features, section.upper-footer {
|
||||||
margin: 30px 0;
|
margin: 30px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
section.features .col-md-3 .box{
|
section.features .col-md-3 .box{
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
@ -326,6 +342,25 @@ section.blue .col-md-6 h1 span {
|
|||||||
display: block;
|
display: block;
|
||||||
text-transform: lowercase;
|
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 {
|
footer .navbar-inner {
|
||||||
float: none;
|
float: none;
|
||||||
}
|
}
|
||||||
@ -342,6 +377,7 @@ footer .social .socicon {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'socicon';
|
font-family: 'socicon';
|
||||||
src: url('/fonts/socicon-webfont.eot');
|
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