Progettazione web: esercitazione 06
Crea la cartella di lavoro “es06” e in essa crea la seguente struttura:
Trovi il file instagram_icon.avif allegato a questo compito. I file instagram.html e buttons.html dovranno avere esattamente l’aspetto mostrato nelle figure allegate.
Indicazioni utili
- body è largo 300px, ha 20px di margin su/giù, margin automatico right/left
- Il font usato ovunque è Arial, Helvetica, sans-serif
- I titoli h2 hanno sfondo lightblue, padding di 10px, margini di 10px su/giù, margini di 0px right/left
- I tre bottoni presenti in buttons.html hanno:
- bordi neri solidi di 1px
- padding 10px 0px
- margin 20px 0px
- larghezza di 300px
- colore di sfondo rgb(0, 165, 0), tranne il pulsante centrale, che ha colore di sfondo red
- testo di colore white, tranne il pulsante centrale che ha testo black
- come ottenere gli spigoli tondeggianti? :)
- Il bottone “Un link-bottone!” è un bottone, ma è anche un link. Cliccando su di esso, si finisce sulla pagina instagram.html
- Quando si passa sopra tale bottone, esso appare così:
- l’immagine dell’icona di Instagram è larga 100px
- Quando si tiene premuto sopra tale bottone, esso appare così:
- L’icona di Instagram presente nella pagina instagram.html è un’immagine, ma anche un link al tuo profilo Instagram!
- deve essere possibile cliccare su un qualsiasi punto dell’icona per attivare il link
- la pagina Instagram con il tuo profilo deve aprirsi in una nuova finestra del browser
Buon lavoro!
