|
|
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 {
| |
| 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: 50%;
| |
| 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%
| |
| }
| |