Frontend Mentor - Fylo dark theme landing page solution

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

Table of contents

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

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

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Started from the html, moved on to css. I already have front-end experience, so it was fairly easy and fairly challenging, I attempted the styling from top to bottom, then onto the media queries for mobile view, I didn't any use animations nor js. There really isn't much to say.

Built with

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

I learned about the power of transform, it was integral for the footer nudge that the signup form causes.

Here's the whole styling:

.signup {
	background: hsl(217, 28%, 15%);
	width: fit-content;
	padding: 0 2rem 2rem 2rem;
	margin: 2rem;
	border-radius: 0.2rem;
	box-shadow: 0.2rem 0.2rem 8px hsl(0, 0%, 0%, 0.7);
	transform: translateY(6rem);
}

Continued development

I'm still not fully versed with grid layouts; I hope to work on that in the near future.

Useful resources

I use youtube for most of my research

For Everything Web Development 😄 https://youtube.com/c/TraversyMedia

Kevin Powell - For Everything CSS 😄 https://youtube.com/kepowob

FreeCodeCamp - For Everything Programming 😄 https://youtube.com/c/Freecodecamp

Documentation, CSS Tricks and W3schools are also helpful 😁

Author

• Website - Ariel Elege
• Frontend Mentor - @ArielElege54