Skip to content

Commit 8b845a8

Browse files
SarveshwarShuklaSarveshwarShukla
committed
added course page
1 parent 0f94f46 commit 8b845a8

File tree

123 files changed

+9339
-51
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

123 files changed

+9339
-51
lines changed

‎netlify.toml

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
[[redirects]]
2+
from = "/*"
3+
to = "/index.html"
4+
status = 200

‎public/_redirects

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* /index.html 200

‎src/App.js

+25-7
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@ import React from 'react'
22

33
import Home from './components/Home'
44
import CampusCaptainForm from './components/campus-captains-form/CampusCaptainForm'
5-
import { BrowserRouter as Router, Route} from "react-router-dom";
5+
import { BrowserRouter as Router, Route } from "react-router-dom";
66
import Discord from './components/discord/Discord'
7+
import CoursePage from './components/course-page/CoursePage'
8+
import { CodingEssentials, CompCoding, ComputerVision, CppEssentials, DeepLearning, DSAEssentials, DSALevelUp, DynamicProgramming, GameTheory, Git, GraphAlgorithm, MachineLearning, NaturalLanguage, PythonDataScience, PythonMasterCourse } from './components/course-page/individual-components/index'
79

810

911
const App = () => {
@@ -12,12 +14,28 @@ const App = () => {
1214

1315
return (
1416
<>
15-
<Router>
16-
<Route exact path="/"> <Home/></Route>
17-
<Route exact path="/campus-captains"><CampusCaptainForm/></Route>
18-
<Route exact path="/discord"> <Discord/> </Route>
19-
20-
</Router>
17+
<Router>
18+
<Route exact path="/"> <Home /></Route>
19+
<Route exact path="/campus-captains"><CampusCaptainForm /></Route>
20+
<Route exact path="/discord"> <Discord /> </Route>
21+
<Route exact path="/explore-courses"><CoursePage /></Route>
22+
<Route exact path="/coding-essentials"><CodingEssentials /></Route>
23+
<Route exact path="/competitive-programming"><CompCoding /></Route>
24+
<Route exact path="/computer-vision-specialisation"><ComputerVision /></Route>
25+
<Route exact path="/cpp-essentials"><CppEssentials /></Route>
26+
<Route exact path="/deep-learning"><DeepLearning /></Route>
27+
<Route exact path="/dsa-essentials"><DSAEssentials /></Route>
28+
<Route exact path="/dsa-levelup"><DSALevelUp /></Route>
29+
<Route exact path="/dynamic-programming"><DynamicProgramming /></Route>
30+
<Route exact path="/game-theory"><GameTheory /></Route>
31+
<Route exact path="/git-and-github"><Git /></Route>
32+
<Route exact path="/graph-algorithms"><GraphAlgorithm /></Route>
33+
<Route exact path="/machine-learning"><MachineLearning /></Route>
34+
<Route exact path="/natural-language"><NaturalLanguage /></Route>
35+
<Route exact path="/python-data-science"><PythonDataScience /></Route>
36+
<Route exact path="/python-master-course"><PythonMasterCourse /></Route>
37+
38+
</Router>
2139
</>
2240
)
2341
}

‎src/components/course-page/course-components/buy-on-udemy/BuyOnUdemy.jsx

+23-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,30 @@
11
import React from 'react'
22
import './buyOnUdemy.css'
3+
4+
import rocketMan from "../../../../assets/Images/main/rocket-man.png";
5+
6+
37
const BuyOnUdemy = () => {
48
return (
5-
<div>BuyOnUdemy</div>
9+
<div className="components-outer-container">
10+
<div className="buy-on-udemy-container">
11+
<div className="buy-on-udemy-internal-container">
12+
<div className="buy-on-udemy-left">
13+
<h3>Ready to take your</h3>
14+
<h3>Coding Skills to Next Level?</h3>
15+
<p>Join the Course Now!</p>
16+
<a href="#">
17+
Enroll now on Udemy
18+
</a>
19+
</div>
20+
<div className="buy-on-udemy-right">
21+
<div className="buy-on-udemy-right-image">
22+
<img src={rocketMan} alt="" />
23+
</div>
24+
</div>
25+
</div>
26+
</div>
27+
</div>
628
)
729
}
830

‎src/components/course-page/course-components/buy-on-udemy/buyOnUdemy.css

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
.buy-on-udemy-container {
2+
margin: auto;
3+
margin-left: 80px;
4+
margin-right: 80px;
5+
margin-bottom: 100px;
6+
}
7+
.buy-on-udemy-internal-container {
8+
background-color: #f9f9f9;
9+
border-radius: 20px;
10+
display: grid;
11+
grid-template-columns: 2fr 1fr;
12+
justify-content: center;
13+
align-items: center;
14+
}
15+
.buy-on-udemy-left {
16+
padding: 67px;
17+
}
18+
.buy-on-udemy-left h3 {
19+
font-size: 30px;
20+
}
21+
22+
.buy-on-udemy-left p {
23+
margin: 30px 0;
24+
font-size: 18px;
25+
font-weight: 300;
26+
}
27+
.buy-on-udemy-left a img {
28+
width: 223px;
29+
}
30+
.buy-on-udemy-left a {
31+
background: linear-gradient(90deg, #5848EA 0%, #9549EB 100%);
32+
color: white;
33+
padding: 10px 20px;
34+
border-radius: 100px;
35+
}
36+
.buy-on-udemy-right-image img {
37+
width: 324px;
38+
}
39+
40+
/* ========= Media Query (Medium Devices) ============ */
41+
@media screen and (max-width: 1074px) {
42+
.buy-on-udemy-internal-container {
43+
grid-template-columns: 1fr;
44+
justify-content: center;
45+
}
46+
.buy-on-udemy-container {
47+
display: flex;
48+
justify-content: center;
49+
}
50+
.buy-on-udemy-right-image{
51+
display: flex;
52+
justify-content: center;
53+
}
54+
}
55+
56+
/* =========== Media Query (Small Devices) ========== */
57+
@media screen and (max-width: 720px) {
58+
.buy-on-udemy-container {
59+
margin-left: 20px;
60+
margin-right: 20px;
61+
}
62+
.buy-on-udemy-internal-container {
63+
padding-top: 40px;
64+
width: fit-content;
65+
}
66+
.buy-on-udemy-left {
67+
padding: 30px;
68+
}
69+
.cbuy-on-udemy-left h3 {
70+
font-size: 25px;
71+
}
72+
.buy-on-udemy-left p {
73+
font-size: 16px;
74+
margin: 15px 0;
75+
}
76+
}
77+

‎src/components/course-page/course-components/course-description/CourseDescription.jsx

+164-6
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,168 @@
1-
import React from 'react'
2-
import './courseDescription.css'
1+
import React from "react";
2+
import "./courseDescription.css";
3+
import dartIcon from "../../../../assets/Images/main/dart.png";
4+
import speechBubbleIcon from "../../../../assets/Images/main/speech-bubble.png";
5+
import problemSolvingIcon from "../../../../assets/Images/main/problem-solve.png";
6+
import webDesignIcon from "../../../../assets/Images/main/web-design.png";
7+
import prateekBhaiyaImage from "../../../../assets/Images/main/prateek-bhaiya.png";
8+
import mohitBhaiyaImage from "../../../../assets/Images/main/mohit-bhaiya.png";
9+
import youtube from "../../../../assets/Images/main/youtube.png";
10+
import linkedin from "../../../../assets/Images/main/linkedin.png";
11+
import instagram from "../../../../assets/Images/main/instagram.png";
312

413
const CourseDescription = () => {
514
return (
6-
<div>CourseDescription</div>
7-
)
8-
}
15+
<div className="components-outer-container">
16+
<div className="course-description-container">
17+
<div className="course-description-internal-container">
18+
<div className="description-left">
19+
<div className="top">
20+
<div className="what-you-will-learn">
21+
<h4>What you'll learn</h4>
22+
<div className="learn-columns">
23+
<span>Array1</span>
24+
<span>Array1</span>
25+
<span>Array1</span>
26+
<span>Array1</span>
27+
<span>Array1</span>
28+
<span>Array1</span>
29+
<span>Array1</span>
30+
<span>Array1</span>
31+
<span>Array1</span>
32+
<span>Array1</span>
33+
<span>Array1</span>
34+
<span>Array1</span>
35+
</div>
36+
</div>
37+
<div className="course-overview">
38+
<h4>Course Overview</h4>
39+
<p>
40+
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
41+
Distinctio, neque!
42+
</p>
43+
<p>
44+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
45+
Architecto nihil eveniet repellat quis minima autem amet
46+
commodi necessitatibus maxime? Officiis!
47+
</p>
48+
<p>
49+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
50+
Architecto nihil eveniet repellat quis minima autem amet
51+
commodi necessitatibus maxime? Officiis!
52+
</p>
53+
<div className="overview-columns">
54+
<span>Topic1</span>
55+
<span>Topic1</span>
56+
<span>Topic1</span>
57+
<span>Topic1</span>
58+
<span>Topic1</span>
59+
<span>Topic1</span>
60+
<span>Topic1</span>
61+
<span>Topic1</span>
62+
<span>Topic1</span>
63+
<span>Topic1</span>
64+
</div>
65+
</div>
66+
</div>
67+
<div className="bottom">
68+
<h4>What makes us special?</h4>
69+
<div className="bottom-children">
70+
<div className="bottom-child">
71+
<img src={speechBubbleIcon} alt="" />
72+
<span>Unlimited doubt support</span>
73+
</div>
74+
<div className="bottom-child">
75+
<img src={dartIcon} alt="" />
76+
<span>Industry vetted curriculumt</span>
77+
</div>
78+
<div className="bottom-child">
79+
<img src={webDesignIcon} alt="" />
80+
<span>Practice codes, get feedback</span>
81+
</div>
82+
<div className="bottom-child">
83+
<img src={problemSolvingIcon} alt="" />
84+
<span>Intuitive and Detailed courses</span>
85+
</div>
86+
</div>
87+
</div>
88+
</div>
89+
<div className="description-right">
90+
<h4>Meet the Instructor</h4>
91+
<div className="instructor-group">
92+
<div className="instructor-one instructor">
93+
<img src={prateekBhaiyaImage} alt="" />
94+
<div className="instructor-info">
95+
<p>
96+
Prateek is a popular programming instructor and an ace
97+
software engineer, currently working with Scaler and created
98+
Coding Minutes. He is known for his amazingly simplified
99+
explanations that make everyone fall in love with
100+
programming. <br /> He has over 5+ years of teaching
101+
experience and has trained over 75,000 students in classroom
102+
boot camps & online courses in the past.
103+
</p>
104+
<div className="social-links">
105+
<a
106+
href="https://www.linkedin.com/in/prateeknarang27/"
107+
target="_blank"
108+
>
109+
<img src={linkedin} alt="" />
110+
</a>
111+
<a
112+
href="https://www.instagram.com/prateeknarang27/"
113+
target="_blank"
114+
>
115+
<img src={instagram} alt="" />
116+
</a>
117+
<a
118+
href="https://www.youtube.com/c/PrateekNarang27"
119+
target="_blank"
120+
>
121+
<img src={youtube} alt="" />
122+
</a>
123+
</div>
124+
</div>
125+
</div>
126+
<div className="instructor-two instructor">
127+
<img src={prateekBhaiyaImage} alt="" />
128+
<div className="instructor-info">
129+
<p>
130+
Prateek is a popular programming instructor and an ace
131+
software engineer, currently working with Scaler and created
132+
Coding Minutes. He is known for his amazingly simplified
133+
explanations that make everyone fall in love with
134+
programming. <br /> He has over 5+ years of teaching
135+
experience and has trained over 75,000 students in classroom
136+
boot camps & online courses in the past.
137+
</p>
138+
<div className="social-links">
139+
<a
140+
href="https://www.linkedin.com/in/prateeknarang27/"
141+
target="_blank"
142+
>
143+
<img src={linkedin} alt="" />
144+
</a>
145+
<a
146+
href="https://www.instagram.com/prateeknarang27/"
147+
target="_blank"
148+
>
149+
<img src={instagram} alt="" />
150+
</a>
151+
<a
152+
href="https://www.youtube.com/c/PrateekNarang27"
153+
target="_blank"
154+
>
155+
<img src={youtube} alt="" />
156+
</a>
157+
</div>
158+
</div>
159+
</div>
160+
</div>
161+
</div>
162+
</div>
163+
</div>
164+
</div>
165+
);
166+
};
9167

10-
export default CourseDescription
168+
export default CourseDescription;

0 commit comments

Comments
 (0)