Questo è il titolo della pagina

lorem Ipsum è semplicemente un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem ipsum è considerato il testo segnaposto standard del settore fin dal XVI secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a cinque secoli,ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare negli anni '60 con la diffusione dei fogli di caratteri trasferibili "Letraset", che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includevano versioni del Lorem Ipsum.

Foto di un prato

Lista delle cose da comprare

lorem Ipsum è semplicemente un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard del settore fin dal XVI Sito autore Paolo Puglisi secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a cinque secoli,ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare negli anni '60 con la diffusione dei fogli di caratteri trasferibili "Letraset", che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includevano versioni del Lorem Ipsum.

Foto di un prato

Ecco un secondo titolo di secondo livello

lorem Ipsum è semplicemente un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorempsum è considerato il testo segnaposto standard del settore fin dal XVI secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a cinque secoli,ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare negli anni '60 conla diffusione dei fogli di caratteri trasferibili "Letraset", che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includevano versioni del Lorem Ipsum.

Foto di un prato

Ecco un secondo titolo di secondo livello

lorem Ipsum è semplicemente un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorempsum è considerato il testo segnaposto standard del settore fin dal XVI secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a cinque secoli,ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare negli anni '60 conla diffusione dei fogli di caratteri trasferibili "Letraset", che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includevano versioni del Lorem Ipsum.

Ecco un secondo titolo di secondo livello

lorem Ipsum è semplicemente un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorempsum è considerato il testo segnaposto standard del settore fin dal XVI secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a cinque secoli,ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare negli anni '60 conla diffusione dei fogli di caratteri trasferibili "Letraset", che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includevano versioni del Lorem Ipsum.



@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap');
* {
transition: all 0.1s ease 0.2s ; /* su tutte le proprietà, al posto di width metti all */
}
a {
transition: all 3s ease 0.2s ; /* su tutte le proprietà, al posto di width metti all */
}
body {
color: #352d39;
background-color: #fffcf9;
text-align: left;
font-size: 20px;
font-family: 'montserrat', sans-serif;
}
div#navbar {
background-color: #151217;
color:white;
margin: 0px;
width: 100%;
padding: 10px 20px 10px; /* 2px sotto e sotra - 20px; dx e sx */
position: fixed;
top: 0px;
left: 0px;
box-shadow: 0px 1px 10px 3px black; /* ombra paramentri alto basso destra sinistra */
}
div#contenitore-supremo {
/* background: #6d435a;*/
max-width: 800px;
margin: 100px auto 0px; /* auto centra la pagina al centro */
}
h1{
text-decoration: underline;
margin-top: 0px;
margin-bottom: 0px;
color: #ff6978;
}
h2 {
font-weight: normal;
}
h2.dentro-piedipagina{
color: aqua;
}
a {
font-weight: bold;
text-decoration: none; /* togliamo sottolineatura */
color: greenyellow;
background-color: red;
}
/*modifichiamo al passare del mouse */
a:hover {
text-decoration: underline;
color: black
}
/* link visitati */
a:visited {
color:yellow;
}
/* link attivo */
a:active {
color: green;
}
/* elemento selezionato */
a:focus {
font-size:50px ;
}
img {
border-radius: 10px;
}
div#testata {
background-color: #b1ede8; /* Lascio il colore di default ed inserisco una immagine sotto */
/* gradiente lineare */
/* background-image: linear-gradient(blue,red);
oppure da gradiente lineare verso destra
background-image: linear-gradient(to right, blue,red,green, pink, #b1ede8);*/
/* tipo ombra
background-image: linear-gradient(to right right, #cdf4f0,#abede6);
*/
/* oppure radiale
background-image: radial-gradient(blue,red); */
/* oppure gradiente conico
background-image: conic-gradient(blue,red);*/
/* inserisco una immagine */
background-image: url('galassia.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: #fffcf9;
/* margin: 100px 20px 50px 100px; spazio ALTO, sinistra, basso, destra*/
margin : 0px 0px 20px; /* metti opx 0px 20px se vuoi mettere a zero il margine superiore
border: 2px solid #352d39;
/* oppure
border-width: 2px;
border-style: solid;
border-color: black; */
/* oppure solo il colore della linea sotto */
border-bottom-color: red;
border-radius: 20px;
/* width: 400px;
width: 50%;
min-width: 350px;
max-width: 500px;*/
box-shadow: 0px 0px 10px 3px black; /* ombra paramentri alto basso destra sinistra */
/* position: fixed; blocca la posizione
top: 0px;
left: 0px;
position : sticky; mantiene la posizione normale fino a scroll e si blocca in alto o in basso
top: 0px;
*/
/* position : sticky; mantiene la posizione normale fino a scroll e si blocca in alto o in basso
top: 0px;*/
}
div#testata:hover { /* quando il mouse tocca la testata */
box-shadow: 0px 0px 0px 0px black; /* ombra paramentri alto basso destra sinistra */
background-image: linear-gradient(to top right, rgb(132, 132, 198), blue); /*modifica lo sfondo di quell'elemento*/
color: #151217;
}
div#piedipagina{
color: #fffcf9;
background-color: #352d39;
background-image: linear-gradient(to top right, #151217 , #634d72);
margin-top: 0px;
border: 2px solid #ff6978;
border-radius: 20px;
}
div#testata, div#contenuto, div#piedipagina {
padding: 25px; /* mette margine interno al contenitore testata*/
}
p.dentro-testata {
font-weight: bold;
margin-bottom: 0px;
padding-bottom: 0px;
color: #fffcf9;
}
p.dentro-piedipagina {
color: white;
}
img.immagine-natura {
width: 40%;
min-width: 200px;
}
p.dentro-piedipagina {
font-style: italic;
}
p {
color: black;
}
p.dentro-testata{
font-weight: bold;
}
#sottotitolo { /* ID */
color:red;
}
.testoverde { /* classe */
font-size: 32px;
}
/*
. sfondorosa {
background: pink;
}*/
/* adattamenti per schermi smartphone */
@media screen and (max-width: 600px){
body {
background-color: red; /* quando rimpicciolisce la pagina lo sfondo diventa rosso */
}
/* se lo schermo è inferiore 600 px nasconde la barra navigazione */
div#navbar{
display:none;
}
div#contenitore-supremo {
margin: 0px auto 0px; /* auto centra la pagina al centro */
}
div#testata, div#piedipagina {
margin-right: 20px;
margin-left: 20px;
}
img.immagine-natura {
width: 100%;
float: none;
margin: 20px 0px ;
}
}
@media screen and (min-width: 850px){
div#testata, div#piedipagina {
margin-right: 20px;
margin-left: 20px;
}
}
/*ul.spesa li { selezioniamo tutti gli elementi di questa classe
font-weight: bold;
}*/
ul.spesa li:first-child { /* selezioniamo il primo elemento di questa classe */
font-weight: bold;
color: red;
}
ul.spesa li:last-child { /* selezioniamo l'ultimo elemento di questa classe */
font-weight: bold;
color: red;
}
ul.spesa li:nth-child(5) { /* selezioniamo l'elemento n. 5 di questa classe */
font-weight: bold;
color: red;
} /* ul.spesa li:nth-child(even) { selezioniamo tutti gli elementi pari di questa classe
font-weight: bold;
color: red;
}*/
ul.spesa li:nth-child(odd) { /* selezioniamo tutti gli elementi pari di questa classe */
font-weight: bold;
color: red;
}