https://github.com/aperbet56/blog_preview_card_component

Frontend Mentor Challenge. Mon défi consiste à créer ce composant de carte blog et à le rendre aussi proche que possible du design.
https://github.com/aperbet56/blog_preview_card_component

animation-css css3 flexbox html5 mobile-first responsive responsive-design variables-css

Last synced: 11 months ago
JSON representation

Frontend Mentor Challenge. Mon défi consiste à créer ce composant de carte blog et à le rendre aussi proche que possible du design.

• Host: GitHub
• URL: https://github.com/aperbet56/blog_preview_card_component
• Owner: aperbet56
• Created: 2025-04-02T13:32:54.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-04-02T14:05:07.000Z (about 1 year ago)
• Last Synced: 2025-04-02T14:34:22.143Z (about 1 year ago)
• Topics: animation-css, css3, flexbox, html5, mobile-first, responsive, responsive-design, variables-css
• Language: CSS
• Homepage: https://aperbet56.github.io/blog_preview_card_component/
• Size: 0 Bytes
• 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 COMPONENT

![Design preview for the blog preview card component coding challenge](./design/preview.jpg)

## Le challenge

Voici ma solution au défi « blog preview card component » sur Frontend Mentor. Les défis Frontend Mentor vous aident à améliorer vos compétences en codage en créant des projets réalistes.

Mon défi consiste à créer ce composant de carte d'aperçu et à le rendre aussi proche que possible du design.

Les utilisateurs doivent pouvoir :

- Afficher la disposition optimale en fonction de la taille de l'écran de leur appareil

- Voir les états de survol des éléments interactifs.

## Démonstration

Lien vers le projet : https://aperbet56.github.io/blog_preview_card_component/

## Projet développé avec

- Utilisation des balises sémantiques HTML5

- CSS3

- Flexbox

- Variables CSS

- Animations CSS (transition...)

- Commentaires HTML

- Commentaires CSS

- Responsive design

- Mobile first

- Importation de la police "Figtree"

- Importaion du normaliseur : le fichier normalize.css