Merge pull request #698 from MridulTi/MridulTi-Roadmap

Added Resources to RoapMap created Earlier
Tech-N-Science · Aug 31, 2022 · abdfeca · abdfeca
2 parents eb73e2b + 26a539f
commit abdfeca
Show file tree

Hide file tree

Showing 4 changed files with 361 additions and 2 deletions.
diff --git a/funwithphysics/public/Images-public/svgs/Rocket.svg b/funwithphysics/public/Images-public/svgs/Rocket.svg
diff --git a/funwithphysics/public/Images-public/svgs/cloud.png b/funwithphysics/public/Images-public/svgs/cloud.png
diff --git a/funwithphysics/src/Components/Home/Home.css b/funwithphysics/src/Components/Home/Home.css
@@ -45,9 +45,146 @@ h2 {
 }
 
 .banner_button {
+  width: 50vw;
+  display: flex;
+  gap: 5%;
   padding: 5px;
 }
+.Roadmap{
+  padding: 10% 0%;
+  text-align: center;
+}
+.Roadmap>h1{
+  margin-bottom: 5%;
+}
+.btn-exams{
+  background-color: #ffffff;
+  color: #000;
+  border:0.1rem solid #000;
+  width: 20vw;
+  padding: 0% 5%;
+  text-align: center;
+  margin: 0%;
+}
+.btn-exams:hover{
+  background-color: #2c2b30;
+  color: #ffffff;
+}
+.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%;
+}
+.svg-rocket{
+
+}
+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%;
+}
 /*---Feature Section---*/
 
 #fh5co-course-categories,
@@ -64,7 +201,93 @@ h2 {
   padding: 7em 0;
   clear: both;
 }
-
+@media screen and (min-width:1200px){
+  .banner_button{
+    gap: 2%;
+  }
+  .btn-exams{
+    width: 11vw;
+  }
+  .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%;
+  }
+}
 @media screen and (max-width: 768px) {
   #fh5co-course-categories,
   #fh5co-counter,