ishantbhurani / fylo-landing-page-with-two-column-layout

Fylo Landing Page With Two Column Layout

Table of contents

• Overview
  • The challenge
  • Screenshots
  • Links
• Reference
  • Font
  • Color
• Run Locally
• My process
  • Built with
• Author
• Credits

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

Screenshots

Links

• Solution URL: https://www.frontendmentor.io/solutions/fylo-landing-page-with-two-column-layout-with-flexbox-b8xEyJo3b
• Live Site URL: https://ishantbhurani.github.io/fylo-landing-page-with-two-column-layout/

Reference

Font

• Raleway
• Open Sans

Color

Color	Hex
very-dark-blue	hsl(243, 87%, 12%)
desaturated-blue	hsl(238, 22%, 44%)
bright-blue	hsl(224, 93%, 58%)
moderate-cyan	hsl(170, 45%, 43%)
light-grayish-blue	hsl(240, 45%, 98%)
light-gray	hsl(0, 0%, 75%)
red	hsl(0, 100%, 63%)

Run Locally

Clone the project

  git clone [e-mail]:ishantbhurani/fylo-landing-page-with-two-column-layout.git

Go to the project directory

  cd fylo-landing-page-with-two-column-layout

Run index.html

  <browsername> index.html

E.g.

  firefox index.html

  google-chrome index.html

My process

Built with

• Semantic HTML5 markup
• Flexbox

Author

• Frontend Mentor - @ishantbhurani
• Twitter - @IShaunt

Credits

• Frontend Mentor