frontend/src/css/modules/landing.scss
/*dynamic header style*/
.dyn-header {
position: relative;
z-index: 999;
nav {
background-color: rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 #000;
a {
color: $light-link;
font-weight: $rob-med;
img.cloudcv-logo {
height: 50px;
width: 50px;
vertical-align: middle;
}
}
a:hover {
color: $link-hover-dark;
}
a.light-link {
color: $med-link;
transition: all 0.2s ease-in-out;
}
a.light-link:hover {
color: $light-link;
}
a.active {
color: $link-hover-dark;
background-color: rgba(0, 0, 0, 0.1);
}
}
}
/*main intor*/
section.bg-section {
width: 100%;
height: 100vh;
position: fixed;
top: 0px;
left: 0px;
background-color: $med-gray;
.bg-image {
width: 100%;
height: 100%;
opacity: 0.2;
background-image: url('../images/background.png');
background-size: cover;
background-repeat: no-repeat;
background-position: right;
}
}
.ev-head {
margin-top: 100px;
}
.ev-head-small {
margin-top: 80px;
}
.ev-intro {
margin-top: -10px;
}
.ev-insight {
position: absolute;
bottom: 0px;
color: $light-gray;
width: 75%;
right: 0;
height: 70vh;
overflow: hidden;
direction: ltr;
}
#mobile-demo {
li {
a {
color: $med-black;
}
}
}
.background {
background-color: $dark-gray;
}
.ev-details,
.ev-reverse-details {
position: relative;
box-shadow: 6px -1px 9px $super-light-shadow;
padding: 0;
}
.ev-reverse-details {
box-shadow: none;
}
.full-view {
min-height: 100vh;
}
/*simple header*/
.sim-header {
font-size: 18px;
top: 0;
left: 0;
z-index: 999;
width: 100%;
position: relative;
nav {
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 0 0 0 0 #000;
position: fixed;
top: 0;
left: 0;
padding: 0 100px;
transition: all 0.1s ease-in-out;
a.sim-header-link {
color: #4d4d4d;
font-weight: 400;
transition: all 0.2s ease-in-out;
&:hover {
color: #ffaf4b;
background-color: rgba(0, 0, 0, 0);
}
}
a.light-link {
color: #9ca3be;
transition: all 0.2s ease-in-out;
&:hover {
color: #fff;
}
}
a.active {
color: #ffaf4b;
background-color: rgba(0, 0, 0, 0);
}
nav.grad-shadow-1 {
box-shadow: 0 0 10px #9d9d9d;
}
}
}
@media only screen and (max-width: 992px) {
.sim-header nav {
padding: 0px 30px;
}
}
.grad-head {
padding-top: 10vh;
}
.landing-buttons {
margin-top: 35px;
position: relative;
z-index: 3;
}
.rocket-anim {
width: 150px;
padding-right: 50px;
position: absolute;
left: 62%;
z-index: 0;
/* margin: auto; */
margin-top: 21vh;
animation: rocket 3s alternate infinite;
img {
width: 100%;
}
}
.insight-text {
color: $light-black;
&:hover {
color: $highlight;
}
}
.rocket-container {
position: relative;
}
.small-cloud {
z-index: 0;
}
.cloud-1 {
width: 80px;
position: absolute;
right: 0;
top: -1-0px;
animation: cloud-one 7s linear infinite;
img {
width: 100%;
}
}
@keyframes rocket {
0% {
transform: rotate(4deg);
}
100% {
transform: rotate(-4deg);
}
}
@keyframes cloud-one {
0% {
top: -100px;
}
100% {
top: 100vh;
}
}
.cloud-2 {
width: 100px;
position: absolute;
right: 150px;
top: -140px;
animation: cloud-two 10s linear infinite;
animation-delay: 5s;
img {
width: 100%;
}
}
@keyframes cloud-two {
0% {
top: -140px;
}
100% {
top: 100vh;
}
}
.cloud-3 {
width: 100px;
position: absolute;
right: -60px;
top: -120px;
animation: cloud-three 8s linear infinite;
img {
width: 100%;
}
}
@keyframes cloud-three {
0% {
top: -120px;
}
100% {
top: 100vh;
}
}
.cloud-4 {
width: 100px;
position: absolute;
right: 120px;
top: -120px;
animation: cloud-four 14s linear infinite;
img {
width: 100%;
}
}
@keyframes cloud-four {
0% {
top: -80px;
}
100% {
top: 100vh;
}
}
.bird-anim {
width: 200px;
position: absolute;
right: 0px;
top: -300px;
animation: bird 15s linear infinite;
animation-delay: 4s;
img {
width: 100%;
}
}
@keyframes bird {
0% {
top: -300px;
}
100% {
top: 100vh;
}
}
.cloud-big {
position: absolute;
display: inline-block;
right: 0;
bottom: 0;
z-index: 1;
height: 100%;
img {
height: 100%;
}
}
.cloud-big-2 {
right: 0px;
z-index: 0;
bottom: 4px;
transform: rotate(-4deg);
}
.grad-vh {
min-height: 100vh;
}
.landing-is {
font-size: 126px;
margin-top: 34px;
}
.is-line,
.big-line {
display: block;
height: 2px;
width: 50px;
background: $highlight;
margin-top: 22px;
}
.big-line {
width: 100px;
height: 1px;
margin: 8px 0px 12px 0px;
background: $light-black;
}
/*space man*/
.spaceman {
width: 200px;
position: absolute;
right: 0px;
top: 100px;
animation: spaceman-anim 4s alternate linear infinite;
img {
width: 100%;
}
}
@keyframes spaceman-anim {
0% {
transform: rotate(0deg);
top: 100px;
}
30% {
transform: rotate(20deg);
top: 150px;
}
70% {
transform: rotate(0deg);
top: 190px;
}
100% {
transform: rotate(-10deg);
top: 240px;
}
}
.challenge-logo {
img {
width: 80px;
vertical-align: middle;
}
}
a.view-more {
color: $highlight;
&:hover {
color: $highlight-dark;
}
}
.org-logo {
max-width: 100%;
height: 120px;
text-align: center;
img {
height: 75%;
max-width: 100%;
width: auto;
transition: all 0.2s ease-in-out;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}
&:hover {
img {
-webkit-filter: grayscale(100%);
/* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
}
}
/*media queries*/
@media only screen and (max-width: $med-screen) {
.rocket-container {
display: none;
}
.dyn-header {
nav {
a.org-link {
float: right;
padding-right: 20px;
}
}
}
.head {
margin-top: 40px;
}
.ev-head-small {
margin-top: 20px;
}
.ev-insight {
bottom: 0px;
width: 100%;
}
.sim-header {
width: 100%;
}
}
@media only screen and (max-width: $small-screen) {
.org-logo {
height: auto;
width: 100%;
img {
width: 100%;
height: auto;
}
}
}
#aptiv-logo {
height: 35%;
padding-top: 5%;
}
#argoai-logo {
height: 50%;
padding-bottom: 7%;
}
#cmu-logo {
height: 50%;
}
#draper-logo {
height: 50%;
padding-bottom: 7%;
}
#ebay-logo {
height: 35%;
padding-top: 3%;
}
#fb-logo {
height: 30%;
padding-top: 7%;
}
#gt-logo {
height: 40%;
}
#google-logo {
height: 40%;
}
#ibm-logo {
height: 35%;
padding-top: 5%;
}
#uiuc-logo {
height: 25%;
padding-top: 5%;
}
#iitm-logo {
height: 50%;
}
#intel-logo {
height: 45%;
}
#ju-logo {
height: 50%;
}
#mapillary-logo {
height: 40%;
padding-top: 7%;
}
#mit-logo {
height: 35%;
padding-top: 7%;
}
#nu-logo {
height: 50%;
}
#siop-logo {
height: 50%;
}
#stanford-logo {
height: 50%;
}
#adelaide-logo {
height: 50%;
padding-top: 5%;
}
#umbc-logo {
height: 45%;
padding-top: 5%;
}
#pitt-logo {
height: 50%;
padding-top: 5%;
}
#vt-logo {
height: 45%;
}
#iowa-state {
height: 50%;
padding-top: 5%;
}
#motional {
height: 5%;
}
#uau {
height: 40%;
}
#upisa {
height: 50%;
}
.evalai-sponsor-logo {
max-width: 100%;
height: 300px;
text-align: center;
img {
height: 55%;
max-width: 100%;
width: auto;
transition: all 0.2s ease-in-out;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}
&:hover {
img {
-webkit-filter: grayscale(100%);
/* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
}
}
#gsoc {
height: 55%;
margin-left: 16.667%;
}
#aws {
margin-top: 2%;
}