mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2024-11-08 12:12:48 +01:00
Responsive fixes for homepage
This commit is contained in:
Razi KAntorp
parent
080800d646
commit
5a4f625d31
@ -1,7 +1,7 @@
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="plans-table col-md-9">
|
||||
<div class="col-md-4 desc hide-mobile">
|
||||
<div class="col-md-4 desc hidden-phone">
|
||||
<div class="cell"></div>
|
||||
<div class="cell">Number of clients per account</div>
|
||||
<div class="cell">Unlimited client invoices</div>
|
||||
@ -20,36 +20,36 @@
|
||||
</div>
|
||||
<div class="free col-md-4">
|
||||
<div class="cell">Free</div>
|
||||
<div class="cell"><div class="hide-desktop">Number of clients per account</div><span>500</span></div>
|
||||
<div class="cell"><div class="hide-desktop">Unlimited client invoices</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell"><div class="hide-desktop">Add your company logo</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell"><div class="hide-desktop">Live .PDF invoice creation</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell"><div class="hide-desktop">4 beatiful invoice templates</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell"><div class="hide-desktop">Accept credit card payments</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell"><div class="hide-desktop">Quotes/pro-forma invoices</div><span class="glyphicon glyphicon-remove"></div>
|
||||
<div class="cell"><div class="hide-desktop">Custom fields and invoice colors</div><span class="glyphicon glyphicon-remove"></div>
|
||||
<div class="cell"><div class="hide-desktop">Dynamic chart builder</div><span class="glyphicon glyphicon-remove"></div>
|
||||
<div class="cell"><div class="hide-desktop">Priority email support</div><span class="glyphicon glyphicon-remove"></div>
|
||||
<div class="cell"><div class="hide-desktop">Remove "Created by Invoice Ninja"</div><span class="glyphicon glyphicon-remove"></div>
|
||||
<div class="cell"><div class="hide-desktop">Latest and greatest features</div><span class="glyphicon glyphicon-remove"></div>
|
||||
<div class="cell price"><div class="hide-desktop">Pricing</div><p>Free<span> /Always!</span></p></div>
|
||||
<div class="cell"><div class="hidden-desktop">Number of clients per account</div><span>500</span></div>
|
||||
<div class="cell"><div class="hidden-desktop">Unlimited client invoices</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell"><div class="hidden-desktop">Add your company logo</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell"><div class="hidden-desktop">Live .PDF invoice creation</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell"><div class="hidden-desktop">4 beatiful invoice templates</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell"><div class="hidden-desktop">Accept credit card payments</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell"><div class="hidden-desktop">Quotes/pro-forma invoices</div><span class="glyphicon glyphicon-remove"></div>
|
||||
<div class="cell"><div class="hidden-desktop">Custom fields and invoice colors</div><span class="glyphicon glyphicon-remove"></div>
|
||||
<div class="cell"><div class="hidden-desktop">Dynamic chart builder</div><span class="glyphicon glyphicon-remove"></div>
|
||||
<div class="cell"><div class="hidden-desktop">Priority email support</div><span class="glyphicon glyphicon-remove"></div>
|
||||
<div class="cell"><div class="hidden-desktop">Remove "Created by Invoice Ninja"</div><span class="glyphicon glyphicon-remove"></div>
|
||||
<div class="cell"><div class="hidden-desktop">Latest and greatest features</div><span class="glyphicon glyphicon-remove"></div>
|
||||
<div class="cell price"><div class="hidden-desktop">Pricing</div><p>Free<span> /Always!</span></p></div>
|
||||
</div>
|
||||
<div class="pro col-md-4">
|
||||
|
||||
<div class="cell">Pro Plan<span class="glyphicon glyphicon-star"></div>
|
||||
<div class="cell"><div class="hide-desktop">Number of clients per account</div><span style="color: #2299c0; font-size: 16px;">5,000</span></div>
|
||||
<div class="cell"><div class="hide-desktop">Unlimited client invoices</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell"><div class="hide-desktop">Add your company logo</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell"><div class="hide-desktop">Live .PDF invoice creation</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell"><div class="hide-desktop">4 beatiful invoice templates</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell"><div class="hide-desktop">Accept credit card payments</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell"><div class="hide-desktop">Quotes/pro-forma invoices</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell"><div class="hide-desktop">Custom invoice fields and colors</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell"><div class="hide-desktop">Dynamic chart builder</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell"><div class="hide-desktop">Priority email support</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell"><div class="hide-desktop">Remove "Created by Invoice Ninja"</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell"><div class="hide-desktop">Latest and greatest features</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell price"><div class="hide-desktop">Pricing</div><p>$50<span> /Year</span></p></div>
|
||||
<div class="cell"><div class="hidden-desktop">Number of clients per account</div><span style="color: #2299c0; font-size: 16px;">5,000</span></div>
|
||||
<div class="cell"><div class="hidden-desktop">Unlimited client invoices</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell"><div class="hidden-desktop">Add your company logo</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell"><div class="hidden-desktop">Live .PDF invoice creation</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell"><div class="hidden-desktop">4 beatiful invoice templates</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell"><div class="hidden-desktop">Accept credit card payments</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell"><div class="hidden-desktop">Quotes/pro-forma invoices</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell"><div class="hidden-desktop">Custom invoice fields and colors</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell"><div class="hidden-desktop">Dynamic chart builder</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell"><div class="hidden-desktop">Priority email support</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell"><div class="hidden-desktop">Remove "Created by Invoice Ninja"</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell"><div class="hidden-desktop">Latest and greatest features</div><span class="glyphicon glyphicon-ok"></div>
|
||||
<div class="cell price"><div class="hidden-desktop">Pricing</div><p>$50<span> /Year</span></p></div>
|
||||
<!-- <div class="cell"><a href="#"><div class="cta"><h2 onclick="return getStarted()">GO PRO <span>+</span></h2></div> </a>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -67,9 +67,10 @@ var contactForm = {
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-7">
|
||||
<h2>Questions, special requests, or just want to say hi?</h2>
|
||||
<p>Fill in the form below and we'll get back to you as soon as possible. Hope to hear from you!</p>
|
||||
|
||||
<div class="headline">
|
||||
<h2>Questions, special requests, or just want to say hi?</h2>
|
||||
<p>Fill in the form below and we'll get back to you as soon as possible. Hope to hear from you!</p>
|
||||
</div>
|
||||
{{ Form::open(['url' => 'contact_submit', 'class' => 'feedbackForm']) }}
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" id="name" name="name" placeholder="Name">
|
||||
@ -96,7 +97,7 @@ var contactForm = {
|
||||
<h2>Other ways to reach us</h2>
|
||||
<p><span class="glyphicon glyphicon-send"></span><a href="mailto:contact@invoiceninja.com">contact@invoiceninja.com</a></p>
|
||||
<p><span class="glyphicon glyphicon-comment"></span><a href="http://www.invoiceninja.org" target="_blank">Google Group</a></p>
|
||||
<p><span class="github"></span><div style="padding-top:10px"> <a href="https://github.com/hillelcoren/invoice-ninja" target="_blank">GitHub Project</a></div></p>
|
||||
<p><span class="socicon">Q</span><a href="https://github.com/hillelcoren/invoice-ninja" target="_blank">GitHub Project</a></div></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -9,7 +9,6 @@
|
||||
<link href="{{ asset('css/bootstrap.splash.css') }}" rel="stylesheet" type="text/css"/>
|
||||
<link href="{{ asset('css/splash.css') }}" rel="stylesheet" type="text/css"/>
|
||||
-->
|
||||
|
||||
<!--
|
||||
<link href="{{ asset('images/apple-touch-icon-114x114-precomposed.png') }}" rel="apple-touch-icon-precomposed" sizes="114x114">
|
||||
<link href="{{ asset('images/apple-touch-icon-72x72-precomposed.png') }}" rel="apple-touch-icon-precomposed" sizes="72x72">
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -335,6 +335,10 @@ float: right;
|
||||
section.features1 .col-md-7 img, section.features3 .col-md-7 img {
|
||||
margin-left: 40px;
|
||||
}
|
||||
.upper-footer {
|
||||
background-color: #f8f8f8;
|
||||
border-top: 1px solid #e6e6e6;
|
||||
}
|
||||
|
||||
section.upper-footer.white-bg {
|
||||
margin: 0;
|
||||
@ -486,10 +490,6 @@ section.team .col-md-3 h2 {
|
||||
section.about .screendump {
|
||||
height: 220px;
|
||||
}
|
||||
section.about .col-md-5 {
|
||||
padding-right: 15px;
|
||||
padding-left: 43px;
|
||||
}
|
||||
section.about.white-bg .col-md-5 {
|
||||
padding-right: 43px;
|
||||
padding-left: 15px;
|
||||
@ -536,7 +536,7 @@ section.team .img-team {
|
||||
z-index: 1000; position: relative;
|
||||
}
|
||||
section.team .img-team img {}
|
||||
section.contact .address .glyphicon {
|
||||
section.contact .address .glyphicon, section.contact .address .socicon {
|
||||
background: #edd71e;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
@ -545,14 +545,17 @@ section.contact .address .glyphicon {
|
||||
border-radius: 50px;
|
||||
color: #1a1818;
|
||||
margin-right: 15px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
section.contact .address p {
|
||||
margin-bottom: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
section.contact .address span.push {
|
||||
margin-left: 55px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
section.contact .form-control, section.secure .form-control, footer.footer .form-control {
|
||||
display: block;
|
||||
width: 100%;
|
||||
@ -574,6 +577,9 @@ section.contact .form-control, section.secure .form-control, footer.footer .form
|
||||
section.contact textarea.form-control {
|
||||
height: auto;
|
||||
}
|
||||
section.contact form {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
section.secure label { text-transform: uppercase; font-size: 12px; font-weight: 800; margin-bottom: 10px; display: block;}
|
||||
|
||||
@ -819,6 +825,18 @@ footer.footer form#mad_mimi_signup_form input {
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
.headline h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
.headline {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
section.team h2, section.plans h2 {
|
||||
font-size: 20px;
|
||||
margin: 0 0 15px;
|
||||
}
|
||||
|
||||
/* Mobile navigation */
|
||||
.navbar {
|
||||
@ -888,13 +906,34 @@ footer.footer form#mad_mimi_signup_form input {
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
section.features, section.blue, section, section.secure, section.about, section.team, section.contact, section.faq, section.testi, section.plans {
|
||||
padding: 40px 0;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
section.features-splash .icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 4px solid #1d8db3;
|
||||
}
|
||||
section.features-splash .icon img {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
section.about .col-md-5 {
|
||||
padding-left: 15px !important;
|
||||
}
|
||||
section.faq .question {
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
section.faq a.expander {
|
||||
font-size: 14px;
|
||||
}
|
||||
section.faq .contact-box {
|
||||
margin-top: 20px;
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
section.faq .contact-box h2 {
|
||||
float: none;
|
||||
@ -902,7 +941,7 @@ footer.footer form#mad_mimi_signup_form input {
|
||||
margin: 10px 0;
|
||||
}
|
||||
section.faq .contact-box img {
|
||||
float: none;
|
||||
float: none;
|
||||
display: inline-block;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
@ -917,6 +956,70 @@ footer.footer form#mad_mimi_signup_form input {
|
||||
section.faq .contact-box p {
|
||||
margin: 0;
|
||||
}
|
||||
section.plans .plans-table {
|
||||
margin-top: 30px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.plans-table .free .cell {
|
||||
border-left: 1px solid #dfe0e1;
|
||||
border-right: 1px solid #dfe0e1;
|
||||
}
|
||||
.plans-table .free .cell:first-child {
|
||||
border-left: 1px solid #9b9b9b;
|
||||
border-right: 1px solid #9b9b9b;
|
||||
}
|
||||
section.plans .plans-table .cell {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
section.plans .plans-table span {
|
||||
display: inline-block !important;
|
||||
}
|
||||
section.plans .plans-table .hidden-desktop {
|
||||
display: inline-block !important;
|
||||
margin-bottom: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
section.plans .plans-table .cell {
|
||||
height: auto;
|
||||
padding: 14px 0;
|
||||
}
|
||||
section.plans .plans-table .free .cell {
|
||||
padding-right: 0;
|
||||
}
|
||||
section.plans .plans-table .free .cell:first-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
section.plans .plans-table .cell .cta {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
section.plans .plans-table .pro {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.plans-table .pro .cell:last-child, .plans-table .free .cell:last-child {
|
||||
padding: 14px 0 0 0 !important;
|
||||
}
|
||||
.plans-table .pro .cell:last-child p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
section.about img {
|
||||
margin-top: 20px;
|
||||
}
|
||||
section.team .img-team {
|
||||
width: 60%;
|
||||
min-width: 60%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
section.team .col-md-3:last-child p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Heros */
|
||||
.hero1.background {
|
||||
min-height: 100px;
|
||||
}
|
||||
.hero .caption {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
@ -952,28 +1055,24 @@ footer.footer form#mad_mimi_signup_form input {
|
||||
}
|
||||
|
||||
|
||||
section.features, section.blue, section, section.secure, section.about, section.team, section.contact, section.faq, section.testi {
|
||||
padding: 40px 0;
|
||||
margin: 0 !important;
|
||||
}
|
||||
section.secure .info {
|
||||
padding-top: 0;
|
||||
}
|
||||
section.secure .card {
|
||||
padding: 15px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
section.secure .card p {
|
||||
padding-top: 0;
|
||||
padding-right: 15px;
|
||||
line-height: 1;
|
||||
}
|
||||
section.blue h1 {
|
||||
line-height: 1.2;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 0;
|
||||
font-size: 30px;
|
||||
}
|
||||
padding-top: 0;
|
||||
}
|
||||
section.secure .card {
|
||||
padding: 15px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
section.secure .card p {
|
||||
padding-top: 0;
|
||||
padding-right: 15px;
|
||||
line-height: 1;
|
||||
}
|
||||
section.blue h1 {
|
||||
line-height: 1.2;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 0;
|
||||
font-size: 30px;
|
||||
}
|
||||
section.blue h1 span {
|
||||
font-size: 20px;
|
||||
}
|
||||
@ -1023,11 +1122,12 @@ float: none;
|
||||
}
|
||||
section.contact .address {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
section.contact .address p {
|
||||
text-align: center;
|
||||
}
|
||||
section.contact .address .glyphicon {
|
||||
section.contact .address .glyphicon, section.contact .address .socicon {
|
||||
display: block;
|
||||
margin: 0 auto 7px;
|
||||
float: none;
|
||||
@ -1056,6 +1156,8 @@ float: none;
|
||||
#feedbackForm {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer .navbar-inner {
|
||||
float: none;
|
||||
}
|
||||
@ -1225,26 +1327,4 @@ div.fb_iframe_widget > span {
|
||||
}
|
||||
.plans-table a .cta h2 span {
|
||||
background: #1e84a5;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 769px) {
|
||||
.plans-table .cell {
|
||||
height: auto;
|
||||
padding: 14px 0;
|
||||
}
|
||||
.plans-table .free .cell {
|
||||
padding-right: 0;
|
||||
}
|
||||
.plans-table .free .cell:first-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.plans-table .cell div:first-child {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.plans-table .cell .cta {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.plans-table .pro {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 88 KiB |
Loading…
Reference in New Issue
Block a user