Frontend Mentor - Easybank landing page

A personal solution to Easybank landing page 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
• Author
• Acknowledgments

Overview

This is a fictional digital bank homepage, features a hero section with a call to action, bold images showcasing the app and latest articles.

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: FM Solution
• Live Site URL: Cosy Room Homepage: (github pages)
• Live Site URL: Cosy Room Homepage: (vercel)

My process

I went with the vanilla way. Even though it took longer but it was worth it. I got to play around with different way doing things.

I followed these steps but still overlapped as time went by.

Fleshed out the html
Wrote the styles
Added interactivity

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS Animations
• Intersection Observers

What I learned

using scoped css custom properties

.a-particular-class {
	/* scoped custom properties */
	--color: var(--default-color);
	color: var(--color);
}

.an-added-class-to-a-particular-class {
	--color: var(--another-color);

	display: block;
}

harnessing the power of Intersection Observers for animating when a certain content is in view of the current device

const appearOnScroll = new IntersectionObserver(function (entries, appearOnScroll) {
	entries.forEach((entry) => {
		if (!entry.isIntersecting) return;
		else {
			entry.target.classList.add('appear');
			appearOnScroll.unobserve(entry.target);
		}
	});
}, appearOptions);

Author

• Website - Ridwan
• Frontend Mentor - @abu-hasib

Acknowledgments

• Kevin Powell - Checkout Kevin Powell's youtube Have fun building! 🚀🚀