simplyJC/fylo-landing-page-with-two-column-layout-master

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

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: https://github.com/simplyJC/fylo-landing-page-with-two-column-layout-master
• Live Site URL: https://brave-lovelace-d420d0.netlify.app/

My process

Built with

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

What I learned

I learned how to apply flexbox in creating layout for a page. Create a basic animation. Applying complicated background image layout.

Continued development

I planning to take for challenges in frontendmentor to further enhance my skills.

Useful resources

• obiasahlin.com - A great source for simple underline animation in links

• Codepen.io - Best resources for social media icons

Author

• Website - SimplyJC
• Frontend Mentor - @simplyJC
• Twitter - @jcaltamia