[FEAT]: Event Page

src/components/Course/Course.js

@@ -14,7 +14,6 @@ import FullStack from '../../assets/FullStack.png'
 import DevOps from '../../assets/DevOps.png'
 import Python from '../../assets/Python.png'
 
-
 const course = () => {
  return (
  <>

src/components/Courses.js

@@ -14,7 +14,7 @@ const Courses = () => {
  <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>
  <li>Explore a wide range of courses including Data Structures & <br /> Algorithms, Web Development, DevOps, Machine Learning, <br /> and more!</li>
  </ul>
- <a href="" target="_blank" rel="noreferrer">
+ <a href="/course">
  <button id="bt_discord">Explore Courses <img className="arrowright" src={Arrowright} alt="arrowup" /></button>
  </a>
  </div>

src/components/Event/Events.css

@@ -0,0 +1,133 @@
+.events_cont_para{
+ position: absolute;
+ max-width: 80%;
+ font-style: normal;
+ font-weight: 600;
+ font-size: 76px;
+ line-height: 96px;
+ text-align: center;
+ letter-spacing: 0.01em;
+ color: #181E25;
+ left: 10%;
+ top: 10rem;
+}
+.events_cont_b{
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ position: absolute;
+ max-width: 80%;
+ width: 1300px;
+ height: 232px;
+ left: 10%;
+ top: 30rem;
+ background: #FFFFFF;
+ box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.12);
+ border-radius: 8px;
+ }
+.events_cont_b_1{
+ display: flex;
+ margin-top: 22px;
+ margin-left: 17%;
+ width: 1200px;
+ max-width: 70%;
+}
+.events_cont_b_1 img{
+ margin-top: 20px;
+ width:56px;
+ height: 56px;
+}
+.events_cont_b_1 p{
+ margin-top: 35px;
+ color: #181E25;
+ font-weight: 600;
+ font-size: 1.2rem;
+ padding-left: 12px;
+}
+.events_cont_b_2 p{
+ margin-top: 35px;
+ color: #181E25;
+ font-weight: 600;
+ font-size: 1.2rem;
+ padding-left: 12px;
+}
+.events_cont_b_2{
+ display: flex;
+ margin-top: 22px;
+ margin-left: 17%;
+ width: 1200px;
+ max-width: 70%;
+}
+.events_cont_b_2 img{
+ margin-top: 20px;
+ width:56px;
+ height: 56px;
+
+}
+.events_cont_b_1_frame_1,
+.events_cont_b_1_frame_2{
+ width: 280px;
+ display: flex;
+
+}
+.events_cont_b_1_frame_2{
+ padding-left: 76px;
+}
+.events_cont_b_1_frame_3{
+ padding-left: 76px;
+ width: 280px;
+ display: flex;
+}
+.events_cont_b_1_frame_4{
+ width: 280px;
+ display: flex;
+}
+.events_cont_b_1_frame_5{
+ padding-left: 76px;
+ width: 280px;
+ display: flex;
+}
+.events_cont_b_1_frame_6{
+ padding-left: 76px;
+ width: 280px;
+ display: flex;
+}
+.events_cont_2{
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(250px, 5fr));
+ grid-gap: 70px;
+ align-items: stretch;
+ padding-left: 20%;
+ padding-right: 20%;
+ border-radius: 10px;
+}
+.events_cont_2> .events_cont_2_card{
+ border: 1px solid #ccc;
+ box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
+}
+.events_cont_2{
+ margin-top: 50rem;
+}
+.events_cont_2_card_1{
+ max-width: 100%;
+}
+.events_cont_2_card_1_heading{
+ font-style: normal;
+ font-weight: 551;
+ font-size: 20px;
+ line-height: 145%;
+ padding-left: 10px;
+ padding-top: 30px;
+ color: #181E25;
+ flex: none;
+ order: 1;
+ align-self: stretch;
+}
+.events_cont_2_card_1_para_1{
+ font-weight: 450;
+ font-size: 18px;
+ line-height: 145%;
+ padding-left: 10px;
+ padding-top: 10px;
+ color: #5F7086;
+}

src/components/Event/Events.js

@@ -0,0 +1,73 @@
+import React from 'react'
+import './Events.css'
+import events_sema from '../../assets/events_sema.png'
+
+const Events = () => {
+ return (
+ <div className="events">
+ <div className="events_cont_1">
+ <div className="events_cont_a">
+ <p className="events_cont_para">
+ Events that inspire
+ </p>
+ <p>
+ Explore events in various domains to upskill yourself, network with industry experts, and <br /> win amazing prizes by showcasing your knowledge.
+ </p>
+ </div>
+ </div>
+ </div>
+<div className="events_cont_2">
+<div className="events_cont_2_card">
+ <img className="events_cont_2_card_1" src={events_sema} />
+ <p className="events_cont_2_card_1_heading"> Data Structures and Algorithm in Java </p>
+ <p className="events_cont_2_card_1_para_1"> 
+ Got no programming knowledge ? No worries. Become an expert at solving simple to complex LeetCode problems with ease and become interview-ready.
+ </p>
+ </div>
+<div className="events_cont_2_card">
+ <img className="events_cont_2_card_1" src={Github} />
+ <p className="events_cont_2_card_1_heading">Develop your knowledge of Git and GitHub. </p>
+ <p className="events_cont_2_card_1_para_1">
+ Start out your exploration of open source with the comprehensive Git & GitHub tutorial, which covers both basic and advanced concepts.
+ </p>
+</div>
+<div className="events_cont_2_card">
+ <img className="events_cont_2_card_1" src={DevOps} />
+ <p className="events_cont_2_card_1_heading">Beginner to Advanced DevOps </p>
+ <p className="events_cont_2_card_1_para_1">
+ DevOps engineer is without a doubt the most in-demand position on the market right now, particularly with the rise of high-paying remote possibilities. Learn DevOps from scratch here.
+ </p>
+</div>
+<div className="events_cont_2_card">
+ <img className="events_cont_2_card_1" src={FullStack} />
+ <p className="events_cont_2_card_1_heading"> Web Development</p>
+ <p className="events_cont_2_card_1_para_1">
+ Build credible, work-like projects to gain proficiency in React, NodeJS, MongoDB, Javascript, and other technologies to launch a successful career as a developer.
+ </p>
+</div>
+<div className="events_cont_2_card">
+ <img className="events_cont_2_card_1" src={Python} />
+ <p className="events_cont_2_card_1_heading"> Learn Python from A to Z </p>
+ <p className="events_cont_2_card_1_para_1">
+ Get introduced to all of the Python developer skills in this events and construct practical projects along the way to add to your portfolio.
+ </p>
+</div>
+<div className="events_cont_2_card">
+ <img className="events_cont_2_card_1" src={MachineLearning} />
+ <p className="events_cont_2_card_1_heading"> Master Machine Learning </p>
+ <p className="events_cont_2_card_1_para_1">
+ Become the cool kid in town. Without any prerequisites, master Machine Learning from scratch to an advanced level.
+ </p>
+</div>
+<div className="events_cont_2_card">
+ <img className="events_cont_2_card_1" src={SystemDesign} />
+ <p className="events_cont_2_card_1_heading"> System Design Fundamentals </p>
+ <p className="events_cont_2_card_1_para_1">
+ Your ability to develop scalable systems will improve as an engineer. Prepare for system design interviews by learning how to build complex systems.
+ </p>
+</div>
+</div></div>
+ )
+}
+
+export default Events

src/components/Footer.js

@@ -14,7 +14,7 @@ const Footer = () => {
  <div className="footer-col2-1">
  <h4>Sitemap</h4>
  <ul>
- <li><a href="#">Home</a></li>
+ <li><a href="/">Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#blog">Blog</a></li>
  <li><a href="#course">Courses</a></li>

src/components/Header.js

@@ -20,7 +20,7 @@ const Header = () => {
  </p>
  </div>
  <div className="header_cont_2_b">
- <a href="/">
+ <a href="/course">
  <button className="header_cont_2_b_courses"> See Courses 
  <img className="arrowright" src={Arrowright} alt="arrowup" /> 
  </button>

src/components/navbar/Navbar.js

@@ -14,7 +14,7 @@ const Navbar = () => {
  </div>
  <ul className={click ? 'navbar-menu active': 'navbar-menu'}>
  <li className='navbar-item'><a href="/">Home</a></li>
- <li className='navbar-item'><a href="/">Courses</a></li>
+ <li className='navbar-item'><a href="#course">Courses</a></li>
  <li className='navbar-item'><a href="https://www.youtube.com/playlist?list=PL9gnSGHSqcnqwmKYZ5rHuzqe32Di47KMr">Podcasts</a></li>
  <li className='navbar-item'><a href="/">Events</a></li>
  <li className='navbar-item'><a href="https://github.com/commclassroom/roadmaps">Roadmaps</a></li>

src/pages/CoursePage.js

@@ -1,12 +1,14 @@
 import React from 'react'
 import Navbar from '../components/navbar/Navbar.js'
 import Course from '../components/Course/Course.js'
+import Footer from '../components/Footer'
 
 const CoursePage = () => {
  return (
  <div>
  <Navbar />
  <Course />
+ <Footer />
  </div>
  )
 }

src/pages/EventsPage.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import Navbar from '../components/navbar/Navbar.js'
+import Events from '../components/Event/Events.js'
+import Footer from '../components/Footer'
+
+const EventsPage = () => {
+ return (
+ <div>
+ <Navbar />
+ <Events />
+ <Footer />
+ </div>
+ )
+}
+
+export default EventsPage

src/styles/Footer.css

@@ -23,10 +23,11 @@
  display: flex;
  margin-left:auto;
  margin-right: auto;
- width:320px;
+ width:350px;
  }
 
  .footer-col2-1{
+ width: 100px;
  margin-left: 10%;
  }