Skip to content

Commit c4050bf

Browse files
shree404shree404
committed
404 page not found page added
1 parent 01917ba commit c4050bf

38 files changed

+198
-584
lines changed

‎public/breadcrum.jpg‎

387 KB
Loading

‎src/App.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,15 @@ import {
77
} from "react-router-dom";
88

99
import LandingPage from "./Pages/Landingpage";
10+
import PageNotFound from "./Pages/pagenotfound";
1011

1112

1213
const router = createBrowserRouter(
1314
createRoutesFromElements(
1415
<Route>
1516
<Route path="/" element={<LandingPage />} />,
1617
<Route path="/home" element={<LandingPage />} />,
18+
<Route path="*" element={<PageNotFound />} />,
1719
</Route>
1820
)
1921
);

‎src/Components/landingpage/Breadcrum.jsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { Link } from "react-router-dom";
2+
import { HouseFill , ChevronRight } from "react-bootstrap-icons";
3+
import Container from "react-bootstrap/Container";
4+
import Row from "react-bootstrap/Row";
5+
import Col from "react-bootstrap/Col";
6+
7+
8+
9+
function Breadcrum({pagehead}){
10+
return(
11+
<><div className="Breadcrum">
12+
<Container>
13+
<Row>
14+
<Col md={12} className="Breadcrum-col11">
15+
<h1>{pagehead}</h1>
16+
<div className="Breadcrum-container">
17+
<div className="Breadcrum-containerlink">
18+
<HouseFill className="Breadcrum-container__icon" />
19+
<p className="Breadcrum-containerlink__home"> <Link to="/" className="link-default"> home </Link></p>
20+
</div>
21+
<ChevronRight className="Breadcrum-container__icon" />
22+
<p className="Breadcrum-containerlink__pagehead">{pagehead}</p>
23+
</div>
24+
</Col>
25+
</Row>
26+
</Container>
27+
</div>
28+
</>
29+
)
30+
}
31+
32+
export default Breadcrum;

‎src/Pages/pagenotfound.jsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { HouseFill , ChevronRight } from "react-bootstrap-icons";
2+
import Container from "react-bootstrap/Container";
3+
import Row from "react-bootstrap/Row";
4+
import Col from "react-bootstrap/Col";
5+
import Navbar from "../Components/landingpage/Navbar";
6+
import Footer from "../Components/landingpage/footer";
7+
import Button from "../Components/landingpage/button";
8+
import { Link } from "react-router-dom";
9+
10+
11+
function PageNotFound(){
12+
return(
13+
<>
14+
<Navbar/>
15+
<div className="Breadcrum">
16+
<Container>
17+
<Row>
18+
<Col md={12} className="Breadcrum-col11">
19+
<h1>Page Not Found</h1>
20+
<div className="Breadcrum-container">
21+
<div className="Breadcrum-containerlink">
22+
<HouseFill className="Breadcrum-container__icon" />
23+
<p className="Breadcrum-containerlink__home"> <Link to="/" className="link-default"> home </Link></p>
24+
</div>
25+
<ChevronRight className="Breadcrum-container__icon" />
26+
<p className="Breadcrum-containerlink__pagehead">Page Not Found</p>
27+
</div>
28+
<div className="Breadcrum-footer">
29+
<h3>404 error</h3>
30+
<p>opps! this page is not found</p>
31+
<Button buttontext={"Back to Home"} buttonclass={"herobutton"} buttoncontainer={"Button-container"}/>
32+
</div>
33+
</Col>
34+
</Row>
35+
</Container>
36+
</div>
37+
<Footer/>
38+
</>
39+
)
40+
}
41+
42+
export default PageNotFound;

‎src/Styles/App.css‎

Lines changed: 58 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666
width: 100%;
6767
}
6868

