Blogr landing page solution

This is a solution to the [Blogr challenge on Frontend Mentor]. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

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

The challenge

Users should be able to:

• See hover states for all interactive elements on the page
• See a live countdown timer that ticks down every second (start the count at 14 days)

Screenshot

A screenshot of the desktop view of the project is available in the directory.

Links

• Solution URL: (https://github.com/PrincessMaggy/blogr)

• Live Site URL: (https://blogr-blond.vercel.app/)

My process

I started this project by first writing the respective HTML codes, proceeded to styling and finally javascript.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• JavaScript
• Styled Components - For styles

What I learned

I practised my knowledge of javascript functions in building the hamburger icon.

Useful resources

(https://stackoverflow.com/questions/15170820/rotating-a-background-image-with-css3)

(https://www.w3schools.com/css/css3_gradients.asp)

This helped me while I was brainstorming on how to set the background images and linear gradients simultaneously.

Author

• Website - Edozie Magdalene Princess
• Frontend Mentor - @princessmaggy
• Twitter - @princessmaggy7

Acknowledgment

I want to appreciate Mr Kenneth Aladi @kendevops for his tutelage for the past 4 months. The journey has been tough, inspiring and full of knowledge. I'm so glad to have learnt all that I have and I look forward to more as I advance from this fem code training.