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 site depending on their device's screen size
• See hover states for all interactive elements on the page

Screenshot

Links

• Solution URL: (https://www.frontendmentor.io/solutions/mostly-html5-and-css3-j3kBRfAOh)
• Live Site URL: (https://modest-leakey-cb03b7.netlify.app)

My process

• Analyzing how to structure the HTML -> Stylizing the different parts of the project -> Adding hovers stylized -> Testing everytime a new featuer is implemented

Built with

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

What I learned

Transition and transform properties animations on hover and more for the CSS part. I tried to find a way to separate every different part of responsive CSS files by general type of devices users could use to navigate on the website.

Continued development

Probably better looking and more accuracy in animations that I could do in the future

Useful resources

• Transform Doc
• Transition Doc

Author

• Website - Zansuken
• Frontend Mentor - @Zansuken

Acknowledgments

Special thanks to TheUniqueMathemagician