- Spoiler:
Pero a mi no me sale nada
El html
- Html:
- Código:
<br><br><table><tbody><tr><td><div class="mestg">Enero</div><div class="backtg" style="background: url(https://placeholdit.imgix.net/~text?txtsize=20&txt=180x100&w=180&h=100);"><div class="textg">Fiesta de año nuevo, organizada por .</div></div></td><td><div class="mestg">Febrero</div><div class="backtg" style="background: url(https://placeholdit.imgix.net/~text?txtsize=20&txt=180x100&w=180&h=100);"><div class="textg">Fiesta de San Valentín, organizada por <br>.</div></div></td><td><div class="mestg">Marzo</div><div class="backtg" style="background: url(https://placeholdit.imgix.net/~text?txtsize=20&txt=180x100&w=180&h=100);"><div class="textg">Libre.</div></div></td></tr><tr><td><div class="mestg">Abril</div><div class="backtg" style="background: url(https://placeholdit.imgix.net/~text?txtsize=20&txt=180x100&w=180&h=100);"><div class="textg">Libre.</div></div></td><td><div class="mestg">Mayo</div><div class="backtg" style="background: url(https://placeholdit.imgix.net/~text?txtsize=20&txt=180x100&w=180&h=100);"><div class="textg">Libre.</div></div></td><td><div class="mestg">Junio</div><div class="backtg" style="background: url(https://placeholdit.imgix.net/~text?txtsize=20&txt=180x100&w=180&h=100);"><div class="textg">Libre.</div></div></td></tr><tr><td><div class="mestg">Julio</div><div class="backtg" style="background: url(https://placeholdit.imgix.net/~text?txtsize=20&txt=180x100&w=180&h=100);"><div class="textg">Libre.</div></div></td><td><div class="mestg">Agosto</div><div class="backtg" style="background: url(https://placeholdit.imgix.net/~text?txtsize=20&txt=180x100&w=180&h=100);"><div class="textg">Libre.</div></div></td><td><div class="mestg">Septiembre</div><div class="backtg" style="background: url(https://placeholdit.imgix.net/~text?txtsize=20&txt=180x100&w=180&h=100);"><div class="textg">Libre.</div></div></td></tr><tr><td><div class="mestg">Octubre</div><div class="backtg" style="background: url(https://placeholdit.imgix.net/~text?txtsize=20&txt=180x100&w=180&h=100);"><div class="textg">Fiesta de Halloween, organizada por .</div></div></td><td><div class="mestg">Noviembre</div><div class="backtg" style="background: url(https://placeholdit.imgix.net/~text?txtsize=20&txt=180x100&w=180&h=100);"><div class="textg">Baile de invierno, organizado por .</div></div></td><td><div class="mestg">Diciembre</div><div class="backtg" style="background: url(https://placeholdit.imgix.net/~text?txtsize=20&txt=180x100&w=180&h=100);"><div class="textg">Encendido de la ciudad en Nochebuena, organizado por el ayuntamiento.</div></div></td></tr></tbody></table></center>
El css:
- CSS:
- Código:
*Calendario de tramas*/ (no sale lo del hover)
.titmad {
background: #333930;
border-top: 30px solid #a4b09d;
color: #a4b09d;
font-family: Lobster;
font-size: 30px;
padding: 20px;
width: 460px;
}
.submad {
background: #333930;
border-bottom: 30px solid #a4b09d;
font-family: Lato;
font-size: 20px;
padding: 10px;
text-transform: uppercase;
width: 480px;
}
.backtg {
border: 2px solid #a4b09d;
height: 100px;
overflow: hidden;
width: 180px;
transform:skew ;
}
.textg {
background: rgba(255,255,255,0.6);
color: #000;
font-size: 11px;
height: 80px;
line-height: 12px;
margin-left: 5px;
margin-top: 104px;
overflow-y: auto;
padding: 5px;
text-align: justify;
transition: 2s;
width: 160px;
}
corpmad {
background: #333930;
border-bottom: 2px solid #a4b09d;
color: #000;
font-size: 11px;
height: auto;
line-height: 12px;
padding: 10px;
text-align: justify;
width: 480px;
}
.mestg {
background: #333930;
color: #fff;
font-family: Lobster;
font-size: 18px;
padding: 10px;
text-align: center;
width: 164px;
}
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: grey;
}
He probado vuestro tutorial pero no me lo reconoce