[FEATURE] <Add Podcast>

src/App.js

@@ -1,13 +1,14 @@
 import React from 'react'
 import Header from './components/Header.js'
 import Navbar from './components/navbar/Navbar.js'
-
+import Podcast from './components/Podcast.js'
 
 const App = () => {
  return (
  <div>
  <Navbar />
  <Header />
+ <Podcast />
 
  </div>
 

src/components/Podcast.js

@@ -1,9 +1,30 @@
 import React from 'react'
+import Podcast from '../assets/podcast.png'
+import '../styles/Podcast.css'
+import Right from '../assets/Rightarrowblack.png'
 
-const Podcast = () => {
+const Event = () => {
  return (
- <div>Podcast</div>
+ <div className="podcast">
+
+ <div className="podcast_text">
+ <h6 className="podcast_heading_6">Podcast</h6>
+ <br />
+ <h2 className="podcast_heading_2"> Open Source Cafe Podcast </h2>
+ <p className="podcast_para"> 
+ The Open Source Cafe, Out of Syllabus, KlassTime with Karuna, AMA session on Discord is an initiative to highlight the stories, journeys, tips & tricks of some of the amazing community leaders and members. Learn from their experiences and get mentored on your journey by folks from around the world.
+ </p>
+ <p className="podcast_para_2">
+ Watch now 
+ <img className="podcast_right" src={Right} alt="" />
+ </p>
+ </div>
+ <div className="podcast_img_cont">
+ <img className="podcast_img" src={Podcast} alt="Podcast" />
+ <a href='https://www.youtube.com/watch?v=cl0zMen43E4&list=PL9gnSGHSqcnqwmKYZ5rHuzqe32Di47KMr'><button className="podcast_redirect"> See all episodes </button></a>
+ </div>
+ </div>
  )
 }
 
-export default Podcast
+export default Event

src/styles/Podcast.css

@@ -0,0 +1,73 @@
+.podcast{ 
+ display: flex;
+ margin-top: 10%;
+ width: 1509px;
+ height: 420px;
+ background-color: #F3F5F7;
+ }
+
+ .podcast_img{ 
+ margin-left: 10%;
+ height: 280px;
+ width: 80%;
+ margin-top: 3rem;
+}
+.podcast_text{
+ margin-left: 15%;
+}
+.podcast_heading_2{
+ margin-top: 4%;
+ margin-left: 2%;
+}
+
+.podcast_heading_6{
+ margin-top: 20%;
+ margin-left: 2%;
+ font-size: 18px;
+}
+.podcast_para{
+ width: 580px;
+ margin-top: 4%;
+ margin-left: 2%;
+}
+.podcast_para_2{
+ margin-top: 4%;
+ margin-left: 2%;
+}
+.podcast_right{
+ padding-left: 1%;
+}
+.podcast_redirect{
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 20px 0px;
+ gap: 12px;
+ width: 300px;
+ height: 32px;
+ background: #06D6A0;
+ border-radius: 48px;
+ border: none;
+ margin-left: 14%;
+ margin-top: 1%;
+ cursor: pointer;
+}
+@media screen and (max-width: 1285px) {
+ .podcast_img{ 
+ margin-left: 10%;
+ height: 280px;
+ width: 340px;
+ margin-top: 3rem;
+ }
+}
+@media screen and (max-width: 1200px) {
+ .podcast_img{ 
+ margin-left: 10%;
+ height: 280px;
+ width: 280px;
+ margin-top: 3rem;
+ }
+}
+
+