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 footer element and changed structure of components

Browse Source
This commit is contained in:
Yusuf Ipek
2021-05-04 11:25:02 +03:00
parent 616cd6c050
commit b396a9b6e9
4 changed files with 76 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.js
+5 -10
View File
@@ -1,20 +1,15 @@
import "./App.scss"; import "./App.scss";
import About from "./commons/about-section/about";
import Booking from "./commons/booking-section/booking";
import Feature from "./commons/feature-section/feature";
import Header from "./commons/header/header.jsx"; import Header from "./commons/header/header.jsx";
import Stories from "./commons/stories-section/stories"; import Main from "./commons/main/main";
import Tours from "./commons/tours-section/tours"; import Footer from "./commons/footer-section/footer";
function App() { function App() {
return ( return (
<div> <div>
<Header /> <Header />
<About /> <Main />
<Feature /> <Footer />
<Tours />
<Stories />
<Booking />
</div> </div>
); );
} }
src/commons/about-section/about.jsx
+47 -49
View File
@@ -4,58 +4,56 @@ import nat3Large from "../../commons/images/nat-3-large.jpg";
function About() { function About() {
return ( return (
<main> <section className="section-about">
<section className="section-about"> <div className="u-center-text u-margin-bottom-big">
<div className="u-center-text u-margin-bottom-big"> <h2 className="heading-secondary">
<h2 className="heading-secondary"> Exciting tours for adventurous people
Exciting tours for adventurous people </h2>
</h2> </div>
</div>
<div className="row"> <div className="row">
<div className="col-1-of-2"> <div className="col-1-of-2">
<h3 className="heading-tertiary u-margin-bottom-small"> <h3 className="heading-tertiary u-margin-bottom-small">
You are going to fall in love with nature You are going to fall in love with nature
</h3> </h3>
<p className="paragraph"> <p className="paragraph">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
perferendis esse minima provident neque, non necessitatibus perferendis esse minima provident neque, non necessitatibus
architecto tempora, molestias omnis nesciunt numquam reprehenderit architecto tempora, molestias omnis nesciunt numquam reprehenderit
distinctio id! Fuga quibusdam harum dolores minus? distinctio id! Fuga quibusdam harum dolores minus?
</p> </p>
<h3 className="heading-tertiary u-margin-bottom-small"> <h3 className="heading-tertiary u-margin-bottom-small">
Live adventures like you never have before Live adventures like you never have before
</h3> </h3>
<p className="paragraph"> <p className="paragraph">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
perferendis esse minima provident neque perferendis esse minima provident neque
</p> </p>
<a href="#" className="btn-text"> <a href="#" className="btn-text">
Learn More ➯ Learn More ➯
</a> </a>
</div> </div>
<div className="col-1-of-2"> <div className="col-1-of-2">
<div className="composition"> <div className="composition">
<img <img
src={nat1Large} src={nat1Large}
alt="Nature 1" alt="Nature 1"
className="composition__photo composition__photo--p1" className="composition__photo composition__photo--p1"
/> />
<img <img
src={nat2Large} src={nat2Large}
alt="Nature 2" alt="Nature 2"
className="composition__photo composition__photo--p2" className="composition__photo composition__photo--p2"
/> />
<img <img
src={nat3Large} src={nat3Large}
alt="Nature 3" alt="Nature 3"
className="composition__photo composition__photo--p3" className="composition__photo composition__photo--p3"
/> />
</div>
</div> </div>
</div> </div>
</section> </div>
</main> </section>
); );
} }
export default About; export default About;
src/commons/footer-section/footer.jsx
+5
View File
@@ -0,0 +1,5 @@
function Footer() {
return <section className="section-footer"></section>;
}
export default Footer;
src/commons/main/main.jsx
+19
View File
@@ -0,0 +1,19 @@
import About from "../about-section/about";
import Booking from "../booking-section/booking";
import Feature from "../feature-section/feature";
import Stories from "../stories-section/stories";
import Tours from "../tours-section/tours";
function Main() {
return (
<main>
<About />
<Feature />
<Tours />
<Stories />
<Booking />
</main>
);
}
export default Main;