footer done
This commit is contained in:
dqnid committed
1 parent
70cd6973d1
commit
6659f74c86
5 files changed
+139
No files matched your search
@@ -515,6 +515,45 @@ body {
|
|||||||
.row .col-3-of-4 {
|
.row .col-3-of-4 {
|
||||||
width: calc(3 * ((100% - 3 * 6rem) / 4) + 2 * 6rem); }
|
width: calc(3 * ((100% - 3 * 6rem) / 4) + 2 * 6rem); }
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
background-color: #333;
|
||||||
|
padding: 10rem 0;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
color: #f7f7f7; }
|
||||||
|
.footer__logo-box {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 8rem; }
|
||||||
|
.footer__logo {
|
||||||
|
width: 15rem;
|
||||||
|
height: auto; }
|
||||||
|
.footer__navigation {
|
||||||
|
border-top: 1px solid #777;
|
||||||
|
padding-top: 2rem;
|
||||||
|
display: inline-block; }
|
||||||
|
.footer__list {
|
||||||
|
list-style: none; }
|
||||||
|
.footer__item {
|
||||||
|
display: inline-block; }
|
||||||
|
.footer__item:not(:last-child) {
|
||||||
|
margin-right: 1.5rem; }
|
||||||
|
.footer__link:link, .footer__link:visited {
|
||||||
|
color: #f7f7f7;
|
||||||
|
background-color: #333;
|
||||||
|
text-decoration: none;
|
||||||
|
text-transform: uppercase;
|
||||||
|
display: inline-block;
|
||||||
|
transition: all 0.2s; }
|
||||||
|
.footer__link:hover, .footer__link:active {
|
||||||
|
color: #55c57a;
|
||||||
|
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4);
|
||||||
|
transform: rotate(5deg) scale(1.3); }
|
||||||
|
.footer__copyright {
|
||||||
|
border-top: 1px solid #777;
|
||||||
|
padding-top: 2rem;
|
||||||
|
display: inline-block;
|
||||||
|
width: 80%;
|
||||||
|
float: right; }
|
||||||
|
|
||||||
.section-about {
|
.section-about {
|
||||||
background-color: #f7f7f7;
|
background-color: #f7f7f7;
|
||||||
padding: 25rem 0;
|
padding: 25rem 0;
|
||||||
|
|||||||
@@ -363,5 +363,43 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer__logo-box">
|
||||||
|
<img src="img/logo-green-2x.png" alt="Full logo" class="footer__logo" />
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-1-of-2">
|
||||||
|
<div class="footer__navigation">
|
||||||
|
<ul class="footer__list">
|
||||||
|
<li class="footer__item">
|
||||||
|
<a href="" class="footer__link">Company</a>
|
||||||
|
</li>
|
||||||
|
<li class="footer__item">
|
||||||
|
<a href="" class="footer__link">Contact us</a>
|
||||||
|
</li>
|
||||||
|
<li class="footer__item">
|
||||||
|
<a href="" class="footer__link">Carrers</a>
|
||||||
|
</li>
|
||||||
|
<li class="footer__item">
|
||||||
|
<a href="" class="footer__link">Privacy</a>
|
||||||
|
</li>
|
||||||
|
<li class="footer__item">
|
||||||
|
<a href="" class="footer__link">Terms</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1-of-2">
|
||||||
|
<p class="footer__copyright">
|
||||||
|
Built my
|
||||||
|
<a href="#" class="footer__link">Daniel Heras Quesada</a> as an
|
||||||
|
example project for learning Advanced CSS and Sass. Designed by
|
||||||
|
Jonas Schemdtmann. Copyright © by Jonas Schemdtmann. You are
|
||||||
|
100% allow to use this webpage for both personal and commercial use,
|
||||||
|
but NOT to claim it as your own design.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -14,6 +14,7 @@ $color-grey-light-2: #eee;
|
|||||||
|
|
||||||
$color-gray-dark: #777;
|
$color-gray-dark: #777;
|
||||||
$color-gray-dark-2: #999;
|
$color-gray-dark-2: #999;
|
||||||
|
$color-gray-dark-3: #333;
|
||||||
|
|
||||||
$color-white: #fff;
|
$color-white: #fff;
|
||||||
$color-black: #000;
|
$color-black: #000;
|
||||||
|
|||||||
@@ -0,0 +1,60 @@
|
|||||||
|
.footer {
|
||||||
|
background-color: $color-gray-dark-3;
|
||||||
|
padding: 10rem 0;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
color: $color-grey-light-1;
|
||||||
|
|
||||||
|
&__logo-box {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__logo {
|
||||||
|
width: 15rem;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__navigation {
|
||||||
|
border-top: 1px solid $color-gray-dark;
|
||||||
|
padding-top: 2rem;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__list {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
display: inline-block;
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-right: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__link {
|
||||||
|
&:link,
|
||||||
|
&:visited {
|
||||||
|
color: $color-grey-light-1;
|
||||||
|
background-color: $color-gray-dark-3;
|
||||||
|
text-decoration: none;
|
||||||
|
text-transform: uppercase;
|
||||||
|
display: inline-block;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active {
|
||||||
|
color: $color-primary;
|
||||||
|
box-shadow: 0 1rem 2rem rgba($color-black, 0.4);
|
||||||
|
transform: rotate(5deg) scale(1.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__copyright {
|
||||||
|
border-top: 1px solid $color-gray-dark;
|
||||||
|
padding-top: 2rem;
|
||||||
|
display: inline-block;
|
||||||
|
width: 80%;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -17,5 +17,6 @@
|
|||||||
|
|
||||||
@import "layout/header";
|
@import "layout/header";
|
||||||
@import "layout/grid";
|
@import "layout/grid";
|
||||||
|
@import "layout/footer";
|
||||||
|
|
||||||
@import "pages/home";
|
@import "pages/home";
|
||||||
Reference in new issue
Block a user