Sin resumen de edición |
Sin resumen de edición |
||
Línea 1: | Línea 1: | ||
/* Los estilos CSS colocados aquí se aplicarán a todas las apariencias */ | /* Los estilos CSS colocados aquí se aplicarán a todas las apariencias */ | ||
body { | body { | ||
background: url(https:// | background: url(https://wazeopedia.waze.com/wiki/Spain/P%C3%A1gina_principal#/media/Archivo:Portada_Wiki_es.png) center/cover no-repeat; | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
height: | height: 100%; | ||
margin: 0; | margin: 0; | ||
} | } |
Revisión del 22:29 30 may 2020
/* Los estilos CSS colocados aquí se aplicarán a todas las apariencias */
body {
background: url(https://wazeopedia.waze.com/wiki/Spain/P%C3%A1gina_principal#/media/Archivo:Portada_Wiki_es.png) center/cover no-repeat;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin: 0;
}
.drogon {
position: absolute;
top: 0;
right: 0;
}
.house-lists {
display: flex;
}
.house {
position: relative;
overflow: hidden;
width: 70px;
height: 550px;
background-size: auto 105%;
background-position: center;
border-radius: 60px;
-webkit-box-shadow: 0px 0px 10px -1px rgba(255,255,255,1);
-moz-box-shadow: 0px 0px 10px -1px rgba(255,255,255,1);
box-shadow: 0px 0px 10px -1px rgba(255,255,255,1);
min-width: 100px;
transition: .5s ease;
margin: 15px;
}
.sigil {
min-width: 100px;
text-align: center;
position: absolute;
bottom: 10px;
}
.sigil img {
filter: brightness(0) invert(1);
max-width: 80px;
max-height: 60px;
}
.house:hover {
min-width: 600px;
background-size: auto 100%;
border-radius: 10px;
}
.house-inner {
position: relative;
height: 100%;
display: flex;
align-items: flex-end;
}
.house::before {
content: '';
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
position: absolute;
transition: .5s ease;
}
.house:hover::before{
background: none;
}
.house-name {
color: #fff;
transform: rotate(-90deg);
font-size: 50px;
letter-spacing: 2px;
transition: .5s ease;
max-width: 100%;
margin-bottom: 120%;
}
.house:hover .house-name{
transform:rotate(0deg);
margin-bottom: 3%;
margin-left:20%
}