[FEATURE]: <Add Mentorship Section>

src/App.js

@@ -4,13 +4,15 @@ import Footer from './components/Footer.js'
 import About from './components/About.js'
 import Courses from './components/Courses.js'
 import Event from './components/Event.js'
+import Mentorship from './components/Mentorship.js'
 
 const App = () => {
  return (
  <div className="main">
  <About />
  <Courses />
  <Event />
+ <Mentorship />
  <Footer />
  </div>
  )

src/components/Courses.js

@@ -6,7 +6,8 @@ const Courses = () => {
  return (
  <div className="courses">
  <div className="courses_text">
- <h2>Boost your career with our <br /> Complete Hands On Courses</h2>
+ <h2>Boost your career with our </h2>
+ <h2>Complete Hands On Courses</h2>
  <ul className="courses_ul">
  <li>All courses are FREE while never compromising on quality.</li>
  <li>We cover every topic in detail with a hands-on approach and <br /> mentor you to stand out to get opportunities by breaking all <br /> the barriers.</li>

src/components/Mentorship.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import '../styles/Mentorship.css';
+import mentor from '../assests/mentor.png'
+
+
+const Mentorship = () => {
+ return (
+ <div className="mentor">
+ <div className="mentor_text">
+ <h2>Roadmaps & Mentorship made </h2>
+ <h2>by best in the industry</h2>
+ <ul className="mentor_ul">
+ <li>A comprehensive answer to all of your mentoring needs, <br /> including educational materials, communities to join, <br /> opportunities, and much more.</li>
+ <li>Roadmaps to help you stay on track, including those for <br /> open-source, full-stack, devrel, and more.</li>
+ </ul>
+ <a href="" target="_blank" rel="noreferrer">
+ <button id="bt_mentor">Explore all Roadmaps</button>
+ </a>
+ </div>
+ <img className="mentor_img" src={mentor} alt="" />
+ </div>
+ )
+}
+
+export default Mentorship

src/styles/Mentorship.css

@@ -0,0 +1,49 @@
+.mentor{ 
+ display: flex;
+ margin-top: 10%;
+ }
+
+ .mentor_img{ 
+ margin-left: 5%;
+ width: 584.5px;
+ height: 425px;
+
+ }
+
+ .mentor_text{
+ margin-left: 10%;
+ width: 584px;
+ height: 243px;
+ font-size: 20px;
+ line-height: 145%;
+ color: #5F7086;
+ }
+
+ .mentor_ul{
+ list-style: disc;
+ }
+
+ li{
+ padding-top: 3.5%;
+ }
+
+ h2{
+ color: #181E25;
+ font-size: 36px;
+ padding-bottom:5%;
+ }
+
+ #bt_mentor{
+ margin-top: 8%;
+ align-items: center;
+ padding: 12px 24px;
+ gap: 10px;
+ width: 275px;
+ height: 53px;
+ background: #4094EC;
+ border-radius: 4px;
+ font-size: 20px;
+ line-height: 145%;
+ border: none;
+ color: #FFFFFF;
+ }