69-
.hero {
69+
.hero, .Breadcrum {
7070
min-height: 100vh;
7171
background: linear-gradient(rgba(60, 55, 94, 0.7019607843), rgba(70, 63, 111, 0.7019607843)), url(/herobg.png);
7272
background-size: cover;
@@ -109,7 +109,7 @@
109109
border: 1px solid #000080;
110110
}
111111

112-
.Head {
112+
.Head, .Breadcrum-col11 h1 {
113113
text-align: center;
114114
color: white;
115115
}
@@ -118,7 +118,7 @@
118118
font-size: 2.5rem;
119119
font-family: "Poppins", sans-serif;
120120
}
121-
.Head-description, .About-row1__col2__introduction {
121+
.Head-description, .Breadcrum-containerlink__home, .Breadcrum-containerlink__pagehead, .About-row1__col2__introduction {
122122
text-align: center;
123123
font-size: 1rem;
124124
font-family: "Poppins", sans-serif;
@@ -343,6 +343,7 @@
343343
font-family: "Poppins", sans-serif;
344344
color: white;
345345
margin-top: 5rem;
346+
margin-bottom: 5rem;
346347
position: relative;
347348
}
348349
.ContactForm-form {
@@ -458,7 +459,6 @@
458459

459460
.Footer {
460461
background-color: #e0e0f2;
461-
margin-top: 4rem;
462462
padding: 2rem 0rem;
463463
}
464464
.Footer-col1__introduction {
@@ -517,4 +517,58 @@
517517
.MobileNavList-item:hover {
518518
color: #000080;
519519
text-decoration: underline;
520+
}
521+
522+
.Breadcrum {
523+
font-family: "Poppins", sans-serif;
524+
}
525+
.Breadcrum-col11 {
526+
bottom: 0rem;
527+
}
528+
.Breadcrum-col11 h1 {
529+
margin-top: 10rem;
530+
text-align: start;
531+
font-size: 3.5rem;
532+
margin-bottom: 1rem;
533+
}
534+
.Breadcrum-container {
535+
display: flex;
536+
gap: 0.75rem;
537+
}
538+
.Breadcrum-containerlink {
539+
display: flex;
540+
gap: 0.5rem;
541+
}
542+
.Breadcrum-containerlink:hover .Breadcrum-container__icon {
543+
color: #e0e0f2;
544+
}
545+
.Breadcrum-containerlink:hover .Breadcrum-containerlink__home, .Breadcrum-containerlink:hover .Breadcrum-containerlink__pagehead {
546+
color: #e0e0f2;
547+
}
548+
.Breadcrum-containerlink__home, .Breadcrum-containerlink__pagehead {
549+
text-transform: capitalize;
550+
}
551+
.Breadcrum-containerlink__pagehead {
552+
color: #e0e0f2;
553+
}
554+
.Breadcrum-container__icon {
555+
color: white;
556+
font-size: 1.5rem;
557+
}
558+
.Breadcrum-footer {
559+
padding-top: 5rem;
560+
padding-bottom: 5rem;
561+
text-align: center;
562+
}
563+
.Breadcrum-footer h3 {
564+
font-size: 2.25rem;
565+
color: #e0e0f2;
566+
text-transform: capitalize;
567+
font-weight: 400;
568+
}
569+
.Breadcrum-footer p {
570+
font-size: 1.125rem;
571+
color: #e0e0f2;
572+
text-transform: capitalize;
573+
font-weight: 300;
520574
}/*# 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/_Breadcrum.scss‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
.Breadcrum{
2+
@extend .hero;
3+
font-family: $font;
4+
&-col11 {
5+
bottom: 0rem;
6+
& h1 {
7+
margin-top: 10rem;
8+
@extend .Head;
9+
text-align: start;
10+
font-size: 3.5rem;
11+
margin-bottom: 1rem;
12+
}
13+
}
14+
&-container {
15+
display: flex;
16+
gap: 0.75rem;
17+
&link {
18+
display: flex;
19+
gap: 0.5rem;
20+
&:hover {
21+
.Breadcrum-container__icon {
22+
color:#e0e0f2;
23+
}
24+
.Breadcrum-containerlink__home {
25+
color: #e0e0f2;
26+
}
27+
}
28+
&__home {
29+
@extend .Head-description;
30+
text-transform: capitalize;
31+
}
32+
&__pagehead {
33+
@extend .Breadcrum-containerlink__home;
34+
color: #e0e0f2;
35+
}
36+
}
37+
&__icon {
38+
color: white;
39+
font-size: 1.5rem;
40+
}
41+
}
42+
&-footer{
43+
padding-top: 5rem;
44+
padding-bottom: 5rem;
45+
text-align: center;
46+
& h3{
47+
font-size: 2.25rem;
48+
color: #e0e0f2;
49+
text-transform: capitalize;
50+
font-weight: 400;
51+
}
52+
& p{
53+
font-size: 1.125rem;
54+
color: #e0e0f2;
55+
text-transform: capitalize;
56+
font-weight: 300;
57+
}
58+
}
59+
}

‎src/Styles/LandingPage/_Contact.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
font-family: $font;
33
color: white;
44
margin-top: 5rem;
5+
margin-bottom: 5rem;
56
position: relative;
67
&-form {
78
background-color: #10101b ;

‎src/Styles/LandingPage/_Footer.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.Footer{
22
background-color: #e0e0f2;
3-
margin-top: 4rem;
3+
// margin-top: 4rem;
44
padding: 2rem 0rem;
55
&-col1{
66
&__introduction{

‎src/Styles/LandingPage/_Index.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,5 @@
1010
@import 'Testimonials';
1111
@import 'Contact';
1212
@import 'Footer';
13-
@import 'MobileNavList';
13+
@import 'MobileNavList';
14+
@import 'Breadcrum';

0 commit comments

Comments
 (0)