Frontend Mentor - Project tracking intro component solution

This is a solution to the Project tracking intro component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

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

Desktop-view I did not include the mobile screenshots since it is very long ahahaa

Links

Live Site URL: Live site of the challenge hosted here

My process

Hello this is my 14th challenge here in FEM and this challenge gave me some headache because I can't position perfectly the hero image and cant add the box-shadow to it hahaha. Anywayy have a look and give it a try as well in FEM ^^

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • FlexBox
  • Grid
  • Sass preprocessor

I said that I won't use any frameworks and build it from scratch to be more exciting and challenging

What I learned

What I learned in this challenge is that I could make element functions properly without having to use any javascript

Continued development

I want to focus more on creating more complex designs and also designing things on my own time

Author

  • Website - Well I haven't made my profile portfolio, gonna make it sooon when I know a lot of stuffs
  • Frontend Mentor - @pikamart
  • Twitter - @RaymartPamplona