diff --git a/src/commons/about-section/about.jsx b/src/commons/about-section/about.jsx
index 1aa2c9e..a02c6e2 100644
--- a/src/commons/about-section/about.jsx
+++ b/src/commons/about-section/about.jsx
@@ -38,17 +38,17 @@ function About() {
diff --git a/src/commons/header/header.jsx b/src/commons/header/header.jsx
index 6e333bc..10aa12e 100644
--- a/src/commons/header/header.jsx
+++ b/src/commons/header/header.jsx
@@ -13,7 +13,7 @@ function Header() {
is where life happens
diff --git a/src/commons/stories-section/stories.jsx b/src/commons/stories-section/stories.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/commons/tours-section/tours.jsx b/src/commons/tours-section/tours.jsx
index 6695e78..dc0b140 100644
--- a/src/commons/tours-section/tours.jsx
+++ b/src/commons/tours-section/tours.jsx
@@ -1,3 +1,5 @@
+import ButtonMain from "../../components/button/button-main";
+
function Tours() {
return (
@@ -26,12 +28,80 @@ function Tours() {
-
-
+
+
+
+
+
+
+ The Forest Hiker
+
+
+
+
+ - 7 day tours
+ - Up to 40 people
+ - 6 tour guides
+ - Sleep in provided tents
+ - Difficulty: medium
+
+
+
+
+
+
+
+
+
+
+
+
+ The Snow Adventurer
+
+
+
+
+ - 5 day tours
+ - Up to 15 people
+ - 3 tour guides
+ - Sleep in provided tents
+ - Difficulty: hard
+
+
+
+
+
+
+
+
+
+
);
diff --git a/src/components/button/button-main.jsx b/src/components/button/button-main.jsx
index c7e9214..5f66e4f 100644
--- a/src/components/button/button-main.jsx
+++ b/src/components/button/button-main.jsx
@@ -1,14 +1,7 @@
function ButtonMain(props) {
- const { text, animationName, link } = props;
+ const { text, link, feature } = props;
return (
-
+
{text}
);
diff --git a/src/sass/base/_utilities.scss b/src/sass/base/_utilities.scss
index eea696f..d6720d7 100644
--- a/src/sass/base/_utilities.scss
+++ b/src/sass/base/_utilities.scss
@@ -11,3 +11,11 @@
.u-margin-bottom-small {
margin-bottom: 1.5rem;
}
+
+.u-margin-top-big {
+ margin-top: 8rem;
+}
+
+.u-margin-top-huge {
+ margin-top: 10rem;
+}
diff --git a/src/sass/components/_button.scss b/src/sass/components/_button.scss
index 0dcae48..d5ba7ba 100644
--- a/src/sass/components/_button.scss
+++ b/src/sass/components/_button.scss
@@ -34,6 +34,14 @@
}
}
+ &--green {
+ background-color: $color-primary;
+ color: $color-white;
+ &::after {
+ background-color: $color-primary;
+ }
+ }
+
&:after {
content: " ";
display: inline-block;
diff --git a/src/sass/components/_card.scss b/src/sass/components/_card.scss
index 7954ec8..87ca392 100644
--- a/src/sass/components/_card.scss
+++ b/src/sass/components/_card.scss
@@ -30,6 +30,22 @@
$color-secondary-dark
);
}
+
+ &-2 {
+ background-image: linear-gradient(
+ to right bottom,
+ $color-primary-light,
+ $color-primary-dark
+ );
+ }
+
+ &-3 {
+ background-image: linear-gradient(
+ to right bottom,
+ $color-tertiary-light,
+ $color-tertiary-dark
+ );
+ }
}
}
@@ -59,11 +75,21 @@
}
&--2 {
- background-image: url(../../commons/images/nat-5.jpg);
+ background-image: linear-gradient(
+ to right bottom,
+ $color-primary-light,
+ $color-primary-dark
+ ),
+ url(../../commons/images/nat-6.jpg);
}
&--3 {
- background-image: url(../../commons/images/nat-5.jpg);
+ background-image: linear-gradient(
+ to right bottom,
+ $color-tertiary-light,
+ $color-tertiary-dark
+ ),
+ url(../../commons/images/nat-7.jpg);
}
}
@@ -89,13 +115,28 @@
rgba($color-secondary-dark, 0.85)
);
}
+
+ &--2 {
+ background-image: linear-gradient(
+ to right bottom,
+ rgba($color-primary-light, 0.85),
+ rgba($color-primary-dark, 0.85)
+ );
+ }
+
+ &--3 {
+ background-image: linear-gradient(
+ to right bottom,
+ rgba($color-tertiary-light, 0.85),
+ rgba($color-tertiary-dark, 0.85)
+ );
+ }
}
&__details {
padding: 3rem;
ul {
list-style: none;
- width: 80%;
margin: 0 auto;
li {
@@ -109,4 +150,30 @@
}
}
}
+
+ // Back side
+ &__cta {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 90%;
+ text-align: center;
+ }
+
+ &__price-box {
+ text-align: center;
+ margin-bottom: 8rem;
+ color: $color-white;
+ }
+
+ &__price-only {
+ font-size: 1.4rem;
+ text-transform: uppercase;
+ }
+
+ &__price-value {
+ font-size: 6rem;
+ font-weight: 100;
+ }
}
diff --git a/src/sass/pages/_home.scss b/src/sass/pages/_home.scss
index bcbbddd..2205bc1 100644
--- a/src/sass/pages/_home.scss
+++ b/src/sass/pages/_home.scss
@@ -24,6 +24,6 @@
.section-tours {
background-color: $color-grey-light-1;
- padding: 25rem 0 50rem 0;
+ padding: 25rem 0 15rem 0;
margin-top: -12rem;
}