added footer

Author: MainaGeorge

index.html

@@ -372,7 +372,15 @@ <h2>Wonder Woman</h2>
     </section>
 
     <!--******* Footer ******* -->
-    <footer id="footer">Footer</footer>
+    <footer id="footer">
+      <p>All Rights Reserved</p>
+      <div class="footer__social">
+        <a href="#" class="footer__social--links"><i class="fab fa-facebook"></i></a>
+        <a href="#" class="footer__social--links"><i class="fab fa-twitter"></i></a>
+        <a href="#" class="footer__social--links"><i class="fab fa-linkedin-in"></i></a>
+        <a href="#" class="footer__social--links"><i class="fab fa-instagram"></i></a>
+      </div>
+    </footer>
     <script src="app.js"></script>
   </body>
 </html>

style.css

@@ -763,27 +763,24 @@ div.gallery-carousel__img-container {
   display: none;
 }
 
-
 section#features-content > div:first-child {
-  background: linear-gradient(var(--color-secondary-m-light), var(--color-secondary-m-light)), url('img/Features/cocktail.jpg');
-  border-right: solid .2rem var(--color-secondary);
+  background: linear-gradient(var(--color-secondary-m-light), var(--color-secondary-m-light)), url("img/Features/cocktail.jpg");
+  border-right: solid 0.2rem var(--color-secondary);
 }
 
 section#features-content > div:last-child {
-  background: linear-gradient(var(--color-secondary-m-light), var(--color-secondary-m-light)), url('img/Features/surfing.jpg');
-  border-left: solid .2rem var(--color-secondary);
+  background: linear-gradient(var(--color-secondary-m-light), var(--color-secondary-m-light)), url("img/Features/surfing.jpg");
+  border-left: solid 0.2rem var(--color-secondary);
 }
 
 section#features-content > div:first-child,
-section#features-content > div:last-child{
+section#features-content > div:last-child {
   background-position: left;
   background-size: cover;
 }
 
-
 section#features-text {
   background-color: var(--color-secondary);
-  
 }
 
 section#testimonials {
@@ -873,11 +870,67 @@ section#testimonials {
 .testimonials__card:hover .testimonials__card--back {
   transform: perspective(100rem) rotateY(1turn);
 }
+
 footer#footer {
   background-color: var(--color-primary);
   grid-column: container-start / container-end;
+  padding: 6vh 4vw;
+
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  place-items: center;
+}
+
+.footer__social--links:link,
+.footer__social--links:visited {
+  display: inline-block;
+  background-color: var(--color-secondary);
+  border-radius: 4rem;
+  margin-right: 1rem;
+  box-shadow: 0.5rem 0.5rem 2rem 0.5rem var(--color-secondary-m-light), -0.5rem -0.5rem 2rem 0.5rem var(--color-secondary-m-light);
+  transform: scale(0.8);
+  animation: social 3s linear infinite;
+}
+
+.footer__social--links:link:nth-child(1),
+.footer__social--links:visited:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.footer__social--links:link:nth-child(2),
+.footer__social--links:visited:nth-child(2) {
+  animation-delay: 0.3s;
+}
+
+.footer__social--links:link:nth-child(3),
+.footer__social--links:visited:nth-child(3) {
+  animation-delay: 0.6s;
+}
+
+.footer__social--links:link:nth-child(4),
+.footer__social--links:visited:nth-child(4) {
+  animation-delay: 0.9s;
 }
 
+@keyframes social {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+    transform: scale(1.2);
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.footer__social--links i {
+  color: var(--color-primary);
+  font-size: 2rem;
+}
 /************************** 1000 px screen and below ***************************/
 @media screen and (max-width: 1000px) {
   a:link,
@@ -921,6 +974,12 @@ footer#footer {
   section#villas {
     grid-gap: 0;
   }
+
+  footer#footer {
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(2, 1fr);
+    row-gap: 3rem;
+  }
 }
 
 /************************** 600 px screen and below ***************************/
@@ -948,6 +1007,7 @@ footer#footer {
   div[class^="villas"] p[class^="villas"],
   section#events-content > div p[class*="para"],
   section#features-content > div p[class*="para"],
+  footer#footer > div p[class*="para"],
   .motto__content--para,
   .booking-content__para {
     font-size: 1.5rem;
@@ -984,10 +1044,14 @@ footer#footer {
   .corousel__nav {
     grid-template-columns: repeat(5, 1fr);
     grid-template-rows: repeat(2, 1fr);
-    grid-row-gap : 3vh;
+    grid-row-gap: 3vh;
     grid-column-gap: 8vw;
     height: 12%;
   }
+
+  footer#footer {
+    padding: 4vh 2vw;
+  }
 }
 
 /************************** 400 px screen and below ***************************/