dqnid/advanced-css
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

footer done

Browse Source
This commit is contained in:
dqnid committed 2024-02-14 23:22:10 +01:00
1 parent 70cd6973d1
commit 6659f74c86
5 files changed
+139
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Natours/starter/css/style.css
+39
View File
@@ -515,6 +515,45 @@ body {
.row .col-3-of-4 {
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 {
background-color: #f7f7f7;
padding: 25rem 0;
Natours/starter/index.html
+38
View File
@@ -363,5 +363,43 @@
</div>
</section>
</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 &copy; 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>
</html>
Natours/starter/sass/abstracts/_variables.scss
+1
View File
@@ -14,6 +14,7 @@ $color-grey-light-2: #eee;
$color-gray-dark: #777;
$color-gray-dark-2: #999;
$color-gray-dark-3: #333;
$color-white: #fff;
$color-black: #000;
Natours/starter/sass/layout/_footer.scss
+60
View File
@@ -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;
}
}
Natours/starter/sass/main.scss
+1
View File
@@ -17,5 +17,6 @@
@import "layout/header";
@import "layout/grid";
@import "layout/footer";
@import "pages/home";