Skip to content

Commit

Permalink
winners
Browse files Browse the repository at this point in the history
  • Loading branch information
@virajchandra51
virajchandra51 committed Oct 13, 2023
1 parent f5aa0d9 commit 81f988a
Show file tree
Hide file tree
Showing 5 changed files with 151 additions and 24 deletions.
113 changes: 103 additions & 10 deletions src/components/categoryWinningTeamCard/CategoryWinningTeamCard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -116,16 +155,20 @@
.codeutsava__section11-problemModal-body p {
text-align: center;
margin: 4px 0;
width: 60%;
}

.codeutsava__section11-problems-container2 {
grid-template-columns: repeat(1, 1fr);
}
}

@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);
Expand All @@ -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;
}
}
47 changes: 36 additions & 11 deletions src/components/categoryWinningTeamCard/CategoryWinningTeamCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -79,16 +79,41 @@ const CategoryWinningTeamCard = ({
onClick={() => setModal(false)}
/>
<h1>Team Name: {name}</h1>
<p style={{ fontWeight: "600" }}>College: {college}</p>
<p style={{ fontWeight: "600" }}>Team Leader: {leader}</p>
<p style={{ fontWeight: "600" }}>Team Members</p>
<p>{leader}</p>
<p>{member1}</p>
<p>{member2}</p>
<p>{member3}</p>
<p>{member4}</p>
<p>{member5}</p>
<p>{member6}</p>
<h5 style={{ fontWeight: "600" }}>College: {college}</h5>
<table>
<tr>
<td>Team Members</td>
<td>Name</td>
</tr>
<tr>
<td>Leader</td>
<td>{leader}</td>
</tr>
<tr>
<td>Member 1</td>
<td>{member1}</td>
</tr>
<tr>
<td>Member 2</td>
<td>{member2}</td>
</tr>
<tr>
<td>Member 3</td>
<td>{member3}</td>
</tr>
{member4 && (
<tr>
<td>Member 4</td>
<td>{member4}</td>
</tr>
)}
{member5 && (
<tr>
<td>Member 5</td>
<td>{member5}</td>
</tr>
)}
</table>
</motion.div>
)}
</AnimatePresence>
Expand Down
2 changes: 2 additions & 0 deletions src/pages/home/HomePage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -28,6 +29,7 @@ const HomePage = () => {
<Section2 />
{/* <Section9 /> */}
<Section12 />
<Section13 />
<Guidelines/>
<Section5 />
<Section6 />
Expand Down
7 changes: 6 additions & 1 deletion src/pages/home/sections/section13/Section13.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%;

}
Expand Down
6 changes: 4 additions & 2 deletions src/pages/home/sections/section13/Section13.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -40,9 +42,9 @@ const Section11 = () => {
id="problems"
>
<div className="codeutsava__section11-body">
<div className="codeutsava__section11-title">Category Wise Winners</div>
<div className="codeutsava__section11-title">Category Wise Winners<img src={ghost}></img></div>
<div className="codeutsava__section11-problems">
<div className="codeutsava__section11-problems-container1">
<div className="codeutsava__section11-problems-container1-winning">
{categoryWinningTeams.map((shortlistedTeam, index) => (
<CategoryWinningTeamCard
key={index}
Expand Down

0 comments on commit 81f988a

Please sign in to comment.