Submitted almost 3 years ago

Clipboard Landing Page Using HTML, CSS & added JS and Animate.css

Sky• 945

@Skyz03

Preview site View code

This is a solution for...

Clipboard landing page

HTML
CSS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

This was a pretty interesting challenge where I started experimenting JS & Animate.css into buttons plus made it responsive as possible.. Any recommendation to make the footer logo image center align all the time .. the way I did is a temporary solution .. if anyone has any best practice please provide some feedback. Thanks for your advice in advance and any suggestions to take it to the next level is highly recommended.

Community feedback

tediko• 6,580

@tediko

Posted almost 3 years ago

Hello, Sky! 👋

Congrats on finishing another challenge! 🎉 Your solution looks very good and also responds well. Do you want to align it on mobile? If so, all you have to do is remove margin and padding from .footer-logo. Then you have to remove margin and width from .logo-section and voila. Since your footer have text-align: center it will also align center your image. If you meant on desktop - additionally to removing styles to your .logo-section add:

display: flex;
align-items: center;

Good luck with that, have fun coding! 💪

Sky• 945

@Skyz03

Posted almost 3 years ago

@tediko Thanks a lot. Will implement this out shortly. I was looking for both mobile and desktop friendly way Cheers.👍

Sky• 945

@Skyz03

Posted almost 3 years ago

@tediko Works Perfectly, Thanks a lot...

Patrick• 14,325

@palgramming

Posted almost 3 years ago

You need to work on your bottom footer the background color does not currently extend across the whole page you will see you have a small little margin on both sides currently

Sky• 945

@Skyz03

Posted almost 3 years ago

@palgramming Thank you for your valuable insight ... will surely implement that out.

Please log in to post a comment

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