diff --git a/src/css/cover.css b/src/css/cover.css index d8d27b9..59fb677 100644 --- a/src/css/cover.css +++ b/src/css/cover.css @@ -3,7 +3,6 @@ body, html { height: 100%; } - @media (min-width: 768px) { .bd-placeholder-img-lg { font-size: 3.5rem; @@ -15,11 +14,11 @@ body, html { padding: 0; margin: 0; background-color: rgba(0, 0, 0, 0); - background-image: linear-gradient(141deg, rgba(0, 210, 255, 0.498039), rgba(249, 244, 152, 0.5)); + background-image: linear-gradient(141deg, rgba(31, 55, 75, 0.9), rgba(53, 92, 125, 0.9)); } #image-back-main{ - background-image: url("../images/background.jpg") ; + background-image: url("../images/background.jpg"); background-size: cover; height: 100%; width: 100%; @@ -37,16 +36,223 @@ body, html { -moz-user-select: none; -ms-user-select: none; user-select: none; + font-weight: 200 !important; + filter: drop-shadow(0 0 30px #000); } #jumbotron-content { - padding:100px; color:#fff; - font-weight: 100; + padding:100px; + color:#fff; text-align: center; + font-weight: 200; +} + +#jumbotron-content h3, +#jumbotron-content h1 { + font-weight: 200; } .navbar { margin-top: 20px; - filter: drop-shadow(0 0 30px #888); + filter: drop-shadow(0 0 30px #000); border-radius: 5px; -} \ No newline at end of file +} + +.scroll-container { + position: absolute; + bottom: 30px; + right: 30px; +} + +.scroll-container .unu { + margin-top: 6px; +} + +.scroll-container .unu, .doi, .trei +{ + -webkit-animation: mouse-scroll 1s infinite; + -moz-animation: mouse-scroll 1s infinite; +} + +.scroll-container .unu +{ + -webkit-animation-delay: .1s; + -moz-animation-delay: .1s; + -webkit-animation-direction: alternate; +} + +.scroll-container .doi +{ + -webkit-animation-delay: .2s; + -moz-animation-delay: .2s; + -webkit-animation-direction: alternate; +} + +.scroll-container .trei +{ + -webkit-animation-delay: .3s; + -moz-animation-delay: .3s; + -webkit-animation-direction: alternate; +} + +.scroll-container span +{ + display: block; + width: 10px; + height: 10px; + -ms-transform: rotate(45deg); /* IE 9 */ + -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */ + transform: rotate(45deg); + + border-right: 2px solid white; + border-bottom: 2px solid white; + margin: 0 0 3px 6px; +} + +.scroll-container .mouse +{ + height: 35px; + width: 24px; + border-radius: 17px; + transform: none; + border: 2px solid white; + top: 170px; +} + +.scroll-container .wheel +{ + height: 8px; + width: 3px; + display: block; + margin: 5px auto; + background: white; + position: relative; + border-radius: 1px; +} + +.scroll-container .wheel +{ + -webkit-animation: mouse-wheel 1.2s ease infinite; + -moz-animation: mouse-wheel 1.2s ease infinite; +} + +@-webkit-keyframes mouse-wheel +{ + 0% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(6px); + -ms-transform: translateY(6px); + transform: translateY(6px); + } +} + +@-moz-keyframes mouse-wheel +{ + 0% { top: 1px; } + 50% { top: 2px; } + 100% { top: 3px;} +} + +@-webkit-keyframes mouse-scroll { + + 0% { opacity: 0;} + 50% { opacity: .5;} + 100% { opacity: 1;} +} +@-moz-keyframes mouse-scroll { + + 0% { opacity: 0; } + 50% { opacity: .5; } + 100% { opacity: 1; } +} +@-o-keyframes mouse-scroll { + + 0% { opacity: 0; } + 50% { opacity: .5; } + 100% { opacity: 1; } +} +@keyframes mouse-scroll { + + 0% { opacity: 0; } + 50% { opacity: .5; } + 100% { opacity: 1; } +} + +@media (max-width:1169px) { + :root { + --finger-scroll-height: 50px; + } + + .scroll-container .mouse + { + display: none; + } + + .scroll-container .wheel + { + display: none; + } + + .scroll-container .finger + { + height: 35px; + width: 24px; + transform: none; + top: 180px; + } + + .scroll-container .finger .swipe.swipe-vertical { + position: relative; + } + + .scroll-container .finger .swipe.swipe-vertical i { + position: absolute; + display: inline-block; + color: #fff; + border-radius: 100%; + border:0px; + animation: finger ease-in 4s; + animation-iteration-count: infinite; + z-index: 100; + left: 0; + } + + @keyframes finger{ + 0% { + bottom: -45px; + transform: scale(1); + } + 20% { + bottom: -45px; + transform: scale(.7); + } + 50% { + bottom: 0; + transform: scale(.7); + } + 60% { + transform: scale(1); + } + 70% { + bottom: 0; + } + 100% { + bottom: -45px; + transform: scale(1); + } + } +} + +@media only screen and (min-width: 1170px) { + + .finger { + display:none; + } +} diff --git a/src/index.html b/src/index.html index d0937c6..d596e3c 100644 --- a/src/index.html +++ b/src/index.html @@ -15,79 +15,61 @@