Salve a tutti esperti del CSS,
Sto da poco imparando i vostri segreti e sto uscendo letteralmente pazza
La mia idea iniziale era fare un semplicissimo menù portable con 5 sezioni e un'animazione hover su ogni sezione con testo centrale, figure con opacità 50%, didascalia e sfondo del paragrafo mantenuta.
Quindi ho creato un DIV contenitore con 5 paragrafi inline con sfondi a caso.
Ho impostato il width dei paragrafi del 20% rispetto alla larghezza del DIV contenitore per farli stare tutti correttamente nel loro contenitore e siccome non riuscivo a centrare perfettamente il testo ho aggiunto il codice line-height.
Poi ho dato un effetto hover al testo.
Il vero problema è avvenuto quando ho tentato di aggiungere la didascalia ai vari paragrafi. Mi sono letteralmente bloccata perchè sono troppo nabba .
Quando vado ad aggiungere il 'figure' va a sballare tutto.
Quindi dopo svariate prove ho deciso di rivolgermi a veri esperti del css.
Questo è il codice HTML:
codice:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Nothing+You+Could+Do&display=swap" rel="stylesheet"> 
<meta charset=UTF-8 />
<link href="style.css" rel="stylesheet" tupe="text/css" media="all">
</head>
<body>

<header><center><h1>MENU'</h1></center></header>

<div id="contenitore">
<p class="primoblocco"> PRIMAVERA </p>
<p class="secondoblocco">ESTATE</p>
<p class="terzoblocco"> AUTUNNO</p>
<p class="quartoblocco">INVERNO</p>
<p class="quintoblocco"> MEZZESTAGIONI</p>
</div>
</body>
</html>
E questo il css:

codice:
#contenitore
{
width: 900px;
height: 400px;
margin: 0 auto;
display: flex;
background-color: black;
color: yellow;
justify-contenent: center;
align-items: center;
line-height: 400px;
}

#contenitore p
{
background-position: center center;
    background-size: cover;
width: 20%;
height: 100%;
margin: 0 5px;
float: center;
border: 1px solid black;
font-family: 'Nothing You Could Do', cursive;
    font-size: 100%;
    color: #000; 
        color: rgba(0, 0, 0, 0.0);
    text-align: center;
transition-duration: 1s;
-webkit-transition-duration: 1s;
}


#contenitore p:hover
{
color: white;
color: rgba(75, 2, 66, 1.0);
}

.primoblocco
{
background-image: url("https://cache.desktopnexus.com/cropped-wallpapers/1738/1738540-1024x614-[DesktopNexus.com].jpg")
}


.secondoblocco
{
background-image:url("https://cache.desktopnexus.com/cropped-wallpapers/2491/2491675-1024x614-[DesktopNexus.com].jpg")
}


.terzoblocco
{
background-image:url("http://fotohd.weebly.com/uploads/2/1/9/8/21989596/1-regali-natale-o-su-horizontal-fixed_orig.jpg")
}



.quartoblocco
{
background-image:url("http://fotohd.weebly.com/uploads/2/1/9/8/21989596/7719476_orig.jpg")
}



.quintoblocco
{
background-image:url("https://cdn.pixabay.com/photo/2017/07/08/23/58/bathtub-2485957_1280.jpg")
}