first 2 lectures
This commit is contained in:
dqnid committed
1 parent
2cf84f4efd
commit
98a7c96117
289 files changed
+14886
No files matched your search
Whitespace-only changes.
@@ -0,0 +1,49 @@
|
||||
@mixin clearfix {
|
||||
&::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin absCenter {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
|
||||
// MEDIA QUERY MANAGER
|
||||
/*
|
||||
0 - 600px: Phone
|
||||
600 - 900px: Tablet portrait
|
||||
900 - 1200px: Tablet landscape
|
||||
[1200 - 1800] is where our normal styles apply
|
||||
1800px + : Big desktop
|
||||
|
||||
$breakpoint arguement choices:
|
||||
- phone
|
||||
- tab-port
|
||||
- tab-land
|
||||
- big-desktop
|
||||
|
||||
ORDER: Base + typography > general layout + grid > page layout > components
|
||||
|
||||
1em = 16px
|
||||
*/
|
||||
@mixin respond($breakpoint) {
|
||||
@if $breakpoint == phone {
|
||||
@media only screen and (max-width: 37.5em) { @content }; //600px
|
||||
}
|
||||
@if $breakpoint == tab-port {
|
||||
@media only screen and (max-width: 56.25em) { @content }; //900px
|
||||
}
|
||||
@if $breakpoint == tab-land {
|
||||
@media only screen and (max-width: 75em) { @content }; //1200px
|
||||
}
|
||||
@if $breakpoint == big-desktop {
|
||||
@media only screen and (min-width: 112.5em) { @content }; //1800
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
// COLORS
|
||||
$color-primary: #55c57a;
|
||||
$color-primary-light: #7ed56f;
|
||||
$color-primary-dark: #28b485;
|
||||
|
||||
$color-secondary-light: #ffb900;
|
||||
$color-secondary-dark: #ff7730;
|
||||
|
||||
$color-tertiary-light: #2998ff;
|
||||
$color-tertiary-dark: #5643fa;
|
||||
|
||||
$color-grey-light-1: #f7f7f7;
|
||||
$color-grey-light-2: #eee;
|
||||
|
||||
$color-grey-dark: #777;
|
||||
$color-grey-dark-2: #999;
|
||||
$color-grey-dark-3: #333;
|
||||
|
||||
$color-white: #fff;
|
||||
$color-black: #000;
|
||||
|
||||
|
||||
// FONT
|
||||
$default-font-size: 1.6rem;
|
||||
|
||||
|
||||
// GRID
|
||||
$grid-width: 114rem;
|
||||
$gutter-vertical: 8rem;
|
||||
$gutter-vertical-small: 6rem;
|
||||
$gutter-horizontal: 6rem;
|
||||
@@ -0,0 +1,43 @@
|
||||
@keyframes moveInLeft {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-10rem);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translateX(1rem);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translate(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveInRight {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(10rem);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translateX(-1rem);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translate(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveInBottom {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(3rem);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translate(0);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
html {
|
||||
// This defines what 1rem is
|
||||
font-size: 62.5%; //1 rem = 10px; 10px/16px = 62.5%
|
||||
|
||||
@include respond(tab-land) { // width < 1200?
|
||||
font-size: 56.25%; //1 rem = 9px, 9/16 = 50%
|
||||
}
|
||||
|
||||
@include respond(tab-port) { // width < 900?
|
||||
font-size: 50%; //1 rem = 8px, 8/16 = 50%
|
||||
}
|
||||
|
||||
@include respond(big-desktop) {
|
||||
font-size: 75%; //1rem = 12, 12/16
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
padding: 3rem;
|
||||
|
||||
@include respond(tab-port) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: $color-primary;
|
||||
color: $color-white;
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
body {
|
||||
font-family: "Lato", sans-serif;
|
||||
font-weight: 400;
|
||||
/*font-size: 16px;*/
|
||||
line-height: 1.7;
|
||||
color: $color-grey-dark;
|
||||
}
|
||||
|
||||
.heading-primary {
|
||||
color: $color-white;
|
||||
text-transform: uppercase;
|
||||
|
||||
backface-visibility: hidden;
|
||||
margin-bottom: 6rem;
|
||||
|
||||
&--main {
|
||||
display: block;
|
||||
font-size: 6rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 3.5rem;
|
||||
|
||||
animation-name: moveInLeft;
|
||||
animation-duration: 1s;
|
||||
animation-timing-function: ease-out;
|
||||
|
||||
@include respond(phone) {
|
||||
letter-spacing: 1rem;
|
||||
font-family: 5rem;
|
||||
}
|
||||
/*
|
||||
animation-delay: 3s;
|
||||
animation-iteration-count: 3;
|
||||
*/
|
||||
}
|
||||
|
||||
&--sub {
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1.75rem;
|
||||
animation: moveInRight 1s ease-out;
|
||||
|
||||
@include respond(phone) {
|
||||
letter-spacing: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.heading-secondary {
|
||||
font-size: 3.5rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
display: inline-block;
|
||||
background-image: linear-gradient(to right, $color-primary-light, $color-primary-dark);
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
letter-spacing: .2rem;
|
||||
transition: all .2s;
|
||||
|
||||
@include respond(tab-port) {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
@include respond(phone) {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: skewY(2deg) skewX(15deg) scale(1.1);
|
||||
text-shadow: .5rem 1rem 2rem rgba($color-black, .2);
|
||||
}
|
||||
}
|
||||
|
||||
.heading-tertiary {
|
||||
font-size: $default-font-size;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
font-size: $default-font-size;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
.u-center-text { text-align: center !important; }
|
||||
|
||||
.u-margin-bottom-small { margin-bottom: 1.5rem !important; }
|
||||
.u-margin-bottom-medium {
|
||||
margin-bottom: 4rem !important;
|
||||
|
||||
@include respond(tab-port) {
|
||||
margin-bottom: 3rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.u-margin-bottom-big {
|
||||
margin-bottom: 8rem !important;
|
||||
|
||||
@include respond(tab-port) {
|
||||
margin-bottom: 5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.u-margin-top-big { margin-top: 8rem !important; }
|
||||
.u-margin-top-huge { margin-top: 10rem !important; }
|
||||
@@ -0,0 +1,16 @@
|
||||
.bg-video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
opacity: .15;
|
||||
overflow: hidden;
|
||||
|
||||
&__content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
.btn {
|
||||
&,
|
||||
&:link,
|
||||
&:visited {
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
padding: 1.5rem 4rem;
|
||||
display: inline-block;
|
||||
border-radius: 10rem;
|
||||
transition: all .2s;
|
||||
position: relative;
|
||||
font-size: $default-font-size;
|
||||
|
||||
//Change for the <button> element
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 1rem 2rem rgba($color-black,.2);
|
||||
|
||||
&::after {
|
||||
transform: scaleX(1.4) scaleY(1.6);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: none;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 .5rem 1rem rgba($color-black,.2);
|
||||
}
|
||||
|
||||
&--white {
|
||||
background-color: $color-white;
|
||||
color: $color-grey-dark;
|
||||
|
||||
&::after {
|
||||
background-color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
&--green {
|
||||
background-color: $color-primary;
|
||||
color: $color-white;
|
||||
|
||||
&::after {
|
||||
background-color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 10rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
transition: all .4s;
|
||||
}
|
||||
|
||||
&--animated {
|
||||
animation: moveInBottom .5s ease-out .75s;
|
||||
animation-fill-mode: backwards;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
&:link,
|
||||
&:visited {
|
||||
font-size: $default-font-size;
|
||||
color: $color-primary;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid $color-primary;
|
||||
padding: 3px;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
color: $color-white;
|
||||
box-shadow: 0 1rem 2rem rgba($color-black, .15);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: 0 .5rem 1rem rgba($color-black, .15);
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,214 @@
|
||||
.card {
|
||||
|
||||
// FUNCTIONALITY
|
||||
perspective: 150rem;
|
||||
-moz-perspective: 150rem;
|
||||
position: relative;
|
||||
height: 52rem;
|
||||
|
||||
&__side {
|
||||
height: 52rem;
|
||||
transition: all .8s ease;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1.5rem 4rem rgba($color-black, .15);
|
||||
|
||||
&--front {
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
||||
&--back {
|
||||
transform: rotateY(180deg);
|
||||
|
||||
&-1 {
|
||||
background-image: linear-gradient(to right bottom, $color-secondary-light, $color-secondary-dark);
|
||||
}
|
||||
|
||||
&-2 {
|
||||
background-image: linear-gradient(to right bottom, $color-primary-light, $color-primary-dark);
|
||||
}
|
||||
|
||||
&-3 {
|
||||
background-image: linear-gradient(to right bottom, $color-tertiary-light, $color-tertiary-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:hover &__side--front {
|
||||
transform: rotateY(-180deg);
|
||||
}
|
||||
|
||||
&:hover &__side--back {
|
||||
transform: rotateY(0);
|
||||
}
|
||||
|
||||
|
||||
// FRONT SIDE STYLING
|
||||
&__picture {
|
||||
background-size: cover;
|
||||
height: 23rem;
|
||||
background-blend-mode: screen;
|
||||
-webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
|
||||
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
|
||||
&--1 {
|
||||
background-image: linear-gradient(to right bottom, $color-secondary-light, $color-secondary-dark),
|
||||
url(../img/nat-5.jpg);
|
||||
}
|
||||
|
||||
&--2 {
|
||||
background-image: linear-gradient(to right bottom, $color-primary-light, $color-primary-dark),
|
||||
url(../img/nat-6.jpg);
|
||||
}
|
||||
|
||||
&--3 {
|
||||
background-image: linear-gradient(to right bottom, $color-tertiary-light, $color-tertiary-dark),
|
||||
url(../img/nat-7.jpg);
|
||||
}
|
||||
}
|
||||
|
||||
&__heading {
|
||||
font-size: 2.8rem;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
text-align: right;
|
||||
color: $color-white;
|
||||
position: absolute;
|
||||
top: 12rem;
|
||||
right: 2rem;
|
||||
width: 75%;
|
||||
|
||||
}
|
||||
|
||||
&__heading-span {
|
||||
padding: 1rem 1.5rem;
|
||||
-webkit-box-decoration-break: clone;
|
||||
box-decoration-break: clone;
|
||||
|
||||
&--1 {
|
||||
background-image: linear-gradient(to right bottom,
|
||||
rgba($color-secondary-light, .85),
|
||||
rgba($color-secondary-dark, .85));
|
||||
}
|
||||
|
||||
&--2 {
|
||||
background-image: linear-gradient(to right bottom,
|
||||
rgba($color-primary-light, .85),
|
||||
rgba($color-primary-dark, .85));
|
||||
}
|
||||
|
||||
&--3 {
|
||||
background-image: linear-gradient(to right bottom,
|
||||
rgba($color-tertiary-light, .85),
|
||||
rgba($color-tertiary-dark, .85));
|
||||
}
|
||||
}
|
||||
|
||||
&__details {
|
||||
padding: 3rem;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
|
||||
li {
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
padding: 1rem;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid $color-grey-light-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// FRONT SIDE STYLING
|
||||
&__cta {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__price-box {
|
||||
text-align: center;
|
||||
color: $color-white;
|
||||
margin-bottom: 8rem;
|
||||
}
|
||||
|
||||
&__price-only {
|
||||
font-size: 1.4rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&__price-value {
|
||||
font-size: 6rem;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//@include respond(tab-port) {
|
||||
@media only screen and (max-width: 56.25em),
|
||||
only screen and (hover: none) {
|
||||
|
||||
height: auto;
|
||||
border-radius: 3px;
|
||||
background-color: $color-white;
|
||||
box-shadow: 0 1.5rem 4rem rgba($color-black, .15);
|
||||
|
||||
&__side {
|
||||
height: auto;
|
||||
position: relative;
|
||||
box-shadow: none;
|
||||
|
||||
&--back {
|
||||
transform: rotateY(0);
|
||||
clip-path: polygon(0 15%, 100% 0, 100% 100%, 0% 100%);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover &__side--front {
|
||||
transform: rotateY(0);
|
||||
}
|
||||
|
||||
|
||||
&__details {
|
||||
padding: 1rem 3rem;
|
||||
}
|
||||
|
||||
// FRONT SIDE STYLING
|
||||
&__cta {
|
||||
position: relative;
|
||||
top: 0%;
|
||||
left: 0;
|
||||
transform: translate(0);
|
||||
width: 100%;
|
||||
padding: 7rem 4rem 4rem 4rem;
|
||||
}
|
||||
|
||||
&__price-box {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
&__price-value {
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
.composition {
|
||||
position: relative;
|
||||
|
||||
&__photo {
|
||||
width: 55%;
|
||||
box-shadow: 0 1.5rem 4rem rgba($color-black, .4);
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
transition: all .2s;
|
||||
outline-offset: 2rem;
|
||||
|
||||
@include respond(tab-port) {
|
||||
float: left;
|
||||
position: relative;
|
||||
width: 33.33333333%;
|
||||
box-shadow: 0 1.5rem 3rem rgba($color-black, .2);
|
||||
}
|
||||
|
||||
&--p1 {
|
||||
left: 0;
|
||||
top: -2rem;
|
||||
|
||||
@include respond(tab-port) {
|
||||
top: 0;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
&--p2 {
|
||||
right: 0;
|
||||
top: 2rem;
|
||||
|
||||
@include respond(tab-port) {
|
||||
top: -1rem;
|
||||
transform: scale(1.3);
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
&--p3 {
|
||||
left: 20%;
|
||||
top: 10rem;
|
||||
|
||||
@include respond(tab-port) {
|
||||
top: 1rem;
|
||||
left: 0;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
outline: 1.5rem solid $color-primary;
|
||||
transform: scale(1.05) translateY(-.5rem);
|
||||
box-shadow: 0 2.5rem 4rem rgba($color-black, .5);
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover &__photo:not(:hover) {
|
||||
transform: scale(.95);
|
||||
}
|
||||
//composition:hover composition__photo:not(:hover) {
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
.feature-box {
|
||||
background-color: rgba($color-white, .8);
|
||||
font-size: 1.5rem;
|
||||
padding: 2.5rem;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1.5rem 4rem rgba($color-black, .15);
|
||||
transition: transform .3s;
|
||||
|
||||
@include respond(tab-port) {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
font-size: 6rem;
|
||||
margin-bottom: .5rem;
|
||||
display: inline-block;
|
||||
background-image: linear-gradient(to right, $color-primary-light, $color-primary-dark);
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
|
||||
@include respond(tab-port) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1.5rem) scale(1.03);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
.form {
|
||||
&__group:not(:last-child) {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
&__input {
|
||||
font-size: 1.5rem;
|
||||
font-family: inherit;
|
||||
color: inherit;
|
||||
padding: 1.5rem 2rem;
|
||||
border-radius: 2px;
|
||||
background-color: rgba($color-white, .5);
|
||||
border: none;
|
||||
border-bottom: 3px solid transparent;
|
||||
width: 90%;
|
||||
display: block;
|
||||
transition: all .3s;
|
||||
|
||||
@include respond(tab-port) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 1rem 2rem rgba($color-black, .1);
|
||||
border-bottom: 3px solid $color-primary;
|
||||
}
|
||||
|
||||
&:focus:invalid {
|
||||
border-bottom: 3px solid $color-secondary-dark;
|
||||
}
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: $color-grey-dark-2;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__label {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
margin-left: 2rem;
|
||||
margin-top: .7rem;
|
||||
display: block;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
&__input:placeholder-shown + &__label {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-4rem);
|
||||
}
|
||||
|
||||
|
||||
&__radio-group {
|
||||
width: 49%;
|
||||
display: inline-block;
|
||||
|
||||
@include respond(tab-port) {
|
||||
width: 100%;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__radio-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__radio-label {
|
||||
font-size: $default-font-size;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding-left: 4.5rem;
|
||||
}
|
||||
|
||||
&__radio-button {
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
border: 5px solid $color-primary;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -.4rem;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 1.3rem;
|
||||
width: 1.3rem;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: $color-primary;
|
||||
opacity: 0;
|
||||
transition: opacity .2s;
|
||||
}
|
||||
}
|
||||
|
||||
&__radio-input:checked ~ &__radio-label &__radio-button::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
.popup {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba($color-black, .8);
|
||||
z-index: 9999;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all .3s;
|
||||
|
||||
@supports (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) {
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba($color-black, .3);
|
||||
}
|
||||
|
||||
&__content {
|
||||
@include absCenter;
|
||||
|
||||
width: 75%;
|
||||
background-color: $color-white;
|
||||
box-shadow: 0 2rem 4rem rgba($color-black, .2);
|
||||
border-radius: 3px;
|
||||
display: table;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(.25);
|
||||
transition: all .5s .2s;
|
||||
}
|
||||
|
||||
&__left {
|
||||
width: 33.333333%;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
&__right {
|
||||
width: 66.6666667%;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding: 3rem 5rem;
|
||||
}
|
||||
|
||||
&__img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 4rem;
|
||||
|
||||
-moz-column-count: 2;
|
||||
-moz-column-gap: 4rem; //1em = 14px;
|
||||
-moz-column-rule: 1px solid $color-grey-light-2;
|
||||
|
||||
column-count: 2;
|
||||
column-gap: 4rem; //1em = 14px;
|
||||
column-rule: 1px solid $color-grey-light-2;
|
||||
|
||||
-moz-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
//Open states
|
||||
&:target {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&:target &__content {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
|
||||
&__close {
|
||||
&:link,
|
||||
&:visited {
|
||||
color: $color-grey-dark;
|
||||
position: absolute;
|
||||
top: 2.5rem;
|
||||
right: 2.5rem;
|
||||
font-size: 3rem;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
transition: all .2s;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
.story {
|
||||
width: 75%;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 3rem 6rem rgba($color-black, .1);
|
||||
background-color: rgba($color-white, .6);
|
||||
border-radius: 3px;
|
||||
padding: 6rem;
|
||||
padding-left: 9rem;
|
||||
font-size: $default-font-size;
|
||||
transform: skewX(-12deg);
|
||||
|
||||
@include respond(tab-port) {
|
||||
width: 100%;
|
||||
padding: 4rem;
|
||||
padding-left: 7rem;
|
||||
}
|
||||
|
||||
@include respond(phone) {
|
||||
transform: skewX(0);
|
||||
}
|
||||
|
||||
&__shape {
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
float: left;
|
||||
transform: translateX(-3rem) skewX(12deg);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
|
||||
@supports (clip-path: polygon(0 0)) or (-webkit-clip-path: polygon(0 0)) {
|
||||
-webkit-clip-path: circle(50% at 50% 50%);
|
||||
clip-path: circle(50% at 50% 50%);
|
||||
-webkit-shape-outside: circle(50% at 50% 50%);
|
||||
shape-outside: circle(50% at 50% 50%);
|
||||
border-radius: none;
|
||||
}
|
||||
|
||||
@include respond(phone) {
|
||||
transform: translateX(-3rem) skewX(0);
|
||||
}
|
||||
}
|
||||
|
||||
&__img {
|
||||
height: 100%;
|
||||
transform: translateX(-4rem) scale(1.4);
|
||||
backface-visibility: hidden;
|
||||
transition: all .5s;
|
||||
}
|
||||
|
||||
&__text {
|
||||
transform: skewX(12deg);
|
||||
|
||||
@include respond(phone) {
|
||||
transform: skewX(0);
|
||||
}
|
||||
}
|
||||
|
||||
&__caption {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 20%);
|
||||
color: $color-white;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.7rem;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
transition: all .5s;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover &__caption {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
&:hover &__img {
|
||||
transform: translateX(-4rem) scale(1);
|
||||
filter: blur(3px) brightness(80%);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
.footer {
|
||||
background-color: $color-grey-dark-3;
|
||||
padding: 10rem 0;
|
||||
font-size: 1.4rem;
|
||||
color: $color-grey-light-1;
|
||||
|
||||
@include respond(tab-port) {
|
||||
padding: 8rem 0;
|
||||
}
|
||||
|
||||
&__logo-box {
|
||||
text-align: center;
|
||||
margin-bottom: 8rem;
|
||||
|
||||
@include respond(tab-port) {
|
||||
margin-bottom: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
width: 15rem;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&__navigation {
|
||||
border-top: 1px solid $color-grey-dark;
|
||||
padding-top: 2rem;
|
||||
display: inline-block;
|
||||
|
||||
@include respond(tab-port) {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: inline-block;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
&:link,
|
||||
&:visited {
|
||||
color: $color-grey-light-1;
|
||||
background-color: $color-grey-dark-3;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
display: inline-block;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: $color-primary;
|
||||
box-shadow: 0 1rem 2rem rgba($color-black, .4);
|
||||
transform: rotate(5deg) scale(1.3);
|
||||
}
|
||||
}
|
||||
|
||||
&__copyright {
|
||||
border-top: 1px solid $color-grey-dark;
|
||||
padding-top: 2rem;
|
||||
width: 80%;
|
||||
float: right;
|
||||
|
||||
@include respond(tab-port) {
|
||||
width: 100%;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
.row {
|
||||
max-width: $grid-width;
|
||||
margin: 0 auto;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: $gutter-vertical;
|
||||
|
||||
@include respond(tab-port) {
|
||||
margin-bottom: $gutter-vertical-small;
|
||||
}
|
||||
}
|
||||
|
||||
@include respond(tab-port) {
|
||||
max-width: 50rem;
|
||||
padding: 0 3rem;
|
||||
}
|
||||
|
||||
@include clearfix;
|
||||
|
||||
[class^="col-"] {
|
||||
float: left;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: $gutter-horizontal;
|
||||
|
||||
@include respond(tab-port) {
|
||||
margin-right: 0;
|
||||
margin-bottom: $gutter-vertical-small;
|
||||
}
|
||||
}
|
||||
|
||||
@include respond(tab-port) {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.col-1-of-2 {
|
||||
width: calc((100% - #{$gutter-horizontal}) / 2);
|
||||
|
||||
}
|
||||
|
||||
.col-1-of-3 {
|
||||
width: calc((100% - 2 * #{$gutter-horizontal}) / 3);
|
||||
}
|
||||
|
||||
.col-2-of-3 {
|
||||
width: calc(2 * ((100% - 2 * #{$gutter-horizontal}) / 3) + #{$gutter-horizontal});
|
||||
}
|
||||
|
||||
.col-1-of-4 {
|
||||
width: calc((100% - 3 * #{$gutter-horizontal}) / 4);
|
||||
}
|
||||
|
||||
.col-2-of-4 {
|
||||
width: calc(2 * ((100% - 3 * #{$gutter-horizontal}) / 4) + #{$gutter-horizontal});
|
||||
}
|
||||
|
||||
.col-3-of-4 {
|
||||
width: calc(3 * ((100% - 3 * #{$gutter-horizontal}) / 4) + 2 * #{$gutter-horizontal});
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
.header {
|
||||
height: 85vh;
|
||||
background-image: linear-gradient(
|
||||
to right bottom,
|
||||
rgba($color-primary-light, 0.8),
|
||||
rgba($color-primary-dark, 0.8)),
|
||||
url(../img/hero-small.jpg);
|
||||
background-size: cover;
|
||||
background-position: top;
|
||||
position: relative;
|
||||
|
||||
|
||||
@supports (clip-path: polygon(0 0)) or (-webkit-clip-path: polygon(0 0)) {
|
||||
-webkit-clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
|
||||
clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
|
||||
height: 95vh;
|
||||
}
|
||||
|
||||
@media only screen and (min-resolution: 192dpi) and (min-width: 37.5em),
|
||||
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 37.5em),
|
||||
only screen and (min-width: 125em) {
|
||||
background-image: linear-gradient(
|
||||
to right bottom,
|
||||
rgba($color-primary-light, 0.8),
|
||||
rgba($color-primary-dark, 0.8)),
|
||||
url(../img/hero.jpg);
|
||||
}
|
||||
|
||||
@include respond(phone) {
|
||||
-webkit-clip-path: polygon(0 0, 100% 0, 100% 85vh, 0 100%);
|
||||
clip-path: polygon(0 0, 100% 0, 100% 85vh, 0 100%);
|
||||
}
|
||||
|
||||
&__logo-box {
|
||||
position: absolute;
|
||||
top: 4rem;
|
||||
left: 4rem;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
height: 3.5rem;
|
||||
}
|
||||
|
||||
&__text-box {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
.navigation {
|
||||
&__checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__button {
|
||||
background-color: $color-white;
|
||||
height: 7rem;
|
||||
width: 7rem;
|
||||
position: fixed;
|
||||
top: 6rem;
|
||||
right: 6rem;
|
||||
border-radius: 50%;
|
||||
z-index: 2000;
|
||||
box-shadow: 0 1rem 3rem rgba($color-black, .1);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
@include respond(tab-port) {
|
||||
top: 4rem;
|
||||
right: 4rem;
|
||||
}
|
||||
|
||||
@include respond(phone) {
|
||||
top: 3rem;
|
||||
right: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__background {
|
||||
height: 6rem;
|
||||
width: 6rem;
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
top: 6.5rem;
|
||||
right: 6.5rem;
|
||||
background-image: radial-gradient($color-primary-light, $color-primary-dark);
|
||||
z-index: 1000;
|
||||
transition: transform .8s cubic-bezier(0.86, 0, 0.07, 1);
|
||||
|
||||
@include respond(tab-port) {
|
||||
top: 4.5rem;
|
||||
right: 4.5rem;
|
||||
}
|
||||
|
||||
@include respond(phone) {
|
||||
top: 3.5rem;
|
||||
right: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__nav {
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1500;
|
||||
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
transition: all .8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
|
||||
&__list {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__item {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
&__link {
|
||||
&:link,
|
||||
&:visited {
|
||||
display: inline-block;
|
||||
font-size: 3rem;
|
||||
font-weight: 300;
|
||||
padding: 1rem 2rem;
|
||||
color: $color-white;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
background-image: linear-gradient(120deg, transparent 0%, transparent 50%, $color-white 50%);
|
||||
background-size: 220%;
|
||||
transition: all .4s;
|
||||
|
||||
span {
|
||||
margin-right: 1.5rem;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-position: 100%;
|
||||
color: $color-primary;
|
||||
transform: translateX(1rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//FUNCTIONALITY
|
||||
&__checkbox:checked ~ &__background {
|
||||
transform: scale(80);
|
||||
}
|
||||
|
||||
&__checkbox:checked ~ &__nav {
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
//ICON
|
||||
&__icon {
|
||||
position: relative;
|
||||
margin-top: 3.5rem;
|
||||
|
||||
&,
|
||||
&::before,
|
||||
&::after {
|
||||
width: 3rem;
|
||||
height: 2px;
|
||||
background-color: $color-grey-dark-3;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
&::before { top: -.8rem; }
|
||||
&::after { top: .8rem; }
|
||||
}
|
||||
|
||||
&__button:hover &__icon::before {
|
||||
top: -1rem;
|
||||
}
|
||||
|
||||
&__button:hover &__icon::after {
|
||||
top: 1rem;
|
||||
}
|
||||
|
||||
&__checkbox:checked + &__button &__icon {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&__checkbox:checked + &__button &__icon::before {
|
||||
top: 0;
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
|
||||
&__checkbox:checked + &__button &__icon::after {
|
||||
top: 0;
|
||||
transform: rotate(-135deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
@import "abstracts/functions";
|
||||
@import "abstracts/mixins";
|
||||
@import "abstracts/variables";
|
||||
|
||||
@import "base/animations";
|
||||
@import "base/base";
|
||||
@import "base/typography";
|
||||
@import "base/utilities";
|
||||
|
||||
@import "components/bg-video";
|
||||
@import "components/button";
|
||||
@import "components/card";
|
||||
@import "components/composition";
|
||||
@import "components/feature-box";
|
||||
@import "components/form";
|
||||
@import "components/popup";
|
||||
@import "components/story";
|
||||
|
||||
@import "layout/footer";
|
||||
@import "layout/grid";
|
||||
@import "layout/header";
|
||||
@import "layout/navigation";
|
||||
|
||||
@import "pages/home";
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
0 info it worked if it ends with ok
|
||||
1 verbose cli [ '/usr/local/bin/node',
|
||||
1 verbose cli '/usr/local/bin/npm',
|
||||
1 verbose cli 'run',
|
||||
1 verbose cli 'compile:sass' ]
|
||||
2 info using npm@3.10.10
|
||||
3 info using node@v6.10.1
|
||||
4 verbose run-script [ 'precompile:sass', 'compile:sass', 'postcompile:sass' ]
|
||||
5 info lifecycle natours@1.0.0~precompile:sass: natours@1.0.0
|
||||
6 silly lifecycle natours@1.0.0~precompile:sass: no script for precompile:sass, continuing
|
||||
7 info lifecycle natours@1.0.0~compile:sass: natours@1.0.0
|
||||
8 verbose lifecycle natours@1.0.0~compile:sass: unsafe-perm in lifecycle true
|
||||
9 verbose lifecycle natours@1.0.0~compile:sass: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/jonas.io/Desktop/1-Natours/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
|
||||
10 verbose lifecycle natours@1.0.0~compile:sass: CWD: /Users/jonas.io/Desktop/1-Natours
|
||||
11 silly lifecycle natours@1.0.0~compile:sass: Args: [ '-c', 'node-sass sass/main.scss css/style.css -w' ]
|
||||
12 silly lifecycle natours@1.0.0~compile:sass: Returned: code: 1 signal: null
|
||||
13 info lifecycle natours@1.0.0~compile:sass: Failed to exec compile:sass script
|
||||
14 verbose stack Error: natours@1.0.0 compile:sass: `node-sass sass/main.scss css/style.css -w`
|
||||
14 verbose stack Exit status 1
|
||||
14 verbose stack at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:255:16)
|
||||
14 verbose stack at emitTwo (events.js:106:13)
|
||||
14 verbose stack at EventEmitter.emit (events.js:191:7)
|
||||
14 verbose stack at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
|
||||
14 verbose stack at emitTwo (events.js:106:13)
|
||||
14 verbose stack at ChildProcess.emit (events.js:191:7)
|
||||
14 verbose stack at maybeClose (internal/child_process.js:886:16)
|
||||
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
|
||||
15 verbose pkgid natours@1.0.0
|
||||
16 verbose cwd /Users/jonas.io/Desktop/1-Natours/sass
|
||||
17 error Darwin 16.7.0
|
||||
18 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "compile:sass"
|
||||
19 error node v6.10.1
|
||||
20 error npm v3.10.10
|
||||
21 error code ELIFECYCLE
|
||||
22 error natours@1.0.0 compile:sass: `node-sass sass/main.scss css/style.css -w`
|
||||
22 error Exit status 1
|
||||
23 error Failed at the natours@1.0.0 compile:sass script 'node-sass sass/main.scss css/style.css -w'.
|
||||
23 error Make sure you have the latest version of node.js and npm installed.
|
||||
23 error If you do, this is most likely a problem with the natours package,
|
||||
23 error not with npm itself.
|
||||
23 error Tell the author that this fails on your system:
|
||||
23 error node-sass sass/main.scss css/style.css -w
|
||||
23 error You can get information on how to open an issue for this project with:
|
||||
23 error npm bugs natours
|
||||
23 error Or if that isn't available, you can get their info via:
|
||||
23 error npm owner ls natours
|
||||
23 error There is likely additional logging output above.
|
||||
24 verbose exit [ 1, true ]
|
||||
@@ -0,0 +1,98 @@
|
||||
.section-about {
|
||||
background-color: $color-grey-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);
|
||||
margin-top: -10rem;
|
||||
|
||||
& > * {
|
||||
transform: skewY(7deg);
|
||||
}
|
||||
|
||||
@include respond(tab-port) {
|
||||
padding: 10rem 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.section-tours {
|
||||
background-color: $color-grey-light-1;
|
||||
padding: 25rem 0 15rem 0;
|
||||
margin-top: -10rem;
|
||||
|
||||
@include respond(tab-port) {
|
||||
padding: 20rem 0 10rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.section-stories {
|
||||
position: relative;
|
||||
padding: 15rem 0;
|
||||
|
||||
@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, .9) 0%,
|
||||
rgba($color-white, .9) 50%,
|
||||
transparent 50%) ,
|
||||
url(../img/nat-10.jpg);
|
||||
background-size: 100%;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1.5rem 4rem rgba($color-black, .2);
|
||||
|
||||
@include respond(tab-land) {
|
||||
background-image: linear-gradient(105deg,
|
||||
rgba($color-white, .9) 0%,
|
||||
rgba($color-white, .9) 65%,
|
||||
transparent 65%) ,
|
||||
url(../img/nat-10.jpg);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@include respond(tab-port) {
|
||||
background-image: linear-gradient(to right,
|
||||
rgba($color-white, .9) 0%,
|
||||
rgba($color-white, .9) 100%),
|
||||
url(../img/nat-10.jpg);
|
||||
}
|
||||
|
||||
&__form {
|
||||
width: 50%;
|
||||
padding: 6rem;
|
||||
|
||||
@include respond(tab-land) {
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
@include respond(tab-port) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user