|
|
@@ -0,0 +1,56 @@
|
|
|
+@import "../../styles/variables";
|
|
|
+
|
|
|
+.hero {
|
|
|
+ min-height: 100vh;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ h1 {
|
|
|
+ font-size: 36px;
|
|
|
+ color: $color-white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: $color-black;
|
|
|
+ opacity: 0.8;
|
|
|
+ z-index: 3;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-img {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 2;
|
|
|
+ background-image: url(https://cdn.pixabay.com/photo/2015/03/08/21/06/cycling-664753_960_720.jpg);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+ background-size: cover;
|
|
|
+
|
|
|
+ @media (min-width: 992px) {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ video {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ z-index: 1;
|
|
|
+
|
|
|
+ @media (max-width: 991px) {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
