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

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources

Overview

This is a challenge from Frontend Mentor to create a landing page. It uses HTML and CSS only. CSS Flexbox and Grid was also used for the project.

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: Here's the solution on Github
• Live Site URL: Click here to view the live site

My process

1. Download the starter files from Frontend Mentor.
2. Extract the .zip file to your desired folder. Open the design folder, check the preview of the project and understand the layout before coding.
3. Open the folder in VScode(or any other code editor).
4. Open the index.html file and edit it. Create a .css file for the styles.
5. Open the style-guide.md file to understand the page design.
6. Open the README-template.md file, read the content and edit it to your taste. Rename it to Readme.md.
7. The images you need are in the images folder.
8. Create a repository on Github and upload your files to github.
9. Submit the solution on Frontend Mentor.

Built with

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

What I learned

I had issues with the .svg files not behaving the way I wanted, I checked online and found out how to solve that issue using viewBox.

      <svg x="0px" y="0px" width="176" height="52" viewBox="0 0 300 100" xmlns=""><g fill="#FFF" fill-rule="evenodd"><path d=""/></g></svg>

Continued development

Still working on responsiveness.

Useful resources

• w3schools - A good online tutorial for Html and Css.
• SVG viewBox - This is an amazing youtube video that helped me understand how to position a svg.