https://github.com/dalascript/blog-preview-card

Frontend Mentor Challenges | Blog Preview Card | Challenge 3
https://github.com/dalascript/blog-preview-card

bem blog-preview-card css flexbox frontendmentor-challenges html mobile-first-workflow

Last synced: about 1 month ago
JSON representation

Frontend Mentor Challenges | Blog Preview Card | Challenge 3

• Host: GitHub
• URL: https://github.com/dalascript/blog-preview-card
• Owner: DalaScript
• Created: 2024-07-17T16:59:23.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2025-09-04T15:23:33.000Z (9 months ago)
• Last Synced: 2025-09-04T17:32:28.082Z (9 months ago)
• Topics: bem, blog-preview-card, css, flexbox, frontendmentor-challenges, html, mobile-first-workflow
• Language: SCSS
• Homepage: https://dalascript.github.io/blog-preview-card/
• Size: 52.7 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Blog Preview Card | Frontend Mentor

**Challenge 3**

This is a solution to the [Blog preview card challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/blog-preview-card-ckPaj01IcS). Frontend Mentor challenges help you improve your coding skills by building realistic projects.

---

## 📚 Table of contents

- [🔎 Overview](#-overview)

  - [🎯 The challenge](#-the-challenge)

  - [📸 Screenshot](#-screenshot)

  - [🔗 Links](#-links)

  - [🛠️ Built with](#️-built-with)

- [🧠 My process](#-my-process)

  - [🔙 Previous Challenge](#-previous-challenge)

  - [🔜 Next Challenge](#-next-challenge)

- [👤 About Me](#-about-me)

  - [🌐 Connect with Me](#-connect-with-me)

  - [💻 Coding Profiles](#-coding-profiles)

---

## 🔎 Overview

### 🎯 The challenge

Users should be able to:

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

### 📸 Screenshot

![Live Preview Screenshot](./assets/images/screenshot/screenshot.jpg)

### 🔗 Links

- [🔴 Live Demo](https://DalaScript.github.io/blog-preview-card/)

- [🗂️ GitHub Repository](https://github.com/DalaScript/blog-preview-card)

### 🛠️ Built with

- HTML5

- CSS3

- Flexbox

- Mobile-first workflow

- bem - [Block Element Modifier](https://getbem.com/introduction/)

---

## 🧠 My process

### 🔙 Previous Challenge

- Recipe Page | *Challenge 2* → [View Repository](https://github.com/DalaScript/recipe-page)

### 🔜 Next Challenge

- Social Links Profile | *Challenge 4* → [View Repository](https://github.com/DalaScript/social-links-profile)

---

## 👤 About Me

### 🌐 Connect with Me

- [Instagram](https://www.instagram.com/DalaScript)

- [YouTube](https://www.youtube.com/@DalaScript)

### 💻 Coding Profiles

- [freeCodeCamp](https://www.freecodecamp.org/DalaScript)

- [FrontendMentor](https://www.frontendmentor.io/profile/DalaScript)

- [GitHub](https://github.com/DalaScript)

*🙌 Thanks for checking out my project! More coming soon. Stay tuned 🚀*