@@ -126,6 +133,7 @@ const bookReaderStyle = {
{/* End of About Us Section */}
+// main
Learn
diff --git a/funwithphysics/src/Components/RoadMap/RoadMap.css b/funwithphysics/src/Components/RoadMap/RoadMap.css
new file mode 100644
index 000000000..edaf3dd9f
--- /dev/null
+++ b/funwithphysics/src/Components/RoadMap/RoadMap.css
@@ -0,0 +1,205 @@
+.Roadmap{
+ padding: 5% 0% 0%;
+ margin-bottom: -10%;
+ text-align: center;
+}
+.Roadmap>h1{
+ margin-bottom: 5%;
+}
+.roadmap-underline{
+ border: 0.1rem solid #F3703B;
+ background-color: #F3703B;
+ width: 15vw;
+ margin: 0% 42%;
+ margin-bottom: 5%;
+ }
+ .Roadmap-title{
+ width: 20vw;
+ margin: 10% 40% ;
+ position: absolute;
+ color: #000;
+ }
+ .Roadmap-title>h3{
+ border-radius: 0.5rem;
+ margin: 60% 0%;
+ padding: 5% ;
+ }
+ .Roadmap-title>h3:active{
+ font-size:1.5rem;
+ width: 18vw;
+ margin-left: 5%;
+ }
+ a{
+ color: #000;
+ }
+ a:hover{
+ color: blue;
+ text-decoration: none;
+ }
+ .svg-cloud{
+ z-index: 10;
+ width: 100vw;
+ margin-top: -20%;
+ margin-left: 0%;
+ }
+ .left-top-B{
+ position: absolute;
+ font-size: 7rem;
+ margin-top: 30%;
+ right: 12rem;
+ color: rgb(73, 73, 73);
+ }
+ .left-B{
+ position: absolute;
+ font-size: 7rem;
+ margin-top: -30%;
+ color: rgb(73, 73, 73);
+ right: 12rem;
+ }
+ .right-B{
+ position: absolute;
+ font-size: 7rem;
+ margin-top: -115%;
+ color: rgb(73, 73, 73);
+ left: 12rem;
+ }
+ .C1{
+ background-color: #F3703B;
+ }
+ .C2{
+ background-color: #FFD303;
+ }
+ .left-top-T{
+ position: absolute;
+ right:17rem;
+ margin-top: 36%;
+ }
+ .left-top-T>h5{
+ margin: 5% 0%;
+ width: 30vw;
+ padding: 0.5% 0%;
+ background-color: turquoise;
+ }
+ .left-top-T>h5:active{
+ font-size: 1.2rem;
+ width: 29vw;
+ margin-left: 2%;
+ }
+ .left-T{
+ position: absolute;
+ right:17rem;
+ margin-top: -20%;
+ }
+ .left-T>h5{
+ margin: 5% 0%;
+ padding: 0.5% 0%;
+ width: 30vw;
+ background-color: turquoise;
+ }
+ .left-T>h5:active{
+ font-size: 1.2rem;
+ width: 29vw;
+ margin-left: 2%;
+ }
+ .right-T{
+ position: absolute;
+ left:17rem;
+ margin-top: -110%;
+ }
+ .right-T>h5{
+ margin: 5% 0%;
+ width: 30vw;
+ padding: 0.5% 0%;
+
+ background-color: turquoise;
+ }
+ .right-T>h5:active{
+ width: 29vw;
+ font-size: 1.2rem;
+ margin-left: 2%;
+ }
+@media screen and (min-width:1200px){
+ .Roadmap{
+ margin-bottom: -5%;
+ }
+ .Roadmap>h1{
+ margin-bottom: 2%;
+ }
+ .Roadmap-title>h3:active{
+ font-size:1.4rem;
+ width: 8vw;
+ margin-left:25%;
+ }
+ .roadmap-underline{
+ width: 10vw;
+ margin: 0% 45% 5%;
+ }
+ .left-top-B{
+ position: absolute;
+ font-size: 7rem;
+ margin-top: 12%;
+ right:19rem;
+ color: rgb(73, 73, 73);
+ }
+ .left-B{
+ position: absolute;
+ font-size: 7rem;
+ margin-top: -13%;
+ color: rgb(73, 73, 73);
+ right: 19rem;
+ }
+ .right-B{
+ position: absolute;
+ font-size: 7rem;
+ margin-top: -55%;
+ color: rgb(73, 73, 73);
+ left: 17rem;
+ }
+ .Roadmap-title{
+ margin: 6% 41%;
+ }
+ .Roadmap-title>h3{
+ width: 10vw;
+ font-size: 1.5rem;
+ border-radius: 0.5rem;
+ margin:25% 20%;
+ padding: 5% ;
+ }
+ .left-top-T{
+ right: 27rem;
+ margin-top: 13%;
+ }
+ .left-top-T>h5:active{
+ width: 18vw;
+ font-size: 1.2rem;
+ margin-left: 5%;
+ }
+ .left-top-T>h5{
+ width: 20vw;
+ }
+ .left-T{
+ right: 27rem;
+ margin: -10% 0%;
+ }
+ .left-T>h5{
+ width: 20vw;
+ }
+ .left-T>h5:active{
+ width: 18vw;
+ font-size: 1.2rem;
+ margin-left: 5%;
+ }
+ .right-T{
+ left:25rem;
+ margin: -55% 0%;
+ }
+ .right-T>h5{
+ width: 20vw;
+ }
+ .right-T>h5:active{
+ width: 18vw;
+ font-size: 1.2rem;
+ margin-left: 5%;
+ }
+
+}
\ No newline at end of file
diff --git a/funwithphysics/src/Components/RoadMap/RoadMap.js b/funwithphysics/src/Components/RoadMap/RoadMap.js
new file mode 100644
index 000000000..611d305c5
--- /dev/null
+++ b/funwithphysics/src/Components/RoadMap/RoadMap.js
@@ -0,0 +1,141 @@
+import React, { useContext, useEffect, useState,useRef } from "react";
+import "./RoadMap.css";
+import Footer from "../Footer/Footer";
+import Navbar from "../Navbar/Navbar";
+export default function RoadMap(){
+ const l="}";
+ const r="{";
+ const backToTopRef=useRef(null)
+
+ //back to top functionality
+ const handleScroll = () => {
+ const position = window.pageYOffset
+ //console.log(position)
+ if (position === 0)
+ backToTopRef.current!==null&&(backToTopRef.current.style.display = 'none')
+ else backToTopRef.current!==null&&(backToTopRef.current.style.display = 'block')
+ }
+
+ useEffect(() => {
+ window.addEventListener('scroll', handleScroll, { passive: true })
+
+ return () => {
+ window.removeEventListener('scroll', handleScroll)
+ }
+ }, [])
+
+ return(
+
+
+
+
RoadMap
+
+
+ {/* Competitive Exam-1 */}
+
+
{l}
+
+
{r}
+
+
+ {/* Competitive Exam-1 */}
+
+
{l}
+
+
{r}
+
+ {/* Competitive Exam-1 */}
+
+
{l}
+
+
{r}
+
+ {/* Competitive Exam-1 */}
+
+
{l}
+
+
{r}
+
+ {/* Competitive Exam-1 */}
+
+
{l}
+
+
{r}
+
+ {/* Competitive Exam-1 */}
+
+
{l}
+
+
{r}
+
+ {/* Competitive Exam-1 */}
+
+
{l}
+
+
{r}
+
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file