diff --git a/src/assets/stylesheets/home.scss b/src/assets/stylesheets/home.scss index 0362c3f..32e46e2 100644 --- a/src/assets/stylesheets/home.scss +++ b/src/assets/stylesheets/home.scss @@ -21,7 +21,7 @@ .home__content__panel { background-color: transparent; width: 100%; - height: 100vh; + height: 90vh; display: flex; justify-content: center; align-items: center; @@ -29,19 +29,23 @@ overflow: hidden; } +.home__content__panel__video { + width: 100%; + height: 100%; + object-fit: cover; +} + .home__content__panel__title { position: absolute; color: white; text-align: center; - font-size: 500%; + font-size: 70px; font-family: "itrFont"; animation: textSlide 1s ease; animation-iteration-count: 1; opacity: 100%; width: 100%; - padding-top: 20px; - padding-bottom: 10px; - letter-spacing: 5px; + letter-spacing: 2px; filter: drop-shadow(0 0 0.75rem rgb(77, 77, 77)); z-index: 1; } @@ -76,71 +80,13 @@ 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; diff --git a/src/components/Home.js b/src/components/Home.js index c1f9433..ef7a74b 100644 --- a/src/components/Home.js +++ b/src/components/Home.js @@ -1,7 +1,6 @@ import React, { Component } from "react"; import backgroundVideo from "../assets/videos/video.mp4"; import "../assets/stylesheets/home.scss"; -import { AnimationOnScroll } from "react-animation-on-scroll"; import Bubble from "./Bubble"; import * as Scroll from "react-scroll"; import "animate.css"; @@ -26,12 +25,12 @@ export default class Home extends Component {
ILLINOIS TECH
ROBOTICS
- + */}