https://github.com/aymansoliman-dev/blog-preview-card
Frontend Mentor Blog Preview Card
https://github.com/aymansoliman-dev/blog-preview-card
Last synced: about 1 year ago
JSON representation
Frontend Mentor Blog Preview Card
- Host: GitHub
- URL: https://github.com/aymansoliman-dev/blog-preview-card
- Owner: aymansoliman-dev
- Created: 2024-07-25T22:06:12.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-05-27T15:00:51.000Z (about 1 year ago)
- Last Synced: 2025-05-27T15:49:10.215Z (about 1 year ago)
- Language: CSS
- Homepage: https://aymansoliman-dev.github.io/Blog-preview-card/
- Size: 277 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)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
## Overview
### The challenge
Users should be able to:
- See hover and focus states for all interactive elements on the page
### Screenshot
### Links
- Solution URL: [Blog Preview Card Solution](https://www.frontendmentor.io/solutions/blog-preview-card-with-stylish-transitions-and-selection-phVn9qXm8f)
- Live Site URL: [Live Preview](https://aymansoliman-dev.github.io/Blog-preview-card/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Transitions
- Colorful selection pseudo-element
### What I learned
Working on the Blog Preview Card project helped me improve my skills in Flexbox, responsive design, and typography. I used CSS custom properties, and subtle hover effects to enhance usability and maintainability. This project reinforced my understanding of layout structuring and interactive design.
```html
Learning
Published 21 Dec 2023
HTML & CSS foundations
These languages are the backbone of every website, defining structure,
content, and presentation. Greg Hooper
Greg Hooper
```
```css
.container:hover {
transform: translate(-0.5rem, -0.5rem);
box-shadow: 1.5rem 1.5rem 0 0 black;
}
*::selection {
background-color: #f5d04e;
color: white;
}
```
### Continued development
For continued development, I plan to explore CSS animations to add subtle motion effects for a more dynamic user experience. Additionally, I want to refine my approach to accessibility by improving keyboard navigation and contrast ratios. I will also experiment with CSS Grid for more complex layouts and optimize performance by minimizing CSS redundancy.
## Author
- Website - [Ayman Soliman](https://bento.me/ayman-soliman)
- Frontend Mentor - [aymansoliman-dev](https://www.frontendmentor.io/profile/aymansoliman-dev)
- Twitter - [@a_soliman1783](https://x.com/a_soliman1783)