THIS PAGE WAS MADE AS A PERSONAL EDUCATIONAL PROJECT.
This is NOT the official site of the company or brand identified on the page.
The creator of this page is NOT affiliated with the company or brand in any way.
This page is a personal project made in connection with an educational exercise.
Abbiamo bisogno di un sito web per un'agenzia di viaggi! (Ho adattato il tutto per un sito di cappelli dato che si poteva modificare)
In questa pagina aggiungerai destinazioni di posti che sogni di visitare in futuro.
Il progetto non richiede alcuna customizzazione di CSS, dovrai crearlo interamente usando le classi di bootstrap, sia per quello che riguarda il layout che lo stile.
Testa frequentemente il tuo lavoro nelle 3 principali risoluzioni (mobile, tablet, desktop) usando i developer tools del browser nella sezione emulazione device, per una maggiore precisione.
Inizia utilizzando i componenti esistenti di Bootstrap 5 per creare la tua pagina (modificali all'occorrenza utilizzando le utility classes di bootstrap: colori, spazi, margini, dimensioni etc...) Usa container > row > col-* in questo ordine per ottenere un layout responsive perfetto.
Esercizi:
- Implementa una navbar con questi elementi di menu: Home Saldi Welcome Summer Last Minute Recensioni
Collegherai ogni sezione della pagina agli elementi del menu corrispondenti.
-
Aggiungi un logo alla navbar, un qualsiasi logo di agenzia di viaggi, anche inventata.
-
Aggiungi una sezione introduttiva con il nome, il payoff dell'agenzia, una breve descrizione in corsivo e una call-to-action (bottone) "Prenota ora" di colore azzurro chiaro e testo bianco e grassetto
Il background della sezione sarà grigio chiaro e con bordi arrotondati e del padding generoso all'interno
- Implementa la sezione "Saldi". Qui mostrerai 4 destinazioni.
In questa sezione dovranno esserci:
4 card per destinazioni per linea a schermo grande - desktop (quattro sulla stessa linea) 3 card per destinazioni per linea a schermo medio - tablet (una dovrà scomparire) 2 card per destinazioni per linea a schermo piccolo - mobile (due per linea)
le card avranno un bordo di 2px azzurro chiaro, il bottone azzurro chiaro e testo default
- Implementa la sezione "Welcome Summer". Qui mostrerai 6 destinazioni al tuo utente. (nessun bordo, ma stesso stile dei bottoni precedenti)
In questa sezione dovranno esserci:
6 card per destinazioni per linea a schermo extra large 3 card per destinazioni per linea a schermo grande (desktop) 2 card per destinazioni per linea a schermo medio (tablet) 2 card per destinazioni per linea a schermo piccolo (mobile)
- Implementa la sezione "Offerta del giorno". Qui avrai:
66% dello spazio dedicato all'immagine del luogo di destinazione 33% dedicato al nome, date, prezzo e un badge con "best offer" come testo
l'immagine avrà i bordi arrotondati e un'ombra leggera per il contenuto: il nome dovrà essere più grande del resto, le date dovranno essere formattate con font "monospace", il prezzo dovrà essere definito come "lead" e il badge sarà scuro
-
Rendi invisibile la sezione "Offerta del giorno" su schermi piccoli.
-
Aggiungi nella sezione "Welcome Summer" un'ombra grande ad ogni card.
-
Crea una sezione "Last Minute", in cui mostrerai 6 immagini delle destinazioni last minute come rettangoli ombreggiati dai bordi arrotondati, senza testo. Rendile responsive come preferisci!
-
Crea una sezione "Recensioni", dove l'utente potrà trovare alcuni feedback da utenti fittizi. Piccola immagine tonda a sinistra con bordo 2px azzurro, nome utente e recensione a destra
-
Crea un footer con le informazioni dell'agenzia e un bottone "Contattaci".
EXTRAS
-
Crea un bottone vicino ad ogni sezione per collassarla e riaprirla se premuto.
-
Crea la possibilità di contare il numero di "viaggi" presenti sulla pagina e visualizzare il risultato in un alert.
-
Crea un modale con un campo email e un messaggio.
-
Quando l'utente cliccherà su "Contattaci", il modale dovrà essere visualizzato.
-
Crea una funzione che aggiunga un badge con la scritta "HOT" su ognuna delle offerte "Welcome Summer" posizionato in alto a destra.
-
Crea una funzione che rimuova tutte le "card" dalla pagina