https://github.com/lorussogiacomoluca/html-css-boolando
Exercise #9 - 25/02/2025
https://github.com/lorussogiacomoluca/html-css-boolando
css flexbox html layout overlay positioning
Last synced: over 1 year ago
JSON representation
Exercise #9 - 25/02/2025
- Host: GitHub
- URL: https://github.com/lorussogiacomoluca/html-css-boolando
- Owner: lorussogiacomoluca
- Created: 2025-02-25T13:43:55.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-25T15:30:56.000Z (over 1 year ago)
- Last Synced: 2025-02-25T15:31:37.702Z (over 1 year ago)
- Topics: css, flexbox, html, layout, overlay, positioning
- Language: HTML
- Homepage:
- Size: 3.3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Esercizio 9
# 🛍️ Esercizio di oggi: Boolando
## 📂 Nome repo: html-css-boolando
### 📝 Descrizione:
Ci ispiriamo al sito di Zalando per riprodurre il layout nello screenshot. Per ogni prodotto sono fornite 2 immagini:
- 🖼️ La prima sarà visualizzata all'apertura della pagina
- 🖱️ La seconda sarà visualizzata al posto della prima, quando il cursore del mouse va in hover sulla card
Sono presenti anche:
- 📌 Un header in posizione fixed
- 🔍 Un footer
Regole da usare: **Tutte le regole che abbiamo visto fino ad oggi**. Servirà qualche posizionamento particolare? Ai posteri l'ardua sentenza!
### 💡 Consigli:
1. Analizzate prima il layout solo con i commenti
2. Passate ai blocchi colorati
3. Solo se i blocchi colorati funzionano passiamo al particolare...
### 🔄 Numero minimo di push: 8
### ⭐ Bonus 1:
Crea una seconda pagina che sarà collegata a ciascuna card. Questa è chiamata pagina di dettaglio e dovrebbe contenere:
- La stessa immagine dell'elemento
- Testo descrittivo correttamente impaginato
- Lo stesso header della pagina principale
- Una corretta navigazione tra le pagine
### ❤️ Bonus 2:
All'hover sul cuoricino, questo diventa rosso.
### 🚀 Buon lavoro!