This is a solution to the Project Tracking Intro Component Challenge on Frontend Mentor.
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
- Create the background shape using code
- Live Site URL: https://kens-visuals.github.io/project-tracking-intro-component/
- Solution URL: https://www.frontendmentor.io/solutions/project-tracking-intro-component-with-scss-css-animations-and-bem-pdiPZBEWn
- Semantic HTML5 markup
- SCSS custom properties
- CSS Flexbox
- CSS Grid
- CSS Animations
- Vanilla JS
- Mobile-first workflow
In the Blogr Landing Page, there were sections similar to this project. The image was slightly out of the screen and when I was first implementing it, the part was a bit frustrating for me. However, that experience helped me to build this project a lot faster and a lot cleaner. This was the last small project of this level, the rest are whole landing pages. And I've got only 5 projects left to finish this level completely. I'm going to finish them by the end of the year.
- animista - In case if you were wondering, I got the blink animation from here. Yes, I was pretty lazy to make one by myself.
- CSS Box Shadows - My go to place for some cool CSS box-shadows.
- Frontend Mentor - @kens-visuals
- Codewars - @kens_visuals
- CodePen - @kens-visuals