Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yashi-singh-1/blog-preview-card
Challenge to build a responsive blog preview card using HTML and CSS, inspired by Frontend Mentor designs.
https://github.com/yashi-singh-1/blog-preview-card
challenge css css3 front-end front-end-challenge front-end-developemnt front-end-mentor frontend frontend-challenge frontend-development frontend-mentor frontend-mentor-challenge frontendchallenge html html-css-challenge html5 htmlcss-challenge htmlcsschallenge mobile-responsive mobileresponsive
Last synced: about 1 month ago
JSON representation
Challenge to build a responsive blog preview card using HTML and CSS, inspired by Frontend Mentor designs.
- Host: GitHub
- URL: https://github.com/yashi-singh-1/blog-preview-card
- Owner: Yashi-Singh-1
- Created: 2024-06-28T14:14:11.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-08-01T16:04:54.000Z (5 months ago)
- Last Synced: 2024-08-02T17:23:08.333Z (5 months ago)
- Topics: challenge, css, css3, front-end, front-end-challenge, front-end-developemnt, front-end-mentor, frontend, frontend-challenge, frontend-development, frontend-mentor, frontend-mentor-challenge, frontendchallenge, html, html-css-challenge, html5, htmlcss-challenge, htmlcsschallenge, mobile-responsive, mobileresponsive
- Language: CSS
- Homepage:
- Size: 310 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Blog preview card solution
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)
- [My process](#my-process)
- [Built with](#built-with)
- [Author](#author)
- [Acknowledgments](#acknowledgments)## Overview
### The challenge
Users should be able to:
- See hover and focus states for all interactive elements on the page
### Screenshot
![Desktop Screenshot](Preview.png)
![Mobile Screenshot](Mobile-Preview.png)
### Links
- Live Site URL: [Live](https://blog-preview-card-solution-01.netlify.app/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox## Author
- Frontend Mentor - [@Yashi-Singh-1](https://www.frontendmentor.io/profile/Yashi-Singh-1)
- LinkedIn - [@Yashi Singh](www.linkedin.com/in/yashi-singh-b4143a246)## Acknowledgments
I would like to extend my gratitude to Frontend Mentor for providing this engaging challenge. Their detailed design brief and the opportunity to work on real-world projects were invaluable in honing my skills.
Finally, thank you to my peers and mentors who provided constructive feedback and encouragement throughout the development process.