Frontend Mentor - Fylo Landing Page

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
  • 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
• Live Site URL

My process

Built with

• Technologys

  • HTML5
  • CSS3
  • SASS

• Pattern Sass 7 in 1 pattern Fixed it for MySelf

Note for Better UnderStanding

• All Project's code Organized I mean that Beautify, Readable, Understandable.

• In this Project writen with BEM Methodology.

• I use pure HTML & CSS only and write everything from scratch, Don't used utilize any no code tools like Wix, Wordpress etc.

• And i used CSS preprocessors SASS, By the way i provide a readme file with instructions for you how to run it.

  • I used some extensions to compile the codes in main.scss into main.css, I mean all scss files are imported into main.scss file, so you can see all css codes in main.css.

• My SASS Folder Structure (for this Project)

  • css
    • main.css
  • sass
    • base
      • _reset.scss
      • _typography.scss
    • abstarcts
      • _colors.scss
      • _mixins.scss
      • _variables.scss
    • layout
      • _borders.scss
      • _flex.scss
      • _grid.scss
      • _margins.scss
      • _paddings.scss
      • _positions.scss
    • sections
      • _base.scss
      • _header.scss
      • _features.scss
      • _team.scss
      • _footer.scss
    • main.scss

Useful resources

• As Soon As ;)

Author

• Website - TheHamidov42
• Frontend Mentor - @RaviHamidov
• Twitter - @RaviHamidov
• Instagram - @RaviHamidov