Merge pull request #43 from A1Kumari/master

theme
CodechefAdgitm · Jul 30, 2023 · 921d2e2 · 921d2e2
2 parents 2aa1956 + 70f4d76
commit 921d2e2
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 27 deletions.
diff --git a/src/components/themes/Themes.css b/src/components/themes/Themes.css
@@ -1,6 +1,6 @@
 .themes {
   padding: 80px 0;
-  background-color: #6C63FF;
+  background-color: #000;
 }
 
 .themes-container {
@@ -14,7 +14,7 @@
 
 .theme-box {
   flex: 0 0 calc(33.33% - 20px); /* Each box takes one-third of the container width with 20px gap */
-  background-color: #fff;
+  background-color: #222222;
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   padding: 20px;
@@ -29,33 +29,35 @@
 
 .theme-box h3 {
   font-size: 1.5rem;
-  color: #000; /* Use black (#000) for the heading text color */
+  color: #fff; /* Use black (#000) for the heading text color */
   margin-bottom: 10px;
 }
 
-.theme-box img {
-  width: 80px; /* Adjust the size of the icon */
-}
-
-.theme-box p {
-  font-size: 1rem;
-  color: #222; /* Use dark gray (#222) for the description text color */
-}
-
-.circleShape {
+.theme-box .circleShape {
   width: 80px;
   height: 80px;
   border-radius: 50%; /* Create a circular shape */
-  background-color: #553c94; /* Use the light blue color for the circle */
+  background-color: #6B5B95; /* Use dark gray (#222) for the circle background */
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0 auto 15px;
+  color: #fff; /* Use white (#fff) for the icon color */
+}
+
+.theme-box .circleShape svg {
+  font-size: 36px;
+}
+
+/* Media queries for responsiveness */
+@media (max-width: 768px) {
+  .theme-box {
+    flex: 0 0 calc(50% - 20px); /* Change the box width to half on smaller screens */
+  }
 }
 
-.circleShape img {
-  max-width: 60%; /* Adjust the size of the icon to fit inside the circle */
-  max-height: 60%;
-  font-size: 26px;
-  color: yellow;
+@media (max-width: 576px) {
+  .theme-box {
+    flex: 0 0 calc(100% - 20px); /* Change the box width to full on even smaller screens */
+  }
 }
diff --git a/src/components/themes/Themes.jsx b/src/components/themes/Themes.jsx
@@ -15,19 +15,21 @@ import Fintech from "./cmp/Fintech.jsx";
 import Carousel from "react-bootstrap/Carousel";
 import "./Themes.css";
 import AOS from 'aos';
-import {FaLightbulb, FaLinkedin, FaTwitter} from "react-icons/fa";;
+import {FaLightbulb, FaMoneyCheck, FaTwitter} from "react-icons/fa";;
 import {BsBook} from "react-icons/bs";
-
-
+import {GiHealthNormal} from "react-icons/gi";
+import {SiHiveBlockchain} from "react-icons/si";
+import {BiNetworkChart} from "react-icons/bi";
+import {PiVirtualRealityLight} from "react-icons/pi";
 
 const themesData = [
   { title: 'Open Innovation', icon: <FaLightbulb/> },
   { title: 'EdTech', icon: <BsBook/> },
-  { title: 'AR/VR', icon: ""},
-  { title: 'FinTech', icon: 'Description of Theme 4' },
-  { title: 'Productivity & Networking', icon: 'Description of Theme 1' },
-  { title: 'Healthcare', icon: 'Description of Theme 2' },
-  { title: 'Web3', icon: 'Description of Theme 3' },
+  { title: 'AR/VR', icon: <PiVirtualRealityLight/>},
+  { title: 'FinTech', icon: <FaMoneyCheck/> },
+  { title: 'Productivity & Networking', icon: <BiNetworkChart/> },
+  { title: 'Healthcare', icon: <GiHealthNormal/> },
+  { title: 'Web3', icon: <SiHiveBlockchain/> },
 
 ];
 
@@ -40,6 +42,7 @@ export default function Themes() {
   return (
     <>
     <section className="themes">
+    <div className="heading"><h2>Themes</h2></div>
       <div data-aos="fade-up">
       <div className="themes-container">
         {themesData.map((theme, index) => (