158 lines
2.8 KiB
SCSS
158 lines
2.8 KiB
SCSS
@font-face {
|
|
font-family: itrFont;
|
|
src: url(../font/LeagueSpartan-ExtraBold.ttf);
|
|
}
|
|
|
|
@font-face {
|
|
font-family: itrFontMedium;
|
|
src: url(../font/LeagueSpartan-Medium.ttf);
|
|
}
|
|
|
|
.home {
|
|
width: 100%;
|
|
opacity: 100%;
|
|
-webkit-animation: fade 0.9s ease-in;
|
|
-moz-animation: fade 0.9s ease-in;
|
|
-ms-animation: fade 0.9s ease-in;
|
|
-o-animation: fade 0.9s ease-in;
|
|
animation: fade 0.9s ease-in;
|
|
}
|
|
|
|
.home__content__panel {
|
|
background-color: transparent;
|
|
width: 100%;
|
|
height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.home__content__panel__title {
|
|
position: absolute;
|
|
color: white;
|
|
text-align: center;
|
|
font-size: 500%;
|
|
font-family: "itrFont";
|
|
animation: textSlide 1s ease;
|
|
animation-iteration-count: 1;
|
|
opacity: 100%;
|
|
width: 100%;
|
|
padding-top: 20px;
|
|
padding-bottom: 10px;
|
|
letter-spacing: 5px;
|
|
filter: drop-shadow(0 0 0.75rem rgb(77, 77, 77));
|
|
z-index: 1;
|
|
}
|
|
|
|
.home__content__panel__button {
|
|
position: absolute;
|
|
color: white;
|
|
text-align: center;
|
|
font-size: 300%;
|
|
animation: textSlide 1s ease, textBreathe 10s ease;
|
|
animation-iteration-count: 1, infinite;
|
|
opacity: 100%;
|
|
filter: drop-shadow(0 0 0.75rem rgb(77, 77, 77));
|
|
z-index: 1;
|
|
margin-top: 70vh;
|
|
border: none;
|
|
transition: 0.3s;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.home__content__panel__button:hover {
|
|
font-size: 370%;
|
|
}
|
|
|
|
.home__content__info {
|
|
min-height: 100vh;
|
|
height: auto;
|
|
width: 100%;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
background: linear-gradient(#353535, #232323);
|
|
}
|
|
|
|
.home__content__info__image {
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
right: 0;
|
|
margin-top: 20vh;
|
|
width: 45vw;
|
|
height: 40vw;
|
|
}
|
|
|
|
.home__content__info__image img {
|
|
margin-right: 5vw;
|
|
width: 30vw;
|
|
animation: glow;
|
|
animation-duration: 1s;
|
|
animation-timing-function: ease;
|
|
animation-delay: 2s;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
@media screen and (max-width: 912px) {
|
|
// Tablets
|
|
.home__content__panel__video {
|
|
zoom: 130%;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 650px) {
|
|
// Phones
|
|
.home__content__info__image {
|
|
opacity: 0%;
|
|
}
|
|
|
|
.home__content__panel__title {
|
|
color: rgb(255, 255, 255);
|
|
font-size: 250%;
|
|
padding-top: 20px;
|
|
padding-bottom: 10px;
|
|
letter-spacing: 5px;
|
|
filter: drop-shadow(0 0 0.75rem rgb(77, 77, 77));
|
|
z-index: 1;
|
|
}
|
|
|
|
.home__content__panel__button {
|
|
margin-top: 80vh;
|
|
}
|
|
|
|
.home__content__panel__video {
|
|
zoom: 100%;
|
|
}
|
|
}
|
|
|
|
// Animations
|
|
|
|
@keyframes glow {
|
|
0% {
|
|
filter: drop-shadow(0vw 0vw 0vw #ff6767c0);
|
|
}
|
|
100% {
|
|
filter: drop-shadow(0vw 0vw 3vw #ff6767c0);
|
|
}
|
|
}
|
|
|
|
@keyframes textSlide {
|
|
0% {
|
|
margin-top: 50vw;
|
|
}
|
|
0% {
|
|
opacity: 0%;
|
|
}
|
|
}
|
|
|
|
@keyframes fade {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
}
|