Compare commits
10
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 dqnid
|
3f85b26c2f | ||
|
dqnid
|
25aaf4ff94 | ||
|
dqnid
|
38dc517bbc | ||
|
dqnid
|
4171a21caa | ||
|
dqnid
|
a0387b8ca6 | ||
|
dqnid
|
a0e1f31987 | ||
|
dqnid
|
2b1e91befa | ||
|
dqnid
|
778a41bbf4 | ||
|
dqnid
|
a23934d6d0 | ||
|
dqnid
|
89845b8e1c |
No files matched your search
@@ -1 +1,2 @@
|
||||
/Natours/starter/node_modules
|
||||
node_modules
|
||||
@@ -1,8 +1,8 @@
|
||||
.story {
|
||||
width: 75%;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 3rem 6rem rgba($color-black, .1);
|
||||
background-color: rgba($color-white, .6);
|
||||
box-shadow: 0 3rem 6rem rgba($color-black, 0.1);
|
||||
background-color: rgba($color-white, 0.6);
|
||||
border-radius: 3px;
|
||||
padding: 6rem;
|
||||
padding-left: 9rem;
|
||||
@@ -13,19 +13,27 @@
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
float: left;
|
||||
transform: translateX(-3rem) skewX(12deg);
|
||||
position: relative;
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
@supports (clip-path: polygon(0 0)) or (-webkit-clip-path: polygon(0 0)) {
|
||||
-webkit-shape-outside: circle(50% at 50% 50%);
|
||||
shape-outside: circle(50% at 50% 50%);
|
||||
-webkit-clip-path: circle(50% at 50% 50%);
|
||||
clip-path: circle(50% at 50% 50%);
|
||||
transform: translateX(-3rem) skewX(12deg);
|
||||
position: relative;
|
||||
border-radius: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__img {
|
||||
height: 100%;
|
||||
transform: translateX(-4rem) scale(1.4);
|
||||
backface-visibility: hidden;
|
||||
transition: all .5s;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
&__text {
|
||||
@@ -42,7 +50,7 @@
|
||||
font-size: 1.7rem;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
transition: all .5s;
|
||||
transition: all 0.5s;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,15 +1,20 @@
|
||||
.header {
|
||||
height: 95vh;
|
||||
height: 85vh;
|
||||
background-image: linear-gradient(
|
||||
to right bottom,
|
||||
rgba($color-primary-light, 0.8),
|
||||
rgba($color-primary-dark, 0.8)),
|
||||
rgba($color-primary-dark, 0.8)
|
||||
),
|
||||
url(../img/hero.jpg);
|
||||
background-size: cover;
|
||||
background-position: top;
|
||||
position: relative;
|
||||
|
||||
@supports (clip-path: polygon(0 0)) or (-webkit-clip-path: polygon(0 0)) {
|
||||
height: 95vh;
|
||||
-webkit-clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
|
||||
clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
|
||||
}
|
||||
|
||||
&__logo-box {
|
||||
position: absolute;
|
||||
|
||||
@@ -0,0 +1,990 @@
|
||||
@charset "UTF-8";
|
||||
/*
|
||||
* 0 - 600px : Phone
|
||||
* 600 - 900px : Tablet portrait
|
||||
* 900 - 1200px : Tablet landscape
|
||||
* 1200 - 1800px : Normal desktop
|
||||
* 1800px + : Big desktop
|
||||
|
||||
* $breakpoint argument choices
|
||||
- phone
|
||||
- tab-port
|
||||
- tab-land
|
||||
- big-desktop
|
||||
|
||||
1em = 16px
|
||||
*/
|
||||
*,
|
||||
::after,
|
||||
::before {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: inherit; }
|
||||
|
||||
html {
|
||||
font-size: 62.5%; }
|
||||
@media only screen and (min-width: 112.5em) {
|
||||
html {
|
||||
font-size: 75%; } }
|
||||
@media only screen and (max-width: 75em) {
|
||||
html {
|
||||
font-size: 56.25%; } }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
html {
|
||||
font-size: 50%; } }
|
||||
|
||||
body {
|
||||
padding: 3rem;
|
||||
box-sizing: border-box; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
body {
|
||||
padding: 0; } }
|
||||
|
||||
::selection {
|
||||
background-color: #55c57a;
|
||||
color: #fff; }
|
||||
|
||||
@keyframes slideLeft {
|
||||
0% {
|
||||
transform: translateX(-16rem);
|
||||
opacity: 0; }
|
||||
80% {
|
||||
transform: translateX(1.5rem); }
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1; } }
|
||||
|
||||
@keyframes slideRight {
|
||||
0% {
|
||||
transform: translateX(16rem);
|
||||
opacity: 0; }
|
||||
80% {
|
||||
transform: translateX(-1.5rem); }
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1; } }
|
||||
|
||||
@keyframes slideBottom {
|
||||
0% {
|
||||
transform: translateY(5rem);
|
||||
opacity: 0; }
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1; } }
|
||||
|
||||
body {
|
||||
font-family: "Lato", Verdana, Geneva, Tahoma, sans-serif;
|
||||
font-weight: 400;
|
||||
/* font-size: 16px; */
|
||||
line-height: 1.7;
|
||||
color: #777; }
|
||||
|
||||
.heading--primary {
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 6rem; }
|
||||
.heading--primary-main {
|
||||
display: block;
|
||||
font-size: 6rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 3.5rem;
|
||||
animation-name: slideLeft;
|
||||
animation-duration: 1s;
|
||||
animation-timing-function: ease-in; }
|
||||
@media only screen and (max-width: 37.5em) {
|
||||
.heading--primary-main {
|
||||
letter-spacing: 1rem;
|
||||
font-size: 5rem; } }
|
||||
.heading--primary-sub {
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1.75rem;
|
||||
animation-name: slideRight;
|
||||
animation-duration: 1s;
|
||||
animation-timing-function: ease-in; }
|
||||
@media only screen and (max-width: 37.5em) {
|
||||
.heading--primary-sub {
|
||||
letter-spacing: .5rem; } }
|
||||
|
||||
.heading--secondary {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
display: inline-block;
|
||||
background-image: linear-gradient(to right, #7ed56f, #28b485);
|
||||
background-clip: 0;
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
transition: all 0.2s; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.heading--secondary {
|
||||
font-size: 3rem; } }
|
||||
@media only screen and (max-width: 37.5em) {
|
||||
.heading--secondary {
|
||||
font-size: 2.5rem; } }
|
||||
.heading--secondary:hover {
|
||||
transform: skewY(2deg) skewX(15deg) scale(1.1);
|
||||
text-shadow: 0.5rem 1rem 2rem rgba(0, 0, 0, 0.2); }
|
||||
|
||||
.heading--terciary {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
text-transform: capitalize; }
|
||||
|
||||
.paragraph {
|
||||
font-size: 1.6rem; }
|
||||
.paragraph:not(:last-child) {
|
||||
margin-bottom: 3rem; }
|
||||
|
||||
.u-center-text {
|
||||
text-align: center !important; }
|
||||
|
||||
.u-margin-bottom-small {
|
||||
margin-bottom: 2rem !important; }
|
||||
|
||||
.u-margin-bottom-medium {
|
||||
margin-bottom: 4rem !important; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.u-margin-bottom-medium {
|
||||
margin-bottom: 3rem !important; } }
|
||||
|
||||
.u-margin-bottom-big {
|
||||
margin-bottom: 8rem !important; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.u-margin-bottom-big {
|
||||
margin-bottom: 5rem !important; } }
|
||||
|
||||
.u-margin-top-big {
|
||||
margin-top: 8rem !important; }
|
||||
|
||||
.u-margin-top-huge {
|
||||
margin-top: 10rem !important; }
|
||||
|
||||
.btn, .btn:link, .btn:visited {
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
padding: 1.5rem 4rem;
|
||||
display: inline-block;
|
||||
border-radius: 10rem;
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
font-size: 1.6rem;
|
||||
border: none;
|
||||
cursor: pointer; }
|
||||
|
||||
.btn--animated {
|
||||
animation: slideBottom 0.7s ease-out 0.75s;
|
||||
animation-fill-mode: backwards; }
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-0.4rem);
|
||||
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); }
|
||||
.btn:hover::after {
|
||||
transform: scaleX(1.4) scaleY(1.6);
|
||||
opacity: 0; }
|
||||
|
||||
.btn:active, .btn:focus {
|
||||
transform: translateY(-0.1rem);
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); }
|
||||
|
||||
.btn--white {
|
||||
background-color: #fff;
|
||||
color: #777; }
|
||||
.btn--white::after {
|
||||
background-color: #fff; }
|
||||
|
||||
.btn--green {
|
||||
background-color: #55c57a;
|
||||
color: #fff; }
|
||||
.btn--green::after {
|
||||
background-color: #55c57a; }
|
||||
|
||||
.btn::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 10rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
transition: all 0.4s; }
|
||||
|
||||
.btn-text:link, .btn-text:visited {
|
||||
font-size: 1.6rem;
|
||||
color: #55c57a;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #55c57a;
|
||||
padding: 3px;
|
||||
transition: all 0.2s; }
|
||||
|
||||
.btn-text:hover {
|
||||
background-color: #55c57a;
|
||||
color: #fff;
|
||||
box-shadow: 0 1rem 2reem rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-2px); }
|
||||
|
||||
.btn-text:active {
|
||||
box-shadow: 0 0.5rem 1reem rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(0px); }
|
||||
|
||||
.composition {
|
||||
position: relative; }
|
||||
.composition__photo {
|
||||
width: 55%;
|
||||
box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.4);
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
transition: all 0.2s;
|
||||
outline-offset: 2rem; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.composition__photo {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 33.33333333%;
|
||||
box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.2); } }
|
||||
.composition__photo--p1 {
|
||||
left: 0;
|
||||
top: -2rem; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.composition__photo--p1 {
|
||||
top: 0;
|
||||
transform: scale(1.2); } }
|
||||
.composition__photo--p2 {
|
||||
right: 0;
|
||||
top: 2rem; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.composition__photo--p2 {
|
||||
top: -1rem;
|
||||
transform: scale(1.3);
|
||||
z-index: 100; } }
|
||||
.composition__photo--p3 {
|
||||
left: 20%;
|
||||
top: 10rem; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.composition__photo--p3 {
|
||||
top: 1rem;
|
||||
left: 0;
|
||||
transform: scale(1.2); } }
|
||||
.composition__photo:hover {
|
||||
outline: 1.5rem solid #55c57a;
|
||||
transform: scale(1.05) translateY(-0.5rem);
|
||||
box-shadow: 0 2.5rem 4rem rgba(0, 0, 0, 0.5);
|
||||
z-index: 20; }
|
||||
.composition:hover .composition__photo:not(:hover) {
|
||||
transform: scale(0.9); }
|
||||
|
||||
.feature-box {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 1.5rem;
|
||||
padding: 2.5rem;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
|
||||
transition: transform 0.3s; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.feature-box {
|
||||
padding: 2rem; } }
|
||||
.feature-box__icon {
|
||||
font-size: 6rem;
|
||||
margin-bottom: 0.5rem;
|
||||
display: inline-block;
|
||||
background-image: linear-gradient(to right, #7ed56f, #28b485);
|
||||
-webkit-background-clip: text;
|
||||
color: transparent; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.feature-box__icon {
|
||||
margin-bottom: 0; } }
|
||||
.feature-box:hover {
|
||||
transform: translateY(-1.5rem) scale(1.03); }
|
||||
|
||||
.card {
|
||||
perspective: 150rem;
|
||||
-moz-perspective: 150rem;
|
||||
position: relative;
|
||||
height: 52rem; }
|
||||
.card__side {
|
||||
font-size: 2rem;
|
||||
height: 52rem;
|
||||
transition: all 0.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(0, 0, 0, 0.15); }
|
||||
.card__side--front {
|
||||
background-color: #fff; }
|
||||
.card__side--back {
|
||||
transform: rotateY(180deg); }
|
||||
.card__side--back-1 {
|
||||
background-image: linear-gradient(to right bottom, #ffb900, #ff7730); }
|
||||
.card__side--back-2 {
|
||||
background-image: linear-gradient(to right bottom, #7ed56f, #28b485); }
|
||||
.card__side--back-3 {
|
||||
background-image: linear-gradient(to right bottom, #2998ff, #5643fa); }
|
||||
.card:hover .card__side--front {
|
||||
transform: rotateY(-180deg); }
|
||||
.card:hover .card__side--back {
|
||||
transform: rotateY(0); }
|
||||
.card__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; }
|
||||
.card__picture--1 {
|
||||
background-image: linear-gradient(to right bottom, #ffb900, #ff7730), url(../img/nat-5.jpg); }
|
||||
.card__picture--2 {
|
||||
background-image: linear-gradient(to right bottom, #7ed56f, #28b485), url(../img/nat-6.jpg); }
|
||||
.card__picture--3 {
|
||||
background-image: linear-gradient(to right bottom, #2998ff, #5643fa), url(../img/nat-7.jpg); }
|
||||
.card__heading {
|
||||
font-size: 2.8rem;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 12rem;
|
||||
right: 2rem;
|
||||
text-align: right;
|
||||
width: 75%; }
|
||||
.card__heading--span {
|
||||
padding: 1rem 1.5rem;
|
||||
-webkit-box-decoration-break: clone;
|
||||
box-decoration-break: clone; }
|
||||
.card__heading--span--1 {
|
||||
background-image: linear-gradient(to right bottom, rgba(255, 185, 0, 0.85), #ff7730); }
|
||||
.card__heading--span--2 {
|
||||
background-image: linear-gradient(to right bottom, rgba(126, 213, 111, 0.85), #28b485); }
|
||||
.card__heading--span--3 {
|
||||
background-image: linear-gradient(to right bottom, rgba(41, 152, 255, 0.85), #5643fa); }
|
||||
.card__details {
|
||||
padding: 3rem; }
|
||||
.card__details ul {
|
||||
list-style: none;
|
||||
width: 80%;
|
||||
margin: 0 auto; }
|
||||
.card__details ul li {
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
padding: 1rem; }
|
||||
.card__details ul li:not(:last-child) {
|
||||
border-bottom: 1px solid #eee; }
|
||||
.card__cta {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 90%;
|
||||
text-align: center; }
|
||||
.card__price-box {
|
||||
color: #fff;
|
||||
margin-bottom: 8rem; }
|
||||
.card__price-only {
|
||||
font-size: 1.4rem;
|
||||
text-transform: uppercase; }
|
||||
.card__price-value {
|
||||
font-size: 6rem;
|
||||
font-weight: 100; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.card {
|
||||
height: auto;
|
||||
border-radius: 3px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15); }
|
||||
.card__side {
|
||||
height: auto;
|
||||
position: relative;
|
||||
box-shadow: none; }
|
||||
.card__side--front {
|
||||
background-color: #fff; }
|
||||
.card__side--back {
|
||||
transform: rotateY(0);
|
||||
clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0 100%); }
|
||||
.card__side--back-1 {
|
||||
background-image: linear-gradient(to right bottom, #ffb900, #ff7730); }
|
||||
.card__side--back-2 {
|
||||
background-image: linear-gradient(to right bottom, #7ed56f, #28b485); }
|
||||
.card__side--back-3 {
|
||||
background-image: linear-gradient(to right bottom, #2998ff, #5643fa); }
|
||||
.card:hover .card__side--front {
|
||||
transform: rotateY(0); }
|
||||
.card__details {
|
||||
padding: 1rem 3rem; }
|
||||
.card__cta {
|
||||
position: relative;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
transform: translate(0);
|
||||
width: 100%;
|
||||
padding: 7rem 4rem 4rem; }
|
||||
.card__price-box {
|
||||
color: #fff;
|
||||
margin-bottom: 3rem; }
|
||||
.card__price-value {
|
||||
font-size: 4rem; } }
|
||||
|
||||
.story {
|
||||
width: 75%;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
border-radius: 3px;
|
||||
padding: 6rem;
|
||||
padding-left: 9rem;
|
||||
font-size: 1.6rem;
|
||||
transform: skewX(-12deg); }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.story {
|
||||
width: 100%;
|
||||
padding: 4rem;
|
||||
padding-left: 7rem; } }
|
||||
.story > * {
|
||||
transform: skewX(12deg); }
|
||||
@media only screen and (max-width: 37.5em) {
|
||||
.story {
|
||||
transform: skewX(0); }
|
||||
.story > * {
|
||||
transform: skewX(0); } }
|
||||
.story__shape {
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
float: left;
|
||||
-webkit-shape-outside: circle(50% at 50% 50%);
|
||||
shape-outside: circle(50% at 50% 50%);
|
||||
-webkit-clip-path: circle(50% at 50% 50%);
|
||||
clip-path: circle(50% at 50% 50%);
|
||||
transform: translateX(-3rem) skewX(12deg);
|
||||
position: relative; }
|
||||
@media only screen and (max-width: 37.5em) {
|
||||
.story__shape {
|
||||
transform: translateX(-3rem) skewX(0); } }
|
||||
.story__img {
|
||||
height: 100%;
|
||||
transform: translateX(-4rem) scale(1.4);
|
||||
backface-visibility: hidden;
|
||||
transition: all 0.5s; }
|
||||
.story__text {
|
||||
transform: skewX(12deg); }
|
||||
@media only screen and (max-width: 37.5em) {
|
||||
.story__text {
|
||||
transform: skewX(0); } }
|
||||
.story__caption {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 20%);
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.7rem;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
transition: all 0.5s;
|
||||
backface-visibility: hidden; }
|
||||
.story:hover .story__caption {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%); }
|
||||
.story:hover .story__img {
|
||||
transform: translateX(-4rem) scale(1);
|
||||
filter: blur(3px) brightness(80%); }
|
||||
|
||||
.bg-video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
opacity: .15;
|
||||
overflow: hidden; }
|
||||
.bg-video__content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover; }
|
||||
|
||||
.form__group:not(:last-child) {
|
||||
margin-bottom: 2rem; }
|
||||
|
||||
.form__input {
|
||||
font-size: 1.5rem;
|
||||
font-family: inherit;
|
||||
color: inherit;
|
||||
padding: 1.5rem 2rem;
|
||||
border-radius: 2px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border: none;
|
||||
border-bottom: 3px solid transparent;
|
||||
width: 90%;
|
||||
display: block;
|
||||
transition: all 0.3s; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.form__input {
|
||||
width: 100%; } }
|
||||
.form__input:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
|
||||
border-bottom: 3px solid #55c57a; }
|
||||
.form__input:focus:invalid {
|
||||
border-bottom: 3px solid #ff7730; }
|
||||
.form__input::placeholder {
|
||||
color: #999; }
|
||||
|
||||
.form__label {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
margin-left: 2rem;
|
||||
margin-top: 0.7rem;
|
||||
display: block;
|
||||
transition: all 0.3s; }
|
||||
|
||||
.form__input:placeholder-shown + .form__label {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-4rem); }
|
||||
|
||||
.form__radio-group {
|
||||
width: 49%;
|
||||
display: inline-block; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.form__radio-group {
|
||||
width: 100%;
|
||||
margin-bottom: 2rem; } }
|
||||
|
||||
.form__radio-input {
|
||||
display: none; }
|
||||
|
||||
.form__radio-label {
|
||||
font-size: 1.6rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding-left: 4.5rem; }
|
||||
|
||||
.form__radio-button {
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
border: 5px solid #55c57a;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -0.4rem; }
|
||||
.form__radio-button::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: #55c57a;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s; }
|
||||
|
||||
.form__radio-input:checked ~ .form__radio-label .form__radio-button::after {
|
||||
opacity: 1; }
|
||||
|
||||
.popup {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.82);
|
||||
z-index: 4000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.4s; }
|
||||
@supports (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) {
|
||||
.popup {
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(0, 0, 0, 0.3); } }
|
||||
.popup__content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: table;
|
||||
width: 75%;
|
||||
box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.2);
|
||||
background-color: #fff;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
transition: all 0.4s 0.2s; }
|
||||
.popup__left {
|
||||
width: 33.3333333%;
|
||||
display: table-cell;
|
||||
vertical-align: middle; }
|
||||
.popup__right {
|
||||
width: 66.6666667%;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding: 3rem 5rem; }
|
||||
.popup__img {
|
||||
display: block;
|
||||
width: 100%; }
|
||||
.popup__text {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 4rem;
|
||||
-moz-column-count: 2;
|
||||
-moz-column-gap: 4rem;
|
||||
-moz-column-rule: 1px solid #999;
|
||||
column-count: 2;
|
||||
column-gap: 4rem;
|
||||
column-rule: 1px solid #999;
|
||||
-moz-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto; }
|
||||
.popup:target {
|
||||
opacity: 1;
|
||||
visibility: visible; }
|
||||
.popup:target .popup__content {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1); }
|
||||
.popup__close:link, .popup__close:visited {
|
||||
color: #777;
|
||||
position: absolute;
|
||||
top: 2.5rem;
|
||||
right: 2.5rem;
|
||||
font-size: 3rem;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
transition: all 0.2s; }
|
||||
.popup__close:hover {
|
||||
color: #55c57a; }
|
||||
|
||||
.header {
|
||||
height: 95vh;
|
||||
background-image: linear-gradient(to right bottom, rgba(126, 213, 111, 0.801), rgba(40, 180, 133, 0.808)), url("../img/hero-small.jpg");
|
||||
background-size: cover;
|
||||
background-position: top;
|
||||
clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
|
||||
position: relative;
|
||||
/*
|
||||
.logo:hover{
|
||||
animation: moveInRight 1s ease-out;
|
||||
}
|
||||
*/ }
|
||||
@media (min-resolution: 192dpi) and (min-width: 600px), (-webkit-min-device-pixel-ratio: 192dpi) and (min-width: 600px), (min-width: 2000px) {
|
||||
.header {
|
||||
background-image: linear-gradient(to right bottom, rgba(126, 213, 111, 0.801), rgba(40, 180, 133, 0.808)), url("../img/hero.jpg"); } }
|
||||
@media (min-width: 2000px) {
|
||||
.header {
|
||||
background-image: linear-gradient(to right bottom, rgba(126, 213, 111, 0.801), rgba(40, 180, 133, 0.808)), url("../img/hero.jpg"); } }
|
||||
@media only screen and (max-width: 37.5em) {
|
||||
.header {
|
||||
clip-path: polygon(0% 0%, 100% 0%, 100% 85vh, 0% 100%); } }
|
||||
.header__logo-box {
|
||||
position: absolute;
|
||||
top: 4rem;
|
||||
left: 4rem; }
|
||||
.header__logo {
|
||||
height: 3.5rem; }
|
||||
.header__text-box {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
/*
|
||||
* Limpiar animaciones para evitar temblores
|
||||
* No se sabe realmente por qué funciona o de dónde viene el error, pero lo hace
|
||||
*/
|
||||
backface-visibility: hidden;
|
||||
text-align: center; }
|
||||
|
||||
.row {
|
||||
max-width: 114rem;
|
||||
margin: 0 auto; }
|
||||
.row:not(:last-child) {
|
||||
margin-bottom: 8rem; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.row:not(:last-child) {
|
||||
margin-bottom: 6rem; } }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.row {
|
||||
max-width: 50rem;
|
||||
padding: 0 3rem; } }
|
||||
.row::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.row [class^='col-'] {
|
||||
float: left; }
|
||||
.row [class^='col-']:not(:last-child) {
|
||||
margin-right: 6rem; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.row [class^='col-']:not(:last-child) {
|
||||
margin-right: 0;
|
||||
margin-bottom: 6rem; } }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.row [class^='col-'] {
|
||||
width: 100% !important; } }
|
||||
.row .col-1-of-2 {
|
||||
width: calc((100% - 6rem) / 2); }
|
||||
.row .col-1-of-3 {
|
||||
width: calc((100% - 2 * 6rem) / 3); }
|
||||
.row .col-2-of-3 {
|
||||
width: calc(((100% - 2 * 6rem) / 3) * 2 + 6rem); }
|
||||
.row .col-1-of-4 {
|
||||
width: calc((100% - 3 * 6rem) / 4); }
|
||||
.row .col-2-of-4 {
|
||||
width: calc(2 * ((100% - 3 * 6rem) / 4) + 6rem); }
|
||||
.row .col-3-of-4 {
|
||||
width: calc(3 * ((100% - 3 * 6rem) / 4) + 2 * 6rem); }
|
||||
|
||||
.footer {
|
||||
background-color: #333;
|
||||
padding: 10rem 0;
|
||||
font-size: 1.4rem;
|
||||
color: #f7f7f7; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.footer {
|
||||
padding: 8rem 0; } }
|
||||
.footer__logo-box {
|
||||
text-align: center;
|
||||
margin-bottom: 8rem; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.footer__logo-box {
|
||||
margin-bottom: 6rem; } }
|
||||
.footer__logo {
|
||||
width: 15rem;
|
||||
height: auto; }
|
||||
.footer__navigation {
|
||||
border-top: 1px solid #777;
|
||||
padding-top: 2rem;
|
||||
display: inline-block; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.footer__navigation {
|
||||
width: 100%;
|
||||
text-align: center; } }
|
||||
.footer__list {
|
||||
list-style: none; }
|
||||
.footer__item {
|
||||
display: inline-block; }
|
||||
.footer__item:not(:last-child) {
|
||||
margin-right: 1.5rem; }
|
||||
.footer__link:link, .footer__link:visited {
|
||||
color: #f7f7f7;
|
||||
background-color: #333;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
display: inline-block;
|
||||
transition: all 0.2s; }
|
||||
.footer__link:hover, .footer__link:active {
|
||||
color: #55c57a;
|
||||
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4);
|
||||
transform: rotate(5deg) scale(1.3); }
|
||||
.footer__copyright {
|
||||
border-top: 1px solid #777;
|
||||
padding-top: 2rem;
|
||||
display: inline-block;
|
||||
width: 80%;
|
||||
float: right; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.footer__copyright {
|
||||
width: 100%;
|
||||
float: none; } }
|
||||
|
||||
.navigation__checkbox {
|
||||
display: none; }
|
||||
|
||||
.navigation__button {
|
||||
background-color: #fff;
|
||||
height: 7rem;
|
||||
width: 7rem;
|
||||
position: fixed;
|
||||
top: 6rem;
|
||||
right: 6rem;
|
||||
border-radius: 50%;
|
||||
z-index: 2000;
|
||||
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
cursor: pointer; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.navigation__button {
|
||||
top: 4rem;
|
||||
right: 4rem; } }
|
||||
@media only screen and (max-width: 37.5em) {
|
||||
.navigation__button {
|
||||
top: 2.5rem;
|
||||
right: 2.5rem; } }
|
||||
|
||||
.navigation__background {
|
||||
height: 6rem;
|
||||
width: 6rem;
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
top: 6.5rem;
|
||||
right: 6.5rem;
|
||||
background-image: radial-gradient(#7ed56f, #28b485);
|
||||
z-index: 1000;
|
||||
transition: transform 0.8s cubic-bezier(0.83, 0, 0.17, 1); }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.navigation__background {
|
||||
top: 4.5rem;
|
||||
right: 4.5rem; } }
|
||||
@media only screen and (max-width: 37.5em) {
|
||||
.navigation__background {
|
||||
top: 3rem;
|
||||
right: 3rem; } }
|
||||
|
||||
.navigation__nav {
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1500;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
transition: all 0.8s cubic-bezier(0.68, -0.6, 0.32, 1.6); }
|
||||
|
||||
.navigation__list {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
list-style: none;
|
||||
text-align: center; }
|
||||
|
||||
.navigation__item {
|
||||
margin: 1rem; }
|
||||
|
||||
.navigation__link:link, .navigation__link:visited {
|
||||
display: inline-block;
|
||||
font-size: 3rem;
|
||||
font-weight: 300;
|
||||
padding: 1rem 2rem;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #fff 50%);
|
||||
background-size: 250%;
|
||||
transition: all 0.4s; }
|
||||
.navigation__link:link span, .navigation__link:visited span {
|
||||
margin-right: 1.5rem;
|
||||
display: inline-block; }
|
||||
|
||||
.navigation__link:hover, .navigation__link:active {
|
||||
color: #28b485;
|
||||
background-position: 100%;
|
||||
transform: translateX(1rem); }
|
||||
|
||||
.navigation__checkbox:checked ~ .navigation__background {
|
||||
transform: scale(80); }
|
||||
|
||||
.navigation__checkbox:checked ~ .navigation__nav {
|
||||
opacity: 1;
|
||||
width: 100%; }
|
||||
|
||||
.navigation__icon {
|
||||
position: relative;
|
||||
margin-top: 3.4rem; }
|
||||
.navigation__icon, .navigation__icon::before, .navigation__icon::after {
|
||||
width: 3rem;
|
||||
height: 2px;
|
||||
background-color: #333;
|
||||
display: inline-block; }
|
||||
.navigation__icon::before, .navigation__icon::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
transition: all 0.2s; }
|
||||
.navigation__icon::before {
|
||||
top: -0.8rem; }
|
||||
.navigation__icon::after {
|
||||
top: 0.8rem; }
|
||||
|
||||
.navigation__button:hover .navigation__icon::before {
|
||||
top: -1rem; }
|
||||
|
||||
.navigation__button:hover .navigation__icon::after {
|
||||
top: 1rem; }
|
||||
|
||||
.navigation__checkbox:checked + .navigation__button .navigation__icon {
|
||||
background-color: transparent; }
|
||||
|
||||
.navigation__checkbox:checked + .navigation__button .navigation__icon::before {
|
||||
top: 0;
|
||||
transform: rotate(135deg); }
|
||||
|
||||
.navigation__checkbox:checked + .navigation__button .navigation__icon::after {
|
||||
top: 0;
|
||||
transform: rotate(-135deg); }
|
||||
|
||||
.section-about {
|
||||
background-color: #f7f7f7;
|
||||
padding: 25rem 0;
|
||||
margin-top: -20vh; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.section-about {
|
||||
padding: 20rem 0; } }
|
||||
|
||||
.section-features {
|
||||
padding: 20rem 0;
|
||||
background-image: linear-gradient(to right bottom, rgba(126, 213, 111, 0.801), rgba(40, 180, 133, 0.808)), url("../img/nat-4.jpg");
|
||||
background-size: cover;
|
||||
margin-top: -10rem;
|
||||
transform: skewY(-7deg); }
|
||||
.section-features > * {
|
||||
transform: skewY(7deg); }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.section-features {
|
||||
padding: 10rem 0; } }
|
||||
|
||||
.section-tours {
|
||||
background-color: #f7f7f7;
|
||||
padding: 25rem 0 15rem 0;
|
||||
margin-top: -10rem; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.section-tours {
|
||||
padding: 20rem 0 10rem 0; } }
|
||||
|
||||
.section-stories {
|
||||
position: relative;
|
||||
padding: 15rem 0; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.section-stories {
|
||||
padding: 10rem 0; } }
|
||||
|
||||
.section-book {
|
||||
padding: 15rem 0;
|
||||
background-image: linear-gradient(to right bottom, #7ed56f, #28b485); }
|
||||
|
||||
.book {
|
||||
background-image: linear-gradient(105deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 50%, transparent 50%), url(../img/nat-10.jpg);
|
||||
background-size: 100%;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.2); }
|
||||
@media only screen and (max-width: 75em) {
|
||||
.book {
|
||||
background-image: linear-gradient(105deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 65%, transparent 65%), url(../img/nat-10.jpg);
|
||||
background-size: cover; } }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.book {
|
||||
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%), url(../img/nat-10.jpg); } }
|
||||
.book__form {
|
||||
width: 50%;
|
||||
padding: 6rem; }
|
||||
@media only screen and (max-width: 75em) {
|
||||
.book__form {
|
||||
width: 65%; } }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.book__form {
|
||||
width: 100%; } }
|
||||
File diff suppressed because it is too large.
Load diff
@@ -1,974 +1 @@
|
||||
@charset "UTF-8";
|
||||
/*
|
||||
* 0 - 600px : Phone
|
||||
* 600 - 900px : Tablet portrait
|
||||
* 900 - 1200px : Tablet landscape
|
||||
* 1200 - 1800px : Normal desktop
|
||||
* 1800px + : Big desktop
|
||||
|
||||
* $breakpoint argument choices
|
||||
- phone
|
||||
- tab-port
|
||||
- tab-land
|
||||
- big-desktop
|
||||
|
||||
1em = 16px
|
||||
*/
|
||||
*,
|
||||
::after,
|
||||
::before {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: inherit; }
|
||||
|
||||
html {
|
||||
font-size: 62.5%; }
|
||||
@media (min-width: 112.5em) {
|
||||
html {
|
||||
font-size: 75%; } }
|
||||
@media (max-width: 75em) {
|
||||
html {
|
||||
font-size: 56.25%; } }
|
||||
@media (max-width: 56.25em) {
|
||||
html {
|
||||
font-size: 50%; } }
|
||||
|
||||
body {
|
||||
padding: 3rem;
|
||||
box-sizing: border-box; }
|
||||
@media (max-width: 56.25em) {
|
||||
body {
|
||||
padding: 0; } }
|
||||
|
||||
@keyframes slideLeft {
|
||||
0% {
|
||||
transform: translateX(-16rem);
|
||||
opacity: 0; }
|
||||
80% {
|
||||
transform: translateX(1.5rem); }
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1; } }
|
||||
|
||||
@keyframes slideRight {
|
||||
0% {
|
||||
transform: translateX(16rem);
|
||||
opacity: 0; }
|
||||
80% {
|
||||
transform: translateX(-1.5rem); }
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1; } }
|
||||
|
||||
@keyframes slideBottom {
|
||||
0% {
|
||||
transform: translateY(5rem);
|
||||
opacity: 0; }
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1; } }
|
||||
|
||||
body {
|
||||
font-family: "Lato", Verdana, Geneva, Tahoma, sans-serif;
|
||||
font-weight: 400;
|
||||
/* font-size: 16px; */
|
||||
line-height: 1.7;
|
||||
color: #777; }
|
||||
|
||||
.heading--primary {
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 6rem; }
|
||||
.heading--primary-main {
|
||||
display: block;
|
||||
font-size: 6rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 3.5rem;
|
||||
animation-name: slideLeft;
|
||||
animation-duration: 1s;
|
||||
animation-timing-function: ease-in; }
|
||||
@media (max-width: 37.5em) {
|
||||
.heading--primary-main {
|
||||
letter-spacing: 1rem;
|
||||
font-size: 5rem; } }
|
||||
.heading--primary-sub {
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1.75rem;
|
||||
animation-name: slideRight;
|
||||
animation-duration: 1s;
|
||||
animation-timing-function: ease-in; }
|
||||
@media (max-width: 37.5em) {
|
||||
.heading--primary-sub {
|
||||
letter-spacing: .5rem; } }
|
||||
|
||||
.heading--secondary {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
display: inline-block;
|
||||
background-image: linear-gradient(to right, #7ed56f, #28b485);
|
||||
background-clip: 0;
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
transition: all 0.2s; }
|
||||
@media (max-width: 56.25em) {
|
||||
.heading--secondary {
|
||||
font-size: 3rem; } }
|
||||
@media (max-width: 37.5em) {
|
||||
.heading--secondary {
|
||||
font-size: 2.5rem; } }
|
||||
.heading--secondary:hover {
|
||||
transform: skewY(2deg) skewX(15deg) scale(1.1);
|
||||
text-shadow: 0.5rem 1rem 2rem rgba(0, 0, 0, 0.2); }
|
||||
|
||||
.heading--terciary {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
text-transform: capitalize; }
|
||||
|
||||
.paragraph {
|
||||
font-size: 1.6rem; }
|
||||
.paragraph:not(:last-child) {
|
||||
margin-bottom: 3rem; }
|
||||
|
||||
.u-center-text {
|
||||
text-align: center !important; }
|
||||
|
||||
.u-margin-bottom-small {
|
||||
margin-bottom: 2rem !important; }
|
||||
|
||||
.u-margin-bottom-medium {
|
||||
margin-bottom: 4rem !important; }
|
||||
@media (max-width: 56.25em) {
|
||||
.u-margin-bottom-medium {
|
||||
margin-bottom: 3rem !important; } }
|
||||
|
||||
.u-margin-bottom-big {
|
||||
margin-bottom: 8rem !important; }
|
||||
@media (max-width: 56.25em) {
|
||||
.u-margin-bottom-big {
|
||||
margin-bottom: 5rem !important; } }
|
||||
|
||||
.u-margin-top-big {
|
||||
margin-top: 8rem !important; }
|
||||
|
||||
.u-margin-top-huge {
|
||||
margin-top: 10rem !important; }
|
||||
|
||||
.btn, .btn:link, .btn:visited {
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
padding: 1.5rem 4rem;
|
||||
display: inline-block;
|
||||
border-radius: 10rem;
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
font-size: 1.6rem;
|
||||
border: none;
|
||||
cursor: pointer; }
|
||||
|
||||
.btn--animated {
|
||||
animation: slideBottom 0.7s ease-out 0.75s;
|
||||
animation-fill-mode: backwards; }
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-0.4rem);
|
||||
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); }
|
||||
.btn:hover::after {
|
||||
transform: scaleX(1.4) scaleY(1.6);
|
||||
opacity: 0; }
|
||||
|
||||
.btn:active, .btn:focus {
|
||||
transform: translateY(-0.1rem);
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); }
|
||||
|
||||
.btn--white {
|
||||
background-color: #fff;
|
||||
color: #777; }
|
||||
.btn--white::after {
|
||||
background-color: #fff; }
|
||||
|
||||
.btn--green {
|
||||
background-color: #55c57a;
|
||||
color: #fff; }
|
||||
.btn--green::after {
|
||||
background-color: #55c57a; }
|
||||
|
||||
.btn::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 10rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
transition: all 0.4s; }
|
||||
|
||||
.btn-text:link, .btn-text:visited {
|
||||
font-size: 1.6rem;
|
||||
color: #55c57a;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #55c57a;
|
||||
padding: 3px;
|
||||
transition: all 0.2s; }
|
||||
|
||||
.btn-text:hover {
|
||||
background-color: #55c57a;
|
||||
color: #fff;
|
||||
box-shadow: 0 1rem 2reem rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-2px); }
|
||||
|
||||
.btn-text:active {
|
||||
box-shadow: 0 0.5rem 1reem rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(0px); }
|
||||
|
||||
.composition {
|
||||
position: relative; }
|
||||
.composition__photo {
|
||||
width: 55%;
|
||||
box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.4);
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
transition: all 0.2s;
|
||||
outline-offset: 2rem; }
|
||||
@media (max-width: 56.25em) {
|
||||
.composition__photo {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 33.33333333%;
|
||||
box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.2); } }
|
||||
.composition__photo--p1 {
|
||||
left: 0;
|
||||
top: -2rem; }
|
||||
@media (max-width: 56.25em) {
|
||||
.composition__photo--p1 {
|
||||
top: 0;
|
||||
transform: scale(1.2); } }
|
||||
.composition__photo--p2 {
|
||||
right: 0;
|
||||
top: 2rem; }
|
||||
@media (max-width: 56.25em) {
|
||||
.composition__photo--p2 {
|
||||
top: -1rem;
|
||||
transform: scale(1.3);
|
||||
z-index: 100; } }
|
||||
.composition__photo--p3 {
|
||||
left: 20%;
|
||||
top: 10rem; }
|
||||
@media (max-width: 56.25em) {
|
||||
.composition__photo--p3 {
|
||||
top: 1rem;
|
||||
left: 0;
|
||||
transform: scale(1.2); } }
|
||||
.composition__photo:hover {
|
||||
outline: 1.5rem solid #55c57a;
|
||||
transform: scale(1.05) translateY(-0.5rem);
|
||||
box-shadow: 0 2.5rem 4rem rgba(0, 0, 0, 0.5);
|
||||
z-index: 20; }
|
||||
.composition:hover .composition__photo:not(:hover) {
|
||||
transform: scale(0.9); }
|
||||
|
||||
.feature-box {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 1.5rem;
|
||||
padding: 2.5rem;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
|
||||
transition: transform 0.3s; }
|
||||
@media (max-width: 56.25em) {
|
||||
.feature-box {
|
||||
padding: 2rem; } }
|
||||
.feature-box__icon {
|
||||
font-size: 6rem;
|
||||
margin-bottom: 0.5rem;
|
||||
display: inline-block;
|
||||
background-image: linear-gradient(to right, #7ed56f, #28b485);
|
||||
-webkit-background-clip: text;
|
||||
color: transparent; }
|
||||
@media (max-width: 56.25em) {
|
||||
.feature-box__icon {
|
||||
margin-bottom: 0; } }
|
||||
.feature-box:hover {
|
||||
transform: translateY(-1.5rem) scale(1.03); }
|
||||
|
||||
.card {
|
||||
perspective: 150rem;
|
||||
-moz-perspective: 150rem;
|
||||
position: relative;
|
||||
height: 52rem; }
|
||||
.card__side {
|
||||
font-size: 2rem;
|
||||
height: 52rem;
|
||||
transition: all 0.8s ease;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
backface-visibility: hidden;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15); }
|
||||
.card__side--front {
|
||||
background-color: #fff; }
|
||||
.card__side--back {
|
||||
transform: rotateY(180deg); }
|
||||
.card__side--back-1 {
|
||||
background-image: linear-gradient(to right bottom, #ffb900, #ff7730); }
|
||||
.card__side--back-2 {
|
||||
background-image: linear-gradient(to right bottom, #7ed56f, #28b485); }
|
||||
.card__side--back-3 {
|
||||
background-image: linear-gradient(to right bottom, #2998ff, #5643fa); }
|
||||
.card:hover .card__side--front {
|
||||
transform: rotateY(-180deg); }
|
||||
.card:hover .card__side--back {
|
||||
transform: rotateY(0); }
|
||||
.card__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; }
|
||||
.card__picture--1 {
|
||||
background-image: linear-gradient(to right bottom, #ffb900, #ff7730), url(../img/nat-5.jpg); }
|
||||
.card__picture--2 {
|
||||
background-image: linear-gradient(to right bottom, #7ed56f, #28b485), url(../img/nat-6.jpg); }
|
||||
.card__picture--3 {
|
||||
background-image: linear-gradient(to right bottom, #2998ff, #5643fa), url(../img/nat-7.jpg); }
|
||||
.card__heading {
|
||||
font-size: 2.8rem;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 12rem;
|
||||
right: 2rem;
|
||||
text-align: right;
|
||||
width: 75%; }
|
||||
.card__heading--span {
|
||||
padding: 1rem 1.5rem;
|
||||
-webkit-box-decoration-break: clone;
|
||||
box-decoration-break: clone; }
|
||||
.card__heading--span--1 {
|
||||
background-image: linear-gradient(to right bottom, rgba(255, 185, 0, 0.85), #ff7730); }
|
||||
.card__heading--span--2 {
|
||||
background-image: linear-gradient(to right bottom, rgba(126, 213, 111, 0.85), #28b485); }
|
||||
.card__heading--span--3 {
|
||||
background-image: linear-gradient(to right bottom, rgba(41, 152, 255, 0.85), #5643fa); }
|
||||
.card__details {
|
||||
padding: 3rem; }
|
||||
.card__details ul {
|
||||
list-style: none;
|
||||
width: 80%;
|
||||
margin: 0 auto; }
|
||||
.card__details ul li {
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
padding: 1rem; }
|
||||
.card__details ul li:not(:last-child) {
|
||||
border-bottom: 1px solid #eee; }
|
||||
.card__cta {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 90%;
|
||||
text-align: center; }
|
||||
.card__price-box {
|
||||
color: #fff;
|
||||
margin-bottom: 8rem; }
|
||||
.card__price-only {
|
||||
font-size: 1.4rem;
|
||||
text-transform: uppercase; }
|
||||
.card__price-value {
|
||||
font-size: 6rem;
|
||||
font-weight: 100; }
|
||||
@media (max-width: 56.25em) {
|
||||
.card {
|
||||
height: auto;
|
||||
border-radius: 3px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15); }
|
||||
.card__side {
|
||||
height: auto;
|
||||
position: relative;
|
||||
box-shadow: none; }
|
||||
.card__side--front {
|
||||
background-color: #fff; }
|
||||
.card__side--back {
|
||||
transform: rotateY(0);
|
||||
clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0 100%); }
|
||||
.card__side--back-1 {
|
||||
background-image: linear-gradient(to right bottom, #ffb900, #ff7730); }
|
||||
.card__side--back-2 {
|
||||
background-image: linear-gradient(to right bottom, #7ed56f, #28b485); }
|
||||
.card__side--back-3 {
|
||||
background-image: linear-gradient(to right bottom, #2998ff, #5643fa); }
|
||||
.card:hover .card__side--front {
|
||||
transform: rotateY(0); }
|
||||
.card__details {
|
||||
padding: 1rem 3rem; }
|
||||
.card__cta {
|
||||
position: relative;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
transform: translate(0);
|
||||
width: 100%;
|
||||
padding: 7rem 4rem 4rem; }
|
||||
.card__price-box {
|
||||
color: #fff;
|
||||
margin-bottom: 3rem; }
|
||||
.card__price-value {
|
||||
font-size: 4rem; } }
|
||||
|
||||
.story {
|
||||
width: 75%;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
border-radius: 3px;
|
||||
padding: 6rem;
|
||||
padding-left: 9rem;
|
||||
font-size: 1.6rem;
|
||||
transform: skewX(-12deg); }
|
||||
@media (max-width: 56.25em) {
|
||||
.story {
|
||||
width: 100%;
|
||||
padding: 4rem;
|
||||
padding-left: 7rem; } }
|
||||
.story > * {
|
||||
transform: skewX(12deg); }
|
||||
@media (max-width: 37.5em) {
|
||||
.story {
|
||||
transform: skewX(0); }
|
||||
.story > * {
|
||||
transform: skewX(0); } }
|
||||
.story__shape {
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
float: left;
|
||||
-webkit-shape-outside: circle(50% at 50% 50%);
|
||||
shape-outside: circle(50% at 50% 50%);
|
||||
-webkit-clip-path: circle(50% at 50% 50%);
|
||||
clip-path: circle(50% at 50% 50%);
|
||||
transform: translateX(-3rem) skewX(12deg);
|
||||
position: relative; }
|
||||
@media (max-width: 37.5em) {
|
||||
.story__shape {
|
||||
transform: translateX(-3rem) skewX(0); } }
|
||||
.story__img {
|
||||
height: 100%;
|
||||
transform: translateX(-4rem) scale(1.4);
|
||||
backface-visibility: hidden;
|
||||
transition: all 0.5s; }
|
||||
.story__text {
|
||||
transform: skewX(12deg); }
|
||||
@media (max-width: 37.5em) {
|
||||
.story__text {
|
||||
transform: skewX(0); } }
|
||||
.story__caption {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 20%);
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.7rem;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
transition: all 0.5s;
|
||||
backface-visibility: hidden; }
|
||||
.story:hover .story__caption {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%); }
|
||||
.story:hover .story__img {
|
||||
transform: translateX(-4rem) scale(1);
|
||||
filter: blur(3px) brightness(80%); }
|
||||
|
||||
.bg-video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
opacity: .15;
|
||||
overflow: hidden; }
|
||||
.bg-video__content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover; }
|
||||
|
||||
.form__group:not(:last-child) {
|
||||
margin-bottom: 2rem; }
|
||||
|
||||
.form__input {
|
||||
font-size: 1.5rem;
|
||||
font-family: inherit;
|
||||
color: inherit;
|
||||
padding: 1.5rem 2rem;
|
||||
border-radius: 2px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border: none;
|
||||
border-bottom: 3px solid transparent;
|
||||
width: 90%;
|
||||
display: block;
|
||||
transition: all 0.3s; }
|
||||
@media (max-width: 56.25em) {
|
||||
.form__input {
|
||||
width: 100%; } }
|
||||
.form__input:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
|
||||
border-bottom: 3px solid #55c57a; }
|
||||
.form__input:focus:invalid {
|
||||
border-bottom: 3px solid #ff7730; }
|
||||
.form__input::placeholder {
|
||||
color: #999; }
|
||||
|
||||
.form__label {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
margin-left: 2rem;
|
||||
margin-top: 0.7rem;
|
||||
display: block;
|
||||
transition: all 0.3s; }
|
||||
|
||||
.form__input:placeholder-shown + .form__label {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-4rem); }
|
||||
|
||||
.form__radio-group {
|
||||
width: 49%;
|
||||
display: inline-block; }
|
||||
@media (max-width: 56.25em) {
|
||||
.form__radio-group {
|
||||
width: 100%;
|
||||
margin-bottom: 2rem; } }
|
||||
|
||||
.form__radio-input {
|
||||
display: none; }
|
||||
|
||||
.form__radio-label {
|
||||
font-size: 1.6rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding-left: 4.5rem; }
|
||||
|
||||
.form__radio-button {
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
border: 5px solid #55c57a;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -0.4rem; }
|
||||
.form__radio-button::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: #55c57a;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s; }
|
||||
|
||||
.form__radio-input:checked ~ .form__radio-label .form__radio-button::after {
|
||||
opacity: 1; }
|
||||
|
||||
.popup {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.82);
|
||||
z-index: 4000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.4s; }
|
||||
.popup__content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: table;
|
||||
width: 75%;
|
||||
box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.2);
|
||||
background-color: #fff;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
transition: all 0.4s 0.2s; }
|
||||
.popup__left {
|
||||
width: 33.3333333%;
|
||||
display: table-cell;
|
||||
vertical-align: middle; }
|
||||
.popup__right {
|
||||
width: 66.6666667%;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding: 3rem 5rem; }
|
||||
.popup__img {
|
||||
display: block;
|
||||
width: 100%; }
|
||||
.popup__text {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 4rem;
|
||||
-moz-column-count: 2;
|
||||
-moz-column-gap: 4rem;
|
||||
-moz-column-rule: 1px solid #999;
|
||||
column-count: 2;
|
||||
column-gap: 4rem;
|
||||
column-rule: 1px solid #999;
|
||||
-moz-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto; }
|
||||
.popup:target {
|
||||
opacity: 1;
|
||||
visibility: visible; }
|
||||
.popup:target .popup__content {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1); }
|
||||
.popup__close:link, .popup__close:visited {
|
||||
color: #777;
|
||||
position: absolute;
|
||||
top: 2.5rem;
|
||||
right: 2.5rem;
|
||||
font-size: 3rem;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
transition: all 0.2s; }
|
||||
.popup__close:hover {
|
||||
color: #55c57a; }
|
||||
|
||||
.header {
|
||||
height: 95vh;
|
||||
background-image: linear-gradient(to right bottom, rgba(126, 213, 111, 0.801), rgba(40, 180, 133, 0.808)), url("../img/hero.jpg");
|
||||
background-size: cover;
|
||||
background-position: top;
|
||||
clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
|
||||
position: relative;
|
||||
/*
|
||||
.logo:hover{
|
||||
animation: moveInRight 1s ease-out;
|
||||
}
|
||||
*/ }
|
||||
@media (max-width: 37.5em) {
|
||||
.header {
|
||||
clip-path: polygon(0% 0%, 100% 0%, 100% 85vh, 0% 100%); } }
|
||||
.header__logo-box {
|
||||
position: absolute;
|
||||
top: 4rem;
|
||||
left: 4rem; }
|
||||
.header__logo {
|
||||
height: 3.5rem; }
|
||||
.header__text-box {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
/*
|
||||
* Limpiar animaciones para evitar temblores
|
||||
* No se sabe realmente por qué funciona o de dónde viene el error, pero lo hace
|
||||
*/
|
||||
backface-visibility: hidden;
|
||||
text-align: center; }
|
||||
|
||||
.row {
|
||||
max-width: 114rem;
|
||||
margin: 0 auto; }
|
||||
.row:not(:last-child) {
|
||||
margin-bottom: 8rem; }
|
||||
@media (max-width: 56.25em) {
|
||||
.row:not(:last-child) {
|
||||
margin-bottom: 6rem; } }
|
||||
@media (max-width: 56.25em) {
|
||||
.row {
|
||||
max-width: 50rem;
|
||||
padding: 0 3rem; } }
|
||||
.row::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.row [class^='col-'] {
|
||||
float: left; }
|
||||
.row [class^='col-']:not(:last-child) {
|
||||
margin-right: 6rem; }
|
||||
@media (max-width: 56.25em) {
|
||||
.row [class^='col-']:not(:last-child) {
|
||||
margin-right: 0;
|
||||
margin-bottom: 6rem; } }
|
||||
@media (max-width: 56.25em) {
|
||||
.row [class^='col-'] {
|
||||
width: 100% !important; } }
|
||||
.row .col-1-of-2 {
|
||||
width: calc((100% - 6rem) / 2); }
|
||||
.row .col-1-of-3 {
|
||||
width: calc((100% - 2 * 6rem) / 3); }
|
||||
.row .col-2-of-3 {
|
||||
width: calc(((100% - 2 * 6rem) / 3) * 2 + 6rem); }
|
||||
.row .col-1-of-4 {
|
||||
width: calc((100% - 3 * 6rem) / 4); }
|
||||
.row .col-2-of-4 {
|
||||
width: calc(2 * ((100% - 3 * 6rem) / 4) + 6rem); }
|
||||
.row .col-3-of-4 {
|
||||
width: calc(3 * ((100% - 3 * 6rem) / 4) + 2 * 6rem); }
|
||||
|
||||
.footer {
|
||||
background-color: #333;
|
||||
padding: 10rem 0;
|
||||
font-size: 1.4rem;
|
||||
color: #f7f7f7; }
|
||||
@media (max-width: 56.25em) {
|
||||
.footer {
|
||||
padding: 8rem 0; } }
|
||||
.footer__logo-box {
|
||||
text-align: center;
|
||||
margin-bottom: 8rem; }
|
||||
@media (max-width: 56.25em) {
|
||||
.footer__logo-box {
|
||||
margin-bottom: 6rem; } }
|
||||
.footer__logo {
|
||||
width: 15rem;
|
||||
height: auto; }
|
||||
.footer__navigation {
|
||||
border-top: 1px solid #777;
|
||||
padding-top: 2rem;
|
||||
display: inline-block; }
|
||||
@media (max-width: 56.25em) {
|
||||
.footer__navigation {
|
||||
width: 100%;
|
||||
text-align: center; } }
|
||||
.footer__list {
|
||||
list-style: none; }
|
||||
.footer__item {
|
||||
display: inline-block; }
|
||||
.footer__item:not(:last-child) {
|
||||
margin-right: 1.5rem; }
|
||||
.footer__link:link, .footer__link:visited {
|
||||
color: #f7f7f7;
|
||||
background-color: #333;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
display: inline-block;
|
||||
transition: all 0.2s; }
|
||||
.footer__link:hover, .footer__link:active {
|
||||
color: #55c57a;
|
||||
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4);
|
||||
transform: rotate(5deg) scale(1.3); }
|
||||
.footer__copyright {
|
||||
border-top: 1px solid #777;
|
||||
padding-top: 2rem;
|
||||
display: inline-block;
|
||||
width: 80%;
|
||||
float: right; }
|
||||
@media (max-width: 56.25em) {
|
||||
.footer__copyright {
|
||||
width: 100%;
|
||||
float: none; } }
|
||||
|
||||
.navigation__checkbox {
|
||||
display: none; }
|
||||
|
||||
.navigation__button {
|
||||
background-color: #fff;
|
||||
height: 7rem;
|
||||
width: 7rem;
|
||||
position: fixed;
|
||||
top: 6rem;
|
||||
right: 6rem;
|
||||
border-radius: 50%;
|
||||
z-index: 2000;
|
||||
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
cursor: pointer; }
|
||||
@media (max-width: 56.25em) {
|
||||
.navigation__button {
|
||||
top: 4rem;
|
||||
right: 4rem; } }
|
||||
@media (max-width: 37.5em) {
|
||||
.navigation__button {
|
||||
top: 2.5rem;
|
||||
right: 2.5rem; } }
|
||||
|
||||
.navigation__background {
|
||||
height: 6rem;
|
||||
width: 6rem;
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
top: 6.5rem;
|
||||
right: 6.5rem;
|
||||
background-image: radial-gradient(#7ed56f, #28b485);
|
||||
z-index: 1000;
|
||||
transition: transform 0.8s cubic-bezier(0.83, 0, 0.17, 1); }
|
||||
@media (max-width: 56.25em) {
|
||||
.navigation__background {
|
||||
top: 4.5rem;
|
||||
right: 4.5rem; } }
|
||||
@media (max-width: 37.5em) {
|
||||
.navigation__background {
|
||||
top: 3rem;
|
||||
right: 3rem; } }
|
||||
|
||||
.navigation__nav {
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1500;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
transition: all 0.8s cubic-bezier(0.68, -0.6, 0.32, 1.6); }
|
||||
|
||||
.navigation__list {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
list-style: none;
|
||||
text-align: center; }
|
||||
|
||||
.navigation__item {
|
||||
margin: 1rem; }
|
||||
|
||||
.navigation__link:link, .navigation__link:visited {
|
||||
display: inline-block;
|
||||
font-size: 3rem;
|
||||
font-weight: 300;
|
||||
padding: 1rem 2rem;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #fff 50%);
|
||||
background-size: 250%;
|
||||
transition: all 0.4s; }
|
||||
.navigation__link:link span, .navigation__link:visited span {
|
||||
margin-right: 1.5rem;
|
||||
display: inline-block; }
|
||||
|
||||
.navigation__link:hover, .navigation__link:active {
|
||||
color: #28b485;
|
||||
background-position: 100%;
|
||||
transform: translateX(1rem); }
|
||||
|
||||
.navigation__checkbox:checked ~ .navigation__background {
|
||||
transform: scale(80); }
|
||||
|
||||
.navigation__checkbox:checked ~ .navigation__nav {
|
||||
opacity: 1;
|
||||
width: 100%; }
|
||||
|
||||
.navigation__icon {
|
||||
position: relative;
|
||||
margin-top: 3.4rem; }
|
||||
.navigation__icon, .navigation__icon::before, .navigation__icon::after {
|
||||
width: 3rem;
|
||||
height: 2px;
|
||||
background-color: #333;
|
||||
display: inline-block; }
|
||||
.navigation__icon::before, .navigation__icon::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
transition: all 0.2s; }
|
||||
.navigation__icon::before {
|
||||
top: -0.8rem; }
|
||||
.navigation__icon::after {
|
||||
top: 0.8rem; }
|
||||
|
||||
.navigation__button:hover .navigation__icon::before {
|
||||
top: -1rem; }
|
||||
|
||||
.navigation__button:hover .navigation__icon::after {
|
||||
top: 1rem; }
|
||||
|
||||
.navigation__checkbox:checked + .navigation__button .navigation__icon {
|
||||
background-color: transparent; }
|
||||
|
||||
.navigation__checkbox:checked + .navigation__button .navigation__icon::before {
|
||||
top: 0;
|
||||
transform: rotate(135deg); }
|
||||
|
||||
.navigation__checkbox:checked + .navigation__button .navigation__icon::after {
|
||||
top: 0;
|
||||
transform: rotate(-135deg); }
|
||||
|
||||
.section-about {
|
||||
background-color: #f7f7f7;
|
||||
padding: 25rem 0;
|
||||
margin-top: -20vh; }
|
||||
@media (max-width: 56.25em) {
|
||||
.section-about {
|
||||
padding: 20rem 0; } }
|
||||
|
||||
.section-features {
|
||||
padding: 20rem 0;
|
||||
background-image: linear-gradient(to right bottom, rgba(126, 213, 111, 0.801), rgba(40, 180, 133, 0.808)), url("../img/nat-4.jpg");
|
||||
background-size: cover;
|
||||
margin-top: -10rem;
|
||||
transform: skewY(-7deg); }
|
||||
.section-features > * {
|
||||
transform: skewY(7deg); }
|
||||
@media (max-width: 56.25em) {
|
||||
.section-features {
|
||||
padding: 10rem 0; } }
|
||||
|
||||
.section-tours {
|
||||
background-color: #f7f7f7;
|
||||
padding: 25rem 0 15rem 0;
|
||||
margin-top: -10rem; }
|
||||
@media (max-width: 56.25em) {
|
||||
.section-tours {
|
||||
padding: 20rem 0 10rem 0; } }
|
||||
|
||||
.section-stories {
|
||||
position: relative;
|
||||
padding: 15rem 0; }
|
||||
@media (max-width: 56.25em) {
|
||||
.section-stories {
|
||||
padding: 10rem 0; } }
|
||||
|
||||
.section-book {
|
||||
padding: 15rem 0;
|
||||
background-image: linear-gradient(to right bottom, #7ed56f, #28b485); }
|
||||
|
||||
.book {
|
||||
background-image: linear-gradient(105deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 50%, transparent 50%), url(../img/nat-10.jpg);
|
||||
background-size: 100%;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.2); }
|
||||
@media (max-width: 75em) {
|
||||
.book {
|
||||
background-image: linear-gradient(105deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 65%, transparent 65%), url(../img/nat-10.jpg);
|
||||
background-size: cover; } }
|
||||
@media (max-width: 56.25em) {
|
||||
.book {
|
||||
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%), url(../img/nat-10.jpg); } }
|
||||
.book__form {
|
||||
width: 50%;
|
||||
padding: 6rem; }
|
||||
@media (max-width: 75em) {
|
||||
.book__form {
|
||||
width: 65%; } }
|
||||
@media (max-width: 56.25em) {
|
||||
.book__form {
|
||||
width: 100%; } }
|
||||
@font-face{font-family:"linea-basic-10";src:url("fonts/linea-basic-10.eot");src:url("fonts/linea-basic-10.eot?#iefix") format("embedded-opentype"),url("fonts/linea-basic-10.woff") format("woff"),url("fonts/linea-basic-10.ttf") format("truetype"),url("fonts/linea-basic-10.svg#linea-basic-10") format("svg");font-weight:normal;font-style:normal}[data-icon]:before{font-family:"linea-basic-10" !important;content:attr(data-icon);font-style:normal !important;font-weight:normal !important;font-variant:normal !important;text-transform:none !important;speak:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[class^="icon-"]:before,[class*=" icon-"]:before{font-family:"linea-basic-10" !important;font-style:normal !important;font-weight:normal !important;font-variant:normal !important;text-transform:none !important;speak:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-basic-accelerator:before{content:"a"}.icon-basic-alarm:before{content:"b"}.icon-basic-anchor:before{content:"c"}.icon-basic-anticlockwise:before{content:"d"}.icon-basic-archive:before{content:"e"}.icon-basic-archive-full:before{content:"f"}.icon-basic-ban:before{content:"g"}.icon-basic-battery-charge:before{content:"h"}.icon-basic-battery-empty:before{content:"i"}.icon-basic-battery-full:before{content:"j"}.icon-basic-battery-half:before{content:"k"}.icon-basic-bolt:before{content:"l"}.icon-basic-book:before{content:"m"}.icon-basic-book-pen:before{content:"n"}.icon-basic-book-pencil:before{content:"o"}.icon-basic-bookmark:before{content:"p"}.icon-basic-calculator:before{content:"q"}.icon-basic-calendar:before{content:"r"}.icon-basic-cards-diamonds:before{content:"s"}.icon-basic-cards-hearts:before{content:"t"}.icon-basic-case:before{content:"u"}.icon-basic-chronometer:before{content:"v"}.icon-basic-clessidre:before{content:"w"}.icon-basic-clock:before{content:"x"}.icon-basic-clockwise:before{content:"y"}.icon-basic-cloud:before{content:"z"}.icon-basic-clubs:before{content:"A"}.icon-basic-compass:before{content:"B"}.icon-basic-cup:before{content:"C"}.icon-basic-diamonds:before{content:"D"}.icon-basic-display:before{content:"E"}.icon-basic-download:before{content:"F"}.icon-basic-exclamation:before{content:"G"}.icon-basic-eye:before{content:"H"}.icon-basic-eye-closed:before{content:"I"}.icon-basic-female:before{content:"J"}.icon-basic-flag1:before{content:"K"}.icon-basic-flag2:before{content:"L"}.icon-basic-floppydisk:before{content:"M"}.icon-basic-folder:before{content:"N"}.icon-basic-folder-multiple:before{content:"O"}.icon-basic-gear:before{content:"P"}.icon-basic-geolocalize-01:before{content:"Q"}.icon-basic-geolocalize-05:before{content:"R"}.icon-basic-globe:before{content:"S"}.icon-basic-gunsight:before{content:"T"}.icon-basic-hammer:before{content:"U"}.icon-basic-headset:before{content:"V"}.icon-basic-heart:before{content:"W"}.icon-basic-heart-broken:before{content:"X"}.icon-basic-helm:before{content:"Y"}.icon-basic-home:before{content:"Z"}.icon-basic-info:before{content:"0"}.icon-basic-ipod:before{content:"1"}.icon-basic-joypad:before{content:"2"}.icon-basic-key:before{content:"3"}.icon-basic-keyboard:before{content:"4"}.icon-basic-laptop:before{content:"5"}.icon-basic-life-buoy:before{content:"6"}.icon-basic-lightbulb:before{content:"7"}.icon-basic-link:before{content:"8"}.icon-basic-lock:before{content:"9"}.icon-basic-lock-open:before{content:"!"}.icon-basic-magic-mouse:before{content:"\""}.icon-basic-magnifier:before{content:"#"}.icon-basic-magnifier-minus:before{content:"$"}.icon-basic-magnifier-plus:before{content:"%"}.icon-basic-mail:before{content:"&"}.icon-basic-mail-multiple:before{content:"'"}.icon-basic-mail-open:before{content:"("}.icon-basic-mail-open-text:before{content:")"}.icon-basic-male:before{content:"*"}.icon-basic-map:before{content:"+"}.icon-basic-message:before{content:","}.icon-basic-message-multiple:before{content:"-"}.icon-basic-message-txt:before{content:"."}.icon-basic-mixer2:before{content:"/"}.icon-basic-mouse:before{content:":"}.icon-basic-notebook:before{content:";"}.icon-basic-notebook-pen:before{content:"<"}.icon-basic-notebook-pencil:before{content:"="}.icon-basic-paperplane:before{content:">"}.icon-basic-pencil-ruler:before{content:"?"}.icon-basic-pencil-ruler-pen:before{content:"@"}.icon-basic-photo:before{content:"["}.icon-basic-picture:before{content:"]"}.icon-basic-picture-multiple:before{content:"^"}.icon-basic-pin1:before{content:"_"}.icon-basic-pin2:before{content:"`"}.icon-basic-postcard:before{content:"{"}.icon-basic-postcard-multiple:before{content:"|"}.icon-basic-printer:before{content:"}"}.icon-basic-question:before{content:"~"}.icon-basic-rss:before{content:"\\"}.icon-basic-server:before{content:"\e000"}.icon-basic-server2:before{content:"\e001"}.icon-basic-server-cloud:before{content:"\e002"}.icon-basic-server-download:before{content:"\e003"}.icon-basic-server-upload:before{content:"\e004"}.icon-basic-settings:before{cLine truncated
|
||||
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1 @@
|
||||
@font-face{font-family:"linea-basic-10";src:url("fonts/linea-basic-10.eot");src:url("fonts/linea-basic-10.eot?#iefix") format("embedded-opentype"),url("fonts/linea-basic-10.woff") format("woff"),url("fonts/linea-basic-10.ttf") format("truetype"),url("fonts/linea-basic-10.svg#linea-basic-10") format("svg");font-weight:normal;font-style:normal}[data-icon]:before{font-family:"linea-basic-10" !important;content:attr(data-icon);font-style:normal !important;font-weight:normal !important;font-variant:normal !important;text-transform:none !important;speak:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[class^="icon-"]:before,[class*=" icon-"]:before{font-family:"linea-basic-10" !important;font-style:normal !important;font-weight:normal !important;font-variant:normal !important;text-transform:none !important;speak:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-basic-accelerator:before{content:"a"}.icon-basic-alarm:before{content:"b"}.icon-basic-anchor:before{content:"c"}.icon-basic-anticlockwise:before{content:"d"}.icon-basic-archive:before{content:"e"}.icon-basic-archive-full:before{content:"f"}.icon-basic-ban:before{content:"g"}.icon-basic-battery-charge:before{content:"h"}.icon-basic-battery-empty:before{content:"i"}.icon-basic-battery-full:before{content:"j"}.icon-basic-battery-half:before{content:"k"}.icon-basic-bolt:before{content:"l"}.icon-basic-book:before{content:"m"}.icon-basic-book-pen:before{content:"n"}.icon-basic-book-pencil:before{content:"o"}.icon-basic-bookmark:before{content:"p"}.icon-basic-calculator:before{content:"q"}.icon-basic-calendar:before{content:"r"}.icon-basic-cards-diamonds:before{content:"s"}.icon-basic-cards-hearts:before{content:"t"}.icon-basic-case:before{content:"u"}.icon-basic-chronometer:before{content:"v"}.icon-basic-clessidre:before{content:"w"}.icon-basic-clock:before{content:"x"}.icon-basic-clockwise:before{content:"y"}.icon-basic-cloud:before{content:"z"}.icon-basic-clubs:before{content:"A"}.icon-basic-compass:before{content:"B"}.icon-basic-cup:before{content:"C"}.icon-basic-diamonds:before{content:"D"}.icon-basic-display:before{content:"E"}.icon-basic-download:before{content:"F"}.icon-basic-exclamation:before{content:"G"}.icon-basic-eye:before{content:"H"}.icon-basic-eye-closed:before{content:"I"}.icon-basic-female:before{content:"J"}.icon-basic-flag1:before{content:"K"}.icon-basic-flag2:before{content:"L"}.icon-basic-floppydisk:before{content:"M"}.icon-basic-folder:before{content:"N"}.icon-basic-folder-multiple:before{content:"O"}.icon-basic-gear:before{content:"P"}.icon-basic-geolocalize-01:before{content:"Q"}.icon-basic-geolocalize-05:before{content:"R"}.icon-basic-globe:before{content:"S"}.icon-basic-gunsight:before{content:"T"}.icon-basic-hammer:before{content:"U"}.icon-basic-headset:before{content:"V"}.icon-basic-heart:before{content:"W"}.icon-basic-heart-broken:before{content:"X"}.icon-basic-helm:before{content:"Y"}.icon-basic-home:before{content:"Z"}.icon-basic-info:before{content:"0"}.icon-basic-ipod:before{content:"1"}.icon-basic-joypad:before{content:"2"}.icon-basic-key:before{content:"3"}.icon-basic-keyboard:before{content:"4"}.icon-basic-laptop:before{content:"5"}.icon-basic-life-buoy:before{content:"6"}.icon-basic-lightbulb:before{content:"7"}.icon-basic-link:before{content:"8"}.icon-basic-lock:before{content:"9"}.icon-basic-lock-open:before{content:"!"}.icon-basic-magic-mouse:before{content:"\""}.icon-basic-magnifier:before{content:"#"}.icon-basic-magnifier-minus:before{content:"$"}.icon-basic-magnifier-plus:before{content:"%"}.icon-basic-mail:before{content:"&"}.icon-basic-mail-multiple:before{content:"'"}.icon-basic-mail-open:before{content:"("}.icon-basic-mail-open-text:before{content:")"}.icon-basic-male:before{content:"*"}.icon-basic-map:before{content:"+"}.icon-basic-message:before{content:","}.icon-basic-message-multiple:before{content:"-"}.icon-basic-message-txt:before{content:"."}.icon-basic-mixer2:before{content:"/"}.icon-basic-mouse:before{content:":"}.icon-basic-notebook:before{content:";"}.icon-basic-notebook-pen:before{content:"<"}.icon-basic-notebook-pencil:before{content:"="}.icon-basic-paperplane:before{content:">"}.icon-basic-pencil-ruler:before{content:"?"}.icon-basic-pencil-ruler-pen:before{content:"@"}.icon-basic-photo:before{content:"["}.icon-basic-picture:before{content:"]"}.icon-basic-picture-multiple:before{content:"^"}.icon-basic-pin1:before{content:"_"}.icon-basic-pin2:before{content:"`"}.icon-basic-postcard:before{content:"{"}.icon-basic-postcard-multiple:before{content:"|"}.icon-basic-printer:before{content:"}"}.icon-basic-question:before{content:"~"}.icon-basic-rss:before{content:"\\"}.icon-basic-server:before{content:"\e000"}.icon-basic-server2:before{content:"\e001"}.icon-basic-server-cloud:before{content:"\e002"}.icon-basic-server-download:before{content:"\e003"}.icon-basic-server-upload:before{content:"\e004"}.icon-basic-settings:before{cLine truncated
|
||||
@@ -9,7 +9,8 @@
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<link rel="stylesheet" href="css/icon-font.css" />
|
||||
<!-- Not needed because its on the code already because of the concat -->
|
||||
<!-- <link rel="stylesheet" href="css/icon-font.css" /> -->
|
||||
|
||||
<link rel="stylesheet" href="css/icon-font.css" />
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
@@ -104,21 +105,43 @@
|
||||
</div>
|
||||
<div class="col-1-of-2">
|
||||
<div class="composition">
|
||||
<!-- In the srcset we inform the browser the width of the images without him neeeding to download them -->
|
||||
<!-- In sizes we inform the browser the aproximate width of the image in the different situations -->
|
||||
<!-- This way the browser will determine itself what image to request -->
|
||||
<!-- is also good to include src attribute in case the browser does not support srcset (old) -->
|
||||
<img
|
||||
srcset="img/nat-1.jpg 300w, img/nat-1-large.jpg 1000w"
|
||||
sizes="(max-width: 900px) 20vw, (max-width: 600px) 30vw, 300px"
|
||||
src="img/nat-1-large.jpg"
|
||||
alt="Photo 1"
|
||||
class="composition__photo composition__photo--p1"
|
||||
/>
|
||||
<img
|
||||
srcset="img/nat-2.jpg 300w, img/nat-2-large.jpg 1000w"
|
||||
sizes="(max-width: 900px) 20vw, (max-width: 600px) 30vw, 300px"
|
||||
src="img/nat-2-large.jpg"
|
||||
alt="Photo 2"
|
||||
class="composition__photo composition__photo--p2"
|
||||
/>
|
||||
<img
|
||||
srcset="img/nat-3.jpg 300w, img/nat-3-large.jpg 1000w"
|
||||
sizes="(max-width: 900px) 20vw, (max-width: 600px) 30vw, 300px"
|
||||
src="img/nat-3-large.jpg"
|
||||
alt="Photo 3"
|
||||
class="composition__photo composition__photo--p3"
|
||||
/>
|
||||
<!-- <img -->
|
||||
<!-- src="img/nat-1-large.jpg" -->
|
||||
<!-- alt="Photo 1" -->
|
||||
<!-- class="composition__photo composition__photo--p1" -->
|
||||
<!-- /> -->
|
||||
<!-- <img -->
|
||||
<!-- src="img/nat-2-large.jpg" -->
|
||||
<!-- alt="Photo 2" -->
|
||||
<!-- class="composition__photo composition__photo--p2" -->
|
||||
<!-- /> -->
|
||||
<!-- <img -->
|
||||
<!-- src="img/nat-3-large.jpg" -->
|
||||
<!-- alt="Photo 3" -->
|
||||
<!-- class="composition__photo composition__photo--p3" -->
|
||||
<!-- /> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -407,7 +430,28 @@
|
||||
</main>
|
||||
<footer class="footer">
|
||||
<div class="footer__logo-box">
|
||||
<img src="img/logo-green-2x.png" alt="Full logo" class="footer__logo" />
|
||||
<picture class="footer__logo">
|
||||
<!-- if browser smaller than 37.5rem, uses source, if not browser is forced to use the default set in img -->
|
||||
<!-- multiple sources can be specified -->
|
||||
<!-- all sources can also implement density switching with srcset -->
|
||||
<source
|
||||
srcset="
|
||||
img/logo-green-small-1x.png 1x,
|
||||
img/logo-green-small-2x.png 2x
|
||||
"
|
||||
media="(max-width: 37.5rem)"
|
||||
/>
|
||||
<img
|
||||
srcset="img/logo-green-1x.png 1x, img/logo-green-2x.png 2x"
|
||||
alt="Full logo"
|
||||
class="footer__logo"
|
||||
/>
|
||||
</picture>
|
||||
<!-- <img -->
|
||||
<!-- srcset="img/logo-green-1x.png 1x, img/logo-green-2x.png 2x" -->
|
||||
<!-- alt="Full logo" -->
|
||||
<!-- class="footer__logo" -->
|
||||
<!-- /> -->
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-1-of-2">
|
||||
|
||||
+4499
File diff suppressed because it is too large.
Load diff
Generated
+4515
-1
File diff suppressed because it is too large.
Load diff
@@ -4,7 +4,14 @@
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"compile:sass": "node-sass sass/main.scss css/style.css -w"
|
||||
"watch:sass": "node-sass sass/main.scss css/style.css -w",
|
||||
"devserver": "live-server",
|
||||
"start": "npm-run-all --parallel devserver watch:sass",
|
||||
"compile:sass": "node-sass sass/main.scss css/style.comp.css",
|
||||
"concat:css": "concat -o css/style.concat.css css/icon-font.css css/style.comp.css",
|
||||
"prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.concat.css -o css/style.prefix.css",
|
||||
"compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
|
||||
"build:css": "npm-run-all compile:sass concat:css prefix:css compress:css"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
@@ -13,5 +20,12 @@
|
||||
"jquery": "^3.7.0",
|
||||
"live-server": "^1.2.2",
|
||||
"semver": "^7.5.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^10.4.19",
|
||||
"concat": "^1.0.3",
|
||||
"node-sass": "^9.0.0",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss-cli": "^11.0.0"
|
||||
}
|
||||
}
|
||||
@@ -31,25 +31,25 @@
|
||||
*/
|
||||
@mixin respond($breakpoint) {
|
||||
@if $breakpoint == phone {
|
||||
@media (max-width: 37.5em) {
|
||||
@media only screen and (max-width: 37.5em) {
|
||||
//600px
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@if $breakpoint == tab-port {
|
||||
@media (max-width: 56.25em) {
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
//900px
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@if $breakpoint == tab-land {
|
||||
@media (max-width: 75em) {
|
||||
@media only screen and (max-width: 75em) {
|
||||
//1200px
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@if $breakpoint == big-desktop {
|
||||
@media (min-width: 112.5em) {
|
||||
@media only screen and (min-width: 112.5em) {
|
||||
//1800px
|
||||
@content;
|
||||
}
|
||||
|
||||
@@ -30,6 +30,10 @@ body {
|
||||
|
||||
@include respond(tab-port) {
|
||||
padding: 0;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: $color-primary;
|
||||
color: $color-white;
|
||||
}
|
||||
@@ -14,6 +14,8 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
|
||||
border-radius: 3px;
|
||||
|
||||
@@ -15,6 +15,13 @@
|
||||
|
||||
transition: all 0.4s;
|
||||
|
||||
@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, 0.3);
|
||||
}
|
||||
|
||||
&__content {
|
||||
@include absCenter;
|
||||
|
||||
|
||||
@@ -1,10 +1,36 @@
|
||||
.header {
|
||||
height: 95vh;
|
||||
background-image: linear-gradient(to right bottom,rgba($color-primary-light, 0.801), rgba($color-primary-dark, 0.808)) , url("../img/hero.jpg");
|
||||
background-image: linear-gradient(
|
||||
to right bottom,
|
||||
rgba($color-primary-light, 0.801),
|
||||
rgba($color-primary-dark, 0.808)
|
||||
),
|
||||
url("../img/hero-small.jpg");
|
||||
background-size: cover;
|
||||
background-position: top;
|
||||
clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
|
||||
|
||||
@media (min-resolution: 192dpi) and (min-width: 600px),
|
||||
(-webkit-min-device-pixel-ratio: 192dpi) and (min-width: 600px),
|
||||
(min-width: 2000px) {
|
||||
// apple retina screen (high dpi)
|
||||
background-image: linear-gradient(
|
||||
to right bottom,
|
||||
rgba($color-primary-light, 0.801),
|
||||
rgba($color-primary-dark, 0.808)
|
||||
),
|
||||
url("../img/hero.jpg");
|
||||
}
|
||||
|
||||
@media (min-width: 2000px) {
|
||||
background-image: linear-gradient(
|
||||
to right bottom,
|
||||
rgba($color-primary-light, 0.801),
|
||||
rgba($color-primary-dark, 0.808)
|
||||
),
|
||||
url("../img/hero.jpg");
|
||||
}
|
||||
|
||||
@include respond(phone) {
|
||||
clip-path: polygon(0% 0%, 100% 0%, 100% 85vh, 0% 100%);
|
||||
}
|
||||
@@ -26,11 +52,11 @@
|
||||
}
|
||||
*/
|
||||
|
||||
&__text-box{
|
||||
&__text-box {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
transform: translate(-50%, -50%);
|
||||
/*
|
||||
* Limpiar animaciones para evitar temblores
|
||||
* No se sabe realmente por qué funciona o de dónde viene el error, pero lo hace
|
||||
|
||||
@@ -0,0 +1,517 @@
|
||||
/*
|
||||
COLORS
|
||||
|
||||
Primary: #eb2f64
|
||||
Primary light: #FF3366
|
||||
Primary dark: #BA265D
|
||||
|
||||
Grey light 1: #faf9f9
|
||||
Grey light 2: #f4f2f2
|
||||
Grey light 3: #f0eeee
|
||||
Grey light 4: #ccc
|
||||
|
||||
Grey dark 1: #333
|
||||
Grey dark 2: #777
|
||||
Grey dark 3: #999
|
||||
*/
|
||||
:root {
|
||||
--color-primary: #eb2f64;
|
||||
--color-primary-light: #ff3366;
|
||||
--color-primary-dark: #ba265d;
|
||||
--color-grey-light-1: #faf9f9;
|
||||
--color-grey-light-2: #f4f2f2;
|
||||
--color-grey-light-3: #f0eeee;
|
||||
--color-grey-light-4: #ccc;
|
||||
--color-grey-dark-1: #333;
|
||||
--color-grey-dark-2: #777;
|
||||
--color-grey-dark-3: #999;
|
||||
--shadow-dark: 0 2rem 6rem rgba(0, 0, 0, 0.3);
|
||||
--shadow-light: 0 2rem 5rem rgba(0, 0, 0, 0.06);
|
||||
--line: 1px solid var(--color-grey-light-2); }
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit; }
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
font-size: 62.5%; }
|
||||
html ::selection {
|
||||
color: var(--color-grey-light-1);
|
||||
background-color: var(--color-primary); }
|
||||
@media only screen and (max-width: 68.75em) {
|
||||
html {
|
||||
font-size: 50%; } }
|
||||
|
||||
body {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 400;
|
||||
color: var(--color-grey-dark-2);
|
||||
line-height: 1.6;
|
||||
background-image: linear-gradient(to right bottom, var(--color-primary-light), var(--color-primary-dark));
|
||||
background-size: cover;
|
||||
min-height: 100vh; }
|
||||
|
||||
.logo {
|
||||
height: 3.25rem;
|
||||
margin-left: 2rem; }
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 40%; }
|
||||
@media only screen and (max-width: 31.25em) {
|
||||
.search {
|
||||
order: 1;
|
||||
flex-basis: 100%; } }
|
||||
.search__input {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
border: none;
|
||||
background-color: var(--color-grey-light-2);
|
||||
padding: 0.7rem 2rem;
|
||||
border-radius: 100px;
|
||||
width: 90%;
|
||||
transition: all 0.2s;
|
||||
margin-right: -3.25rem; }
|
||||
.search__input:focus {
|
||||
outline: none;
|
||||
width: 100%;
|
||||
background-color: var(--color-grey-light-3); }
|
||||
.search__input::placeholder, .search__input::-webkit-input-placeholder {
|
||||
font-weight: 100;
|
||||
color: var(--color-grey-light-4); }
|
||||
.search__input:focus + .search__button {
|
||||
background-color: var(--color-grey-light-3); }
|
||||
.search__button {
|
||||
border: none;
|
||||
background-color: var(--color-grey-light-2); }
|
||||
.search__button:focus {
|
||||
outline: none; }
|
||||
.search__button:active {
|
||||
transform: translateY(2px); }
|
||||
.search__icon {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
fill: var(--color-grey-dark-3); }
|
||||
|
||||
.user-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-self: stretch; }
|
||||
.user-nav > * {
|
||||
height: 100%;
|
||||
padding: 0 2rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center; }
|
||||
.user-nav > *:hover {
|
||||
background-color: var(--color-grey-light-2); }
|
||||
.user-nav__icon-box {
|
||||
position: relative; }
|
||||
.user-nav__icon {
|
||||
height: 2.25rem;
|
||||
width: 2.25rem;
|
||||
fill: var(--color-grey-dark-3); }
|
||||
.user-nav__notification {
|
||||
font-size: 0.8rem;
|
||||
height: 1.75rem;
|
||||
width: 1.75rem;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color-primary);
|
||||
color: white;
|
||||
position: absolute;
|
||||
top: 1.5rem;
|
||||
right: 1.1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center; }
|
||||
.user-nav__user-photo {
|
||||
height: 3.75rem;
|
||||
border-radius: 50%;
|
||||
margin-right: 1rem; }
|
||||
|
||||
.side-nav {
|
||||
font-size: 1.4rem;
|
||||
list-style: none;
|
||||
margin-top: 3.5rem; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.side-nav {
|
||||
display: flex;
|
||||
margin: 0; } }
|
||||
.side-nav__item {
|
||||
position: relative; }
|
||||
.side-nav__item:not(:last-child) {
|
||||
margin-bottom: 0.5rem; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.side-nav__item:not(:last-child) {
|
||||
margin-bottom: 0; } }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.side-nav__item {
|
||||
flex: 1; } }
|
||||
.side-nav__item::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 3px;
|
||||
background-color: var(--color-primary);
|
||||
transform: scaleY(0);
|
||||
transform-origin: center;
|
||||
transition: transform 0.2s, width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s, background-color 0.1s; }
|
||||
.side-nav__item:hover::before, .side-nav__item--active::before {
|
||||
transform: scaleY(1);
|
||||
width: 100%; }
|
||||
.side-nav__item:active::before {
|
||||
background-color: var(--color-primary-light); }
|
||||
.side-nav__link:link, .side-nav__link:visited {
|
||||
color: var(--color-grey-light-1);
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1.5rem 3rem;
|
||||
position: relative;
|
||||
z-index: 10; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.side-nav__link:link, .side-nav__link:visited {
|
||||
justify-content: center;
|
||||
padding: 2rem; } }
|
||||
@media only screen and (max-width: 37.5em) {
|
||||
.side-nav__link:link, .side-nav__link:visited {
|
||||
flex-direction: column;
|
||||
padding: 1rem; } }
|
||||
.side-nav__icon {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
margin-right: 2rem;
|
||||
fill: currentColor; }
|
||||
@media only screen and (max-width: 37.5em) {
|
||||
.side-nav__icon {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0.7rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem; } }
|
||||
|
||||
.legal {
|
||||
font-size: 1.2rem;
|
||||
color: var(--color-grey-light-4);
|
||||
text-align: center;
|
||||
padding: 2.5rem; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.legal {
|
||||
display: none; } }
|
||||
|
||||
.gallery {
|
||||
display: flex; }
|
||||
.gallery__photo {
|
||||
width: 100%;
|
||||
display: block; }
|
||||
|
||||
.overview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: var(--line); }
|
||||
.overview__heading {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
padding: 1.5rem 3rem; }
|
||||
@media only screen and (max-width: 37.5em) {
|
||||
.overview__heading {
|
||||
font-size: 1.8rem;
|
||||
padding: 1.25rem 2rem; } }
|
||||
.overview__stars {
|
||||
margin-right: auto;
|
||||
display: flex; }
|
||||
.overview__icon-star, .overview__icon-location {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
fill: var(--color-primary); }
|
||||
.overview__location {
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
vertical-align: center; }
|
||||
.overview__icon-location {
|
||||
margin-right: 0.5rem; }
|
||||
.overview__rating {
|
||||
background-color: var(--color-primary);
|
||||
color: white;
|
||||
margin-left: 3rem;
|
||||
padding: 0 2.25rem;
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center; }
|
||||
@media only screen and (max-width: 37.5em) {
|
||||
.overview__rating {
|
||||
padding: 0 1.5rem; } }
|
||||
.overview__rating-average {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 300;
|
||||
margin-bottom: -3px; }
|
||||
@media only screen and (max-width: 37.5em) {
|
||||
.overview__rating-average {
|
||||
font-size: 1.8rem; } }
|
||||
.overview__rating-count {
|
||||
font-weight: 0.8rem;
|
||||
text-transform: uppercase; }
|
||||
@media only screen and (max-width: 37.5em) {
|
||||
.overview__rating-count {
|
||||
font-size: 0.5rem; } }
|
||||
|
||||
.btn {
|
||||
position: relative;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
border: none;
|
||||
border-radius: 1000px;
|
||||
background-image: linear-gradient(to right, var(--color-primary-light), var(--color-primary-dark));
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
cursor: pointer; }
|
||||
.btn > * {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transition: all 0.2s; }
|
||||
.btn__visible {
|
||||
padding: 2rem 7.5rem; }
|
||||
.btn__invisible {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -100%;
|
||||
padding: 2rem; }
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(to left, var(--color-primary-light), var(--color-primary-dark)); }
|
||||
.btn:hover .btn__visible {
|
||||
transform: translateY(100%); }
|
||||
.btn:hover .btn__invisible {
|
||||
top: 0; }
|
||||
.btn:focus {
|
||||
outline: none;
|
||||
animation: pulsate 1s infinite; }
|
||||
|
||||
.btn-inline {
|
||||
border: none;
|
||||
color: var(--color-primary);
|
||||
font-size: inherit;
|
||||
border-bottom: 1px solid currentColor;
|
||||
padding-bottom: 2px;
|
||||
display: inline-block;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s; }
|
||||
.btn-inline span {
|
||||
margin-left: 3px;
|
||||
transition: margin-left 0.2s; }
|
||||
.btn-inline:hover {
|
||||
color: var(--color-grey-dark-1); }
|
||||
.btn-inline:hover span {
|
||||
margin-left: 8px; }
|
||||
.btn-inline:focus {
|
||||
outline: none;
|
||||
animation: pulsate 1s infinite; }
|
||||
|
||||
@keyframes pulsate {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
box-shadow: none; }
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.25); }
|
||||
100% {
|
||||
transform: scale(1);
|
||||
box-shadow: none; } }
|
||||
|
||||
.paragraph:not(:last-of-type) {
|
||||
margin-bottom: 2rem; }
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
margin: 3rem 0;
|
||||
padding: 3rem 0;
|
||||
border-top: var(--line);
|
||||
border-bottom: var(--line); }
|
||||
.list__item {
|
||||
flex: 0 0 50%;
|
||||
margin-bottom: 0.7rem; }
|
||||
.list__item::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
margin-right: 0.7rem; }
|
||||
@supports (-webkit-mask-image: url()) or (mask-image: url()) {
|
||||
.list__item::before {
|
||||
background-color: var(--color-primary);
|
||||
mask-image: url("../img/chevron-thin-right.svg");
|
||||
mask-size: cover; } }
|
||||
|
||||
.recommend {
|
||||
font-size: 1.3rem;
|
||||
color: var(--color-grey-dark-3);
|
||||
display: flex;
|
||||
align-items: center; }
|
||||
.recommend__count {
|
||||
margin-right: auto; }
|
||||
.recommend__friends {
|
||||
display: flex; }
|
||||
.recommend__photo {
|
||||
box-sizing: content-box;
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
border-radius: 50%;
|
||||
border: 3px solid white; }
|
||||
.recommend__photo:not(:last-child) {
|
||||
margin-right: -1.5rem; }
|
||||
|
||||
.review {
|
||||
background-color: white;
|
||||
box-shadow: var(--shadow-light);
|
||||
padding: 3rem;
|
||||
margin-bottom: 3.5rem;
|
||||
position: relative;
|
||||
overflow: hidden; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.review {
|
||||
padding: 2rem;
|
||||
margin-bottom: 3rem; } }
|
||||
.review::before {
|
||||
content: "\201C";
|
||||
position: absolute;
|
||||
top: -3.2rem;
|
||||
left: -1rem;
|
||||
font-size: 20rem;
|
||||
font-family: sans-serif;
|
||||
line-height: 1;
|
||||
color: var(--color-grey-light-2);
|
||||
z-index: 1; }
|
||||
.review__text {
|
||||
margin-bottom: 2rem;
|
||||
z-index: 10;
|
||||
position: relative; }
|
||||
.review__user {
|
||||
display: flex;
|
||||
align-items: center; }
|
||||
.review__photo {
|
||||
height: 4.5rem;
|
||||
width: 4.5rem;
|
||||
border-radius: 50%;
|
||||
margin-right: 1.5rem; }
|
||||
.review__user-box {
|
||||
margin-right: auto; }
|
||||
.review__user-name {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.4rem; }
|
||||
.review__user-date {
|
||||
font-size: 1rem;
|
||||
color: var(--color-grey-dark-3); }
|
||||
.review__rating {
|
||||
font-size: 2.2rem;
|
||||
font-weight: 300;
|
||||
color: var(--color-primary); }
|
||||
|
||||
.cta {
|
||||
padding: 3.5rem 0;
|
||||
text-align: center; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.cta {
|
||||
padding: 2.5rem 0; } }
|
||||
.cta__book-now {
|
||||
font-size: 2rem;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 2.5rem; }
|
||||
|
||||
.container {
|
||||
max-width: 120rem;
|
||||
min-height: 50rem;
|
||||
margin: 8rem auto;
|
||||
background-color: var(--color-grey-light-1);
|
||||
box-shadow: var(--shadow-dark); }
|
||||
@media only screen and (max-width: 75em) {
|
||||
.container {
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
width: 100%; } }
|
||||
|
||||
.header {
|
||||
height: 7rem;
|
||||
background-color: #fff;
|
||||
border-bottom: var(--line);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 1.4rem; }
|
||||
@media only screen and (max-width: 68.75em) {
|
||||
.header {
|
||||
flex-wrap: wrap;
|
||||
align-content: space-around;
|
||||
height: 11rem; } }
|
||||
|
||||
.content {
|
||||
display: flex; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.content {
|
||||
flex-direction: column; } }
|
||||
|
||||
.sidebar {
|
||||
background-color: var(--color-grey-dark-1);
|
||||
flex: 0 0 18%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between; }
|
||||
|
||||
.hotel-view {
|
||||
flex: 1;
|
||||
background-color: #fff; }
|
||||
|
||||
.detail {
|
||||
display: flex;
|
||||
padding: 4.5rem;
|
||||
gap: 4.5rem;
|
||||
background-color: var(--color-grey-light-1);
|
||||
border-bottom: 1px solid var(--color-grey-light-2);
|
||||
font-size: 1.4rem; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.detail {
|
||||
padding: 3rem;
|
||||
gap: 3rem; } }
|
||||
@media only screen and (max-width: 37.5em) {
|
||||
.detail {
|
||||
flex-direction: column;
|
||||
gap: 0; } }
|
||||
|
||||
.description {
|
||||
background-color: white;
|
||||
box-shadow: var(--shadow-light);
|
||||
padding: 3rem;
|
||||
flex: 0 0 60%; }
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
.description {
|
||||
padding: 2rem; } }
|
||||
@media only screen and (max-width: 37.5em) {
|
||||
.description {
|
||||
margin-bottom: 3rem; } }
|
||||
|
||||
.user-reviews {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center; }
|
||||
Executable → Regular
+11
-97
@@ -1,120 +1,34 @@
|
||||
<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<symbol id="icon-bookmark" viewBox="0 0 20 20">
|
||||
<title>bookmark</title>
|
||||
<path class="path1" d="M14 2v17l-4-4-4 4v-17c0-0.553 0.585-1.020 1-1h6c0.689-0.020 1 0.447 1 1z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-down" viewBox="0 0 20 20">
|
||||
<title>chevron-down</title>
|
||||
<path class="path1" d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-left" viewBox="0 0 20 20">
|
||||
<title>chevron-left</title>
|
||||
<path class="path1" d="M12.452 4.516c0.446 0.436 0.481 1.043 0 1.576l-3.747 3.908 3.747 3.908c0.481 0.533 0.446 1.141 0 1.574-0.445 0.436-1.197 0.408-1.615 0-0.418-0.406-4.502-4.695-4.502-4.695-0.223-0.217-0.335-0.502-0.335-0.787s0.112-0.57 0.335-0.789c0 0 4.084-4.287 4.502-4.695s1.17-0.436 1.615 0z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-right" viewBox="0 0 20 20">
|
||||
<title>chevron-right</title>
|
||||
<path class="path1" d="M9.163 4.516c0.418 0.408 4.502 4.695 4.502 4.695 0.223 0.219 0.335 0.504 0.335 0.789s-0.112 0.57-0.335 0.787c0 0-4.084 4.289-4.502 4.695-0.418 0.408-1.17 0.436-1.615 0-0.446-0.434-0.481-1.041 0-1.574l3.747-3.908-3.747-3.908c-0.481-0.533-0.446-1.141 0-1.576s1.197-0.409 1.615 0z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-thin-down" viewBox="0 0 20 20">
|
||||
<title>chevron-thin-down</title>
|
||||
<path class="path1" d="M17.418 6.109c0.272-0.268 0.709-0.268 0.979 0s0.271 0.701 0 0.969l-7.908 7.83c-0.27 0.268-0.707 0.268-0.979 0l-7.908-7.83c-0.27-0.268-0.27-0.701 0-0.969s0.709-0.268 0.979 0l7.419 7.141 7.418-7.141z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-thin-left" viewBox="0 0 20 20">
|
||||
<title>chevron-thin-left</title>
|
||||
<path class="path1" d="M13.891 17.418c0.268 0.272 0.268 0.709 0 0.979s-0.701 0.271-0.969 0l-7.83-7.908c-0.268-0.27-0.268-0.707 0-0.979l7.83-7.908c0.268-0.27 0.701-0.27 0.969 0s0.268 0.709 0 0.979l-7.141 7.419 7.141 7.418z"></path>
|
||||
<path d="M14 2v17l-4-4-4 4v-17c0-0.553 0.585-1.020 1-1h6c0.689-0.020 1 0.447 1 1z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-thin-right" viewBox="0 0 20 20">
|
||||
<title>chevron-thin-right</title>
|
||||
<path class="path1" d="M13.25 10l-7.141-7.42c-0.268-0.27-0.268-0.707 0-0.979 0.268-0.27 0.701-0.27 0.969 0l7.83 7.908c0.268 0.271 0.268 0.709 0 0.979l-7.83 7.908c-0.268 0.271-0.701 0.27-0.969 0s-0.268-0.707 0-0.979l7.141-7.417z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-thin-up" viewBox="0 0 20 20">
|
||||
<title>chevron-thin-up</title>
|
||||
<path class="path1" d="M2.582 13.891c-0.272 0.268-0.709 0.268-0.979 0s-0.271-0.701 0-0.969l7.908-7.83c0.27-0.268 0.707-0.268 0.979 0l7.908 7.83c0.27 0.268 0.27 0.701 0 0.969s-0.709 0.268-0.978 0l-7.42-7.141-7.418 7.141z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-up" viewBox="0 0 20 20">
|
||||
<title>chevron-up</title>
|
||||
<path class="path1" d="M15.484 12.452c-0.436 0.446-1.043 0.481-1.576 0l-3.908-3.747-3.908 3.747c-0.533 0.481-1.141 0.446-1.574 0-0.436-0.445-0.408-1.197 0-1.615 0.406-0.418 4.695-4.502 4.695-4.502 0.217-0.223 0.502-0.335 0.787-0.335s0.57 0.112 0.789 0.335c0 0 4.287 4.084 4.695 4.502s0.436 1.17 0 1.615z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-cloud" viewBox="0 0 20 20">
|
||||
<title>cloud</title>
|
||||
<path class="path1" d="M20 11.32c0 2.584-2.144 4.68-4.787 4.68h-11.596c-1.998 0-3.617-1.584-3.617-3.537 0-1.951 1.619-3.535 3.617-3.535 0.146 0 0.288 0.012 0.429 0.027-0.037-0.246-0.057-0.498-0.057-0.756 0-2.871 2.381-5.199 5.32-5.199 2.407 0 4.439 1.562 5.096 3.707 0.263-0.043 0.532-0.066 0.809-0.066 2.642 0 4.786 2.093 4.786 4.679z"></path>
|
||||
<path d="M13.25 10l-7.141-7.42c-0.268-0.27-0.268-0.707 0-0.979 0.268-0.27 0.701-0.27 0.969 0l7.83 7.908c0.268 0.271 0.268 0.709 0 0.979l-7.83 7.908c-0.268 0.271-0.701 0.27-0.969 0s-0.268-0.707 0-0.979l7.141-7.417z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-aircraft-take-off" viewBox="0 0 20 20">
|
||||
<title>aircraft-take-off</title>
|
||||
<path class="path1" d="M19.87 6.453c0.119 0.257 0.127 1.29-4.884 3.642l-4.913 2.306c-1.71 0.803-4.191 1.859-5.285 2.151-0.766 0.204-1.497-0.316-1.497-0.316s-2.206-1.975-2.792-2.419c-0.585-0.444-0.535-0.67 0.215-0.91 0.467-0.149 3.13 0.493 4.265 0.78 1.339-0.8 2.562-1.486 3.141-1.798-1.396-1.033-4.008-2.962-4.841-3.55-0.799-0.565 0.010-0.768 0.010-0.768 0.368-0.099 1.162-0.228 1.562-0.144 2.721 0.569 7.263 2.071 7.611 2.186 0.832-0.436 2.128-1.092 2.922-1.465 2.075-0.974 4.327-0.037 4.486 0.305z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-bell" viewBox="0 0 20 20">
|
||||
<title>bell</title>
|
||||
<path class="path1" d="M14.65 8.512c-2.28-4.907-3.466-6.771-7.191-6.693-1.327 0.027-1.009-0.962-2.021-0.587-1.010 0.375-0.143 0.924-1.177 1.773-2.902 2.383-2.635 4.587-1.289 9.84 0.567 2.213-1.367 2.321-0.602 4.465 0.559 1.564 4.679 2.219 9.025 0.607s7.086-4.814 6.527-6.378c-0.765-2.145-2.311-0.961-3.272-3.027zM10.924 16.595c-3.882 1.44-7.072 0.594-7.207 0.217-0.232-0.65 1.253-2.816 5.691-4.463s6.915-1.036 7.174-0.311c0.153 0.429-1.775 3.116-5.658 4.557zM9.676 13.101c-2.029 0.753-3.439 1.614-4.353 2.389 0.643 0.584 1.847 0.726 3.046 0.281 1.527-0.565 2.466-1.866 2.095-2.904-0.005-0.013-0.011-0.023-0.016-0.036-0.251 0.082-0.508 0.171-0.772 0.27z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-calendar" viewBox="0 0 20 20">
|
||||
<title>calendar</title>
|
||||
<path class="path1" d="M17 3h-1v2h-3v-2h-6v2h-3v-2h-1c-1.101 0-2 0.9-2 2v12c0 1.1 0.899 2 2 2h14c1.1 0 2-0.9 2-2v-12c0-1.1-0.9-2-2-2zM17 17h-14v-8h14v8zM6.5 1h-2v3.5h2v-3.5zM15.5 1h-2v3.5h2v-3.5z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-camera" viewBox="0 0 20 20">
|
||||
<title>camera</title>
|
||||
<path class="path1" d="M10 8c-1.657 0-3 1.344-3 3s1.343 3 3 3c1.656 0 3-1.344 3-3s-1.344-3-3-3zM18 5h-2.4c-0.33 0-0.686-0.256-0.789-0.57l-0.621-1.861c-0.105-0.313-0.459-0.569-0.79-0.569h-6.8c-0.33 0-0.686 0.256-0.789 0.568l-0.622 1.862c-0.104 0.314-0.459 0.57-0.789 0.57h-2.4c-1.1 0-2 0.9-2 2v9c0 1.1 0.9 2 2 2h16c1.1 0 2-0.9 2-2v-9c0-1.1-0.9-2-2-2zM10 16c-2.762 0-5-2.238-5-5s2.238-5 5-5c2.761 0 5 2.238 5 5s-2.239 5-5 5zM17.5 8.2c-0.387 0-0.7-0.314-0.7-0.701 0-0.385 0.313-0.7 0.7-0.7s0.7 0.314 0.7 0.7c0 0.387-0.313 0.701-0.7 0.701z"></path>
|
||||
<path d="M19.87 6.453c0.119 0.257 0.127 1.29-4.884 3.642l-4.913 2.306c-1.71 0.803-4.191 1.859-5.285 2.151-0.766 0.204-1.497-0.316-1.497-0.316s-2.206-1.975-2.792-2.419c-0.585-0.444-0.535-0.67 0.215-0.91 0.467-0.149 3.13 0.493 4.265 0.78 1.339-0.8 2.562-1.486 3.141-1.798-1.396-1.033-4.008-2.962-4.841-3.55-0.799-0.565 0.010-0.768 0.010-0.768 0.368-0.099 1.162-0.228 1.562-0.144 2.721 0.569 7.263 2.071 7.611 2.186 0.832-0.436 2.128-1.092 2.922-1.465 2.075-0.974 4.327-0.037 4.486 0.305z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chat" viewBox="0 0 20 20">
|
||||
<title>chat</title>
|
||||
<path class="path1" d="M5.8 12.2v-6.2h-3.8c-1.1 0-2 0.9-2 2v6c0 1.1 0.9 2 2 2h1v3l3-3h5c1.1 0 2-0.9 2-2v-1.82c-0.064 0.014-0.132 0.021-0.2 0.021l-7-0.001zM18 1h-9c-1.1 0-2 0.9-2 2v8h7l3 3v-3h1c1.1 0 2-0.899 2-2v-6c0-1.1-0.9-2-2-2z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-cog" viewBox="0 0 20 20">
|
||||
<title>cog</title>
|
||||
<path class="path1" d="M16.783 10c0-1.049 0.646-1.875 1.617-2.443-0.176-0.584-0.407-1.145-0.692-1.672-1.089 0.285-1.97-0.141-2.711-0.883-0.741-0.74-0.968-1.621-0.683-2.711-0.527-0.285-1.088-0.518-1.672-0.691-0.568 0.97-1.595 1.615-2.642 1.615-1.048 0-2.074-0.645-2.643-1.615-0.585 0.173-1.144 0.406-1.671 0.691 0.285 1.090 0.059 1.971-0.684 2.711-0.74 0.742-1.621 1.168-2.711 0.883-0.285 0.527-0.517 1.088-0.691 1.672 0.97 0.568 1.615 1.394 1.615 2.443 0 1.047-0.645 2.074-1.615 2.643 0.175 0.584 0.406 1.144 0.691 1.672 1.090-0.285 1.971-0.059 2.711 0.682s0.969 1.623 0.684 2.711c0.527 0.285 1.087 0.518 1.672 0.693 0.568-0.973 1.595-1.617 2.643-1.617 1.047 0 2.074 0.645 2.643 1.617 0.584-0.176 1.144-0.408 1.672-0.693-0.285-1.088-0.059-1.969 0.683-2.711 0.741-0.74 1.622-1.166 2.711-0.883 0.285-0.527 0.517-1.086 0.692-1.672-0.973-0.569-1.619-1.395-1.619-2.442zM10 13.652c-2.018 0-3.653-1.635-3.653-3.652 0-2.018 1.636-3.654 3.653-3.654s3.652 1.637 3.652 3.654c0 2.018-1.634 3.652-3.652 3.652z"></path>
|
||||
<path d="M5.8 12.2v-6.2h-3.8c-1.1 0-2 0.9-2 2v6c0 1.1 0.9 2 2 2h1v3l3-3h5c1.1 0 2-0.9 2-2v-1.82c-0.064 0.014-0.132 0.021-0.2 0.021l-7-0.001zM18 1h-9c-1.1 0-2 0.9-2 2v8h7l3 3v-3h1c1.1 0 2-0.899 2-2v-6c0-1.1-0.9-2-2-2z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-home" viewBox="0 0 20 20">
|
||||
<title>home</title>
|
||||
<path class="path1" d="M18.672 11h-1.672v6c0 0.445-0.194 1-1 1h-4v-6h-4v6h-4c-0.806 0-1-0.555-1-1v-6h-1.672c-0.598 0-0.47-0.324-0.060-0.748l8.024-8.032c0.195-0.202 0.451-0.302 0.708-0.312 0.257 0.010 0.513 0.109 0.708 0.312l8.023 8.031c0.411 0.425 0.539 0.749-0.059 0.749z"></path>
|
||||
<path d="M18.672 11h-1.672v6c0 0.445-0.194 1-1 1h-4v-6h-4v6h-4c-0.806 0-1-0.555-1-1v-6h-1.672c-0.598 0-0.47-0.324-0.060-0.748l8.024-8.032c0.195-0.202 0.451-0.302 0.708-0.312 0.257 0.010 0.513 0.109 0.708 0.312l8.023 8.031c0.411 0.425 0.539 0.749-0.059 0.749z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-key" viewBox="0 0 20 20">
|
||||
<title>key</title>
|
||||
<path class="path1" d="M17.691 4.725c-0.503-2.977-3.22-4.967-6.069-4.441s-5.256 2.816-4.753 5.795c0.107 0.641 0.408 1.644 0.763 2.365l-5.175 7.723c-0.191 0.285-0.299 0.799-0.242 1.141l0.333 1.971c0.058 0.342 0.372 0.572 0.7 0.514l1.516-0.281c0.328-0.059 0.744-0.348 0.924-0.639l2.047-3.311 0.018-0.022 1.386-0.256 2.39-3.879c0.785 0.139 1.912 0.092 2.578-0.031 2.848-0.526 4.087-3.67 3.584-6.649zM15.166 6.252c-0.784 1.17-1.584 0.346-2.703-0.475-1.119-0.818-2.135-1.322-1.352-2.492s2.326-1.455 3.447-0.635c1.12 0.819 1.391 2.432 0.608 3.602z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-light-up" viewBox="0 0 20 20">
|
||||
<title>light-up</title>
|
||||
<path class="path1" d="M19 9.199c-0.182 0-0.799 0-0.98 0-0.553 0-1 0.359-1 0.801s0.447 0.799 1 0.799c0.182 0 0.799 0 0.98 0 0.552 0 1-0.357 1-0.799 0-0.441-0.449-0.801-1-0.801zM10 4.5c-3.051 0-5.5 2.449-5.5 5.5s2.449 5.5 5.5 5.5c3.050 0 5.5-2.449 5.5-5.5s-2.451-5.5-5.5-5.5zM10 14c-2.211 0-4-1.791-4-4 0-2.211 1.789-4 4-4 2.209 0 4 1.789 4 4 0 2.209-1.791 4-4 4zM3 10c0-0.441-0.449-0.801-1-0.801-0.185 0-0.816 0-1 0-0.553 0-1 0.359-1 0.801s0.447 0.799 1 0.799c0.184 0 0.815 0 1 0 0.551 0 1-0.358 1-0.799zM10 3c0.441 0 0.799-0.447 0.799-1 0-0.184 0-0.816 0-1 0-0.553-0.358-1-0.799-1s-0.801 0.447-0.801 1c0 0.184 0 0.816 0 1 0 0.553 0.359 1 0.801 1zM10 17c-0.442 0-0.801 0.447-0.801 1 0 0.184 0 0.816 0 1 0 0.553 0.359 1 0.801 1s0.799-0.447 0.799-1c0-0.184 0-0.816 0-1 0-0.553-0.358-1-0.799-1zM17.365 3.766c0.391-0.391 0.454-0.961 0.142-1.273s-0.883-0.248-1.272 0.143c-0.108 0.107-0.593 0.592-0.7 0.699-0.391 0.391-0.454 0.961-0.142 1.273s0.883 0.248 1.273-0.143c0.107-0.108 0.591-0.592 0.699-0.699zM3.334 15.533c-0.108 0.109-0.593 0.594-0.7 0.701-0.391 0.391-0.454 0.959-0.142 1.271s0.883 0.25 1.272-0.141c0.108-0.107 0.593-0.592 0.7-0.699 0.391-0.391 0.454-0.961 0.142-1.274s-0.883-0.247-1.272 0.142zM3.765 2.635c-0.39-0.391-0.961-0.455-1.273-0.143s-0.248 0.883 0.141 1.274c0.108 0.107 0.593 0.592 0.7 0.699 0.391 0.391 0.96 0.455 1.272 0.143s0.249-0.883-0.141-1.273c-0.107-0.108-0.591-0.593-0.699-0.7zM15.534 16.666c0.108 0.107 0.593 0.592 0.7 0.699 0.391 0.391 0.96 0.453 1.272 0.143 0.312-0.312 0.249-0.883-0.142-1.273-0.107-0.107-0.592-0.592-0.699-0.699-0.391-0.391-0.961-0.455-1.274-0.143s-0.248 0.882 0.143 1.273z"></path>
|
||||
<path d="M17.691 4.725c-0.503-2.977-3.22-4.967-6.069-4.441s-5.256 2.816-4.753 5.795c0.107 0.641 0.408 1.644 0.763 2.365l-5.175 7.723c-0.191 0.285-0.299 0.799-0.242 1.141l0.333 1.971c0.058 0.342 0.372 0.572 0.7 0.514l1.516-0.281c0.328-0.059 0.744-0.348 0.924-0.639l2.047-3.311 0.018-0.022 1.386-0.256 2.39-3.879c0.785 0.139 1.912 0.092 2.578-0.031 2.848-0.526 4.087-3.67 3.584-6.649zM15.166 6.252c-0.784 1.17-1.584 0.346-2.703-0.475-1.119-0.818-2.135-1.322-1.352-2.492s2.326-1.455 3.447-0.635c1.12 0.819 1.391 2.432 0.608 3.602z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-location-pin" viewBox="0 0 20 20">
|
||||
<title>location-pin</title>
|
||||
<path class="path1" d="M10 2.009c-2.762 0-5 2.229-5 4.99 0 4.774 5 11 5 11s5-6.227 5-11c0-2.76-2.238-4.99-5-4.99zM10 9.76c-1.492 0-2.7-1.209-2.7-2.7s1.208-2.7 2.7-2.7c1.49 0 2.699 1.209 2.699 2.7s-1.209 2.7-2.699 2.7z"></path>
|
||||
<path d="M10 2.009c-2.762 0-5 2.229-5 4.99 0 4.774 5 11 5 11s5-6.227 5-11c0-2.76-2.238-4.99-5-4.99zM10 9.76c-1.492 0-2.7-1.209-2.7-2.7s1.208-2.7 2.7-2.7c1.49 0 2.699 1.209 2.699 2.7s-1.209 2.7-2.699 2.7z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-magnifying-glass" viewBox="0 0 20 20">
|
||||
<title>magnifying-glass</title>
|
||||
<path class="path1" d="M17.545 15.467l-3.779-3.779c0.57-0.935 0.898-2.035 0.898-3.21 0-3.417-2.961-6.377-6.378-6.377s-6.186 2.769-6.186 6.186c0 3.416 2.961 6.377 6.377 6.377 1.137 0 2.2-0.309 3.115-0.844l3.799 3.801c0.372 0.371 0.975 0.371 1.346 0l0.943-0.943c0.371-0.371 0.236-0.84-0.135-1.211zM4.004 8.287c0-2.366 1.917-4.283 4.282-4.283s4.474 2.107 4.474 4.474c0 2.365-1.918 4.283-4.283 4.283s-4.473-2.109-4.473-4.474z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-mail" viewBox="0 0 20 20">
|
||||
<title>mail</title>
|
||||
<path class="path1" d="M1.574 5.286c0.488 0.262 7.248 3.894 7.5 4.029s0.578 0.199 0.906 0.199c0.328 0 0.654-0.064 0.906-0.199s7.012-3.767 7.5-4.029c0.489-0.263 0.951-1.286 0.054-1.286h-16.919c-0.897 0-0.435 1.023 0.053 1.286zM18.613 7.489c-0.555 0.289-7.387 3.849-7.727 4.027s-0.578 0.199-0.906 0.199-0.566-0.021-0.906-0.199-7.133-3.739-7.688-4.028c-0.39-0.204-0.386 0.035-0.386 0.219s0 7.293 0 7.293c0 0.42 0.566 1 1 1h16c0.434 0 1-0.58 1-1 0 0 0-7.108 0-7.292s0.004-0.423-0.387-0.219z"></path>
|
||||
<path d="M17.545 15.467l-3.779-3.779c0.57-0.935 0.898-2.035 0.898-3.21 0-3.417-2.961-6.377-6.378-6.377s-6.186 2.769-6.186 6.186c0 3.416 2.961 6.377 6.377 6.377 1.137 0 2.2-0.309 3.115-0.844l3.799 3.801c0.372 0.371 0.975 0.371 1.346 0l0.943-0.943c0.371-0.371 0.236-0.84-0.135-1.211zM4.004 8.287c0-2.366 1.917-4.283 4.282-4.283s4.474 2.107 4.474 4.474c0 2.365-1.918 4.283-4.283 4.283s-4.473-2.109-4.473-4.474z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-map" viewBox="0 0 20 20">
|
||||
<title>map</title>
|
||||
<path class="path1" d="M19.447 3.718l-6-3c-0.281-0.141-0.613-0.141-0.895 0l-5.63 2.815-5.606-1.869c-0.306-0.102-0.64-0.051-0.901 0.138s-0.415 0.49-0.415 0.811v13.001c0 0.379 0.214 0.725 0.553 0.894l6 3c0.141 0.070 0.294 0.106 0.447 0.106s0.307-0.035 0.447-0.106l5.63-2.814 5.606 1.869c0.305 0.1 0.64 0.049 0.901-0.139s0.415-0.49 0.415-0.81v-13.002c0.001-0.379-0.213-0.725-0.552-0.894zM8 5.231l4-2v11.763l-4 2v-11.763zM2 4l4 1.333v11.661l-4-2v-10.994zM18 16.227l-4-1.334v-11.662l4 2v10.996z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-squared-cross" viewBox="0 0 20 20">
|
||||
<title>squared-cross</title>
|
||||
<path class="path1" d="M16 2h-12c-1.1 0-2 0.9-2 2v12c0 1.1 0.9 2 2 2h12c1.1 0 2-0.9 2-2v-12c0-1.1-0.9-2-2-2zM13.061 14.789l-3.061-3.060-3.061 3.060-1.729-1.728 3.061-3.061-3.060-3.061 1.729-1.729 3.060 3.061 3.059-3.061 1.729 1.729-3.059 3.061 3.060 3.061-1.728 1.728z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-star-outlined" viewBox="0 0 20 20">
|
||||
<title>star-outlined</title>
|
||||
<path class="path1" d="M18.8 8.022h-6.413l-2.387-6.722-2.389 6.722h-6.412l5.232 3.947-1.871 6.929 5.44-4.154 5.438 4.154-1.869-6.929 5.231-3.947zM10 12.783l-3.014 2.5 1.243-3.562-2.851-2.3 3.522 0.101 1.1-4.040 1.099 4.040 3.521-0.101-2.851 2.3 1.243 3.562-3.012-2.5z"></path>
|
||||
<path d="M19.447 3.718l-6-3c-0.281-0.141-0.613-0.141-0.895 0l-5.63 2.815-5.606-1.869c-0.306-0.102-0.64-0.051-0.901 0.138s-0.415 0.49-0.415 0.811v13.001c0 0.379 0.214 0.725 0.553 0.894l6 3c0.141 0.070 0.294 0.106 0.447 0.106s0.307-0.035 0.447-0.106l5.63-2.814 5.606 1.869c0.305 0.1 0.64 0.049 0.901-0.139s0.415-0.49 0.415-0.81v-13.002c0.001-0.379-0.213-0.725-0.552-0.894zM8 5.231l4-2v11.763l-4 2v-11.763zM2 4l4 1.333v11.661l-4-2v-10.994zM18 16.227l-4-1.334v-11.662l4 2v10.996z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-star" viewBox="0 0 20 20">
|
||||
<title>star</title>
|
||||
<path class="path1" d="M10 1.3l2.388 6.722h6.412l-5.232 3.948 1.871 6.928-5.439-4.154-5.438 4.154 1.87-6.928-5.233-3.948h6.412l2.389-6.722z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-user" viewBox="0 0 20 20">
|
||||
<title>user</title>
|
||||
<path class="path1" d="M7.725 2.146c-1.016 0.756-1.289 1.953-1.239 2.59 0.064 0.779 0.222 1.793 0.222 1.793s-0.313 0.17-0.313 0.854c0.109 1.717 0.683 0.976 0.801 1.729 0.284 1.814 0.933 1.491 0.933 2.481 0 1.649-0.68 2.42-2.803 3.334-2.13 0.918-4.326 2.073-4.326 4.073v1h18v-1c0-2-2.197-3.155-4.328-4.072-2.123-0.914-2.801-1.684-2.801-3.334 0-0.99 0.647-0.667 0.932-2.481 0.119-0.753 0.692-0.012 0.803-1.729 0-0.684-0.314-0.854-0.314-0.854s0.158-1.014 0.221-1.793c0.065-0.817-0.398-2.561-2.3-3.096-0.333-0.34-0.558-0.881 0.466-1.424-2.24-0.105-2.761 1.067-3.954 1.929z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-facebook" viewBox="0 0 20 20">
|
||||
<title>facebook</title>
|
||||
<path class="path1" d="M17 1h-14c-1.1 0-2 0.9-2 2v14c0 1.101 0.9 2 2 2h7v-7h-2v-2.475h2v-2.050c0-2.164 1.212-3.684 3.766-3.684l1.803 0.002v2.605h-1.197c-0.994 0-1.372 0.746-1.372 1.438v1.69h2.568l-0.568 2.474h-2v7h4c1.1 0 2-0.899 2-2v-14c0-1.1-0.9-2-2-2z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-instagram" viewBox="0 0 20 20">
|
||||
<title>instagram</title>
|
||||
<path class="path1" d="M17 1h-14c-1.1 0-2 0.9-2 2v14c0 1.101 0.9 2 2 2h14c1.1 0 2-0.899 2-2v-14c0-1.1-0.9-2-2-2zM9.984 15.523c3.059 0 5.538-2.481 5.538-5.539 0-0.338-0.043-0.664-0.103-0.984h1.581v7.216c0 0.382-0.31 0.69-0.693 0.69h-12.614c-0.383 0-0.693-0.308-0.693-0.69v-7.216h1.549c-0.061 0.32-0.104 0.646-0.104 0.984 0 3.059 2.481 5.539 5.539 5.539zM6.523 9.984c0-1.912 1.55-3.461 3.462-3.461s3.462 1.549 3.462 3.461-1.551 3.462-3.462 3.462c-1.913 0-3.462-1.55-3.462-3.462zM16.307 6h-1.615c-0.382 0-0.692-0.312-0.692-0.692v-1.617c0-0.382 0.31-0.691 0.691-0.691h1.615c0.384 0 0.694 0.309 0.694 0.691v1.616c0 0.381-0.31 0.693-0.693 0.693z"></path>
|
||||
<path d="M10 1.3l2.388 6.722h6.412l-5.232 3.948 1.871 6.928-5.439-4.154-5.438 4.154 1.87-6.928-5.233-3.948h6.412l2.389-6.722z"></path>
|
||||
</symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 3.8 KiB |
Executable
+120
@@ -0,0 +1,120 @@
|
||||
<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<symbol id="icon-bookmark" viewBox="0 0 20 20">
|
||||
<title>bookmark</title>
|
||||
<path class="path1" d="M14 2v17l-4-4-4 4v-17c0-0.553 0.585-1.020 1-1h6c0.689-0.020 1 0.447 1 1z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-down" viewBox="0 0 20 20">
|
||||
<title>chevron-down</title>
|
||||
<path class="path1" d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-left" viewBox="0 0 20 20">
|
||||
<title>chevron-left</title>
|
||||
<path class="path1" d="M12.452 4.516c0.446 0.436 0.481 1.043 0 1.576l-3.747 3.908 3.747 3.908c0.481 0.533 0.446 1.141 0 1.574-0.445 0.436-1.197 0.408-1.615 0-0.418-0.406-4.502-4.695-4.502-4.695-0.223-0.217-0.335-0.502-0.335-0.787s0.112-0.57 0.335-0.789c0 0 4.084-4.287 4.502-4.695s1.17-0.436 1.615 0z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-right" viewBox="0 0 20 20">
|
||||
<title>chevron-right</title>
|
||||
<path class="path1" d="M9.163 4.516c0.418 0.408 4.502 4.695 4.502 4.695 0.223 0.219 0.335 0.504 0.335 0.789s-0.112 0.57-0.335 0.787c0 0-4.084 4.289-4.502 4.695-0.418 0.408-1.17 0.436-1.615 0-0.446-0.434-0.481-1.041 0-1.574l3.747-3.908-3.747-3.908c-0.481-0.533-0.446-1.141 0-1.576s1.197-0.409 1.615 0z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-thin-down" viewBox="0 0 20 20">
|
||||
<title>chevron-thin-down</title>
|
||||
<path class="path1" d="M17.418 6.109c0.272-0.268 0.709-0.268 0.979 0s0.271 0.701 0 0.969l-7.908 7.83c-0.27 0.268-0.707 0.268-0.979 0l-7.908-7.83c-0.27-0.268-0.27-0.701 0-0.969s0.709-0.268 0.979 0l7.419 7.141 7.418-7.141z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-thin-left" viewBox="0 0 20 20">
|
||||
<title>chevron-thin-left</title>
|
||||
<path class="path1" d="M13.891 17.418c0.268 0.272 0.268 0.709 0 0.979s-0.701 0.271-0.969 0l-7.83-7.908c-0.268-0.27-0.268-0.707 0-0.979l7.83-7.908c0.268-0.27 0.701-0.27 0.969 0s0.268 0.709 0 0.979l-7.141 7.419 7.141 7.418z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-thin-right" viewBox="0 0 20 20">
|
||||
<title>chevron-thin-right</title>
|
||||
<path class="path1" d="M13.25 10l-7.141-7.42c-0.268-0.27-0.268-0.707 0-0.979 0.268-0.27 0.701-0.27 0.969 0l7.83 7.908c0.268 0.271 0.268 0.709 0 0.979l-7.83 7.908c-0.268 0.271-0.701 0.27-0.969 0s-0.268-0.707 0-0.979l7.141-7.417z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-thin-up" viewBox="0 0 20 20">
|
||||
<title>chevron-thin-up</title>
|
||||
<path class="path1" d="M2.582 13.891c-0.272 0.268-0.709 0.268-0.979 0s-0.271-0.701 0-0.969l7.908-7.83c0.27-0.268 0.707-0.268 0.979 0l7.908 7.83c0.27 0.268 0.27 0.701 0 0.969s-0.709 0.268-0.978 0l-7.42-7.141-7.418 7.141z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-up" viewBox="0 0 20 20">
|
||||
<title>chevron-up</title>
|
||||
<path class="path1" d="M15.484 12.452c-0.436 0.446-1.043 0.481-1.576 0l-3.908-3.747-3.908 3.747c-0.533 0.481-1.141 0.446-1.574 0-0.436-0.445-0.408-1.197 0-1.615 0.406-0.418 4.695-4.502 4.695-4.502 0.217-0.223 0.502-0.335 0.787-0.335s0.57 0.112 0.789 0.335c0 0 4.287 4.084 4.695 4.502s0.436 1.17 0 1.615z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-cloud" viewBox="0 0 20 20">
|
||||
<title>cloud</title>
|
||||
<path class="path1" d="M20 11.32c0 2.584-2.144 4.68-4.787 4.68h-11.596c-1.998 0-3.617-1.584-3.617-3.537 0-1.951 1.619-3.535 3.617-3.535 0.146 0 0.288 0.012 0.429 0.027-0.037-0.246-0.057-0.498-0.057-0.756 0-2.871 2.381-5.199 5.32-5.199 2.407 0 4.439 1.562 5.096 3.707 0.263-0.043 0.532-0.066 0.809-0.066 2.642 0 4.786 2.093 4.786 4.679z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-aircraft-take-off" viewBox="0 0 20 20">
|
||||
<title>aircraft-take-off</title>
|
||||
<path class="path1" d="M19.87 6.453c0.119 0.257 0.127 1.29-4.884 3.642l-4.913 2.306c-1.71 0.803-4.191 1.859-5.285 2.151-0.766 0.204-1.497-0.316-1.497-0.316s-2.206-1.975-2.792-2.419c-0.585-0.444-0.535-0.67 0.215-0.91 0.467-0.149 3.13 0.493 4.265 0.78 1.339-0.8 2.562-1.486 3.141-1.798-1.396-1.033-4.008-2.962-4.841-3.55-0.799-0.565 0.010-0.768 0.010-0.768 0.368-0.099 1.162-0.228 1.562-0.144 2.721 0.569 7.263 2.071 7.611 2.186 0.832-0.436 2.128-1.092 2.922-1.465 2.075-0.974 4.327-0.037 4.486 0.305z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-bell" viewBox="0 0 20 20">
|
||||
<title>bell</title>
|
||||
<path class="path1" d="M14.65 8.512c-2.28-4.907-3.466-6.771-7.191-6.693-1.327 0.027-1.009-0.962-2.021-0.587-1.010 0.375-0.143 0.924-1.177 1.773-2.902 2.383-2.635 4.587-1.289 9.84 0.567 2.213-1.367 2.321-0.602 4.465 0.559 1.564 4.679 2.219 9.025 0.607s7.086-4.814 6.527-6.378c-0.765-2.145-2.311-0.961-3.272-3.027zM10.924 16.595c-3.882 1.44-7.072 0.594-7.207 0.217-0.232-0.65 1.253-2.816 5.691-4.463s6.915-1.036 7.174-0.311c0.153 0.429-1.775 3.116-5.658 4.557zM9.676 13.101c-2.029 0.753-3.439 1.614-4.353 2.389 0.643 0.584 1.847 0.726 3.046 0.281 1.527-0.565 2.466-1.866 2.095-2.904-0.005-0.013-0.011-0.023-0.016-0.036-0.251 0.082-0.508 0.171-0.772 0.27z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-calendar" viewBox="0 0 20 20">
|
||||
<title>calendar</title>
|
||||
<path class="path1" d="M17 3h-1v2h-3v-2h-6v2h-3v-2h-1c-1.101 0-2 0.9-2 2v12c0 1.1 0.899 2 2 2h14c1.1 0 2-0.9 2-2v-12c0-1.1-0.9-2-2-2zM17 17h-14v-8h14v8zM6.5 1h-2v3.5h2v-3.5zM15.5 1h-2v3.5h2v-3.5z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-camera" viewBox="0 0 20 20">
|
||||
<title>camera</title>
|
||||
<path class="path1" d="M10 8c-1.657 0-3 1.344-3 3s1.343 3 3 3c1.656 0 3-1.344 3-3s-1.344-3-3-3zM18 5h-2.4c-0.33 0-0.686-0.256-0.789-0.57l-0.621-1.861c-0.105-0.313-0.459-0.569-0.79-0.569h-6.8c-0.33 0-0.686 0.256-0.789 0.568l-0.622 1.862c-0.104 0.314-0.459 0.57-0.789 0.57h-2.4c-1.1 0-2 0.9-2 2v9c0 1.1 0.9 2 2 2h16c1.1 0 2-0.9 2-2v-9c0-1.1-0.9-2-2-2zM10 16c-2.762 0-5-2.238-5-5s2.238-5 5-5c2.761 0 5 2.238 5 5s-2.239 5-5 5zM17.5 8.2c-0.387 0-0.7-0.314-0.7-0.701 0-0.385 0.313-0.7 0.7-0.7s0.7 0.314 0.7 0.7c0 0.387-0.313 0.701-0.7 0.701z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chat" viewBox="0 0 20 20">
|
||||
<title>chat</title>
|
||||
<path class="path1" d="M5.8 12.2v-6.2h-3.8c-1.1 0-2 0.9-2 2v6c0 1.1 0.9 2 2 2h1v3l3-3h5c1.1 0 2-0.9 2-2v-1.82c-0.064 0.014-0.132 0.021-0.2 0.021l-7-0.001zM18 1h-9c-1.1 0-2 0.9-2 2v8h7l3 3v-3h1c1.1 0 2-0.899 2-2v-6c0-1.1-0.9-2-2-2z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-cog" viewBox="0 0 20 20">
|
||||
<title>cog</title>
|
||||
<path class="path1" d="M16.783 10c0-1.049 0.646-1.875 1.617-2.443-0.176-0.584-0.407-1.145-0.692-1.672-1.089 0.285-1.97-0.141-2.711-0.883-0.741-0.74-0.968-1.621-0.683-2.711-0.527-0.285-1.088-0.518-1.672-0.691-0.568 0.97-1.595 1.615-2.642 1.615-1.048 0-2.074-0.645-2.643-1.615-0.585 0.173-1.144 0.406-1.671 0.691 0.285 1.090 0.059 1.971-0.684 2.711-0.74 0.742-1.621 1.168-2.711 0.883-0.285 0.527-0.517 1.088-0.691 1.672 0.97 0.568 1.615 1.394 1.615 2.443 0 1.047-0.645 2.074-1.615 2.643 0.175 0.584 0.406 1.144 0.691 1.672 1.090-0.285 1.971-0.059 2.711 0.682s0.969 1.623 0.684 2.711c0.527 0.285 1.087 0.518 1.672 0.693 0.568-0.973 1.595-1.617 2.643-1.617 1.047 0 2.074 0.645 2.643 1.617 0.584-0.176 1.144-0.408 1.672-0.693-0.285-1.088-0.059-1.969 0.683-2.711 0.741-0.74 1.622-1.166 2.711-0.883 0.285-0.527 0.517-1.086 0.692-1.672-0.973-0.569-1.619-1.395-1.619-2.442zM10 13.652c-2.018 0-3.653-1.635-3.653-3.652 0-2.018 1.636-3.654 3.653-3.654s3.652 1.637 3.652 3.654c0 2.018-1.634 3.652-3.652 3.652z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-home" viewBox="0 0 20 20">
|
||||
<title>home</title>
|
||||
<path class="path1" d="M18.672 11h-1.672v6c0 0.445-0.194 1-1 1h-4v-6h-4v6h-4c-0.806 0-1-0.555-1-1v-6h-1.672c-0.598 0-0.47-0.324-0.060-0.748l8.024-8.032c0.195-0.202 0.451-0.302 0.708-0.312 0.257 0.010 0.513 0.109 0.708 0.312l8.023 8.031c0.411 0.425 0.539 0.749-0.059 0.749z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-key" viewBox="0 0 20 20">
|
||||
<title>key</title>
|
||||
<path class="path1" d="M17.691 4.725c-0.503-2.977-3.22-4.967-6.069-4.441s-5.256 2.816-4.753 5.795c0.107 0.641 0.408 1.644 0.763 2.365l-5.175 7.723c-0.191 0.285-0.299 0.799-0.242 1.141l0.333 1.971c0.058 0.342 0.372 0.572 0.7 0.514l1.516-0.281c0.328-0.059 0.744-0.348 0.924-0.639l2.047-3.311 0.018-0.022 1.386-0.256 2.39-3.879c0.785 0.139 1.912 0.092 2.578-0.031 2.848-0.526 4.087-3.67 3.584-6.649zM15.166 6.252c-0.784 1.17-1.584 0.346-2.703-0.475-1.119-0.818-2.135-1.322-1.352-2.492s2.326-1.455 3.447-0.635c1.12 0.819 1.391 2.432 0.608 3.602z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-light-up" viewBox="0 0 20 20">
|
||||
<title>light-up</title>
|
||||
<path class="path1" d="M19 9.199c-0.182 0-0.799 0-0.98 0-0.553 0-1 0.359-1 0.801s0.447 0.799 1 0.799c0.182 0 0.799 0 0.98 0 0.552 0 1-0.357 1-0.799 0-0.441-0.449-0.801-1-0.801zM10 4.5c-3.051 0-5.5 2.449-5.5 5.5s2.449 5.5 5.5 5.5c3.050 0 5.5-2.449 5.5-5.5s-2.451-5.5-5.5-5.5zM10 14c-2.211 0-4-1.791-4-4 0-2.211 1.789-4 4-4 2.209 0 4 1.789 4 4 0 2.209-1.791 4-4 4zM3 10c0-0.441-0.449-0.801-1-0.801-0.185 0-0.816 0-1 0-0.553 0-1 0.359-1 0.801s0.447 0.799 1 0.799c0.184 0 0.815 0 1 0 0.551 0 1-0.358 1-0.799zM10 3c0.441 0 0.799-0.447 0.799-1 0-0.184 0-0.816 0-1 0-0.553-0.358-1-0.799-1s-0.801 0.447-0.801 1c0 0.184 0 0.816 0 1 0 0.553 0.359 1 0.801 1zM10 17c-0.442 0-0.801 0.447-0.801 1 0 0.184 0 0.816 0 1 0 0.553 0.359 1 0.801 1s0.799-0.447 0.799-1c0-0.184 0-0.816 0-1 0-0.553-0.358-1-0.799-1zM17.365 3.766c0.391-0.391 0.454-0.961 0.142-1.273s-0.883-0.248-1.272 0.143c-0.108 0.107-0.593 0.592-0.7 0.699-0.391 0.391-0.454 0.961-0.142 1.273s0.883 0.248 1.273-0.143c0.107-0.108 0.591-0.592 0.699-0.699zM3.334 15.533c-0.108 0.109-0.593 0.594-0.7 0.701-0.391 0.391-0.454 0.959-0.142 1.271s0.883 0.25 1.272-0.141c0.108-0.107 0.593-0.592 0.7-0.699 0.391-0.391 0.454-0.961 0.142-1.274s-0.883-0.247-1.272 0.142zM3.765 2.635c-0.39-0.391-0.961-0.455-1.273-0.143s-0.248 0.883 0.141 1.274c0.108 0.107 0.593 0.592 0.7 0.699 0.391 0.391 0.96 0.455 1.272 0.143s0.249-0.883-0.141-1.273c-0.107-0.108-0.591-0.593-0.699-0.7zM15.534 16.666c0.108 0.107 0.593 0.592 0.7 0.699 0.391 0.391 0.96 0.453 1.272 0.143 0.312-0.312 0.249-0.883-0.142-1.273-0.107-0.107-0.592-0.592-0.699-0.699-0.391-0.391-0.961-0.455-1.274-0.143s-0.248 0.882 0.143 1.273z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-location-pin" viewBox="0 0 20 20">
|
||||
<title>location-pin</title>
|
||||
<path class="path1" d="M10 2.009c-2.762 0-5 2.229-5 4.99 0 4.774 5 11 5 11s5-6.227 5-11c0-2.76-2.238-4.99-5-4.99zM10 9.76c-1.492 0-2.7-1.209-2.7-2.7s1.208-2.7 2.7-2.7c1.49 0 2.699 1.209 2.699 2.7s-1.209 2.7-2.699 2.7z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-magnifying-glass" viewBox="0 0 20 20">
|
||||
<title>magnifying-glass</title>
|
||||
<path class="path1" d="M17.545 15.467l-3.779-3.779c0.57-0.935 0.898-2.035 0.898-3.21 0-3.417-2.961-6.377-6.378-6.377s-6.186 2.769-6.186 6.186c0 3.416 2.961 6.377 6.377 6.377 1.137 0 2.2-0.309 3.115-0.844l3.799 3.801c0.372 0.371 0.975 0.371 1.346 0l0.943-0.943c0.371-0.371 0.236-0.84-0.135-1.211zM4.004 8.287c0-2.366 1.917-4.283 4.282-4.283s4.474 2.107 4.474 4.474c0 2.365-1.918 4.283-4.283 4.283s-4.473-2.109-4.473-4.474z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-mail" viewBox="0 0 20 20">
|
||||
<title>mail</title>
|
||||
<path class="path1" d="M1.574 5.286c0.488 0.262 7.248 3.894 7.5 4.029s0.578 0.199 0.906 0.199c0.328 0 0.654-0.064 0.906-0.199s7.012-3.767 7.5-4.029c0.489-0.263 0.951-1.286 0.054-1.286h-16.919c-0.897 0-0.435 1.023 0.053 1.286zM18.613 7.489c-0.555 0.289-7.387 3.849-7.727 4.027s-0.578 0.199-0.906 0.199-0.566-0.021-0.906-0.199-7.133-3.739-7.688-4.028c-0.39-0.204-0.386 0.035-0.386 0.219s0 7.293 0 7.293c0 0.42 0.566 1 1 1h16c0.434 0 1-0.58 1-1 0 0 0-7.108 0-7.292s0.004-0.423-0.387-0.219z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-map" viewBox="0 0 20 20">
|
||||
<title>map</title>
|
||||
<path class="path1" d="M19.447 3.718l-6-3c-0.281-0.141-0.613-0.141-0.895 0l-5.63 2.815-5.606-1.869c-0.306-0.102-0.64-0.051-0.901 0.138s-0.415 0.49-0.415 0.811v13.001c0 0.379 0.214 0.725 0.553 0.894l6 3c0.141 0.070 0.294 0.106 0.447 0.106s0.307-0.035 0.447-0.106l5.63-2.814 5.606 1.869c0.305 0.1 0.64 0.049 0.901-0.139s0.415-0.49 0.415-0.81v-13.002c0.001-0.379-0.213-0.725-0.552-0.894zM8 5.231l4-2v11.763l-4 2v-11.763zM2 4l4 1.333v11.661l-4-2v-10.994zM18 16.227l-4-1.334v-11.662l4 2v10.996z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-squared-cross" viewBox="0 0 20 20">
|
||||
<title>squared-cross</title>
|
||||
<path class="path1" d="M16 2h-12c-1.1 0-2 0.9-2 2v12c0 1.1 0.9 2 2 2h12c1.1 0 2-0.9 2-2v-12c0-1.1-0.9-2-2-2zM13.061 14.789l-3.061-3.060-3.061 3.060-1.729-1.728 3.061-3.061-3.060-3.061 1.729-1.729 3.060 3.061 3.059-3.061 1.729 1.729-3.059 3.061 3.060 3.061-1.728 1.728z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-star-outlined" viewBox="0 0 20 20">
|
||||
<title>star-outlined</title>
|
||||
<path class="path1" d="M18.8 8.022h-6.413l-2.387-6.722-2.389 6.722h-6.412l5.232 3.947-1.871 6.929 5.44-4.154 5.438 4.154-1.869-6.929 5.231-3.947zM10 12.783l-3.014 2.5 1.243-3.562-2.851-2.3 3.522 0.101 1.1-4.040 1.099 4.040 3.521-0.101-2.851 2.3 1.243 3.562-3.012-2.5z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-star" viewBox="0 0 20 20">
|
||||
<title>star</title>
|
||||
<path class="path1" d="M10 1.3l2.388 6.722h6.412l-5.232 3.948 1.871 6.928-5.439-4.154-5.438 4.154 1.87-6.928-5.233-3.948h6.412l2.389-6.722z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-user" viewBox="0 0 20 20">
|
||||
<title>user</title>
|
||||
<path class="path1" d="M7.725 2.146c-1.016 0.756-1.289 1.953-1.239 2.59 0.064 0.779 0.222 1.793 0.222 1.793s-0.313 0.17-0.313 0.854c0.109 1.717 0.683 0.976 0.801 1.729 0.284 1.814 0.933 1.491 0.933 2.481 0 1.649-0.68 2.42-2.803 3.334-2.13 0.918-4.326 2.073-4.326 4.073v1h18v-1c0-2-2.197-3.155-4.328-4.072-2.123-0.914-2.801-1.684-2.801-3.334 0-0.99 0.647-0.667 0.932-2.481 0.119-0.753 0.692-0.012 0.803-1.729 0-0.684-0.314-0.854-0.314-0.854s0.158-1.014 0.221-1.793c0.065-0.817-0.398-2.561-2.3-3.096-0.333-0.34-0.558-0.881 0.466-1.424-2.24-0.105-2.761 1.067-3.954 1.929z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-facebook" viewBox="0 0 20 20">
|
||||
<title>facebook</title>
|
||||
<path class="path1" d="M17 1h-14c-1.1 0-2 0.9-2 2v14c0 1.101 0.9 2 2 2h7v-7h-2v-2.475h2v-2.050c0-2.164 1.212-3.684 3.766-3.684l1.803 0.002v2.605h-1.197c-0.994 0-1.372 0.746-1.372 1.438v1.69h2.568l-0.568 2.474h-2v7h4c1.1 0 2-0.899 2-2v-14c0-1.1-0.9-2-2-2z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-instagram" viewBox="0 0 20 20">
|
||||
<title>instagram</title>
|
||||
<path class="path1" d="M17 1h-14c-1.1 0-2 0.9-2 2v14c0 1.101 0.9 2 2 2h14c1.1 0 2-0.899 2-2v-14c0-1.1-0.9-2-2-2zM9.984 15.523c3.059 0 5.538-2.481 5.538-5.539 0-0.338-0.043-0.664-0.103-0.984h1.581v7.216c0 0.382-0.31 0.69-0.693 0.69h-12.614c-0.383 0-0.693-0.308-0.693-0.69v-7.216h1.549c-0.061 0.32-0.104 0.646-0.104 0.984 0 3.059 2.481 5.539 5.539 5.539zM6.523 9.984c0-1.912 1.55-3.461 3.462-3.461s3.462 1.549 3.462 3.461-1.551 3.462-3.462 3.462c-1.913 0-3.462-1.55-3.462-3.462zM16.307 6h-1.615c-0.382 0-0.692-0.312-0.692-0.692v-1.617c0-0.382 0.31-0.691 0.691-0.691h1.615c0.384 0 0.694 0.309 0.694 0.691v1.616c0 0.381-0.31 0.693-0.693 0.693z"></path>
|
||||
</symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 14 KiB |
+256
-6
@@ -1,16 +1,266 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="shortcut icon" type="image/png" href="img/favicon.png" />
|
||||
|
||||
<title>trillo — Your all-in-one booking app</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header class="header">
|
||||
<img src="img/logo.png" alt="trillo logo" class="logo" />
|
||||
<form action="#" class="search">
|
||||
<input
|
||||
type="text"
|
||||
class="search__input"
|
||||
placeholder="Search hotels"
|
||||
/>
|
||||
<button class="search__button">
|
||||
<svg class="search__icon">
|
||||
<use xlink:href="img/sprite.svg#icon-magnifying-glass"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<nav class="user-nav">
|
||||
<div class="user-nav__icon-box">
|
||||
<svg class="user-nav__icon">
|
||||
<use xlink:href="img/sprite.svg#icon-bookmark"></use>
|
||||
</svg>
|
||||
<span class="user-nav__notification">4</span>
|
||||
</div>
|
||||
<div class="user-nav__icon-box">
|
||||
<svg class="user-nav__icon">
|
||||
<use xlink:href="img/sprite.svg#icon-chat"></use>
|
||||
<span class="user-nav__notification">16</span>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="user-nav__user">
|
||||
<img
|
||||
src="img/user.jpg"
|
||||
alt="User photo"
|
||||
class="user-nav__user-photo"
|
||||
/>
|
||||
<span class="user-nav__user-name">Jonas</span>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="content">
|
||||
<nav class="sidebar">
|
||||
<ul class="side-nav">
|
||||
<li class="side-nav__item">
|
||||
<a href="#" class="side-nav__link">
|
||||
<svg class="side-nav__icon">
|
||||
<use xlink:href="img/sprite.svg#icon-home"></use>
|
||||
</svg>
|
||||
<span>Home</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="side-nav__item side-nav__item--active">
|
||||
<a href="#" class="side-nav__link">
|
||||
<svg class="side-nav__icon">
|
||||
<use xlink:href="img/sprite.svg#icon-aircraft-take-off"></use>
|
||||
</svg>
|
||||
<span>Flight</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="side-nav__item">
|
||||
<a href="#" class="side-nav__link">
|
||||
<svg class="side-nav__icon">
|
||||
<use xlink:href="img/sprite.svg#icon-key"></use>
|
||||
</svg>
|
||||
<span>Car rental</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="side-nav__item">
|
||||
<a href="#" class="side-nav__link">
|
||||
<svg class="side-nav__icon">
|
||||
<use xlink:href="img/sprite.svg#icon-map"></use>
|
||||
</svg>
|
||||
<span>Tours</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="legal">© 2017 by trillo. Al rights reserved.</div>
|
||||
</nav>
|
||||
|
||||
<main class="hotel-view">
|
||||
<div class="gallery">
|
||||
<figure class="gallery__item">
|
||||
<img
|
||||
src="img/hotel-1.jpg"
|
||||
alt="Photo of hotel 1"
|
||||
class="gallery__photo"
|
||||
/>
|
||||
</figure>
|
||||
|
||||
<figure class="gallery__item">
|
||||
<img
|
||||
src="img/hotel-2.jpg"
|
||||
alt="Photo of hotel 2"
|
||||
class="gallery__photo"
|
||||
/>
|
||||
</figure>
|
||||
|
||||
<figure class="gallery__item">
|
||||
<img
|
||||
src="img/hotel-3.jpg"
|
||||
alt="Photo of hotel 3"
|
||||
class="gallery__photo"
|
||||
/>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="overview">
|
||||
<h1 class="overview__heading">Hotel Las Palmas</h1>
|
||||
<div class="overview__stars">
|
||||
<svg class="overview__icon-star">
|
||||
<use xlink:href="img/sprite.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="overview__icon-star">
|
||||
<use xlink:href="img/sprite.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="overview__icon-star">
|
||||
<use xlink:href="img/sprite.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="overview__icon-star">
|
||||
<use xlink:href="img/sprite.svg#icon-star"></use>
|
||||
</svg>
|
||||
<svg class="overview__icon-star">
|
||||
<use xlink:href="img/sprite.svg#icon-star"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="overview__location">
|
||||
<svg class="overview__icon-location">
|
||||
<use xlink:href="img/sprite.svg#icon-location-pin"></use>
|
||||
</svg>
|
||||
<button class="btn-inline">Albufeira, Portugal</button>
|
||||
</div>
|
||||
|
||||
<div class="overview__rating">
|
||||
<div class="overview__rating-average">8.6</div>
|
||||
<div class="overview__rating-count">429 votes</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail">
|
||||
<div class="description">
|
||||
<p class="paragraph">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi
|
||||
nisi dignissimos debitis ratione sapiente saepe. Accusantium
|
||||
cumque, quas, ut corporis incidunt deserunt quae architecto
|
||||
voluptate.
|
||||
</p>
|
||||
<p class="paragraph">
|
||||
Accusantium cumque, quas, ut corporis incidunt deserunt quae
|
||||
architecto voluptate delectus, inventore iure aliquid aliquam.
|
||||
</p>
|
||||
<ul class="list">
|
||||
<li class="list__item">Close to the beach</li>
|
||||
<li class="list__item">Breakfast included</li>
|
||||
<li class="list__item">Free airport shuttle</li>
|
||||
<li class="list__item">Free wifi in all rooms</li>
|
||||
<li class="list__item">Air conditioning and heating</li>
|
||||
<li class="list__item">Pets allowed</li>
|
||||
<li class="list__item">We speak all languages</li>
|
||||
<li class="list__item">Perfect for families</li>
|
||||
</ul>
|
||||
|
||||
<div class="recommend">
|
||||
<p class="recommend__count">
|
||||
Lucy and 3 other friends recommend this hotel.
|
||||
</p>
|
||||
<div class="recommend__friends">
|
||||
<img
|
||||
src="img/user-3.jpg"
|
||||
alt="Friend 1"
|
||||
class="recommend__photo"
|
||||
/>
|
||||
<img
|
||||
src="img/user-4.jpg"
|
||||
alt="Friend 2"
|
||||
class="recommend__photo"
|
||||
/>
|
||||
<img
|
||||
src="img/user-5.jpg"
|
||||
alt="Friend 3"
|
||||
class="recommend__photo"
|
||||
/>
|
||||
<img
|
||||
src="img/user-6.jpg"
|
||||
alt="Friend 4"
|
||||
class="recommend__photo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="user-reviews">
|
||||
<!-- NOTE: figure are great for descriptions -->
|
||||
<figure class="review">
|
||||
<blockquote class="review__text">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga
|
||||
doloremque architecto dicta animi, totam, itaque officia ex.
|
||||
</blockquote>
|
||||
<figcaption class="review__user">
|
||||
<img
|
||||
src="img/user-1.jpg"
|
||||
alt="User 1"
|
||||
class="review__photo"
|
||||
/>
|
||||
<div class="review__user-box">
|
||||
<p class="review__user-name">Nick Smith</p>
|
||||
<p class="review__user-date">Feb 23rd, 2017</p>
|
||||
</div>
|
||||
<div class="review__rating">7.8</div>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure class="review">
|
||||
<blockquote class="review__text">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga
|
||||
doloremque architecto dicta animi.
|
||||
</blockquote>
|
||||
<figcaption class="review__user">
|
||||
<img
|
||||
src="img/user-2.jpg"
|
||||
alt="User 2"
|
||||
class="review__photo"
|
||||
/>
|
||||
<div class="review__user-box">
|
||||
<p class="review__user-name">Mary thoms</p>
|
||||
<p class="review__user-date">Sep 13rd, 2017</p>
|
||||
</div>
|
||||
<div class="review__rating">9.3</div>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<button class="btn-inline">Show all <span>→</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<h2 class="cta__book-now">
|
||||
Good news! We have 4 free rooms for your selected dates!
|
||||
</h2>
|
||||
<button class="btn">
|
||||
<span class="btn__visible">Book now</span>
|
||||
<span class="btn__invisible">Only 4 rooms left</span>
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+4481
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,80 @@
|
||||
/*
|
||||
COLORS
|
||||
|
||||
Primary: #eb2f64
|
||||
Primary light: #FF3366
|
||||
Primary dark: #BA265D
|
||||
|
||||
Grey light 1: #faf9f9
|
||||
Grey light 2: #f4f2f2
|
||||
Grey light 3: #f0eeee
|
||||
Grey light 4: #ccc
|
||||
|
||||
Grey dark 1: #333
|
||||
Grey dark 2: #777
|
||||
Grey dark 3: #999
|
||||
*/
|
||||
|
||||
:root {
|
||||
// like html selector but with higher specificity, like a global parent element
|
||||
--color-primary: #eb2f64;
|
||||
--color-primary-light: #ff3366;
|
||||
--color-primary-dark: #ba265d;
|
||||
--color-grey-light-1: #faf9f9;
|
||||
--color-grey-light-2: #f4f2f2;
|
||||
--color-grey-light-3: #f0eeee;
|
||||
--color-grey-light-4: #ccc;
|
||||
--color-grey-dark-1: #333;
|
||||
--color-grey-dark-2: #777;
|
||||
--color-grey-dark-3: #999;
|
||||
|
||||
--shadow-dark: 0 2rem 6rem rgba(0, 0, 0, 0.3);
|
||||
--shadow-light: 0 2rem 5rem rgba(0, 0, 0, 0.06);
|
||||
--line: 1px solid var(--color-grey-light-2);
|
||||
}
|
||||
|
||||
$bp-largest: 75em; // 1200px
|
||||
$bp-large: 68.75em; // 1100px
|
||||
$bp-medium: 56.25em; // 900px
|
||||
$bp-small: 37.5em; // 600px
|
||||
$bp-smallest: 31.25em; // 500px
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
font-size: 62.5%; // 1rem = 10px
|
||||
|
||||
::selection {
|
||||
color: var(--color-grey-light-1);
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $bp-large) {
|
||||
font-size: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 400;
|
||||
color: var(--color-grey-dark-2);
|
||||
line-height: 1.6;
|
||||
background-image: linear-gradient(
|
||||
to right bottom,
|
||||
var(--color-primary-light),
|
||||
var(--color-primary-dark)
|
||||
);
|
||||
background-size: cover;
|
||||
|
||||
min-height: 100vh;
|
||||
}
|
||||
@@ -0,0 +1,580 @@
|
||||
// Logo
|
||||
.logo {
|
||||
height: 3.25rem;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
// Search
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 40%;
|
||||
|
||||
@media only screen and (max-width: $bp-smallest) {
|
||||
order: 1; // NOTE: changes html order
|
||||
flex-basis: 100%; // flex: 0 0 100%;
|
||||
}
|
||||
|
||||
&__input {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
border: none;
|
||||
background-color: var(--color-grey-light-2);
|
||||
|
||||
padding: 0.7rem 2rem;
|
||||
border-radius: 100px;
|
||||
width: 90%;
|
||||
|
||||
transition: all 0.2s;
|
||||
|
||||
margin-right: -3.25rem;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
width: 100%;
|
||||
background-color: var(--color-grey-light-3);
|
||||
}
|
||||
|
||||
&::placeholder,
|
||||
&::-webkit-input-placeholder {
|
||||
font-weight: 100;
|
||||
color: var(--color-grey-light-4);
|
||||
}
|
||||
}
|
||||
|
||||
&__input:focus + &__button {
|
||||
background-color: var(--color-grey-light-3);
|
||||
}
|
||||
|
||||
&__button {
|
||||
border: none;
|
||||
background-color: var(--color-grey-light-2);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
fill: var(--color-grey-dark-3);
|
||||
}
|
||||
}
|
||||
|
||||
// User nav
|
||||
.user-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-self: stretch; //NOTE: make it cover the entire height
|
||||
|
||||
& > * {
|
||||
height: 100%;
|
||||
padding: 0 2rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
& > *:hover {
|
||||
background-color: var(--color-grey-light-2);
|
||||
}
|
||||
|
||||
&__icon-box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
height: 2.25rem;
|
||||
width: 2.25rem;
|
||||
|
||||
fill: var(--color-grey-dark-3);
|
||||
}
|
||||
|
||||
&__notification {
|
||||
font-size: 0.8rem;
|
||||
height: 1.75rem;
|
||||
width: 1.75rem;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color-primary);
|
||||
color: white;
|
||||
position: absolute;
|
||||
top: 1.5rem;
|
||||
right: 1.1rem;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__user-photo {
|
||||
height: 3.75rem;
|
||||
border-radius: 50%;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Side navigation
|
||||
.side-nav {
|
||||
font-size: 1.4rem;
|
||||
list-style: none;
|
||||
margin-top: 3.5rem;
|
||||
|
||||
@media only screen and (max-width: $bp-medium) {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__item {
|
||||
position: relative;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 0.5rem;
|
||||
@media only screen and (max-width: $bp-medium) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $bp-medium) {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__item::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 3px;
|
||||
background-color: var(--color-primary);
|
||||
transform: scaleY(0);
|
||||
|
||||
transform-origin: center; //NOTE: cool
|
||||
transition:
|
||||
transform 0.2s,
|
||||
width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s,
|
||||
//NOTE: duration timing delay
|
||||
background-color 0.1s;
|
||||
}
|
||||
|
||||
&__item:hover::before,
|
||||
&__item--active::before {
|
||||
transform: scaleY(1);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__item:active::before {
|
||||
background-color: var(--color-primary-light);
|
||||
}
|
||||
|
||||
&__link:link,
|
||||
&__link:visited {
|
||||
color: var(--color-grey-light-1);
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1.5rem 3rem;
|
||||
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
@media only screen and (max-width: $bp-medium) {
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $bp-small) {
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
margin-right: 2rem;
|
||||
fill: currentColor; //NOTE: color of current or parent element
|
||||
|
||||
@media only screen and (max-width: $bp-small) {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0.7rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Legal
|
||||
.legal {
|
||||
font-size: 1.2rem;
|
||||
color: var(--color-grey-light-4);
|
||||
text-align: center;
|
||||
padding: 2.5rem;
|
||||
|
||||
@media only screen and (max-width: $bp-medium) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Gallery
|
||||
.gallery {
|
||||
display: flex;
|
||||
|
||||
&__photo {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Overview
|
||||
.overview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: var(--line);
|
||||
|
||||
&__heading {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
|
||||
padding: 1.5rem 3rem;
|
||||
@media only screen and (max-width: $bp-small) {
|
||||
font-size: 1.8rem;
|
||||
padding: 1.25rem 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__stars {
|
||||
margin-right: auto; // NOTE: to imitate flex: 1 effect but with a small final box, instead of one that extends all the space
|
||||
display: flex; // NOTE: because svg behave like inline so is either this or set line-height: 0 and font-size: 0;
|
||||
}
|
||||
|
||||
&__icon-star,
|
||||
&__icon-location {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
fill: var(--color-primary);
|
||||
}
|
||||
|
||||
&__location {
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
vertical-align: center;
|
||||
}
|
||||
|
||||
&__icon-location {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
&__rating {
|
||||
background-color: var(--color-primary);
|
||||
color: white;
|
||||
margin-left: 3rem;
|
||||
padding: 0 2.25rem;
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@media only screen and (max-width: $bp-small) {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__rating-average {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 300;
|
||||
margin-bottom: -3px;
|
||||
@media only screen and (max-width: $bp-small) {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__rating-count {
|
||||
font-weight: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
@media only screen and (max-width: $bp-small) {
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// btn
|
||||
.btn {
|
||||
position: relative;
|
||||
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
|
||||
border: none;
|
||||
border-radius: 1000px;
|
||||
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
var(--color-primary-light),
|
||||
var(--color-primary-dark)
|
||||
);
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
& > * {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
&__visible {
|
||||
padding: 2rem 7.5rem;
|
||||
}
|
||||
|
||||
&__invisible {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -100%;
|
||||
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-image: linear-gradient(
|
||||
to left,
|
||||
var(--color-primary-light),
|
||||
var(--color-primary-dark)
|
||||
); //NOTE: transitions do not work on background image
|
||||
}
|
||||
|
||||
&:hover &__visible {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
&:hover &__invisible {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
animation: pulsate 1s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-inline {
|
||||
border: none;
|
||||
color: var(--color-primary);
|
||||
font-size: inherit; // NOTE: to make it more reusable
|
||||
border-bottom: 1px solid currentColor;
|
||||
padding-bottom: 2px;
|
||||
display: inline-block;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
& span {
|
||||
margin-left: 3px;
|
||||
transition: margin-left 0.2s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--color-grey-dark-1);
|
||||
|
||||
& span {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
animation: pulsate 1s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulsate {
|
||||
0% {
|
||||
transform: scale(1); // NOTE: needs an initial value in order to animate
|
||||
box-shadow: none;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Paragraph
|
||||
.paragraph:not(:last-of-type) {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
// List
|
||||
.list {
|
||||
display: flex;
|
||||
flex-wrap: wrap; // NOTE: making a grid with 2 columns
|
||||
|
||||
list-style: none;
|
||||
|
||||
margin: 3rem 0;
|
||||
padding: 3rem 0;
|
||||
|
||||
border-top: var(--line);
|
||||
border-bottom: var(--line);
|
||||
|
||||
&__item {
|
||||
flex: 0 0 50%; // NOTE: making a grid with 2 columns
|
||||
margin-bottom: 0.7rem;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
margin-right: 0.7rem;
|
||||
|
||||
// NOTE: Older browsers
|
||||
// background-image: url("../img/chevron-thin-right.svg");
|
||||
// background-size: cover;
|
||||
|
||||
// NOTE: Newer browsers - masks
|
||||
// icon mask that lets you see the background color
|
||||
// NOTE: feature query (requires a value)
|
||||
@supports (-webkit-mask-image: url()) or (mask-image: url()) {
|
||||
background-color: var(--color-primary);
|
||||
mask-image: url("../img/chevron-thin-right.svg");
|
||||
mask-size: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Recommend
|
||||
.recommend {
|
||||
font-size: 1.3rem;
|
||||
color: var(--color-grey-dark-3);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&__count {
|
||||
margin-right: auto; // NOTE: trick to make space-between in other way, usefull in case of having multiple elements
|
||||
}
|
||||
|
||||
&__friends {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__photo {
|
||||
box-sizing: content-box; // NOTE: content-box is the default, we changed it on _base.scss
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
|
||||
border-radius: 50%;
|
||||
border: 3px solid white;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: -1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Reviews
|
||||
.review {
|
||||
background-color: white;
|
||||
box-shadow: var(--shadow-light);
|
||||
padding: 3rem;
|
||||
margin-bottom: 3.5rem;
|
||||
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
@media only screen and (max-width: $bp-medium) {
|
||||
padding: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "\201C"; // NOTE: html entity
|
||||
position: absolute;
|
||||
top: -3.2rem;
|
||||
left: -1rem;
|
||||
font-size: 20rem;
|
||||
font-family: sans-serif;
|
||||
line-height: 1;
|
||||
color: var(--color-grey-light-2);
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__text {
|
||||
margin-bottom: 2rem;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__photo {
|
||||
height: 4.5rem;
|
||||
width: 4.5rem;
|
||||
border-radius: 50%;
|
||||
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
&__user-box {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&__user-name {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
&__user-date {
|
||||
font-size: 1rem;
|
||||
color: var(--color-grey-dark-3);
|
||||
}
|
||||
|
||||
&__rating {
|
||||
font-size: 2.2rem;
|
||||
font-weight: 300;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
// cta
|
||||
.cta {
|
||||
padding: 3.5rem 0;
|
||||
text-align: center;
|
||||
|
||||
@media only screen and (max-width: $bp-medium) {
|
||||
padding: 2.5rem 0;
|
||||
}
|
||||
|
||||
&__book-now {
|
||||
font-size: 2rem;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
.container {
|
||||
max-width: 120rem;
|
||||
min-height: 50rem;
|
||||
margin: 8rem auto;
|
||||
background-color: var(--color-grey-light-1);
|
||||
box-shadow: var(--shadow-dark);
|
||||
|
||||
@media only screen and (max-width: $bp-largest) {
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 7rem;
|
||||
background-color: #fff;
|
||||
border-bottom: var(--line);
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
font-size: 1.4rem;
|
||||
|
||||
@media only screen and (max-width: $bp-large) {
|
||||
flex-wrap: wrap;
|
||||
align-content: space-around;
|
||||
height: 11rem;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
@media only screen and (max-width: $bp-medium) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-color: var(--color-grey-dark-1);
|
||||
flex: 0 0 18%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.hotel-view {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.detail {
|
||||
display: flex;
|
||||
padding: 4.5rem;
|
||||
gap: 4.5rem;
|
||||
|
||||
background-color: var(--color-grey-light-1);
|
||||
border-bottom: 1px solid var(--color-grey-light-2);
|
||||
|
||||
font-size: 1.4rem;
|
||||
|
||||
@media only screen and (max-width: $bp-medium) {
|
||||
padding: 3rem;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $bp-small) {
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
background-color: white;
|
||||
box-shadow: var(--shadow-light);
|
||||
padding: 3rem;
|
||||
flex: 0 0 60%;
|
||||
@media only screen and (max-width: $bp-medium) {
|
||||
padding: 2rem;
|
||||
}
|
||||
@media only screen and (max-width: $bp-small) {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.user-reviews {
|
||||
flex: 1;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -1,17 +1,3 @@
|
||||
/*
|
||||
COLORS
|
||||
|
||||
Primary: #eb2f64
|
||||
Primary light: #FF3366
|
||||
Primary dark: #BA265D
|
||||
|
||||
Grey light 1: #faf9f9
|
||||
Grey light 2: #f4f2f2
|
||||
Grey light 3: #f0eeee
|
||||
Grey light 4: #ccc
|
||||
|
||||
Grey dark 1: #333
|
||||
Grey dark 2: #777
|
||||
Grey dark 3: #999
|
||||
|
||||
*/
|
||||
@import "base";
|
||||
@import "components";
|
||||
@import "layout";
|
||||
Generated
+2388
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"devDependencies": {
|
||||
"concat": "^1.0.3",
|
||||
"node-sass": "^9.0.0"
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user