@laceeder
Posted
First, I'd suggest working on the spacing between elements. The way your design is now in the main area of the design and in the footer, everything looks cluttered. There's a reason the design is as "long" as it is, to even space everything out :)
With the icons, I used font awesome icons and just put them like this:
<a href="#"><i class="fa-brands fa-facebook-square fa-xl"></i>
Then in the CSS when I styled the <a> tag, I used .footer-content .social-media a:hover and just put the color I needed to use as color: hsl(171, 66%, 44%);
Same with the buttons (except for those I styled the button itself's background color, not the <a> tag) and the footer links. You shouldn't have to do all that extra code, so good thing you asked about it! It's an opportunity to learn!
With the footer links you'd do:
<a href="#">FAQs</a>
and then style like this:
.footer-content .links-nav a:hover {
color: hsl(171, 66%, 44%);
}
And with font awesome icons, you can resize them by adding fa-2xs to fa-2xl to your i class code. They have a very helpful article on their website on it! Hope this helps and keep up the good work!
