fix footer css

This commit is contained in:
Raghavendra Kamath
2018-02-12 17:03:07 +05:30
parent ba684f8d90
commit 3f8b8bb4f8
4 changed files with 84 additions and 63 deletions

View File

@@ -6,9 +6,10 @@
max-width: 1366px; max-width: 1366px;
margin: 0 auto; margin: 0 auto;
} }
.feature { .feature,
.footer {
padding: 8rem 2.5rem; padding: 8rem 2.5rem;
border-bottom: 1px solid #EBEFF2; border-top: 1px solid #EBEFF2;
} }
.homepage-illustration { .homepage-illustration {
margin-bottom: 4rem; margin-bottom: 4rem;
@@ -81,7 +82,7 @@
background-color: #fafbfc; background-color: #fafbfc;
} }
.secondary-link { .secondary-link {
color: #7575ff; color: #6c7680;
transition: color 0.5s ease-in; transition: color 0.5s ease-in;
} }
.secondary-link:hover { .secondary-link:hover {
@@ -99,3 +100,20 @@
.bulleted-list li { .bulleted-list li {
padding-bottom: 1em; padding-bottom: 1em;
} }
.row {
display: flex;
text-align: left;
justify-content: space-between;
margin-bottom: 8rem;
}
.footer-list {
padding-left: 0;
padding: ;
}
.list-unstyled li {
list-style: none;
margin: 1em 0;
}
.top-spacer {
margin-top: 3rem;
}

View File

@@ -10,9 +10,9 @@ text-align:center;
margin: 0 auto; margin: 0 auto;
} }
.feature { .feature, .footer {
padding: 8rem 2.5rem; padding: 8rem 2.5rem;
border-bottom: 1px solid @light-border-color; border-top: 1px solid @light-border-color;
} }
.homepage-illustration { .homepage-illustration {
@@ -97,7 +97,7 @@ text-align:center;
.secondary-link{ .secondary-link{
color:@brand-primary; color:@text-light;
transition: color .5s ease-in; transition: color .5s ease-in;
&:hover{ &:hover{
color: @text-dark; color: @text-dark;
@@ -118,3 +118,23 @@ text-align:center;
.bulleted-list li { .bulleted-list li {
padding-bottom: 1em; padding-bottom: 1em;
} }
.row {
display: flex;
text-align: left;
justify-content: space-between;
margin-bottom: 8rem;
}
.footer-list {
padding-left: 0;
padding: ;
}
.list-unstyled li {
list-style: none;
margin: 1em 0;
}
.top-spacer {
margin-top: 3rem;
}

View File

@@ -1,124 +1,124 @@
<footer> <footer class="footer">
<div class="container"> <div class="container">
<div class="clearfix"> <div class="row clearfix">
<div class="footer columned"> <div class="columned">
<h3 class="footer-title">Domains</h3> <h3 class="footer-title">Domains</h3>
<ul class="list-unstyled footer-list"> <ul class="list-unstyled footer-list">
<li> <li>
<a class="secondary-links" href="/docs/user/manual/en/manufacturing">Manufacturing</a> <a class="secondary-link" href="/docs/user/manual/en/manufacturing">Manufacturing</a>
</li> </li>
<li> <li>
<a class="secondary-links" href="/docs/user/manual/en/stock">Distribution</a> <a class="secondary-link" href="/docs/user/manual/en/stock">Distribution</a>
</li> </li>
<li> <li>
<a class="secondary-links" href="docs/user/manual/en/projects">Services</a> <a class="secondary-link" href="docs/user/manual/en/projects">Services</a>
</li> </li>
<li> <li>
<a class="secondary-links" href="/docs/user/manual/en/accounts/point-of-sale-pos-invoice">Retail</a> <a class="secondary-link" href="/docs/user/manual/en/accounts/point-of-sale-pos-invoice">Retail</a>
</li> </li>
<li> <li>
<a class="secondary-links" href="/docs/user/manual/en/schools">Education</a> <a class="secondary-link" href="/docs/user/manual/en/schools">Education</a>
</li> </li>
<li> <li>
<a class="secondary-links" href="docs/user/manual/en/healthcare">Healthcare</a> <a class="secondary-link" href="docs/user/manual/en/healthcare">Healthcare</a>
</li> </li>
<li> <li>
<a class="secondary-links" href="docs/user/manual/en/agriculture">Agriculture</a> <a class="secondary-link" href="docs/user/manual/en/agriculture">Agriculture</a>
</li> </li>
<li> <li>
<a class="secondary-links" href="docs/user/manual/en/non_profit">Non Profit</a> <a class="secondary-link" href="docs/user/manual/en/non_profit">Non Profit</a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="footer columned"> <div class="columned">
<h3 class="footer-title">Foundation</h3> <h3 class="footer-title">Foundation</h3>
<ul class="list-unstyled footer-list"> <ul class="list-unstyled footer-list">
<li> <li>
<a class="secondary-links" href="/about">About</a> <a class="secondary-link" href="/about">About</a>
</li> </li>
<li> <li>
<a class="secondary-links" href="/blog">Blog</a> <a class="secondary-link" href="/blog">Blog</a>
</li> </li>
<li> <li>
<a class="secondary-links" href="/members">Memberships</a> <a class="secondary-link" href="/members">Memberships</a>
</li> </li>
<li> <li>
<a class="secondary-links" href="bounties">Bounties</a> <a class="secondary-link" href="bounties">Bounties</a>
</li> </li>
<li> <li>
<a class="secondary-links" href="/conf">Conferences</a> <a class="secondary-link" href="/conf">Conferences</a>
</li> </li>
<li> <li>
<a class="secondary-links" href="/contact">Contact</a> <a class="secondary-link" href="/contact">Contact</a>
</li> </li>
<li> <li>
<a class="secondary-links" href="/login">Member Login</a> <a class="secondary-link" href="/login">Member Login</a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="footer columned"> <div class="columned">
<h3 class="footer-title">Community</h3> <h3 class="footer-title">Community</h3>
<ul class="list-unstyled footer-list"> <ul class="list-unstyled footer-list">
<li> <li>
<a class="secondary-links" href="/chapters">Chapters</a> <a class="secondary-link" href="/chapters">Chapters</a>
</li> </li>
<li> <li>
<a class="secondary-links" href="https://discuss.erpnext.com" target="_blank" >Forum</a> <a class="secondary-link" href="https://discuss.erpnext.com" target="_blank" >Forum</a>
</li> </li>
<li> <li>
<a class="secondary-links" href="/service-providers">Service Providers</a> <a class="secondary-link" href="/service-providers">Service Providers</a>
</li> </li>
<li> <li>
<a class="secondary-links" href="/erpnext-jobs">ERPNext Jobs</a> <a class="secondary-link" href="/erpnext-jobs">ERPNext Jobs</a>
</li> </li>
<li> <li>
<a class="secondary-links" href="/apps">Apps</a> <a class="secondary-link" href="/apps">Apps</a>
</li> </li>
<li> <li>
<a class="secondary-links" href="https://gitter.im/frappe/erpnext" target="_blank" >Chat (Gitter)</a> <a class="secondary-link" href="https://gitter.im/frappe/erpnext" target="_blank" >Chat (Gitter)</a>
</li> </li>
<li> <li>
<a class="secondary-links" href="https://github.com/frappe/erpnext" target="_blank" >GitHub</a> <a class="secondary-link" href="https://github.com/frappe/erpnext" target="_blank" >GitHub</a>
</li> </li>
<li> <li>
<a class="secondary-links" href="https://erpnext.com" target="_blank" >ERPNext.com</a> <a class="secondary-link" href="https://erpnext.com" target="_blank" >ERPNext.com</a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="footer columned"> <div class="columned">
<h3 class="footer-title">Documentation</h3> <h3 class="footer-title">Documentation</h3>
<ul class="list-unstyled footer-list"> <ul class="list-unstyled footer-list">
<li> <li>
<a class="secondary-links" href="/docs/user/manual">Manual</a> <a class="secondary-link" href="/docs/user/manual">Manual</a>
</li> </li>
<li> <li>
<a class="secondary-links" href="https://www.youtube.com/c/erpnext" target="_blank" >Video Tutorials</a> <a class="secondary-link" href="https://www.youtube.com/c/erpnext" target="_blank" >Video Tutorials</a>
</li> </li>
<li> <li>
<a class="secondary-links" href="/docs/current">ERPNext Model & API</a> <a class="secondary-link" href="/docs/current">ERPNext Model & API</a>
</li> </li>
</ul> </ul>
<h3 class="footer-title">Localisation</h3> <h3 class="footer-title top-spacer">Localisation</h3>
<ul class="list-unstyled footer-list"> <ul class="list-unstyled footer-list">
<li> <li>
<a class="secondary-links" href="https://erpnext.com/uae-ksa-vat" target="_blank">UAE/KSA VAT</a> <a class="secondary-link" href="https://erpnext.com/uae-ksa-vat" target="_blank">UAE/KSA VAT</a>
</li> </li>
<li> <li>
<a class="secondary-links" href="https://erpnext.com/india-gst" target="_blank">GST For India</a> <a class="secondary-link" href="https://erpnext.com/india-gst" target="_blank">GST For India</a>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="social"> <div class="social">
<p>Find us on <p>Find us on
<a class="secondary-links" href="https://twitter.com/erpnext" target="_blank">Twitter</a>, <a class="secondary-link" href="https://twitter.com/erpnext" target="_blank">Twitter</a>,
<a class="secondary-links" href="https://www.facebook.com/ERPNext/" target="_blank">Facebook</a>, <a class="secondary-link" href="https://www.facebook.com/ERPNext/" target="_blank">Facebook</a> &
<a class="secondary-links" href="https://medium.com/frappé-thoughts/" target="_blank">Medium</a> <a class="secondary-link" href="https://medium.com/frappé-thoughts/" target="_blank">Medium</a>
</p> </p>
</div> </div>
<div class="copyright"> <div class="copyright">
<p> &copy;<span id="year"></span> ERPNext Open Source Software Foundation.Content licensed under<a class="secondary-links" href="https://creativecommons.org/licenses/by-sa/3.0/" target="_blank">CC-BY-SA 3.0</a>. Read the <a href="/terms" class="secondary-links">terms of use</a>. <p> &copy;<span id="year"></span> ERPNext Open Source Software Foundation.Content licensed under <a class="secondary-link" href="https://creativecommons.org/licenses/by-sa/3.0/" target="_blank"> CC-BY-SA 3.0</a>. Read the <a href="/terms" class="secondary-link">terms of use</a>.
</p> </p>
</div> </div>
</footer> </footer>

View File

@@ -94,7 +94,7 @@
</ul> </ul>
</div> </div>
<div class="third-column"> <div class="third-column">
<h1 class="subtitle">Need Help</h1> <h1 class="subtitle">Need Help?</h1>
<ul class="bulleted-list"> <ul class="bulleted-list">
<li> <li>
<a href="" class="secondary-link">User Manual</a> <a href="" class="secondary-link">User Manual</a>
@@ -110,21 +110,4 @@
</div> </div>
</div> </div>
</section> </section>
<section>
<h2>Get Started</h2>
<div class="row section-grid">
<div class="col-sm-4"">
<a href="https://erpnext.com">ERPNext.com (30 day free trial)</a>
</div>
<div class="col-sm-4">
<a href="https://demo.erpnext.com">Live Demo</a>
</div>
<div class="col-sm-4">
<a href="https://erpnext.com/download">Download Virtual Machine</a>
</div>
<div class="col-sm-4">
<a href="https://github.com/frappe/bench">Bench Install</a>
</div>
</div>
</section>
{% endblock %} {% endblock %}