Skip to content

Instantly share code, notes, and snippets.

@tjkhara
Created May 9, 2021 06:22
Show Gist options
  • Save tjkhara/6b3fceccc374eec7199c95bfc1f2b0ce to your computer and use it in GitHub Desktop.
Save tjkhara/6b3fceccc374eec7199c95bfc1f2b0ce to your computer and use it in GitHub Desktop.
See all the media queries added here
.section-about {
background-color: $color-gray-light-1;
padding: 25rem 0;
margin-top: -20vh;
@include respond(tab-port) {
padding: 20rem 0;
}
}
.section-features {
padding: 20rem 0;
background-image: linear-gradient(
to right bottom,
rgba($color-primary-light, 0.8),
rgba($color-primary-dark, 0.8)
),
url("../img/nat-4.jpg");
background-size: cover;
transform: skewY(-7deg);
& > * {
transform: skewY(7deg);
}
margin-top: -10.7rem;
@include respond(tab-port) {
padding: 15rem 0;
}
}
.section-tours {
background-color: $color-gray-light-1;
padding: 25rem 0 15rem 0;
margin-top: -10.5rem;
@include respond(tab-port) {
padding: 20rem 0 10rem 0;
}
}
.section-stories {
padding: 15rem 0;
position: relative;
@include respond(tab-port) {
padding: 10rem 0;
}
}
.section-book {
padding: 15rem 0;
background-image: linear-gradient(
to right bottom,
$color-primary-light,
$color-primary-dark
);
@include respond(tab-port) {
padding: 10rem 0;
}
}
.book {
background-image: linear-gradient(
105deg,
rgba($color-white, 0.9) 0%,
rgba($color-white, 0.9) 50%,
transparent 50%
),
url(../img/nat-10.jpg);
background-size: 100%;
border-radius: 3px;
box-shadow: 0 1.5rem 4rem rgba($color-black, 0.2);
height: 50rem;
&__form {
width: 50%;
padding: 6rem;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment