Skip to content

Commit 94ab8fe

Browse files
shree404shree404
committed
Hero section completed
1 parent cf9e9d2 commit 94ab8fe

File tree

9 files changed

+89
-37
lines changed

9 files changed

+89
-37
lines changed

‎package-lock.json‎

Lines changed: 17 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
},
1212
"dependencies": {
1313
"bootstrap": "^5.3.3",
14+
"bootstrap-icons": "^1.11.3",
1415
"react": "^18.3.1",
1516
"react-bootstrap": "^2.10.4",
1617
"react-dom": "^18.3.1",

‎src/Components/landingpage/button.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
function Button({buttontext,buttonclass}){
22
return(
33
<>
4+
<div className="Button-container">
45
<button className={buttonclass}>{buttontext}</button>
6+
</div>
57
</>
68
)
79
}

‎src/Components/landingpage/hero.jsx‎

Lines changed: 20 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,28 @@
11
import Head from "./head";
22
import Button from "./button";
33

4-
5-
function Hero(){
6-
7-
const description = <>
8-
A non-profit organization founded by group of tech-obsessed youngsters,<br /> concentrating on offering digital literacy programs and instructional tools to students
4+
function Hero() {
5+
const description = (
6+
<>
7+
A non-profit organization founded by group of tech-obsessed youngsters,
8+
<br /> concentrating on offering digital literacy programs and
9+
instructional tools to students
910
</>
11+
);
1012

11-
return(
12-
<>
13-
<div className="hero">
14-
<div>
15-
<Head head={"Leaders are those who empower others"} description={description} />
16-
<Button buttontext={"Explore More"} buttonclass={"herobutton"} />
17-
</div>
13+
return (
14+
<>
15+
<div className="hero">
16+
<div>
17+
<Head
18+
head={"Leaders are those who empower others"}
19+
description={description}
20+
/>
21+
<Button buttontext={"Explore More"} buttonclass={"herobutton"} />
1822
</div>
19-
{/* <div className="hero">
20-
<div className='container'>
21-
<div className="hero-text">
22-
<h1>Leaders are those who empower others.</h1>
23-
<p>A non-profit organization founded by group of tech-obsessed youngsters, concentrating on offering digital literacy programs and instructional tools to students.
24-
</p>
25-
<button className="btn">Explore more&nbsp;<i className="fa-solid fa-arrow-right"></i>
26-
</button>
27-
</div></div>
28-
</div> */}
29-
</>
30-
)
23+
</div>
24+
</>
25+
);
3126
}
3227

33-
export default Hero;
28+
export default Hero;

‎src/Styles/App.css‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040

4141
.hero {
4242
min-height: 100vh;
43-
background: linear-gradient(rgba(8, 0, 58, 0.7019607843), rgba(8, 0, 58, 0.7019607843)), url(/herobg.png);
43+
background: linear-gradient(rgba(60, 55, 94, 0.7019607843), rgba(70, 63, 111, 0.7019607843)), url(/herobg.png);
4444
background-size: cover;
4545
background-position: center;
4646
color: #fff;
@@ -49,18 +49,38 @@
4949
justify-content: center;
5050
}
5151

52+
.Button-container {
53+
display: flex;
54+
justify-content: center;
55+
}
56+
57+
.herobutton {
58+
height: 3rem;
59+
padding: 0.5rem 1rem;
60+
text-align: center;
61+
font-family: "Poppins", sans-serif;
62+
font-size: 1rem;
63+
font-weight: 500;
64+
color: white;
65+
background-color: #000080;
66+
border: none;
67+
}
68+
.herobutton:hover {
69+
color: #000080;
70+
background-color: white;
71+
}
72+
5273
.Head {
5374
text-align: center;
75+
color: white;
5476
}
5577
.Head-title {
5678
text-align: center;
5779
font-size: 2.5rem;
5880
font-family: "Poppins", sans-serif;
59-
color: white;
6081
}
6182
.Head-description {
6283
text-align: center;
6384
font-size: 1rem;
6485
font-family: "Poppins", sans-serif;
65-
color: white;
6686
}/*# sourceMappingURL=App.css.map */

‎src/Styles/App.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Styles/LandingPage/_Button.scss‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,20 @@
1-
.herobutton{
2-
// display: none;
3-
}
1+
.Button-container {
2+
display: flex;
3+
justify-content: center;
4+
}
5+
6+
.herobutton {
7+
height: 3rem;
8+
padding: 0.5rem 1rem;
9+
text-align: center;
10+
font-family: $font;
11+
font-size: 1rem;
12+
font-weight: 500;
13+
color: white;
14+
background-color: #000080;
15+
border: none;
16+
&:hover {
17+
color: #000080;
18+
background-color: white;
19+
}
20+
}

‎src/Styles/LandingPage/_Head.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
.Head{
22
text-align: center;
3+
color: white;
34
&-title{
45
text-align: center;
56
font-size: 2.5rem;
67
font-family: $font;
7-
color: white;
88
}
99
&-description{
1010
text-align: center;
1111
font-size: 1rem;
1212
font-family: $font;
13-
color: white;
1413
}
15-
}
14+
}
15+

‎src/Styles/LandingPage/_Hero.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
.hero {
22
min-height: 100vh;
3-
background: linear-gradient(#08003ab3,#08003ab3),url(/herobg.png);
3+
background: linear-gradient(#3c375eb3,#463f6fb3),url(/herobg.png);
44
background-size: cover;
55
background-position: center;
66
color: #fff;
77
display: flex;
88
align-items: center;
9-
justify-content: center
9+
justify-content: center;
1010
}
1111

0 commit comments

Comments
 (0)