From 6659f74c861875610312d2908cf730fe264b6723 Mon Sep 17 00:00:00 2001
From: Daniel Heras Quesada <dani.heras@hotmail.com>
Date: Wed, 14 Feb 2024 23:22:10 +0100
Subject: [PATCH] footer done

---
 Natours/starter/css/style.css                 | 39 ++++++++++++
 Natours/starter/index.html                    | 38 ++++++++++++
 .../starter/sass/abstracts/_variables.scss    |  1 +
 Natours/starter/sass/layout/_footer.scss      | 60 +++++++++++++++++++
 Natours/starter/sass/main.scss                |  1 +
 5 files changed, 139 insertions(+)
 create mode 100644 Natours/starter/sass/layout/_footer.scss

diff --git a/Natours/starter/css/style.css b/Natours/starter/css/style.css
index b22985a..8a6e65e 100644
--- a/Natours/starter/css/style.css
+++ b/Natours/starter/css/style.css
@@ -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;
diff --git a/Natours/starter/index.html b/Natours/starter/index.html
index 171223a..d22ac08 100644
--- a/Natours/starter/index.html
+++ b/Natours/starter/index.html
@@ -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>
diff --git a/Natours/starter/sass/abstracts/_variables.scss b/Natours/starter/sass/abstracts/_variables.scss
index 0ba8338..134e29a 100644
--- a/Natours/starter/sass/abstracts/_variables.scss
+++ b/Natours/starter/sass/abstracts/_variables.scss
@@ -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;
diff --git a/Natours/starter/sass/layout/_footer.scss b/Natours/starter/sass/layout/_footer.scss
new file mode 100644
index 0000000..77161d5
--- /dev/null
+++ b/Natours/starter/sass/layout/_footer.scss
@@ -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;
+  }
+}
diff --git a/Natours/starter/sass/main.scss b/Natours/starter/sass/main.scss
index a8bd40b..95e71d6 100644
--- a/Natours/starter/sass/main.scss
+++ b/Natours/starter/sass/main.scss
@@ -17,5 +17,6 @@
 
 @import "layout/header";
 @import "layout/grid";
+@import "layout/footer";
 
 @import "pages/home";