[Feature]: Hashnode Page

src/App.js

@@ -4,16 +4,18 @@ import './App.css'
 import Course from './pages/CoursePage.js'
 import HomePage from './pages/HomePage.js'
 import Events from './pages/EventsPage.js'
-import Roadmaps from './pages/RoadmapsPage';
+import Roadmaps from './pages/RoadmapsPage'
+import Hashnode from './pages/Hashnode.js'
 
 const App = () => {
  return (
  <div className="main">
  <Routes basename={"/commclassroom"}>
- <Route exact path="/commclassroom" element={<HomePage/>} />
+ <Route exact path="/co" element={<HomePage/>} />
  <Route path="/commclassroom/course" element={<Course />} />
  <Route path="/commclassroom/event" element={<Events />} />
  <Route path="/commclassroom/roadmaps" element={<Roadmaps />} />
+ <Route path="/commclassroom/Hashnode" element={<Hashnode />} />
  </Routes>
  </div>
  )

src/components/Hashnode/Card.js

@@ -0,0 +1,20 @@
+import React from "react";
+
+const Card = ({ hashnode }) => {
+ return (
+ <div
+
+ className="hashnode-card"
+ >
+ <section>
+ <img src={hashnode.image} alt={hashnode.title + "banner"} />
+ <div className="hashnode-details">
+ <p>{hashnode.description}</p>
+ </div>
+ </section>
+ </div>
+
+ );
+};
+
+export default Card;

src/components/Hashnode/CardsList.js

@@ -0,0 +1,16 @@
+import React from "react";
+import Card from "./Card";
+import {hashnodeData as data } from "./data";
+
+
+const CardsList = ({scrollRoadmapRef}) => {
+ return (
+ <div className="hashnode-container" id="#roadmaps" ref={scrollRoadmapRef}>
+ {data.hashnode.map((hashnode) => (
+ <Card hashnode={hashnode} />
+ ))}
+ </div>
+ );
+};
+
+export default CardsList;

src/components/Hashnode/Hashnode.css

@@ -0,0 +1,127 @@
+.hashnode_cont_para {
+ color: #5F7086;
+ font-size: 20px;
+ max-width: 792px;
+ margin: 25rem auto 2rem auto;
+}
+.header_cont_3 h3{
+ color: #181E25;
+ font-weight: 600;
+ font-size: 48px;
+ max-width: 792px;
+ margin: 1rem auto 2rem auto;
+}
+.header_cont_3{
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+}
+.header_cont_3 p{
+ color: #5F7086;
+ font-size: 20px;
+ max-width: 792px;
+ margin: 1rem auto 2rem auto;
+}
+
+.hashnode-container {
+ max-width: 1200px;
+ margin: auto;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr) ;
+ gap: 1rem;
+ padding: 1rem;
+
+}
+.hashnode-container .hashnode-card {
+ border: 1px solid #DEE4ED;
+ border-radius: 8px 8px 0px 0px;
+}
+
+.hashnode-container .hashnode-card .hashnode-details {
+ padding: 20px;
+}
+
+.hashnode-container h2 {
+ font-size: 24px;
+ padding-bottom: 10px;
+}
+
+.hashnode-container p {
+ font-size: 18px;
+ color: #5F7086;
+ line-height: 145%;
+}
+
+.hashnode-container img {
+ width: 100%;
+}
+.hashnode-participate-card-1{
+ gap: 5rem;
+ max-width: 480px;
+ max-height: auto;
+ background: #F3F5F7;
+ border-radius: 8px;
+ margin-top: 5rem;
+ padding: 80px 20px 80px 20px;
+}
+.hashnode-participate-card {
+ display:flex;
+ max-width: 600px;
+ margin-left: auto;
+ margin-right: auto;
+ gap: 1rem;
+ padding: 50px;
+}
+.hashnode-participate-track{
+ display: flex;
+ max-width: 1200px;
+ border: 1px solid #DEE4ED;
+ border-radius: 8px 8px 0px 0px;
+ margin:auto;
+ height:auto;
+ gap: 2rem;
+}
+.hashnode-participate-special-track {
+ margin: auto;
+}
+.hashnode-participate-track-image{
+ height: 327px;
+ width: 480px;
+}
+.hashnode-ul{
+ color: black;
+ list-style: disc;
+}
+#hashnode-check-tracks{
+ margin-top: 8%;
+ padding: 12px 24px;
+ gap: 10px;
+ width: 300px;
+ height: 53px;
+ background: #4094EC;
+ border-radius: 4px;
+ font-size: 20px;
+ line-height: 145%;
+ border: none;
+ color: #FFFFFF;
+ cursor: pointer;
+ }
+ .hashnode-ul span{
+ font-weight: 600;
+ }
+
+@media screen and (max-width: 800px) {
+ .hashnode-container {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+@media screen and (max-width: 550px) {
+
+ .hashnode-container {
+ grid-template-columns: repeat(1, 1fr);
+ }
+
+ .hashnode-container p {
+ font-size: 15px;
+ }
+}

src/components/Hashnode/Header.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import './Hashnode.css'
+import Arrowright from '../../assets/Arrowright.png'
+import ArrowUp from '../../assets/ArrowUp.png'
+
+const Header = () => {
+ return (
+ <div className="course_cont_1">
+ <div className="course_cont_a">
+ <p className="course_cont_para">
+ <span className="header_free">Blogging Challenges </span>
+ by Community Classroom
+ </p>
+ <p className="hashnode_cont_para">
+ Get a chance to win exciting prizes such as MacBooks, iPhones, iPads and more every month 🤩 
+ Blogging is about being yourself and putting what you have into it.
+ </p>
+ </div>
+ <div className="header_cont_2_b">
+ <a href="https://hashnode.com/teams/invite/6832418d-abe3-456b-bb11-294ffe5c185d">
+ <button className="header_cont_2_b_courses"> Write for us 
+ <img src={Arrowright} className="arrowright" alt="arrowup" /> 
+ </button>
+ </a>
+ <a href="#tracks">
+ <button className="header_cont_2_b_youtube"> Learn more
+ <img src={ArrowUp} className="arrowup" alt="arrowup" />
+ </button>
+ </a>
+ </div>
+ <div id="tracks" className="header_cont_3">
+ <h3>
+ Why participate in these challenges?
+ </h3>
+ <p>
+ The motivation behind this series is to promote learning in public.
+ Students will get hands on experience with new & interesting tools. Don't worry, we have got your back! We will be provide resources.
+ Don't know how to create a personal brand? You have come to the right place.
+ Get ready to win some swags & grand prizes.
+ Four track-based blogging challenges every month. Every track will cover a variety of topics.
+ </p>
+ </div>
+ </div>
+ )
+}
+
+export default Header

src/components/Hashnode/Participate.js

@@ -0,0 +1,45 @@
+import React from 'react'
+import Hashnode from '../../assets/Hashnode.png'
+import Arrowright from '../../assets/Arrowright.png'
+import SpecialTrack from '../../assets/Special_Track.png'
+import Kubecon from '../../assets/Kubecon.png'
+
+const Participate = () => {
+ return (
+ <>
+ <div id="about" className="about">
+ <img className="about_img" src={Hashnode} alt="About" />
+ <div className="about_text">
+ <h2>How to participate?</h2>
+ <ul className="hashnode-ul">
+ <li>Check out all the track provided below and write a blog on <br/> one or more of them on Hashnode.</li>
+ <li>Add <span> #BlogsWithCC </span>on your blog tags section before <br/> publishing it</li>
+ </ul>
+ <a href="#hashnode-tracks" >
+ <button id="hashnode-check-tracks"> Check out the tracks <img className="arrowright" src={Arrowright} alt="arrowup" /> </button>
+ </a>
+ </div>
+ </div>
+ <div className="hashnode-participate-card">
+ <div id="hashnode-tracks" className="hashnode-participate-card-1">
+ <h3> Track Winners </h3>
+ <p> Monthly winners from each track will be selected based on their blog on the topics. </p>
+ </div>
+ <div className="hashnode-participate-card-1">
+ <h3> Grand Winners </h3>
+ <p> For grand prize the number of blogs, and their quality will be taken into considertaion. </p>
+ </div>
+ </div>
+ <div className="hashnode-participate-track">
+ <img className="hashnode-participate-track-image" src={Kubecon} />
+ <div className ="hashnode-participate-special-track">
+ <h3> Kubecon </h3>
+ <br />
+ <p> Write a blog on your experiences in Kubecon 2022 & win Linux Foundation Training Voucher worth $499 . </p>
+ </div>
+ </div>
+ </>
+ )
+}
+
+export default Participate

src/components/Hashnode/data.js

@@ -0,0 +1,31 @@
+import React from "react";
+import Hashnode from '../../assets/Hashnode.png'
+import Track1 from '../../assets/Track_1.png'
+import Track2 from '../../assets/Track_2.png'
+import Track3 from '../../assets/Track_3.png'
+import Track4 from '../../assets/Track_4.png'
+
+
+export const hashnodeData = {
+
+hashnode: [
+ {
+ description: "Write a blog on the topic UX/Design and stand a chance to win the grand prize.",
+ image: Track1,
+ },
+ {
+ description:
+ "Write a blog on the topic Algorithms and stand a chance to win the grand prize.",
+ image: Track2,
+ },
+ {
+ description: "Write a blog on the topic Problem-solving and stand a chance to win the grand prize.",
+ image: Track3,
+ },
+ {
+
+ description: "Write a blog on the topic Open source and stand a chance to win the grand prize.",
+ image: Track4,
+ },
+ ],
+};

src/pages/Hashnode.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import Header from '../components/Hashnode/Header.js'
+import Cards from '../components/Hashnode/CardsList.js'
+import Participate from '../components/Hashnode/Participate.js'
+import Navbar from '../components/Navbar.js'
+import Footer from '../components/Footer.js'
+
+const Hashnode = () => {
+ return (
+ <div>
+ <Navbar />
+ <Header />
+ <Participate />
+ <Cards />
+ <Footer />
+
+ </div>
+ )
+}
+
+export default Hashnode