Skip to content

Commit b344fc5

Browse files
arifproarifpro
committed
home page done
1 parent d4c6768 commit b344fc5

13 files changed

+466
-16
lines changed

‎package-lock.json

+29
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@fortawesome/fontawesome-svg-core": "^1.2.28",
7+
"@fortawesome/free-solid-svg-icons": "^5.13.0",
8+
"@fortawesome/react-fontawesome": "^0.1.9",
69
"@testing-library/jest-dom": "^4.2.4",
710
"@testing-library/react": "^9.3.2",
811
"@testing-library/user-event": "^7.1.2",

‎src/App.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,9 @@ function App() {
1414
<Switch>
1515

1616
<Route exact path='/'>
17-
{/* <Navbar /> */}
17+
<Navbar />
1818
<Header />
19-
{/* <HomeBody /> */}
20-
19+
<HomeBody />
2120
<Footer />
2221
</Route>
2322

‎src/components/Footer/Footer.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import whatsapp from '../../images/bxl-whatsapp.png'
1010

1111
const Footer = () => {
1212
return (
13-
13+
<div>
1414
<div className="cusFooterContainer1">
1515

1616
<div className="container" >
@@ -20,7 +20,7 @@ const Footer = () => {
2020
<h4 style={{color: 'white', fontWeight:'bold'}}>POWER
2121
<span style={{color: 'yellow'}}> X</span>
2222
</h4>
23-
</a>
23+
</a>
2424
</div>
2525
<div className="col-md-10">
2626
<div className="container cusFooter">
@@ -60,13 +60,13 @@ const Footer = () => {
6060
</div>
6161
</div>
6262
<br/><br/>
63-
<br/><br/>
63+
<br/>
6464
<footer className="text-center">Copyright @2020 All Right Reserved</footer>
6565
</div>
6666

6767

68-
6968
</div>
69+
</div>
7070

7171
);
7272
};

‎src/components/Header/Header.js

+23-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,31 @@
11
import React from 'react';
2+
import './Header.scss'
3+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
4+
import { faPlayCircle } from '@fortawesome/free-solid-svg-icons'
25

36
const Header = () => {
47
return (
58
<div>
6-
9+
<section className="headerSection d-flex align-items-center">
10+
<div className="container ">
11+
<div className="row">
12+
{/* <div className="d-flex align-items-center"> */}
13+
<div className="col-md-6 cusHeader">
14+
<h1>THE BEST FITNESS STUDIO IN TOWN</h1>
15+
<br/>
16+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere quo dolorem ex doloribus cumque impedit deleniti voluptate deserunt saepe fugit vitae unde recusandae quidem et aut perferendis at, in eum.</p>
17+
<br/>
18+
<button className="joinUsBtn">JOIN US</button>
19+
</div>
20+
{/* </div> */}
21+
<div className="col-md-6 cusHeader2 d-flex align-items-center justify-content-center">
22+
<p>
23+
<FontAwesomeIcon icon={faPlayCircle}/>
24+
</p>
25+
</div>
26+
</div>
27+
</div>
28+
</section>
729
</div>
830
);
931
}

‎src/components/Header/Header.scss

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
.joinUsBtn{
2+
padding: 10px 40px;
3+
font-weight: bold;
4+
border: none;
5+
background-color: #fcd842;
6+
}
7+
8+
9+
10+
11+
.headerSection {
12+
// margin-top: 300px;
13+
background-image: url('../../images/edgar-chaparro-sHfo3WOgGTU-unsplash2.jpg');
14+
// background-color: #171426;
15+
background-size: cover; //cover
16+
background-repeat: no-repeat;
17+
background-position: center;
18+
height: 880px;
19+
margin-top: -100px;
20+
}
21+
22+
.cusHeader2 p{
23+
font-size: 100px;
24+
color: gray;
25+
}
26+
27+
// .cusHeader2 {
28+
29+
// }
30+
31+
.cusHeader p{
32+
color: white;
33+
}
34+
35+
.cusHeader h1{
36+
font-weight: 700;
37+
color: white;
38+
}

‎src/components/HomeBody/HomeBody.js

+144-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,152 @@
11
import React from 'react';
2+
import './HomeBody.scss'
3+
import div1img1 from '../../images/Group 80.png'
4+
import div1img2 from '../../images/Group 81.png'
5+
import div1img3 from '../../images/Group 82.png'
6+
import aboutImg from '../../images/wells-chan-H-vAxuWxmi8-unsplash2.jpg'
7+
import chooseUseImg1 from '../../images/Group 87.png'
8+
import chooseUseImg2 from '../../images/Group 88.png'
9+
import chooseUseImg3 from '../../images/gift-2.png'
10+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
11+
import { faArrowRight } from '@fortawesome/free-solid-svg-icons'
12+
13+
214

315
const HomeBody = () => {
416
return (
517
<div>
6-
18+
{/* <br/><br/> */}
19+
<section className="homeFirstDiv container">
20+
<div class="card-deck homeFirstDivMedia">
21+
<div class="card">
22+
<div class="card-body homeCategoryDivAll homeCategoryDiv1">
23+
<br/><br/>
24+
<img src={div1img1} alt="" width='15%' />
25+
<br/>
26+
<br/>
27+
<h3 style={{fontWeight:'bold'}} class="card-title">PROGRESSION</h3>
28+
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
29+
</div>
30+
</div>
31+
<div class="card">
32+
<div class="card-body homeCategoryDivAll homeCategoryDiv2">
33+
<br/><br/><br/><br/>
34+
<img src={div1img2} alt="" width='20%'/>
35+
<br/>
36+
<br/>
37+
<h3 style={{fontWeight:'bold', color:'#fcd842'}} class="card-title">WORKOUT</h3>
38+
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
39+
</div>
40+
</div>
41+
<div class="card">
42+
<div class="card-body homeCategoryDivAll homeCategoryDiv3">
43+
<br/><br/>
44+
<img src={div1img3} alt="" width='15%' />
45+
<br/>
46+
<br/>
47+
<h3 style={{fontWeight:'bold'}} class="card-title">NUTRITION</h3>
48+
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
49+
</div>
50+
</div>
51+
</div>
52+
</section>
53+
54+
55+
56+
<section className="homeSecondDiv container">
57+
<div className="row">
58+
<div className="col-md-6 homeAboutUsDiv">
59+
{/* <div class="card">
60+
<div class="card-body homeAboutUsDiv">
61+
62+
</div>
63+
</div> */}
64+
<img src={aboutImg} alt=""/>
65+
</div>
66+
<div className="col-md-6 homeAboutUsDiv2">
67+
<h1 style={{color:'#f4f4f5', fontWeight:'bold'}}>ABOUT US</h1>
68+
<h2 style={{color:'#fcd842', fontWeight:'bold'}}>WE ARE HERE TO DREAM!</h2>
69+
<h2 style={{fontWeight:'bold'}}>OUR TEAM IS HERE SURV YOU.</h2>
70+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus amet numquam cum voluptates cumque molestiae sunt maxime inventore facere ex dolores repellat, in natus labore soluta. Deserunt nam quidem quasi! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo hic fugit asperiores delectus omnis. Facere nemo quisquam iusto explicabo est dolores id. Nostrum incidunt quis cum beatae, ad itaque doloremque?</p>
71+
{/* <hr/>
72+
<hr/> */}
73+
</div>
74+
</div>
75+
</section>
76+
77+
78+
79+
<section className="homeThirdDiv container">
80+
<h2 style={{fontWeight:'bold', textAlign: 'center'}}>TRAINING
81+
<span style={{color:'#fcd842'}}> PROGRAMS</span>
82+
</h2>
83+
84+
<br/><br/>
85+
<div class="card-deck">
86+
<div class="card">
87+
<div class="card-body homeTraining homeTrainingDiv1" style={{textAlign: 'left', padding: '0px'}}>
88+
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
89+
<button class="card-title trainingBtn" style={{marginBottom: '40px'}}>YOGA TRAINING SESSION
90+
<FontAwesomeIcon icon={faArrowRight}/>
91+
</button>
92+
<br/>
93+
</div>
94+
</div>
95+
<div class="card">
96+
<div class="card-body homeTraining homeTrainingDiv2" style={{textAlign: 'left', padding: '0px'}}>
97+
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
98+
<button class="card-title trainingBtn" style={{marginBottom: '40px'}}>CARDIO TRAINING SESSION <FontAwesomeIcon icon={faArrowRight}/>
99+
</button>
100+
{/* <br/> */}
101+
</div>
102+
</div>
103+
</div>
104+
</section>
105+
106+
107+
<section className="homeLastDiv container">
108+
<h2 style={{fontWeight:'bold', textAlign: 'center'}}>
109+
<span style={{color:'#fcd842'}}>WHY </span>
110+
CHOOSE US
111+
</h2>
112+
113+
<br/><br/>
114+
<div class="card-deck">
115+
<div class="card">
116+
<div class="card-body homeChooseDivAll">
117+
<br/>
118+
<img src={chooseUseImg1} alt="" width='15%' />
119+
<br/>
120+
<br/>
121+
<br/>
122+
<h5 style={{fontWeight:'bold'}} class="card-title">FREE FITNESS TRAINING</h5>
123+
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
124+
</div>
125+
</div>
126+
<div class="card">
127+
<div class="card-body homeChooseDivAll">
128+
<br/>
129+
<img src={chooseUseImg2} alt="" width='15%'/>
130+
<br/>
131+
<br/>
132+
<br/>
133+
<h5 style={{fontWeight:'bold'}} class="card-title">TONS OF CARDIO &#38; STRENGTH</h5>
134+
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
135+
</div>
136+
</div>
137+
<div class="card">
138+
<div class="card-body homeChooseDivAll">
139+
<br/>
140+
<img src={chooseUseImg3} alt="" width='15%' />
141+
<br/>
142+
<br/>
143+
<br/>
144+
<h5 style={{fontWeight:'bold'}} class="card-title">NO COMMITMENT MEMBERSHIPS</h5>
145+
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
146+
</div>
147+
</div>
148+
</div>
149+
</section>
7150
</div>
8151
);
9152
}

0 commit comments

Comments
 (0)