Skip to content
Submitted over 2 years ago

Clipboard landing page

Yous•170
@yousra10
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Clipboard landing page
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hi everyone,

I just completed this challenge. I use flexbox CSS. Here are where I had difficult in these challenge :

  1. Change the color on the social medias icon (Facebook, Twitter, Instagram) when we hover on icon. =>What I did is to download other icons social media in color cyan blue and I put them on CSS in background like this : `.social-media-ig a, .social-media-fb a, .social-media-tw a{ display: inline-block; margin:1rem; }

.social-media-fb a { background: url('images/facebook-square-custom.svg') no-repeat; }

.social-media-tw a{ background: url('images/twitter-custom.svg') no-repeat; }

.social-media-ig a{ background: url('images/instagram-custom.svg') no-repeat; }

.social-media-fb a:hover img, .social-media-tw a:hover img, .social-media-ig a:hover img { visibility: hidden; }

But I am not satisfied by the result because we see 2 icons one above the other.

  1. On the footer, I didn't know how to put the FAQs, Privacy Policy, Press kit.. as it appears in the challenge. Here is my solution.. But I know, it's not perfect : ` <div class="links"> <img class="logo-C-bottom" src="images/logo.svg" alt="">

     <div class="faqs">
   <a class="hover-links" href="#">FAQs</a>
   <br>
   <a class="hover-links" href="#">Contact Us</a>
 </div>
 <div class="privacy">
   <a class="hover-links" href="#">Privacy Policy</a>
   <br>
   <a class="hover-links" href="#">Press Kit</a>
 </div>
<div class="guide"> <a class="hover-links" href="#">Install Guide</a> </div>

Your feedbacks and suggestions are welcome !! Thank you very much and happy coding !!

Best regards, Yous Ben

Community feedback

  • Lacey E•110
    @laceederPosted over 2 years ago

    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!

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord