Frontend Mentor - Blog preview card solution

This is a solution to the Blog preview card 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
• Continued development
• Author

The challenge

Users should be able to:

• See hover and focus states for all interactive elements on the page

Screenshot

![./assets/images/solution-screenshot-desktop.png] (Desktop Solution) ![./assets/images/solution-screenshot-mobile.png] (Mobile Solution) ![./assets/images/solution-screenshot-active1.png] (Active Link 1) ![./assets/images/solution-screenshot-active2.png] (Active Link 2)

Links

• Solution URL: Add solution URL here
• Live Site URL: [https://easonvora.github.io/qr-code-component-main/]

My process

1. Edit HTML to have typographical elements like headings and paragraphs.
2. Add colors, card border, box shadow, and specified typography.
3. Add images
4. Adjust padding and margins for all elements.
5. Align [.author] image and [h4] text to be next to each other.
6. Adjust image sizes.
7. Readjust [.author] image and [h4] text be realigned.
8. Add hover and active states to [h3]'s anchor element.
9. Add links to [.author]
10. Apply step 8 states to [.author].
11. Minor adjustments

Built with

• Semantic HTML5
• CSS
• Flexbox
• Google Fonts
• VSCode
• GitHub

Continued development

• Flexbox
• CSS Grid
• Typography

Author

• GitHub - @EasonVora
• Frontend Mentor - @EasonVora
• LinkedIn - Eason Vora
• Instagram - @vora_mota_bhai