.landing-wraper
// fallback background-color: $blue background-image: url($baseurl + 'assets/img/content/aboutme_small.png'), linear-gradient(to bottom right, $vivid-blue , $blue) background-position: right background-repeat: no-repeat background-size: auto 100vh height: 100vh max-height: 100vh
.landing-content
padding: 30vh 10vw 0
.landing-page-sub-title
display: inline padding-right: 5px
.btn-landing
display: flex justify-content: space-between margin: 4rem 2rem width: 380px .btn-outline color: $vivid-pink
@media screen and ( min-width: 376px )
.landing-wraper background-image: url($baseurl + 'assets/img/content/aboutme_large.png'), linear-gradient(to bottom right, $vivid-blue , $blue)
@media screen and ( max-width: 767px )
// display on ipad but not phone .landing-page-sub-title display: none
@media screen and ( max-width: 768px )
.btn-landing display: none .landing-content padding: 20vh 5vw 0 .mouse animation: intro 1s border: 1px solid $soft-white border-radius: 11px height: 40px left: 5vw position: absolute top: 75vh width: 20px .scroll animation: finger 2.5s infinite background: $vivd-yellow border-radius: 4px display: block height: 5px margin: 30px auto width: 4px @keyframes intro from opacity: 0 transform: translateY(40px) to opacity: 1 transform: translateY(0) @keyframes finger from opacity: 0 to opacity: 1 transform: translateY(-20px)