68 lines
1.5 KiB
SCSS
68 lines
1.5 KiB
SCSS
.header {
|
|
height: 95vh;
|
|
background-image: linear-gradient(
|
|
to right bottom,
|
|
rgba($color-primary-light, 0.801),
|
|
rgba($color-primary-dark, 0.808)
|
|
),
|
|
url("../img/hero-small.jpg");
|
|
background-size: cover;
|
|
background-position: top;
|
|
clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
|
|
|
|
@media (min-resolution: 192dpi) and (min-width: 600px),
|
|
(-webkit-min-device-pixel-ratio: 192dpi) and (min-width: 600px),
|
|
(min-width: 2000px) {
|
|
// apple retina screen (high dpi)
|
|
background-image: linear-gradient(
|
|
to right bottom,
|
|
rgba($color-primary-light, 0.801),
|
|
rgba($color-primary-dark, 0.808)
|
|
),
|
|
url("../img/hero.jpg");
|
|
}
|
|
|
|
@media (min-width: 2000px) {
|
|
background-image: linear-gradient(
|
|
to right bottom,
|
|
rgba($color-primary-light, 0.801),
|
|
rgba($color-primary-dark, 0.808)
|
|
),
|
|
url("../img/hero.jpg");
|
|
}
|
|
|
|
@include respond(phone) {
|
|
clip-path: polygon(0% 0%, 100% 0%, 100% 85vh, 0% 100%);
|
|
}
|
|
|
|
position: relative;
|
|
|
|
&__logo-box {
|
|
position: absolute;
|
|
top: 4rem;
|
|
left: 4rem;
|
|
}
|
|
&__logo {
|
|
height: 3.5rem;
|
|
}
|
|
|
|
/*
|
|
.logo:hover{
|
|
animation: moveInRight 1s ease-out;
|
|
}
|
|
*/
|
|
|
|
&__text-box {
|
|
position: absolute;
|
|
top: 40%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
/*
|
|
* Limpiar animaciones para evitar temblores
|
|
* No se sabe realmente por qué funciona o de dónde viene el error, pero lo hace
|
|
*/
|
|
backface-visibility: hidden;
|
|
text-align: center;
|
|
}
|
|
}
|