Skip to content

Commit 3df23a6

Browse files
devsdenepaldevsdenepal
committed
add dashboard
1 parent 802f97c commit 3df23a6

File tree

4 files changed

+163
-2
lines changed

4 files changed

+163
-2
lines changed

‎src/App.jsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import './App.css';
2+
import Footer from './assets/Components/Footer';
23
import Navbar from './assets/Components/Navbar';
4+
import Dashboard from './assets/Pages/Dashboard';
35

46
function App() {
57

@@ -8,9 +10,11 @@ function App() {
810
<>
911
<Navbar></Navbar>
1012
<div className="container py-4 px-3 mx-auto">
11-
<h1>Hello, Bootstrap and Vite!</h1>
12-
<button className="btn btn-primary">Primary button</button>
13+
<h1>Welcome to Open Courses!</h1>
14+
15+
<Dashboard></Dashboard>
1316
</div>
17+
<Footer></Footer>
1418
</>
1519
);
1620
}

‎src/assets/Components/Footer.jsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
export default function Footer() {
2+
return (
3+
<footer className="bg-body-tertiary text-center text-lg-start align-items-center">
4+
{/* Grid container */}
5+
<div className="container p-4 pb-0">
6+
<form action="">
7+
{/* Grid row */}
8+
<div className="row">
9+
{/* Grid column */}
10+
<div className="col-auto mb-4 mb-md-0">
11+
<p className="pt-2">
12+
<strong>Sign up for our newsletter</strong>
13+
</p>
14+
</div>
15+
{/* Grid column */}
16+
17+
{/* Grid column */}
18+
<div className="col-md-5 col-12 mb-4 mb-md-0">
19+
{/* Email input */}
20+
<div data-mdb-input-init className="form-outline mb-4">
21+
<input type="email" id="form5Example22" className="form-control" placeholder="Email Address"/>
22+
</div>
23+
</div>
24+
{/* Grid column */}
25+
26+
{/* Grid column */}
27+
<div className="col-auto mb-4 mb-md-0">
28+
{/* Submit button */}
29+
<button data-mdb-ripple-init type="button" className="btn btn-primary mb-4">
30+
Subscribe
31+
</button>
32+
</div>
33+
{/* Grid column */}
34+
</div>
35+
{/* Grid row */}
36+
</form>
37+
</div>
38+
{/* Grid container */}
39+
40+
{/* Copyright */}
41+
<div className="text-center p-3" style={{ backgroundColor: 'rgba(0, 0, 0, 0.05)' }}>
42+
©
43+
<a className="text-body" href="https://krimsonsquad.tech/">Krimsonsquad.tech</a> 2024
44+
</div>
45+
{/* Copyright */}
46+
</footer>
47+
);
48+
}
49+

‎src/assets/Pages/Dashboard.jsx‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
function Dashboard() {
2+
return (
3+
<div className="container my-4">
4+
<h2 className="text-center mb-4">Course Dashboard</h2>
5+
<div className="row row-cols-1 row-cols-md-3 g-3">
6+
<div className="col">
7+
<div className="card h-100">
8+
<img
9+
src="https://ashokitech.com/uploads/course/react-js-online-training.png"
10+
className="card-img-top"
11+
alt="Course 1"
12+
/>
13+
<div className="card-body">
14+
<h5 className="card-title">Course 1: Introduction to React</h5>
15+
<p className="card-text">
16+
Learn the fundamentals of React, one of the most popular JavaScript libraries for building user interfaces.
17+
</p>
18+
</div>
19+
</div>
20+
</div>
21+
22+
<div className="col">
23+
<div className="card h-100">
24+
<img
25+
src="https://img-c.udemycdn.com/course/480x270/5450776_0385.jpg"
26+
className="card-img-top"
27+
alt="Course 2"
28+
/>
29+
<div className="card-body">
30+
<h5 className="card-title">Course 2: Advanced JavaScript</h5>
31+
<p className="card-text">
32+
Dive deeper into JavaScript and learn advanced concepts like closures, async programming, and more.
33+
</p>
34+
</div>
35+
</div>
36+
</div>
37+
38+
<div className="col">
39+
<div className="card h-100">
40+
<img
41+
src="https://livetechindia.com/wp-content/uploads/2023/12/Nodejs-Application-Development-1024x683.jpg"
42+
className="card-img-top"
43+
alt="Course 3"
44+
/>
45+
<div className="card-body">
46+
<h5 className="card-title">Course 3: Web Development with Node.js</h5>
47+
<p className="card-text">
48+
Build scalable web applications using Node.js, Express, and MongoDB.
49+
</p>
50+
</div>
51+
</div>
52+
</div>
53+
54+
<div className="col">
55+
<div className="card h-100">
56+
<img
57+
src="https://cdn.shopaccino.com/igmguru/products/data-science--with-python-igmguru_176161162_l.jpg?v=444p"
58+
className="card-img-top"
59+
alt="Course 4"
60+
/>
61+
<div className="card-body">
62+
<h5 className="card-title">Course 4: Python for Data Science</h5>
63+
<p className="card-text">
64+
Master Python and its libraries to analyze data and build machine learning models.
65+
</p>
66+
</div>
67+
</div>
68+
</div>
69+
70+
<div className="col">
71+
<div className="card h-100">
72+
<img
73+
src="https://www.tgcindia.com/wp-content/uploads/2020/09/UX-design-course-at-TGC.jpg"
74+
className="card-img-top"
75+
alt="Course 5"
76+
/>
77+
<div className="card-body">
78+
<h5 className="card-title">Course 5: UI/UX Design Fundamentals</h5>
79+
<p className="card-text">
80+
Learn the principles of UI/UX design and how to create intuitive user interfaces.
81+
</p>
82+
</div>
83+
</div>
84+
</div>
85+
86+
<div className="col">
87+
<div className="card h-100">
88+
<img
89+
src="https://codequotient.com/blog/wp-content/uploads/2022/09/Is-It-Worth-Doing-AWS-Cloud-Computing-Course.jpg"
90+
className="card-img-top"
91+
alt="Course 6"
92+
/>
93+
<div className="card-body">
94+
<h5 className="card-title">Course 6: Cloud Computing with AWS</h5>
95+
<p className="card-text">
96+
Get started with cloud computing using Amazon Web Services (AWS) and learn how to build cloud infrastructure.
97+
</p>
98+
</div>
99+
</div>
100+
</div>
101+
</div>
102+
</div>
103+
);
104+
}
105+
106+
export default Dashboard;
107+

‎src/index.css‎

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

0 commit comments

Comments
 (0)