html-esempio 8

<!DOCTYPE html>

<head>

<title>Riquadro con Titolo, Testo e Icone</title>

<style>

/* Stile per il riquadro del titolo */

.riquadro-titolo {

width: 80%; /* larghezza 80% della finestra */

margin: 0px auto; /* 0px è il margine superiore del riquadro */

/* auto si riferisce al margine destro del riquadro */

text-align: center; /* il testo è allineato al centro nel riquadro */

padding: 20px; /* è la spaziatura intorno al testo */

border: 4px solid #333; /* determina spessore, tratto e colore del bordo */

border-radius: 10px; /* determina la curvatura dei bordi del riquadro */

background-color: #87CEFA; /* colore dello sfondo */

}

/* Stile per il secondo riquadro con le icone */

.riquadro-testo {

width: 80%; /* larghezza 80% della finestra */

margin: 20px auto; /* 20px è il margine superiore del riquadro */

/* auto si riferisce al margine destro del riquadro */

padding: 20px; /* è la spaziatura intorno al testo */

border: 2px dotted #333; /* determina spessore, tratto e colore del bordo */

border-radius: 10px; /* determina la curvatura dei bordi del riquadro */

background-color: #F0F0F0; /* colore dello sfondo */

}

/* Colori per le righe */

.colore1 {color: red;}

.colore2 {color: green;}

.colore3 {color: blue;}

/* Stile per le righe delle icone */

.riga-icona {

font-size: 24px; /* dimensione del carattere */

margin-right: 10px; /* margine destro */

margin-left: 10px; /* margine sinistro */

margin-bottom: 10px; /* margine in basso */

align-items: center; /* si riferisce all'allineamento in verticale)

}

</style>

</head>

<body>

<h1>😃 Titolo Principale</h1>

</div>

<div class="colore1"><p>😍 Testo sulla prima riga</p></div>

</div>

<div class="colore2"><p>😎 Testo sulla seconda riga</p></div>

</div>

<div class="colore3"><p>😏 Testo sulla terza riga</p></div>

</div>

</body>

</html>

Ritorna agli Esempi