From c8d0597d8a5b52031a7a7a952a5ba7d246ec0044 Mon Sep 17 00:00:00 2001
From: Revanth <revanthpershad@gmail.com>
Date: Fri, 23 Sep 2022 20:20:08 +0530
Subject: [PATCH] latest commit 23/9/22

---
 css/style.css                  | 39 ++++++++++++++++++++++
 index.html                     | 24 +++++++++++++
 sass/abstracts/_variables.scss |  1 +
 sass/layouts/_footer.scss      | 61 ++++++++++++++++++++++++++++++++++
 sass/main.scss                 |  1 +
 5 files changed, 126 insertions(+)
 create mode 100644 sass/layouts/_footer.scss

diff --git a/css/style.css b/css/style.css
index 9687240..327e119 100644
--- a/css/style.css
+++ b/css/style.css
@@ -421,6 +421,45 @@ body {
   .feature-box:hover {
     transform: translateY(-1.5rem) scale(1.05); }
 
+.footer {
+  margin-top: -30vh;
+  background-color: #333;
+  font-size: 1.4rem;
+  padding: 10rem 0; }
+  .footer__logo-box {
+    text-align: center;
+    margin-bottom: 10rem; }
+  .footer__logo {
+    width: 30rem;
+    height: auto; }
+  .footer__list {
+    list-style: none; }
+  .footer__items {
+    display: inline-block;
+    padding: 4px; }
+    .footer__items:not(:last-child) {
+      margin-right: 1.2rem; }
+  .footer__navigation {
+    border-top: solid 1px #eee;
+    padding: 8px 0;
+    display: inline-block; }
+  .footer__link:link, .footer__link:visited {
+    text-transform: uppercase;
+    text-decoration: none;
+    color: #edebeb;
+    background-color: #333;
+    display: inline-block;
+    transition: all 0.2s;
+    padding: 2px 6px; }
+  .footer__link:hover, .footer__link:active {
+    color: #55c57a;
+    box-shadow: 0rem 0.5rem 1.5rem rgba(126, 213, 111, 0.4);
+    transform: scale(1.3);
+    transition: all 0.2s;
+    border-radius: 20px; }
+  .footer__copyright {
+    text-align: right; }
+
 .header {
   height: 95vh;
   /* 95 percent of the viewport size. Always use vh to make a website as responsive as possible. Because this changes with the size of the screen. */
diff --git a/index.html b/index.html
index 4c0d750..1796f99 100644
--- a/index.html
+++ b/index.html
@@ -221,6 +221,30 @@ <h4 class="card__heading">
             </section>
         </main>
 
+        <footer class="footer">
+            <div class="footer__logo-box">
+                <img src="img/logo-green-small-2x.png" alt="Full Logo" class="footer__logo">
+            </div>
+            <div class="row">
+                <div class="col-1-2">
+                    <div class="footer__navigation">
+                        <ul class="footer__list">
+                            <li class="footer__items"><a href="#" class="footer__link">Company</a></li>
+                            <li class="footer__items"><a href="#" class="footer__link">Contact</a></li>
+                            <li class="footer__items"><a href="#" class="footer__link">Carrers</a></li>
+                            <li class="footer__items"><a href="#" class="footer__link">Privacy Policy</a></li>
+                            <li class="footer__items"><a href="#" class="footer__link">Terms</a></li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="col-1-2">
+                    <p class="footer__copyright">
+                        Build by <a href="#" class="footer__link">P Revanth Pershad</a> Copyright &copy;
+                    </p>
+                </div>
+            </div>
+        </footer>
+
         <!--
         <section>
             </!-- Grid is used to make classes that can be used to make a proper structure for our webpage elements.
diff --git a/sass/abstracts/_variables.scss b/sass/abstracts/_variables.scss
index 2f05465..5489439 100644
--- a/sass/abstracts/_variables.scss
+++ b/sass/abstracts/_variables.scss
@@ -11,6 +11,7 @@ $color-tertiary-dark : #5643fa;
 
 $color-light-grey : #edebeb;
 $color-grey : #777;
+$color-grey-dark : #333;
 $color-white : #fff;
 $color-black : #000;
 
diff --git a/sass/layouts/_footer.scss b/sass/layouts/_footer.scss
new file mode 100644
index 0000000..2ceba1c
--- /dev/null
+++ b/sass/layouts/_footer.scss
@@ -0,0 +1,61 @@
+.footer{
+    margin-top: -30vh;
+    background-color: $color-grey-dark;
+    font-size: 1.4rem;
+    padding: 10rem 0;
+
+    &__logo-box{
+        text-align: center;
+        margin-bottom: 10rem;
+    }
+
+    &__logo{
+        width: 30rem;
+        height: auto;
+    }
+
+    &__list{
+        list-style: none;
+    }
+
+    &__items{
+        display: inline-block;
+        padding: 4px;
+
+        &:not(:last-child){
+            margin-right: 1.2rem; 
+        }
+    }
+
+    &__navigation{
+        border-top: solid 1px #eee;
+        padding: 8px 0;
+        display: inline-block;
+    }
+
+    &__link{
+        &:link,
+        &:visited{
+            text-transform: uppercase;
+            text-decoration: none;
+            color: $color-light-grey;
+            background-color: $color-grey-dark;
+            display: inline-block;
+            transition: all 0.2s;
+            padding: 2px 6px;
+        }
+
+        &:hover,
+        &:active{
+            color: $primary-color;
+            box-shadow: 0rem .5rem 1.5rem rgba($primary-color-light , 0.4);
+            transform: scale(1.3);
+            transition: all 0.2s;
+            border-radius: 20px;
+        }
+    }
+
+    &__copyright{
+        text-align: right;
+    }
+} 
\ No newline at end of file
diff --git a/sass/main.scss b/sass/main.scss
index a22009e..84c02d2 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -12,6 +12,7 @@
 @import "components/compositon";
 @import "components/feature-box";
 
+@import "layouts/footer";
 @import "layouts/header";
 @import "layouts/grid";