yusufipek/natours-react
1
0
Fork 0
mirror of https://github.com/yusufipk/natours-react.git synced 2026-09-11 11:06:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

finished tours section

Browse Source
This commit is contained in:
Yusuf Ipek
2021-05-03 10:31:55 +03:00
parent 11ea48a038
commit 851c0b90c2
9 changed files with 166 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/commons/about-section/about.jsx
+3 -3
View File
@@ -38,17 +38,17 @@ function About() {
<div className="composition">
<img
src={nat1Large}
alt="Photo 1"
alt="Nature 1"
className="composition__photo composition__photo--p1"
/>
<img
src={nat2Large}
alt="Photo 2"
alt="Nature 2"
className="composition__photo composition__photo--p2"
/>
<img
src={nat3Large}
alt="Photo 3"
alt="Nature 3"
className="composition__photo composition__photo--p3"
/>
</div>
src/commons/header/header.jsx
+1 -1
View File
@@ -13,7 +13,7 @@ function Header() {
<span className="heading-primary--sub">is where life happens</span>
</h1>
<ButtonMain
animationName={"move-in--bottom"}
feature={"btn btn--white move-in--bottom"}
text={"Discover our tours"}
/>
</div>
src/commons/stories-section/stories.jsx
View File
src/commons/tours-section/tours.jsx
+73 -3
View File
@@ -1,3 +1,5 @@
import ButtonMain from "../../components/button/button-main";
function Tours() {
return (
<section className="section-tours">
@@ -26,12 +28,80 @@ function Tours() {
</div>
</div>
<div className="card__side card__side--back card__side--back-1">
Back
<div className="card__cta">
<div className="card__price-box">
<p className="card__price-only">Only</p>
<p className="card__price-value">$297</p>
</div>
<ButtonMain feature={"btn btn--white"} text={"Book now!"} />
</div>
</div>
</div>
<div className="col-1-of-3"></div>
<div className="col-1-of-3"></div>
</div>
<div className="col-1-of-3">
<div className="card">
<div className="card__side card__side--front">
<div className="card__picture card__picture--2">&nbsp;</div>
<h4 className="card__heading">
<span className="card__heading-span card__heading-span--2">
The Forest Hiker
</span>
</h4>
<div className="card__details">
<ul>
<li>7 day tours</li>
<li>Up to 40 people</li>
<li>6 tour guides</li>
<li>Sleep in provided tents</li>
<li>Difficulty: medium</li>
</ul>
</div>
</div>
<div className="card__side card__side--back card__side--back-2">
<div className="card__cta">
<div className="card__price-box">
<p className="card__price-only">Only</p>
<p className="card__price-value">$497</p>
</div>
<ButtonMain feature={"btn btn--white"} text={"Book now!"} />
</div>
</div>
</div>
</div>
<div className="col-1-of-3">
<div className="card">
<div className="card__side card__side--front">
<div className="card__picture card__picture--3">&nbsp;</div>
<h4 className="card__heading">
<span className="card__heading-span card__heading-span--3">
The Snow Adventurer
</span>
</h4>
<div className="card__details">
<ul>
<li>5 day tours</li>
<li>Up to 15 people</li>
<li>3 tour guides</li>
<li>Sleep in provided tents</li>
<li>Difficulty: hard</li>
</ul>
</div>
</div>
<div className="card__side card__side--back card__side--back-3">
<div className="card__cta">
<div className="card__price-box">
<p className="card__price-only">Only</p>
<p className="card__price-value">$897</p>
</div>
<ButtonMain feature={"btn btn--white"} text={"Book now!"} />
</div>
</div>
</div>
</div>
</div>
<div className="u-center-text u-margin-top-huge">
<ButtonMain feature={"btn btn--green"} text={"Discover all tours"} />
</div>
</section>
);
src/components/button/button-main.jsx
+2 -9
View File
@@ -1,14 +1,7 @@
function ButtonMain(props) {
const { text, animationName, link } = props;
const { text, link, feature } = props;
return (
<a
href="#"
className={
animationName === "move-in--bottom"
? "btn btn--white move-in--bottom"
: "btn btn--white"
}
>
<a href="#" className={feature}>
{text}
</a>
);
src/sass/base/_utilities.scss
+8
View File
@@ -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;
}
src/sass/components/_button.scss
+8
View File
@@ -34,6 +34,14 @@
}
}
&--green {
background-color: $color-primary;
color: $color-white;
&::after {
background-color: $color-primary;
}
}
&:after {
content: " ";
display: inline-block;
src/sass/components/_card.scss
+70 -3
View File
@@ -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;
}
}
src/sass/pages/_home.scss
+1 -1
View File
@@ -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;
}