latest commit 23/9/22

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. */

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.

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;
 

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;
+ }
+} 

sass/main.scss

@@ -12,6 +12,7 @@
 @import "components/compositon";
 @import "components/feature-box";
 
+@import "layouts/footer";
 @import "layouts/header";
 @import "layouts/grid";