https://github.com/bccpadge/fylo-with-two-columns
Frontend Mentor - Fylo landing page using HTML, SCSS, JavaScript
https://github.com/bccpadge/fylo-with-two-columns
frontend-mentor html-scss-javascript
Last synced: 4 months ago
JSON representation
Frontend Mentor - Fylo landing page using HTML, SCSS, JavaScript
- Host: GitHub
- URL: https://github.com/bccpadge/fylo-with-two-columns
- Owner: bccpadge
- Created: 2025-05-05T15:19:19.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-02T13:48:44.000Z (11 months ago)
- Last Synced: 2025-07-03T22:35:03.542Z (11 months ago)
- Topics: frontend-mentor, html-scss-javascript
- Language: SCSS
- Homepage: https://bccpadge.github.io/fylo-with-two-columns/
- Size: 1.73 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://www.frontendmentor.io/challenges/fylo-landing-page-with-two-column-layout-5ca5ef041e82137ec91a50f5). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
- [Acknowledgments](#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](https://bccpadge.github.io/fylo-with-two-columns/)
## 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.
```js
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](https://shots.so/) - Create and share beautiful screenshots of your site
## Author
- [Rebecca Padgett](https://linkedin.com/in/rebeccapadgett121) on LinkedIn
## Acknowledgments
- [Scroll to top button](https://www.youtube.com/watch?v=CDRcfbHyRqw) YouTube video by codewithsadee.