Merge pull request #30 from nishant0708/syllabus

Updating UI of Syllabus page #7

package.json

@@ -14,6 +14,7 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.1",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.2.1",
     "react-router-dom": "^6.22.2",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"

src/components/page3/1Year.css

@@ -3,36 +3,43 @@
     justify-content: center;
 
 }
-
+.content{
+  height: auto;
+}
+.background{
+  margin: 20px 15px;
+
+  border-radius: 10px;
+
+  box-shadow: 5px 5px 10px #bebebe;
+}
 .container{
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     height: 50vh;
-    margin-bottom: 100px;
+    margin-bottom: 10px;
 
 }
-
+.link{
+  text-decoration: none;
+  font-size: 1.5rem;
+  font-weight: 300;
+}
 .card {
     width: 250px;
-    height: 150px;
+   padding: 50px 0px;
     margin: 10px;
     border-radius: 20px;
-    background: #e0e0e0;
-    box-shadow: 15px 15px 30px #bebebe,
-               -15px -15px 30px #ffffff;
+
+    box-shadow: 5px 5px 10px #383232;
+
+  height: 100px;
+}
 
-               display: -webkit-box;
-               display: -ms-flexbox;
-               display: flex;
-               -webkit-box-align: start;
-               -ms-flex-align: start;
-               align-items: flex-start;
-               -ms-flex-wrap: wrap;
-               flex-wrap: wrap;
-
-               padding: 50px 0;
+  .card img{
+    width: 64px;
   }
 
   /* mobile device viewers */

src/components/page3/1Year.js

@@ -2,26 +2,25 @@ import React from 'react'
 import {Link} from 'react-router-dom';
 import Header from '../../pages/header';
 import '../page3/1Year.css';
