From 81f988a45da12047f9bd56c122ec114b87ffea17 Mon Sep 17 00:00:00 2001 From: Viraj Chandra Date: Sat, 14 Oct 2023 05:26:35 +0530 Subject: [PATCH] winners --- .../CategoryWinningTeamCard.css | 113 ++++++++++++++++-- .../CategoryWinningTeamCard.js | 47 ++++++-- src/pages/home/HomePage.js | 2 + .../home/sections/section13/Section13.css | 7 +- .../home/sections/section13/Section13.js | 6 +- 5 files changed, 151 insertions(+), 24 deletions(-) diff --git a/src/components/categoryWinningTeamCard/CategoryWinningTeamCard.css b/src/components/categoryWinningTeamCard/CategoryWinningTeamCard.css index abe1bf0..3f3b8e3 100644 --- a/src/components/categoryWinningTeamCard/CategoryWinningTeamCard.css +++ b/src/components/categoryWinningTeamCard/CategoryWinningTeamCard.css @@ -52,9 +52,19 @@ color: rgb(220, 220, 220); } +.codeutsava__section11-card { + cursor: pointer; +} + +.codeutsava__section11-card-name:hover{ + background-color: var(--secondary-c); + color: white; +} + .codeutsava__section11-card-name { transition: all 0.2s ease-in-out; width: 100%; + text-align: center; object-fit: cover; background-color: white; color: black; @@ -74,24 +84,53 @@ .codeutsava__section11-problemModal-body p { text-align: center; - margin: 4px 0; + margin: 4px 0px; + padding: 8px 12px; + border: 2px solid black; + color: white; + width: 30%; + font-weight: 600; + background-color: var(--secondary-c); + /* opacity: 0.7; */ } +.codeutsava__section11-problemModal-body h5 { + text-align: center; + padding: 4px 1rem; + border: 2px solid black; + color: white; + font-size: 16px; + margin: 8px 0; + font-weight: 500; + border-radius: 8px; + background-color: var(--secondary-c); + /* opacity: 0.7; */ +} +.codeutsava__section11-problemModal-body h1 { + background-color: var(--secondary-c); + padding: 4px 1rem; + border-radius: 8px; + color: white; + margin: 8px 0; + border: 2px solid black; +} .codeutsava__section11-problemModal-body { + overflow: hidden; position: fixed; - width: 60%; - height: 60%; - top: 20%; - left: 20%; + width: 80%; + height: 80%; + top: 15%; + left: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 999; - background: white; - color: black; border-radius: 20px; - box-shadow: 10px 10px 71px 23px rgba(87, 87, 87, 1); + box-shadow: 10px 10px 300px 15px rgb(87, 87, 87); + background-image: url(../../assets/images/spookybg.png); + background-size: cover; + background-color: black; } .problemModal-close { @@ -105,7 +144,7 @@ @media screen and (max-width: 900px) { .codeutsava__section11-problems-container1-winning { - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(1, 1fr); } .codeutsava__section11-problemModal-body h1 { @@ -116,6 +155,7 @@ .codeutsava__section11-problemModal-body p { text-align: center; margin: 4px 0; + width: 60%; } .codeutsava__section11-problems-container2 { @@ -123,9 +163,12 @@ } } -@media screen and (max-width: 415px) { +@media screen and (max-width: 200px) { .codeutsava__section11-problemModal-body { height: 65%; + width: 90%; + padding: 10px; + left: 10%; } .codeutsava__section11-problems-container1-winning { grid-template-columns: repeat(1, 1fr); @@ -141,9 +184,59 @@ text-align: center; font-size: 12px; margin: 4px 0; + width: 60%; } .codeutsava__section11-problems-container2 { grid-template-columns: repeat(1, 1fr); } } + +.codeutsava__section11-problemModal-body table { + width: 80%; + margin: 1rem 0; + border-collapse: collapse; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); +} + +.codeutsava__section11-problemModal-body th, +.codeutsava__section11-problemModal-body td { + padding: 15px; + text-align: center; + color: white; + border: 1px solid #000; +} + +.codeutsava__section11-problemModal-body th { + background-color: rgba(74, 74, 74, 0.8); +} + +.codeutsava__section11-problemModal-body tr:nth-child(even) { + background-color: rgba(46, 46, 46, 0.8); +} + +.codeutsava__section11-problemModal-body tr:nth-child(odd) { + background-color: rgba(29, 29, 29, 0.8); +} + +@media screen and (max-width: 900px) { + .codeutsava__section11-problemModal-body td, + .codeutsava__section11-problemModal-body th { + font-size: 16px !important; + } + .codeutsava__section11-problemModal-body{ + padding: 1rem; + } +} +@media screen and (max-width: 450px) { + .codeutsava__section11-problemModal-body td, + .codeutsava__section11-problemModal-body th, .codeutsava__section11-problemModal-body h1, .codeutsava__section11-problemModal-body h5 { + font-size: 12px !important; + } + .codeutsava__section11-problemModal-body td, .codeutsava__section11-problemModal-body th{ + padding: 10px !important; + } + .codeutsava__section11-problemModal-body{ + padding: 1rem; + } +} diff --git a/src/components/categoryWinningTeamCard/CategoryWinningTeamCard.js b/src/components/categoryWinningTeamCard/CategoryWinningTeamCard.js index 59daa64..426eb8d 100644 --- a/src/components/categoryWinningTeamCard/CategoryWinningTeamCard.js +++ b/src/components/categoryWinningTeamCard/CategoryWinningTeamCard.js @@ -4,7 +4,7 @@ import { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import "./CategoryWinningTeamCard.css"; -import cross from "../../assets/images/cross.png"; +import cross from "../../assets/images/cross.svg"; const CategoryWinningTeamCard = ({ problem, @@ -79,16 +79,41 @@ const CategoryWinningTeamCard = ({ onClick={() => setModal(false)} />

Team Name: {name}

-

College: {college}

-

Team Leader: {leader}

-

Team Members

-

{leader}

-

{member1}

-

{member2}

-

{member3}

-

{member4}

-

{member5}

-

{member6}

+
College: {college}
+ + + + + + + + + + + + + + + + + + + + + + {member4 && ( + + + + + )} + {member5 && ( + + + + + )} +
Team MembersName
Leader{leader}
Member 1{member1}
Member 2{member2}
Member 3{member3}
Member 4{member4}
Member 5{member5}
)} diff --git a/src/pages/home/HomePage.js b/src/pages/home/HomePage.js index 1a94521..9da2e25 100644 --- a/src/pages/home/HomePage.js +++ b/src/pages/home/HomePage.js @@ -9,6 +9,7 @@ import Section5 from "./sections/section5/Section5"; import Section6 from "./sections/section6/Section6"; import Section10 from "./sections/section10/Section10"; import Section12 from "./sections/section12/Section12"; +import Section13 from "./sections/section13/Section13"; import Section14 from "./sections/section14/Section14"; import Statistics from "../../components/statisticalData/Statistics"; import Footer from "../../components/footer/Footer"; @@ -28,6 +29,7 @@ const HomePage = () => { {/* */} + diff --git a/src/pages/home/sections/section13/Section13.css b/src/pages/home/sections/section13/Section13.css index 332d140..45c07a5 100644 --- a/src/pages/home/sections/section13/Section13.css +++ b/src/pages/home/sections/section13/Section13.css @@ -22,11 +22,16 @@ margin-bottom: 4rem; } +.codeutsava__section11-title img{ + height: 110px; + width: auto; +} + .codeutsava__section11-problems { display: flex; justify-content: center; align-items: center; - flex-direction: column; + flex-direction: row; width: 100%; } diff --git a/src/pages/home/sections/section13/Section13.js b/src/pages/home/sections/section13/Section13.js index cc118b1..4157a20 100644 --- a/src/pages/home/sections/section13/Section13.js +++ b/src/pages/home/sections/section13/Section13.js @@ -6,6 +6,8 @@ import "./Section13.css"; import categoryWinningTeams from "../../../../assets/data/categoryWinningTeamData"; import CategoryWinningTeamCard from "../../../../components/categoryWinningTeamCard/CategoryWinningTeamCard"; import { motion } from "framer-motion"; +import ghost from '../../../../assets/images/ghost.png' + const Section11 = () => { const useFade = (initial) => { @@ -40,9 +42,9 @@ const Section11 = () => { id="problems" >
-
Category Wise Winners
+
Category Wise Winners
-
+
{categoryWinningTeams.map((shortlistedTeam, index) => (