https://github.com/jojoaventurier/flexcard

Exercice de formation pour pratiquer le display: flex; en HTML/CSS
https://github.com/jojoaventurier/flexcard

css display-flex

Last synced: 3 days ago
JSON representation

Exercice de formation pour pratiquer le display: flex; en HTML/CSS

• Host: GitHub
• URL: https://github.com/jojoaventurier/flexcard
• Owner: Jojoaventurier
• Created: 2024-04-19T13:26:19.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-05-24T09:23:07.000Z (about 2 years ago)
• Last Synced: 2025-11-18T04:03:01.346Z (7 months ago)
• Topics: css, display-flex
• Language: HTML
• Homepage:
• Size: 3.59 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
Exercice de formation sur l'utilisation du display flex en css. 

    En se basant sur des ressources données, il faut réaliser une page web depuis un modèle:

      - Chaque card a une largeur de 300px, un arrondi (border-radius) de 10px

      - L'entête (card-header) de chaque cartd a une hauteur de 200px

      - La zone de texte (card-text) a une marge interne de 30 px (le titre a une taille de 25px et une marge inférieure de 10px. Le texte de l'article a une taille de 14px.)

      - La police utilisée pour le texte des cartes est la Google Font "Poppins"

      - Le container principal qui contient les cartes prends 100% de hauteur et largeur et a la couleur de fond suivante : rgba (68, 117, 136, 0.548);

      - Les 3 cartes sont centrées horizontalement et verticalement

      - Vous avez à votre disposition le fichier HTML brut et les images