× Introducting Dog Shelter Project Dog Shelter: Setting Up The Folder Structure Dog Shelter: Building The Navbar Dog Shelter: Building The Hero Section Dog Shelter: Building The Get Involved Section Dog Shelter: Building Dogs For Adoption Section Dog Shelter: Building The QA Section Dog Shelter: Building The Footer Section Dog Shelter: Responsive Design

Dog Shelter Project: Building The Footer Section

Welcome back! In today's video tutorial we'll work on crafting the footer section for our Doh Shelter website project! In this session, we will delve into the art of creating an engaging and informative footer that consists of four essential columns: About, Get Involved, Adopt, and Contact. Additionally, we will ensure that our footer includes vital copyright information. Get ready to elevate your web design skills and contribute to our project's success by mastering the art of footer creation. Let's dive in!

Building The Footer Section - Summary

In this tutorial, you've learned how to design an effective and visually appealing footer for our Dog Shelter website project. To help you implement what you've learned, here's the HTML and CSS code used in this tutorial:

Footer Section HTML Code:

<footer class="footer">
<div class="footer-logo"> Dog Shelter </div >
< p class="footer-text" > Providing love, care, and hope to our four-legged friends.</p>
<div class="footer-links">
<a class="footer-link" href="#about" > About </a>
<a class="footer-link" href="#involvement" > Get Involved </a>
<a class="footer-link" href="#adopt" > Adopt </a>
<a class="footer-link" href="#contact" > Contact </a>
</div>
< p > © 2023 Dog Shelter. All rights reserved.</p>
</footer >

Footer Section CSS Code

.footer { background-color: #333; color: white; padding: 30px 0; text-align: center; margin-top:50px; }
.footer-logo { font-size: 28px; margin-bottom: 10px; }
.footer-text { font-size: 16px; margin-bottom: 20px; }
.footer-links { display: flex; justify-content: center; gap: 20px; margin-top: 10px; }
.footer-link { text-decoration: none; color: white; font-size: 14px; transition: color 0.3s; }
.footer-link:hover { color: #ddd; }

Now is your turn! Remember: "Practice makes perfect"!

Worning: Do not copy & paste the above code. Type it in to practice. Please Do Not Copy & Paste the above code as it will not display. Please type in the above code to practice.