[FEATURE]: <Add Courses Section>

src/App.js

@@ -2,11 +2,13 @@ import React from 'react'
 import './App.css'
 import Footer from './components/Footer.js'
 import About from './components/About.js'
+import Courses from './components/Courses.js'
 
 const App = () => {
  return (
  <div className="main">
  <About />
+ <Courses />
  <Footer />
  </div>
  )

src/components/Courses.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import '../styles/Courses.css';
+import course from '../assests/course.png'
+
+const Courses = () => {
+ return (
+ <div className="courses">
+ <div className="courses_text">
+ <h2>Boost your career with our <br /> Complete Hands On Courses</h2>
+ <ul className="courses_ul">
+ <li>We believe that every student, irrespective of their college or <br/> branch, can make it big. Community Classroom is an <br/> initiative built on this thought.</li>
+ <li>We provide hands-on training, mentorship for FREE and have <br/> an inclusive community.</li>
+ <li>Get expert guidance with career, Open Source, and <br/> internships, jobs around the world.</li>
+ </ul>
+ <a href="https://discord.gg/Wydusp72AB" target="_blank" rel="noreferrer">
+ <button id="bt_discord">Join our Discord</button>
+ </a>
+ </div>
+ <img className="courses_img" src={course} alt="" />
+ </div>
+ )
+}
+
+export default Courses

src/styles/About.css

@@ -1,6 +1,6 @@
 .about{ 
  display: flex;
- margin-top: 5%;
+ margin-top: 10%;
  }
 
  .about_img{ 

src/styles/Courses.css

@@ -0,0 +1,48 @@
+.courses{ 
+ display: flex;
+ margin-top: 10%;
+ }
+
+ .courses_img{ 
+ margin-left: 5%;
+ width: 584.5px;
+ height: 425px;
+
+ }
+
+ .courses_text{
+ margin-left: 10%;
+ width: 584px;
+ height: 243px;
+ font-size: 20px;
+ line-height: 145%;
+ color: #5F7086;
+ }
+
+ .courses_ul{
+ list-style: disc;
+ }
+
+ li{
+ padding-top: 3.5%;
+ }
+
+ h2{
+ color: #181E25;
+ font-size: 36px;
+ padding-bottom:5%;
+ }
+
+ #bt_discord{
+ margin-top: 8%;
+ padding: 12px 24px;
+ gap: 10px;
+ width: 233px;
+ height: 53px;
+ background: #4094EC;
+ border-radius: 4px;
+ font-size: 20px;
+ line-height: 145%;
+ border: none;
+ color: #FFFFFF;
+ }

src/styles/Footer.css

@@ -5,6 +5,7 @@
  .row{
  display: flex;
  flex-wrap: wrap;
+ margin-top:10%;
  }
  ul{
  list-style: none;