Frontend Mentor - Fylo landing page with two column layout solution

This is a solution to the Fylo landing page with two column layout challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page

Screenshot

Links

• Solution URL: Frontend Mentor
• Live Site URL: GitHub Pages

My process

Built with

What I learned

I learned how to add a scroll to top button to this website and add Scroll Reveal animations using JavaScript.

<a href="#top" class="footer__scroll active" aria-label="click to scroll to top of page" data-js-top>
  <i class="fa-solid fa-arrow-up"></i>
</a>

ScrollReveal().reveal(".text-group ", {
  origin: "left",
  duration: 1000,
  distance: "50px",
  reset: true,
});

Continued development

Start building projects using ReactJS and Tailwind CSS.

Useful resources

• Shots - Create and share beautiful screenshots of your site

Author

• Rebecca Padgett on LinkedIn

Acknowledgments

• Scroll to top button YouTube video by codewithsadee.