Fylo-Dark-Theme

Landing page with multiple sections

Frontend Mentor - Fylo-Dark-Theme

This is a solution to the Insure-Landing-Page-Master 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
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout for the component depending on their device's screen size
• See hover states for all interactive elements on the page

Screenshot

Links

• Solution URL: https://k-mannnn.github.io/Fylo-Dark-Theme/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

In this project I tried to improve on using more semantic HTml mark up and make the webpage more accessible and also more compatible to various screen sizes. This landing page was built using pure CSS and Html so I learnt some limitations on customising validation error messages and hiding the default built in Html ones which is without the help of Javascript cannot be acheived.

Continued development

Making element more responsive according to screen sizes and using the width property more accurately.

Acknowledgments

Front-end Mentor for providing these free challenges to practice my skills and the Front-end community for their continued support.