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

created stories section and stories component

Browse Source
This commit is contained in:
Yusuf Ipek
2021-05-03 13:11:32 +03:00
parent 851c0b90c2
commit 062356ea37
5 changed files with 120 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/commons/stories-section/stories.jsx
+58
View File
@@ -0,0 +1,58 @@
import ButtonSecondary from "../../components/button/button-secondary";
import nat8 from "../images/nat-8.jpg";
import nat9 from "../images/nat-9.jpg";
function Stories() {
return (
<section className="section-stories">
<div className="u-center-text u-margin-bottom-big">
<h2 className="heading-secondary">We make people geniunely happy</h2>
</div>
<div className="row">
<div className="story">
<figure className="story__shape">
<img src={nat8} alt="Person on a tour" className="story__img" />
<figcaption className="story__caption">Mary Smith</figcaption>
</figure>
<div className="story__text">
<h3 className="heading-tertiary u-margin-bottom-small">
I had the best week ever with my family
</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore,
amet. Ipsa fugiat consequatur amet esse deserunt natus. Blanditiis
ex similique harum adipisci voluptatem iste esse voluptates,
provident odio, vel quae!
</p>
</div>
</div>
</div>
<div className="row">
<div className="story">
<figure className="story__shape">
<img src={nat9} alt="Person on a tour" className="story__img" />
<figcaption className="story__caption">Jack Wilson</figcaption>
</figure>
<div className="story__text">
<h3 className="heading-tertiary u-margin-bottom-small">
WOW! My life is completely different now
</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore,
amet. Ipsa fugiat consequatur amet esse deserunt natus. Blanditiis
ex similique harum adipisci voluptatem iste esse voluptates,
provident odio, vel quae!
</p>
</div>
</div>
</div>
<div className="u-center-text u-margin-top-huge">
<ButtonSecondary text={"Read all stories ➯"} />
</div>
</section>
);
}
export default Stories;