-
-
-import quantumImage from '../../assets/5th.png';
-import youtube from '../../assets/ytt.png'
-import timetable from '../../assets/sec-3A.jpg';
-import syllabus from '../../assets/syllabuswt.jpg';
-
+import quantumImage from '../../assets/icons8-book-64.png';
+import timetable from '../../assets/icons8-timetable-64.png';
+import syllabus from '../../assets/icons8-syllabus-80 (1).png';
+import pyq from "../../assets/icons8-minus-1-year-80.png"
+import Notes from "../../assets/icons8-notes-80.png"
+import youtube from "../../assets/icons8-youtube-64.png";
 function fstYear() {
   return (
 <div>
 
 <Header/>
-
+  <div class="background">
   <div className="yr">
-   <h2>1st year</h2>
+   <h1>1st Year</h1>
   </div>
 
-  <div className="content">
+  <div className="content" style={{height:"auto"}}>
     <div class="cards">
-<Link to="/fstquantum">
+<Link class="link" to="/fstquantum">
 <div class="card red">
 <img src={quantumImage} alt="Quantum" />
     {/* <p class="tip"></p> */}
@@ -30,37 +29,37 @@ function fstYear() {
 </div>
 </Link>
 
-<Link to='/fstlecture'>
+<Link class="link" to='/fstlecture'>
 <div class="card blue">
-<img src={youtube} alt="" /> 
+<img src={youtube} alt="" />
 <p class="second-text">Lecture</p>
 </div>
 </Link>
 
-<Link to='/syllabus'>
+<Link class="link" to='/syllabus'>
 <div class="card pink">
 <img src={syllabus} alt="" />
   <p class="second-text">Syllabus</p>
 </div> 
 </Link>
 
-<Link to="/fsttimetable">
+<Link class="link" to="/fsttimetable">
 <div class="card syan">
  <img src={timetable} alt="" />
   <p class="second-text">Timetable</p>
 </div>
 </Link>
 
-<Link to=''>
+<Link class="link" to=''>
 <div class="card green">
-    {/* <p class="tip">Hover Me</p> */}
+<img src={pyq} alt=''/>
  <p class="second-text">PYQ</p>
 </div>
 </Link>
 
-<Link to='/notes'>
+<Link class="link"  to='/notes'>
 <div class="card yellow">
-    <p class="tip"></p>
+<img src={Notes} alt=''/>
     <p class="second-text">Notes</p>
 </div>
 </Link>
@@ -69,7 +68,7 @@ function fstYear() {
 </div>
 
 </div>
-
+</div>
   )
 }
 

src/components/page3/2Year.js

@@ -2,72 +2,71 @@ import React from 'react'
 import {Link} from 'react-router-dom';
 import '../page3/2Year.css'
 import Header from '../../pages/header';
-
-
-import quantumImage from '../../assets/5th.png';
-import youtube from '../../assets/ytt.png'
-import timetable from '../../assets/sec-3A.jpg';
-import syllabus from '../../assets/syllabuswt.jpg';
-
-
+import quantumImage from '../../assets/icons8-book-64.png';
+import timetable from '../../assets/icons8-timetable-64.png';
+import syllabus from '../../assets/icons8-syllabus-80 (1).png';
+import pyq from "../../assets/icons8-minus-1-year-80.png"
+import Notes from "../../assets/icons8-notes-80.png"
+import youtube from "../../assets/icons8-youtube-64.png";
 function sndYear() {
   return (
     <div>
     <Header/>
-
+<div className='background'>
     <div className="yr">
-     <h2>2rd year</h2>
+     <h1>2nd Year</h1>
     </div>
 
-    <div className="content">
+    <div class="content" style={{height:"auto"}}>
       <div class="cards">
-<Link to="/sndquantum">
+<Link class="link" to="/sndquantum">
   <div class="card red">
-  <img src={quantumImage} alt="Quantum" />
+   <img src={quantumImage} alt="" />
       {/* <p class="tip"></p> */}
       <p class="second-text">Quantum</p>
 
   </div>
   </Link>
 
-  <Link to='/sndlecture'>
+  <Link class="link"  to='/sndlecture'>
   <div class="card blue">
-  <img src={youtube} alt="" /> 
+  <img src={youtube} alt="" />
   <p class="second-text">Lecture</p>
   </div>
   </Link>
 
- <Link to='/syllabus'>
+ <Link class="link" to='/syllabus'>
   <div class="card pink">
   <img src={syllabus} alt="" />
     <p class="second-text">Syllabus</p>
   </div> 
   </Link>
 
- <Link to="/pyq">
+ <Link class="link"  to="/pyq">
   <div class="card syan">
    <img src={timetable} alt="" />
     <p class="second-text">Timetable</p>
   </div>
   </Link>
 
- <Link to='/notes'>
+ <Link class="link" to='/notes'>
   <div class="card green">
-      {/* <p class="tip">Hover Me</p> */}
-   <p class="second-text">PYQ</p>
+    <img src={pyq} alt=''/>
+   <p   class="second-text">PYQ</p>
   </div>
   </Link>
 
-<Link to='/notes'>
+<Link  class="link"  to='/notes'>
   <div class="card yellow">
-      <p class="tip"></p>
+  <img src={Notes} alt=''/>
+
       <p class="second-text">Notes</p>
   </div>
   </Link>
 
 </div>
 </div>
-
+</div>
 {/* <Footer /> */}
   </div>
   )

src/components/page3/3Year.css

@@ -1,15 +1,31 @@
 .cards {
-    display: flex;
+    display: grid;
     justify-content: center;
-    /* flex-direction: row; */
-    flex-wrap: wrap;
+    flex-direction: column;
+    grid-template-columns: 1fr 1fr 1fr;
     gap: 15px;
-    height: 50vh;
-    margin-bottom: 100px;
+
+  }
+  @media (max-width:950px) {
+    .cards{
+      grid-template-columns: 1fr 1fr ;
+    }
+
+  }
+  @media (max-width:650px) {
+    .cards{
+      grid-template-columns: 1fr  ;
+    }
+
   }
 
   .cards .red {
-    background-color: #f43f5e;
+    background-color: #fa536f;
+    text-decoration: none;
+    transition: ease-in 2s;
+  }
+  .cards .red:hover{
+    background-color: #ff002b;
     text-decoration: none;
 
   }
@@ -23,33 +39,48 @@
     flex-direction: column;
     flex-wrap: nowrap;
   }
+  .cards .blue:hover{
+    background-color: #be009c;
+  }
 
   .cards .green {
     background-color: #22c55e;
   }
+  .cards .green:hover{
+    background-color: #00732a;
+  }
   .cards .yellow{
     background-color: rgb(198, 198, 45);
   }
+  .cards .yellow:hover{
+    background-color: rgb(222, 222, 0);
+  }
 
   .cards .pink{
     background-color: rgb(49, 44, 38);
     flex-direction: column;
     flex-wrap: nowrap;
   }
+  .cards .pink:hover{
+    background-color: rgb(78, 77, 75);
+  }
 
   .cards .syan {
     background-color: rgb(13, 75, 54);
     flex-direction: column;
     flex-wrap: nowrap;
 
   }
+  .cards .syan:hover {
+    background-color: #399059;
+  }
   .cards .card {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     text-align: center;
-    height: 100px;
+
     width: 250px;
     border-radius: 10px;
     color: white;