From 8cb2020a0f11bf1d97cd3bd2842b9bbdfde78f79 Mon Sep 17 00:00:00 2001 From: "Praveen. M" Date: Sun, 8 Dec 2024 14:49:52 +0530 Subject: [PATCH] code refactored --- css/style1.css | 344 +++++++------- css/style2.css | 1172 ++++++++++++++++++++++++++++++++---------------- css/style3.css | 99 ++-- index.html | 1147 ++++++++++++++++++++++++---------------------- js/main.js | 52 +-- js/script.js | 46 +- 6 files changed, 1686 insertions(+), 1174 deletions(-) diff --git a/css/style1.css b/css/style1.css index 7fba6a3..ac536be 100644 --- a/css/style1.css +++ b/css/style1.css @@ -1,6 +1,7 @@ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"); @import url('https://fonts.googleapis.com/css2?family=Acme&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Agdasima:wght@400;700&display=swap'); + /*-------------------------------------------------------------- # HTML & BODY --------------------------------------------------------------*/ @@ -16,7 +17,7 @@ body { } body::-webkit-scrollbar { - display: none; + display: none; } /*-------------------------------------------------------------- @@ -71,10 +72,12 @@ h2 { font-family: "Anton SC", sans-serif; font-weight: 400; } + .heading-small, .heading-shadow { font-size: 8vw; } + .heading-shadow, .heading-shadow-p { color: hsla(0, 0%, 100%, 0.16); @@ -110,7 +113,8 @@ h2 { -moz-user-drag: none; -o-user-drag: none; } -.container-space{ + +.container-space { margin: 2em; } @@ -238,10 +242,11 @@ nav a { transition: 0.3s; } -.one{ +.one { display: none; color: transparent; } + nav a:hover, nav a.hit { color: white; @@ -270,13 +275,13 @@ nav a::after { transition: width 0.3s ease; } -header .define{ +header .define { position: absolute; top: 0; right: 10px; } -.header_a{ +.header_a { display: block; max-width: 100px; min-width: 60px; @@ -340,7 +345,7 @@ header.scrolled { overflow: hidden; } -.hero-buttons{ +.hero-buttons { width: 100%; } @@ -383,11 +388,11 @@ header.scrolled { letter-spacing: 1.5px; } -.white{ +.white { border: 2px solid white; } -.black{ +.black { border: 2px solid black; } @@ -425,7 +430,7 @@ header.scrolled { -webkit-text-stroke: 1.5px #fff; } -.outline-schl{ +.outline-schl { color: transparent; -webkit-text-stroke: 1.5px black; } @@ -459,7 +464,7 @@ header.scrolled { background: none; } -.CLH{ +.CLH { font-size: 3.5rem; margin: 25px 0px 15px 0px; display: block; @@ -467,17 +472,17 @@ header.scrolled { color: #fff; } -.join_com{ +.join_com { margin-top: 40px; } -.join_com a{ +.join_com a { width: 100%; display: block; text-align: center; } -.align-center{ +.align-center { align-self: center; } @@ -571,88 +576,95 @@ header.scrolled { } #particles-about { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 0; - pointer-events: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 0; + pointer-events: none; } + /*-------------------------------------------------------------- # About --------------------------------------------------------------*/ .back_about { - position: relative; - z-index: 1; - color: rgb(255, 255, 255); - background: rgb(34, 33, 33); + position: relative; + z-index: 1; + color: rgb(255, 255, 255); + background: rgb(34, 33, 33); background: radial-gradient(circle, rgba(34, 33, 33, 1) 0%, rgba(2, 6, 8, 1) 100%); - font-size: 1.4rem; - text-align: justify; + font-size: 1.4rem; + text-align: justify; } -#about{ +#about { padding-top: 20px; } .icon-container { - display: grid; + display: grid; grid-template-columns: auto auto auto auto; - margin-top: 70px; + margin-top: 70px; } .icon-reg, .icon-man, .icon-projects { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; } -.about-section span, h3 { + +.about-section span, +h3 { font-weight: 600; } -.about-section h3{ + +.about-section h3 { text-align: center; } -.about-section p{ + +.about-section p { letter-spacing: 2px; text-align: justify; text-align-last: center; } + .icon-reg p, .icon-man p, .icon-projects p { - margin-top: 10px; - font-size: 1em; + margin-top: 10px; + font-size: 1em; } .about-section { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; - gap: 20px; - position: relative; - z-index: 1; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 20px; + position: relative; + z-index: 1; } .col-lg-5 { - margin-top: 50px; + margin-top: 50px; padding: 0rem 4.5rem; } + .font-box { - display: flex; - justify-content: center; - align-items: center; - height: auto; - text-align: center; + display: flex; + justify-content: center; + align-items: center; + height: auto; + text-align: center; margin-top: 50px; - } - - .font-head { +} + +.font-head { font-size: 3rem; font-weight: 800; background: linear-gradient(45deg, #ffffff, #cccccc); @@ -662,32 +674,36 @@ header.scrolled { transform: perspective(400px) rotateX(15deg); transition: transform 0.3s ease, text-shadow 0.3s ease; letter-spacing: 3px; - } - - .font-head:hover { +} + +.font-head:hover { transform: perspective(400px) rotateX(0deg); text-shadow: 5px 5px 12px rgba(88, 83, 83, 0.7), 5px 8px 12px rgba(51, 45, 45, 0.5); - } - .source p{ +} + +.source p { position: absolute; right: 5%; font-weight: 300 !important; font-size: 20px; margin-bottom: 70px; - } - @media (max-width: 768px) { +} + +@media (max-width: 768px) { .font-head { font-size: 1.75rem; letter-spacing: 1.5px; } - .font-box{ + + .font-box { margin-top: 20px; } - .source p{ + + .source p { font-size: 15px; } - } - +} + /*-------------------------------------------------------------- # Glimpses --------------------------------------------------------------*/ @@ -698,9 +714,11 @@ header.scrolled { background-position: center; background-repeat: no-repeat; } -.glimpses_container{ + +.glimpses_container { margin-bottom: 50px; } + .glimpses_of_events { display: flex; justify-content: center; @@ -860,8 +878,8 @@ section .domains { display: flex; flex-wrap: nowrap; backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - background: rgba(255, 255, 255, 0.3); + -webkit-backdrop-filter: blur(10px); + background: rgba(255, 255, 255, 0.3); } .clash>.marvel>.icon { @@ -937,7 +955,7 @@ input:checked+.clash .description { background-image: url("../img/Domains/Open_Track_final.jpg"); } -.clash{ +.clash { background-position: bottom; } @@ -951,47 +969,52 @@ Responsive Styles For Style 1 /*-------------------------------------------------------------- Base --------------------------------------------------------------*/ -@media(max-width: 768px){ +@media(max-width: 768px) { + + .heading-small, + .heading-shadow { + font-size: 12vw; + } + + .heading-shadow, + .heading-shadow-p { + font-size: 18vw; + margin-bottom: 20px; + } + + .heading-small, + .heading-small-p { + line-height: 12vw; + } + + .col-lg-5 { + padding: 0px 1rem; + } +} + +@media(max-width: 480px) { + .heading-small, - .heading-shadow { - font-size: 12vw; - } - - .heading-shadow, - .heading-shadow-p { - font-size: 18vw; - margin-bottom: 20px; - } - - .heading-small, - .heading-small-p { - line-height: 12vw; - } - - .col-lg-5{ - padding: 0px 1rem; - } -} -@media(max-width: 480px){ + .heading-shadow { + font-size: 16vw; + } + + .heading-shadow, + .heading-shadow-p { + font-size: 25vw; + margin-bottom: 20px; + } + .heading-small, - .heading-shadow { - font-size: 16vw; - } - - .heading-shadow, - .heading-shadow-p { - font-size: 25vw; - margin-bottom: 20px; - } - - .heading-small, - .heading-small-p { - line-height: 16vw; - } - .col-lg-5{ - margin-top: 30px; - } + .heading-small-p { + line-height: 16vw; + } + + .col-lg-5 { + margin-top: 30px; + } } + /*-------------------------------------------------------------- # Preloader --------------------------------------------------------------*/ @@ -1034,17 +1057,19 @@ Base header .logo img { width: 120px !important; } - .header_a{ + + .header_a { max-width: 60px; min-width: 55px; } } -@media(max-width: 1340px){ - .none{ +@media(max-width: 1340px) { + .none { display: none; } - .one{ + + .one { display: block; } } @@ -1054,7 +1079,7 @@ Base padding: 15px 20px 15px 20px; } - header .define{ + header .define { width: 40px; right: 35px; } @@ -1092,7 +1117,7 @@ Base justify-content: space-between; } - .back_home{ + .back_home { padding: 20px; } } @@ -1106,7 +1131,8 @@ Base margin-left: 10px; transition: 0.3s; } - .header .define{ + + .header .define { right: 0px; } } @@ -1118,12 +1144,13 @@ Base .back_home { height: 100vh; } - .CLH{ + + .CLH { font-size: 2.5rem; margin-bottom: 0px; } - .custom{ + .custom { display: flex; justify-content: center; } @@ -1172,12 +1199,12 @@ Base padding: 8px; } - .CLH{ + .CLH { font-size: 1.5rem; margin-bottom: 0px; } - .cont{ + .cont { margin-bottom: 20px; } } @@ -1190,7 +1217,7 @@ Base letter-spacing: .01em; } - .container-home{ + .container-home { top: 0px !important; } @@ -1199,7 +1226,8 @@ Base line-height: 8vw; } - .hero-buttons a, .join_com a { + .hero-buttons a, + .join_com a { font-size: 12px; } @@ -1207,7 +1235,7 @@ Base height: 650px !important; } - .hero p{ + .hero p { text-align: center; } } @@ -1221,7 +1249,7 @@ Base margin-top: 20px; } - .date-con{ + .date-con { text-align: center; } } @@ -1233,16 +1261,16 @@ Base column-gap: 0px; } - header .logo img{ + header .logo img { width: 150px !important; } - .custom{ + .custom { display: flex; justify-content: center; } - .align-center{ + .align-center { align-self: flex-start; } @@ -1314,7 +1342,7 @@ Base } - .hero p{ + .hero p { font-size: 1.2rem; } } @@ -1331,8 +1359,8 @@ Base } } -@media(min-width: 1000px){ - .custom{ +@media(min-width: 1000px) { + .custom { padding-left: 60px; } } @@ -1416,49 +1444,51 @@ Base } } -@media(max-width: 550px){ - .home_contents{ +@media(max-width: 550px) { + .home_contents { flex-direction: column; } - .join_com a{ + .join_com a { width: 50%; } - .join_com{ + .join_com { display: flex; justify-content: center; margin-top: 20px; } - #hero-sub{ + #hero-sub { line-height: 6vw; } - .date-con{ + .date-con { margin-top: 20px; } - .align-center{ + + .align-center { margin: 0 auto; } - .hero-buttons a, .join_com a{ + .hero-buttons a, + .join_com a { font-size: 16px; } - .custom{ + .custom { padding-left: 0px; } - .cont{ + .cont { margin-bottom: 30px; } - .CLH{ + .CLH { font-size: 2.3rem; } - #heading-pec{ + #heading-pec { font-size: 4.8rem; } } @@ -1483,38 +1513,38 @@ Base height: 650px !important; } - .cont{ + .cont { margin-bottom: 20px; } - .join_com a{ + .join_com a { padding: 8px; font-size: 14px; } - .join_com{ + .join_com { margin-top: 0px; } - .date-con{ + .date-con { margin-top: 10px; } - #hero-sub{ + #hero-sub { line-height: 4.5vw; font-size: 15px !important; } - .hero-buttons a{ + .hero-buttons a { font-size: 14px; } - .CLH{ + .CLH { margin-top: 18px; font-size: 2rem; } - #heading-pec{ + #heading-pec { font-size: 4rem; } } @@ -1542,13 +1572,14 @@ Base .back_about { padding-top: 0; } - .icon-container{ + + .icon-container { column-gap: 12px; row-gap: 50px; } } -@media(min-width: 768px){ +@media(min-width: 768px) { .about-section h3 { font-size: 1em; } @@ -1589,7 +1620,7 @@ Base font-size: 15px; } - .icon-container{ + .icon-container { grid-template-columns: auto auto; row-gap: 20px; width: 70%; @@ -1612,8 +1643,8 @@ Base } } -@media(max-width: 375px){ - .icon-container{ +@media(max-width: 375px) { + .icon-container { grid-template-columns: auto; } } @@ -1756,7 +1787,8 @@ Base .clash[for="c5"] { background-image: url("../img/Domains/Open_Track_blur.jpg"); } - .clash>.marvel{ + + .clash>.marvel { background-color: transparent; } } @@ -1787,6 +1819,6 @@ Base } } -.back_judges{ +.back_judges { margin-bottom: 5vh; } \ No newline at end of file diff --git a/css/style2.css b/css/style2.css index 3b47e06..83410eb 100644 --- a/css/style2.css +++ b/css/style2.css @@ -8,20 +8,26 @@ --container-color: hsl(210, 24%, 8%); --body-font: "Poppins", sans-serif; --normal-font-size: .938rem; - } +} + .back_about, .back_domains, .back_prices, pre, .timeline-item, .cta, -.faq-section, .back_contactus, .back_teams, .custom-col, .track-price { +.faq-section, +.back_contactus, +.back_teams, +.custom-col, +.track-price { font-family: "Teko", sans-serif; font-optical-sizing: auto; font-weight: 400; font-size: 1.8rem !important; line-height: 40px; } + .back_sponsors { background-color: #aa1d39; padding-bottom: 0vw; @@ -51,9 +57,11 @@ pre, background: rgb(34, 33, 33); background: radial-gradient(circle, rgba(34, 33, 33, 1) 0%, rgba(2, 6, 8, 1) 100%); } + .back_teams { background-color: #161623; } + /*-------------------------------------------------------------- # Timeline --------------------------------------------------------------*/ @@ -63,17 +71,20 @@ pre, padding: 40px; overflow: hidden; } + #hackathon-timeline h2 { text-align: center; margin-bottom: 40px; color: #00FF9C; } + .timeline { position: relative; margin: 0 auto; padding: 20px 0; width: 80%; } + .timeline-line { position: absolute; left: 50%; @@ -85,17 +96,20 @@ pre, height: 0; transition: height 1s ease; } + .timeline-item { position: relative; margin: 20px 0; padding-left: 50%; z-index: 2; } + .timeline-item:nth-child(even) { padding-left: 0; padding-right: 50%; text-align: right; } + .timeline-item::before { content: ""; position: absolute; @@ -107,12 +121,14 @@ pre, z-index: 3; transform: translateX(-50%); } + .timeline-date { font-weight: normal; margin-bottom: 10px; color: #FFD700; font-size: 20px; } + .timeline-content { padding: 20px; background: #222; @@ -120,12 +136,15 @@ pre, position: relative; z-index: 4; } + .timeline-item:nth-child(odd) .timeline-content { margin-left: 20px; } + .timeline-item:nth-child(even) .timeline-content { margin-right: 20px; } + /*-------------------------------------------------------------- # Prizes --------------------------------------------------------------*/ @@ -135,6 +154,7 @@ pre, align-items: center; padding: 0 20px; } + .award-row { display: flex; row-gap: 50px; @@ -143,6 +163,7 @@ pre, margin-bottom: 80px; flex-wrap: wrap; } + .award-item { display: flex; flex-direction: column; @@ -153,66 +174,87 @@ pre, border-radius: 25px; padding: 15px; } + .gold-pri { animation: goldGlow 2s infinite ease-in-out; } + .silver-pri { animation: silverGlow 2s infinite ease-in-out; } + .bronze-pri { animation: bronzeGlow 2s infinite ease-in-out; } + .school-pri { animation: lightBlueGlow 2s infinite ease-in-out; } + .girls-pri { animation: lightPinkGlow 2s infinite ease-in-out; } + @keyframes goldGlow { + 0%, 100% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.7), 0 0 60px rgba(255, 223, 0, 0.4), 0 0 100px rgba(255, 223, 0, 0.3); } + 50% { box-shadow: 0 0 50px rgba(255, 223, 0, 0.9), 0 0 80px rgba(255, 215, 0, 0.6), 0 0 120px rgba(255, 215, 0, 0.5); } } + @keyframes silverGlow { + 0%, 100% { box-shadow: 0 0 30px rgba(192, 192, 192, 0.7), 0 0 60px rgba(211, 211, 211, 0.4), 0 0 100px rgba(211, 211, 211, 0.3); } + 50% { box-shadow: 0 0 50px rgba(211, 211, 211, 0.9), 0 0 80px rgba(192, 192, 192, 0.6), 0 0 120px rgba(192, 192, 192, 0.5); } } + @keyframes bronzeGlow { + 0%, 100% { box-shadow: 0 0 30px rgba(205, 127, 50, 0.7), 0 0 60px rgba(244, 164, 96, 0.4), 0 0 100px rgba(244, 164, 96, 0.3); } + 50% { box-shadow: 0 0 50px rgba(244, 164, 96, 0.9), 0 0 80px rgba(205, 127, 50, 0.6), 0 0 120px rgba(205, 127, 50, 0.5); } } + @keyframes lightBlueGlow { + 0%, 100% { box-shadow: 0 0 30px rgba(173, 216, 230, 0.7), 0 0 60px rgba(135, 206, 250, 0.4), 0 0 100px rgba(135, 206, 250, 0.3); } + 50% { box-shadow: 0 0 50px rgba(135, 206, 250, 0.9), 0 0 80px rgba(173, 216, 230, 0.6), 0 0 120px rgba(173, 216, 230, 0.5); } } + @keyframes lightPinkGlow { + 0%, 100% { box-shadow: 0 0 30px rgba(255, 182, 193, 0.7), 0 0 60px rgba(255, 192, 203, 0.4), 0 0 100px rgba(255, 192, 203, 0.3); } + 50% { box-shadow: 0 0 50px rgba(255, 192, 203, 0.9), 0 0 80px rgba(255, 182, 193, 0.6), 0 0 120px rgba(255, 182, 193, 0.5); } } + .award-box { width: 100%; max-width: 200px; @@ -225,20 +267,24 @@ pre, align-items: center; justify-content: center; } + .award-box:hover { transform: scale(1.05); } + .winners-image { width: 100%; height: 100%; object-fit: cover; } + .award-content { background: transparent; padding: 10px; margin-top: 10px; color: white; } + .award-content strong { font-family: "Agdasima", sans-serif; color: transparent; @@ -246,22 +292,28 @@ pre, font-size: 25px; margin-left: 10px; } + .award-content h3, .award-content p { margin: 0; } + .award-content h3 { font-size: 2rem; } + .award-content p { font-size: 1.7rem; } + .award-row.second-third-row { margin-bottom: 60px; } + .award-item.second-runner-up { margin-right: 40px; } + /*-------------------------------------------------------------- # Sponsors --------------------------------------------------------------*/ @@ -273,90 +325,112 @@ pre, justify-content: center; align-items: center; } -.gold, .silver h2 { + +.gold, +.silver h2 { margin-bottom: 5px; } + .gold img { border-radius: 15px; box-shadow: 0 4px 8px rgb(0, 0, 0), 0 6px 20px rgb(0, 0, 0); transition: transform 0.3s ease, box-shadow 0.3s ease; } + .gold img:hover { transform: scale(1.05); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.2); } + .gold a { display: inline-block; } + .silver { padding-bottom: 40px; } -.spon-title{ +.spon-title { font-size: 20px !important; margin: 10px; } -.first-title{ + +.first-title { margin-top: 40px; } -.bronze_sponsers{ + +.bronze_sponsers { display: grid; - grid-template-columns: repeat(4,200px); + grid-template-columns: repeat(4, 200px); column-gap: 20px; row-gap: 20px; justify-content: center; } + .bronze_sponsers .gold:last-child { - grid-column: 1 / -1; /* Makes the last item span all columns */ - justify-self: center; /* Centers the last item horizontally */ + grid-column: 1 / -1; + /* Makes the last item span all columns */ + justify-self: center; + /* Centers the last item horizontally */ } + .carousel-images-container { - width: 100%; - max-width: 1000px; - margin: 0 auto; - overflow: hidden; + width: 100%; + max-width: 1000px; + margin: 0 auto; + overflow: hidden; } .carousel-images-scroll-container { - display: flex; - flex-direction: column; - gap: 20px; - justify-content: center; - align-items: center; + display: flex; + flex-direction: column; + gap: 20px; + justify-content: center; + align-items: center; } .carousel-images { - display: flex; - white-space: nowrap; - animation-timing-function: linear; + display: flex; + white-space: nowrap; + animation-timing-function: linear; } .primary-carousel { - animation: scroll-left 150s linear infinite; + animation: scroll-left 150s linear infinite; } .secondary-carousel { - animation: scroll-right 200s linear infinite; + animation: scroll-right 200s linear infinite; } .carousel-images img { - width: 10px; - margin: 0 10px; - /* border: 2px solid #D0A022; */ + width: 10px; + margin: 0 10px; + /* border: 2px solid #D0A022; */ border-radius: 15px; - object-fit: contain; - box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); - background-color: white; + object-fit: contain; + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); + background-color: white; } @keyframes scroll-left { - from { transform: translateX(0); } - to { transform: translateX(-50%); } + from { + transform: translateX(0); + } + + to { + transform: translateX(-50%); + } } @keyframes scroll-right { - from { transform: translateX(0); } - to { transform: translateX(50%); } + from { + transform: translateX(0); + } + + to { + transform: translateX(50%); + } } /*-------------------------------------------------------------- @@ -368,15 +442,18 @@ pre, padding: 60px 0; text-align: center; } + .cta h2 a { color: #f9c922; text-decoration: none; font-weight: bold; transition: color 0.3s ease; } + .cta h2 a:hover { color: #ffffff; } + .cta .card-ct { width: 80%; margin: 0 auto; @@ -387,12 +464,14 @@ pre, padding: 30px; color: #ffffff; } + .cta .card-ct h3 { font-size: 35px; font-weight: bold; margin-top: 40px; color: #f9c922; } + .cta .card-ct p { font-size: 1.6rem; letter-spacing: .08rem; @@ -400,6 +479,7 @@ pre, color: #e1e1e1; } + .cta-btn { display: inline-block; background-color: #f9c922; @@ -410,14 +490,17 @@ pre, font-weight: 600; transition: background-color 0.3s ease, color 0.3s ease; } + .cta-btn:hover { background-color: #ffffff; color: #343a40; } + .sponsor-brochure, .contact-cta { margin: 0 10px; } + /*-------------------------------------------------------------- # Judges & Speakers --------------------------------------------------------------*/ @@ -426,15 +509,18 @@ pre, padding: 0 3rem; font-family: "Teko", sans-serif !important; } + .card-j { position: relative; overflow: hidden; padding: 5rem 0; } + .card__container { display: grid; gap: 1.5rem; } + .card__glass { position: relative; overflow: hidden; @@ -444,6 +530,7 @@ pre, backdrop-filter: blur(5px); border-radius: 1.5rem; } + .card__img { width: 80px; height: 80px; @@ -451,20 +538,24 @@ pre, border: 2px solid #F4F4FB; margin-bottom: 1rem; } + .card__data { margin-bottom: .5rem; } + .card__title { font-size: 1.125rem; color: #fff; font-weight: 700; margin-bottom: .25rem; } + .card__profession { font-size: 1rem; color: #fff; font-weight: 500; } + .card__button { display: inline-block; background: linear-gradient(130deg, rgba(251, 251, 254, .9), rgba(251, 251, 254, .2)); @@ -474,15 +565,18 @@ pre, font-weight: 500; transition: .4s; } + .card__button:hover { background: linear-gradient(130deg, rgba(251, 251, 254, 1), rgba(251, 251, 254, .4)); } + .card__social { position: absolute; top: 50%; transform: translateY(-50%); padding-left: 3px; } + .card__link { display: block; font-size: 1.35rem; @@ -490,29 +584,36 @@ pre, margin: 1rem 0; transform: translateX(-5rem); } + .card__link:nth-child(1) { transition: .2s; } + .card__link:nth-child(2) { transition: .5s; } + .card__link:nth-child(3) { transition: .7s; } + .card__glass:hover .card__link { transform: translateX(-1.5rem); } -.third-row{ + +.third-row { display: flex; justify-content: center; - font-family: 'Teko' , sans-serif; + font-family: 'Teko', sans-serif; margin-top: 25px; padding: 0 3rem; column-gap: 25px; } -.third-row .card__glass{ + +.third-row .card__glass { width: 275px; } + .card__circle { position: absolute; width: 250px; @@ -520,21 +621,25 @@ pre, background: linear-gradient(130deg, rgba(77, 73, 191, .8), rgba(255, 255, 255, .2)); border-radius: 50%; } + .card__circle1 { top: 20%; left: -20%; } + .card__circle2 { bottom: -5%; right: -25%; background: linear-gradient(130deg, rgba(5, 219, 242, .8), rgba(255, 255, 255, .2)); } + /*-------------------------------------------------------------- # Workshop --------------------------------------------------------------*/ -.days-des{ +.days-des { height: 275px; } + .days-buttons { display: flex; flex-wrap: wrap; @@ -558,14 +663,18 @@ pre, } .days-des .days-event { - display: flex; /* Use flexbox to display events horizontally */ - flex-wrap: wrap; /* Allow wrapping of items if the container is too small */ - justify-content: space-around; /* Distribute space between items */ - color: white; - visibility: hidden; /* Hide events by default */ - opacity: 0; - transform: translateY(10px); - transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.5s ease; + display: flex; + /* Use flexbox to display events horizontally */ + flex-wrap: wrap; + /* Allow wrapping of items if the container is too small */ + justify-content: space-around; + /* Distribute space between items */ + color: white; + visibility: hidden; + /* Hide events by default */ + opacity: 0; + transform: translateY(10px); + transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.5s ease; font-family: 'Teko', sans-serif; } @@ -588,6 +697,7 @@ pre, font-size: 16px; line-height: 1.5; } + .day-1-events, .day-2-events, .day-3-events, @@ -595,12 +705,14 @@ pre, .day-5-events, .day-6-events, .day-7-events { - position: absolute; - bottom: 10px; - left: 0; - width: 100%; - display: none; /* Hide all events by default */ + position: absolute; + bottom: 10px; + left: 0; + width: 100%; + display: none; + /* Hide all events by default */ } + /* Show event cards for a specific day */ .day-1-events.show, .day-2-events.show, @@ -609,39 +721,46 @@ pre, .day-5-events.show, .day-6-events.show, .day-7-events.show { - visibility: visible; - opacity: 1; - transform: translateY(0); + visibility: visible; + opacity: 1; + transform: translateY(0); } + .ag-format-container { width: 1142px; - } - .ag-courses_box { +} + +.ag-courses_box { width: 100%; - } - .ag-courses_item { - overflow: hidden; - border-radius: 28px; } - .ag-courses-item_link { + +.ag-courses_item { + overflow: hidden; + border-radius: 28px; +} + +.ag-courses-item_link { display: block; height: 230px; padding: 30px 20px; background-color: #121212; overflow: hidden; position: relative; - } - .ag-courses-item_link:hover, - .ag-courses-item_link:hover .ag-courses-item_date { +} + +.ag-courses-item_link:hover, +.ag-courses-item_link:hover .ag-courses-item_date { text-decoration: none; color: black; - } - .ag-courses-item_link:hover .ag-courses-item_bg { +} + +.ag-courses-item_link:hover .ag-courses-item_bg { -webkit-transform: scale(10); -ms-transform: scale(10); transform: scale(10); - } - .ag-courses-item_title { +} + +.ag-courses-item_title { min-height: 87px; margin: 0 0 25px; overflow: hidden; @@ -650,27 +769,37 @@ pre, color: #FFF; z-index: 2; position: relative; - } - .ag-courses-item_title:hover{ +} + +.ag-courses-item_title:hover { color: black; - } - .ag-courses-item_title p{ +} + +.ag-courses-item_title p { font-size: 1.3rem !important; - } - .ag-courses-item_date-box { +} + +.ag-courses-item_date-box { font-size: 18px; color: #FFF; z-index: 2; position: relative; - } - .ag-courses-item_date { +} + +.ag-courses-item_date { font-weight: bold; color: plum; -webkit-transition: color .5s ease; -o-transition: color .5s ease; transition: color .5s ease - } - .ag-courses-item_bg, .day_2 , .day_3, .day_4 , .day_5, .day_6 { +} + +.ag-courses-item_bg, +.day_2, +.day_3, +.day_4, +.day_5, +.day_6 { height: 200px; width: 250px; background-color: #f9b234; @@ -682,35 +811,45 @@ pre, -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; - } - .day_2{ +} + +.day_2 { background-color: #3ecd5e; - } - .day_3{ +} + +.day_3 { background-color: #e44002; - } - .day_4{ +} + +.day_4 { background-color: #952aff; - } - .day_5{ +} + +.day_5 { background-color: #cd3e94; - } - .day_6{ +} + +.day_6 { background-color: #4c49ea; - } - .des_con{ +} + +.des_con { margin: 15px 0px 8px 0px !important; - } - .new{ +} + +.new { width: 150px !important; font-family: 'Teko', sans-serif !important; - } - .bx-spin{ +} + +.bx-spin { margin-left: 10px !important - } - .ag-courses-item_date-box i{ +} + +.ag-courses-item_date-box i { margin: 0px 5px; - } +} + /*-------------------------------------------------------------- # Our Team --------------------------------------------------------------*/ @@ -720,6 +859,7 @@ pre, align-items: center; flex-direction: row; } + @keyframes colorful { 0% { filter: hue-rotate(0deg); @@ -729,33 +869,42 @@ pre, filter: hue-rotate(360deg); } } + .container-team { position: relative; z-index: 1; padding: 2em 0em; } + .grid { display: grid; grid-template-columns: auto auto auto auto auto auto; justify-content: center; align-items: center; } -.event-directors{ + +.event-directors { display: flex; justify-content: center; align-items: center; } -.layout .card .content , .layout .card{ + +.layout .card .content, +.layout .card { display: flex !important; flex-direction: row !important; justify-content: space-evenly !important; width: 400px !important; height: 230px !important; } -.layout .card .content .cardContent h3{ + +.layout .card .content .cardContent h3 { font-size: 25px !important; } -.container-team .grid .card , .first .card , .event-directors .card { + +.container-team .grid .card, +.first .card, +.event-directors .card { position: relative; width: 250px; height: 310px; @@ -772,9 +921,11 @@ pre, background-clip: padding-box; box-shadow: 0px 10px 10px rgba(46, 54, 68, 0.03); } + .container-team::-webkit-scrollbar { display: none; } + .container-team .card .content { position: relative; display: flex; @@ -783,6 +934,7 @@ pre, flex-direction: column; transition: 0.5s; } + .container-team .card .content .img { position: relative; width: 150px; @@ -793,6 +945,7 @@ pre, opacity: 0.95; transition: 0.5s; } + .container-team .card .content .img img { position: absolute; top: 0; @@ -801,14 +954,17 @@ pre, height: 100%; object-fit: cover; } -.container-team .card .content .cardContent{ + +.container-team .card .content .cardContent { opacity: 0.5; transition: 0.5s; } -.container-team .card:hover .content .cardContent{ + +.container-team .card:hover .content .cardContent { transition: 0.5s; opacity: 1; } + .container-team .card:hover .content .img { opacity: 1; transition: 0.5s; @@ -824,11 +980,13 @@ pre, margin: 20px 0 10px; line-height: 1.1em; } + .container-team .card .content .cardContent h3 span { font-size: 12px; font-weight: 300; text-transform: initial; } + .container-team .card .sci { position: absolute; bottom: 20px; @@ -837,11 +995,13 @@ pre, align-items: center; flex-direction: row; } -.layout .card .sci{ + +.layout .card .sci { position: absolute !important; bottom: 45px !important; right: 23px !important; } + .container-team .card .sci li { margin: 0 10px; transform: translateY(40px); @@ -849,59 +1009,68 @@ pre, transition: 0.5s; transition-delay: calc(0.1s * var(--i)); } + .container-team .card .sci li a { font-size: 24px; } + .container-team .card:hover .content { opacity: 1; transform: translateY(-20px); } + .container-team .card:hover .sci li { transform: translateY(0px); opacity: 1; } + .first, .cardContent p { display: flex; width: 100%; justify-content: center; align-items: center; - color:#adadad; + color: #adadad; font-size: 20px; } + .cardContent p { margin-bottom: 50px; } + .fa { color: white; } + ul { list-style: none; padding-left: 0 !important; } + /*-------------------------------------------------------------- # Track Prices --------------------------------------------------------------*/ - a { +a { text-decoration: none; - } - - .track-price { +} + +.track-price { display: grid; place-items: center; margin-inline: 1.5rem; - } - - .price-box, .card__article { +} + +.price-box, +.card__article { display: grid; gap: 2rem; - } - - .price-box { +} + +.price-box { padding-block: 4.5rem; - } - - .card__article { +} + +.card__article { --hue-1: 210; --hue-2: 238; position: relative; @@ -918,18 +1087,18 @@ ul { align-items: center; justify-content: center; z-index: 100; - } - - .card__shape-1 { +} + +.card__shape-1 { position: relative; width: 200px; height: 200px; border-radius: 2rem; z-index: 2; padding-left: 10px; - } - - .card__shape-3 { +} + +.card__shape-3 { width: 180px; height: 180px; background: linear-gradient(140deg, hsl(var(--hue-1), 85%, 60%) 3%, hsl(var(--hue-2), 85%, 60%) 100%); @@ -939,78 +1108,80 @@ ul { justify-content: center; position: relative; z-index: 2; - } - - .card__shape-3 img { +} + +.card__shape-3 img { width: 250px; height: 100%; object-fit: cover; border-radius: 1rem; - } - - .card__icon { +} + +.card__icon { font-size: 3rem; - } - - .card__data { +} + +.card__data { z-index: 3; - } - - .card__title { +} + +.card__title { font-size: 1.5rem; margin-bottom: 0.5rem; font-weight: 600; color: #fff; - } - - .card__description { +} + +.card__description { margin-bottom: 1.5rem; - } - - .card__button { +} + +.card__button { display: inline-block; background-color: var(--white-color); border-radius: 0.5rem; color: var(--black-color); font-weight: 500; - } - - .card__orange { +} + +.card__orange { --hue-1: 300; --hue-2: 30; - } - - .card__green { +} + +.card__green { --hue-1: 180; --hue-2: 50; - } - - .card__scale-1 { +} + +.card__scale-1 { width: 148px; height: 148px; background: linear-gradient(140deg, hsl(var(--hue-1), 70%, 50%) 3%, hsl(var(--hue-2), 95%, 45%) 100%); border-radius: 2rem; top: 4rem; - } - - .card__scale-2 { +} + +.card__scale-2 { width: 116px; height: 116px; background: var(--container-color); border-radius: 1.5rem; top: 5rem; - } - - .card__scale-1, .card__scale-2 { +} + +.card__scale-1, +.card__scale-2 { position: absolute; filter: blur(24px); transition: transform 0.3s ease-in; - } - - .card__article:hover .card__scale-1, - .card__article:hover .card__scale-2 { +} + +.card__article:hover .card__scale-1, +.card__article:hover .card__scale-2 { transform: scale(6); - } +} + /*-------------------------------------------------------------- # Contact us --------------------------------------------------------------*/ @@ -1021,49 +1192,60 @@ ul { justify-content: center; text-align: center; } + #Contact .row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 35px; } + #Contact .col-lg-6, #Contact .col-md-6 { flex: 1; max-width: 400px; width: 100%; } + #Contact i { font-size: 36px; color: #f9c922; margin-bottom: 10px; } + #Contact h3 { font-size: 20px; margin-bottom: 10px; color: #343a40; } + #Contact p { color: #555555; margin-bottom: 0; } + div .contact_name { display: flex; } + div .contact_name .name { width: 200px; } -.row-puw{ + +.row-puw { display: flex; - justify-content: space-around ; + justify-content: space-around; padding: 40px; } -.details{ + +.details { text-align: center; } + #faq-head { color: white; } + @media(max-width: 425px) { #faq-head { font-size: 1rem; @@ -1074,100 +1256,117 @@ div .contact_name .name { # FAQs --------------------------------------------------------------*/ #faq .container { - max-width: 1200px; - margin: 0 auto; - padding: 40px 20px; + max-width: 1200px; + margin: 0 auto; + padding: 40px 20px; } + #faq h2.faq-title { - text-align: center; - margin-bottom: 40px; - font-size: 36px; - color: #f5f6fa; + text-align: center; + margin-bottom: 40px; + font-size: 36px; + color: #f5f6fa; } + #faq .faq-section { - padding: 40px 0; + padding: 40px 0; } + #faq .row { - display: flex; - flex-wrap: wrap; - justify-content: space-between; + display: flex; + flex-wrap: wrap; + justify-content: space-between; } + #faq .faq-column { - width: 48%; + width: 48%; } + #faq .accordion { - background-color: transparent; - border-radius: 8px; - padding: 10px; + background-color: transparent; + border-radius: 8px; + padding: 10px; } + #faq .accordion-item { - background-color: #333; - margin-bottom: 10px; - border-radius: 8px; - overflow: hidden; - position: relative; - transition: all 0.3s ease-in-out; + background-color: #333; + margin-bottom: 10px; + border-radius: 8px; + overflow: hidden; + position: relative; + transition: all 0.3s ease-in-out; } + #faq .accordion-button { font-family: "Teko", sans-serif !important; - width: 100%; - padding: 15px; - font-size: 18px; - text-align: left; - background: none; - border: none; - color: #fff; - cursor: pointer; - display: flex; - justify-content: space-between; - align-items: center; - transition: background-color 0.3s ease; + width: 100%; + padding: 15px; + font-size: 18px; + text-align: left; + background: none; + border: none; + color: #fff; + cursor: pointer; + display: flex; + justify-content: space-between; + align-items: center; + transition: background-color 0.3s ease; letter-spacing: .05rem; } + #faq .accordion-button:hover { - background-color: #444; + background-color: #444; } + #faq .accordion-icon { - font-size: 20px; - font-weight: bold; - transition: transform 0.3s ease; + font-size: 20px; + font-weight: bold; + transition: transform 0.3s ease; } + #faq .accordion-button.active .accordion-icon { - transform: rotate(45deg); + transform: rotate(45deg); } + #faq .accordion-content { - max-height: 0; - overflow: hidden; - background-color: #444; - transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out; - padding: 0 15px; + max-height: 0; + overflow: hidden; + background-color: #444; + transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out; + padding: 0 15px; line-height: 1.6; } + #faq .accordion-content p { margin: 10px 0; padding: 5px 10px; font-size: 18px !important; - color: #fff; + color: #fff; align-items: center !important; text-align: justify; } #faq .accordion-item.active { - box-shadow: 0 0 15px rgba(50, 205, 50, 0.7); - border: 1px solid rgba(50, 205, 50, 0.7); + box-shadow: 0 0 15px rgba(50, 205, 50, 0.7); + border: 1px solid rgba(50, 205, 50, 0.7); } + #faq .accordion-item.active .accordion-button { - background-color: rgba(50, 205, 50, 0.1); + background-color: rgba(50, 205, 50, 0.1); } + #faq .accordion-button .accordion-icon { - transition: transform 0.3s ease; + transition: transform 0.3s ease; } + #faq .accordion-button.active .accordion-icon { - transform: rotate(45deg); + transform: rotate(45deg); } + .faq_res { margin-top: none; } + /*-------------------------------------------------------------- # Contact Us --------------------------------------------------------------*/ @@ -1176,6 +1375,7 @@ div .contact_name .name { transition: transform 0.3s, box-shadow 0.3s; position: relative; } + .contact-container::before { content: ''; position: absolute; @@ -1188,12 +1388,14 @@ div .contact_name .name { opacity: 0; transition: opacity 0.3s; } + .icon-style { font-size: 45px; color: #fff; margin-bottom: 15px; transition: color 0.3s; } + .contact-title { font-size: 26px; font-weight: bold; @@ -1203,6 +1405,7 @@ div .contact_name .name { text-transform: uppercase; transition: color 0.3s; } + .contact-detail { font-size: 17px; color: #fff; @@ -1210,9 +1413,11 @@ div .contact_name .name { line-height: 1.6; transition: color 0.3s; } + .contact_name { text-align: center; } + /*-------------------------------------------------------------- # RESPONSIVE STYLES FOR STYLE 2 --------------------------------------------------------------*/ @@ -1220,7 +1425,7 @@ div .contact_name .name { # Timeline --------------------------------------------------------------*/ @media(max-width : 768px) { - .timeline{ + .timeline { padding: 100px 0px 0px 0px; } @@ -1241,6 +1446,7 @@ div .contact_name .name { left: 0%; } } + /*-------------------------------------------------------------- # Prices --------------------------------------------------------------*/ @@ -1248,196 +1454,246 @@ div .contact_name .name { .award-box { max-width: 180px; } + .award-item { margin: 0 15px; } } + @media (max-width: 768px) { .award-box { max-width: 150px; } + .award-item { margin: 0 10px; } + .award-content h3 { font-size: 1.1rem !important; } } + @media (max-width: 480px) { .award-box { max-width: 120px; } + .award-content h3 { font-size: 1rem; } + .award-content p { font-size: 0.9rem; } - .timeline-content h3{ + + .timeline-content h3 { font-size: .8em !important; } } + @media (max-width: 320px) { .award-box { max-width: 100px; } + .award-content h3 { font-size: 0.9rem; } + .award-content p { font-size: 0.8rem; } - .timeline-content h3{ + + .timeline-content h3 { font-size: .6em !important; } } + /*-------------------------------------------------------------- # Sponsors --------------------------------------------------------------*/ -.com{ +.com { margin: 10px 0px; } @media (min-width: 1700px) { - .carousel-images-container{ + .carousel-images-container { width: 200vw !important; } } + @media (min-width: 1300px) and (max-width: 1441px) { - .bronze_sponsers{ + .bronze_sponsers { row-gap: 20px; column-gap: 50px; } } -@media(min-width: 1700px){ - .bronze_sponsers{ + +@media(min-width: 1700px) { + .bronze_sponsers { column-gap: 70px; } } + @media (min-width: 2150px) { - .bronze_sponsers{ + .bronze_sponsers { column-gap: 110px; } } + @media (min-width: 2400px) { - .bronze_sponsers{ + .bronze_sponsers { column-gap: 130px; } } + @media (min-width: 1024px) and (max-width: 1439px) { .gold img { width: 16vw; } + .gold a { width: 16vw; } - .cara a img{ + + .cara a img { width: 15vw; } - .carousel-images-container{ + + .carousel-images-container { width: 80%; } } -@media(max-width : 1024px){ - .bronze_sponsers{ - grid-template-columns: repeat(3,200px); + +@media(max-width : 1024px) { + .bronze_sponsers { + grid-template-columns: repeat(3, 200px); column-gap: 40px; } - .bronze_sponsers a img{ + + .bronze_sponsers a img { width: 200px; } - .cara a img{ + + .cara a img { width: 22vw; } } + @media (min-width: 768px) and (max-width: 1023px) { .gold img { width: 25vw; } + .gold a { width: 25vw; } - .carousel-images-container{ + + .carousel-images-container { width: 80%; } } + @media (min-width: 426px) and (max-width: 767px) { .gold img { width: 35vw; } + .gold a { width: 35vw; } - .cara a{ + + .cara a { width: 24vw; } + .cara a img { width: 23vw; } - .carousel-images-container{ + + .carousel-images-container { width: 80%; } } + @media(max-width: 600px) { .com { margin-bottom: 20px; } - .bronze_sponsers{ - grid-template-columns: repeat(2,150px); + + .bronze_sponsers { + grid-template-columns: repeat(2, 150px); column-gap: 55px; } - .bronze_sponsers a img{ + + .bronze_sponsers a img { width: 160px; } - .bronze_sponsers .com{ + + .bronze_sponsers .com { margin-bottom: 0px; } } -@media(min-width: 600px) and (max-width: 768px){ - .bronze_sponsers{ - grid-template-columns: repeat(3,150px); + +@media(min-width: 600px) and (max-width: 768px) { + .bronze_sponsers { + grid-template-columns: repeat(3, 150px); } - .bronze_sponsers a img{ + + .bronze_sponsers a img { width: 160px; } - .bronze_sponsers .com{ + + .bronze_sponsers .com { margin-bottom: 0px; } - .cara a{ + + .cara a { width: 26vw; } + .cara a img { width: 25vw; } - .carousel-images-container{ + + .carousel-images-container { width: 80%; } } + @media (max-width: 425px) { .gold { flex-direction: column; row-gap: 20px; } + .gold img { width: 35vw !important; } + .gold a { width: auto; } - .bronze_sponsers{ + + .bronze_sponsers { column-gap: 10px; } - .cara a{ + + .cara a { width: 33vw !important; } + .cara a img { width: 32vw !important; } - .carousel-images-container{ + + .carousel-images-container { width: 90% !important; } } + @media only screen and (max-width: 1000px) and (min-width: 760px) { .owl-carousel .item img { width: 80%; @@ -1445,114 +1701,141 @@ div .contact_name .name { height: auto; } } + @media(max-width: 600px) { .bronze_slide { height: 115px !important; } + .bronze_slide img { margin-bottom: 15px; } + .spon { margin-bottom: 0 !important; } - .cara a{ + + .cara a { width: 26vw; } + .cara a img { width: 25vw; } - .carousel-images-container{ + + .carousel-images-container { width: 80%; } } + @media (min-width: 1440px) { .gold img { width: 17vw; } + .gold a { width: 17vw; } + .bronze, .com img { width: 11vw; } - .non-cara a img{ + + .non-cara a img { width: 12vw !important; } + .bronze, .com a { width: 12vw; } } + /*-------------------------------------------------------------- # Workshop --------------------------------------------------------------*/ @media (max-width: 1150px) { - .ag-courses-item_link{ + .ag-courses-item_link { width: 900px; border-radius: 25px; } + .ag-courses_item { display: flex; justify-content: center; align-items: center; } } + @media (max-width: 900px) { - .ag-courses-item_link{ + .ag-courses-item_link { width: 750px; height: 250px; } } + @media (max-width: 768px) { - .ag-courses-item_link{ + .ag-courses-item_link { width: 520px; height: 305px; } - .days-des{ + + .days-des { height: 300px !important; } } + @media (max-width: 530px) { - .ag-courses-item_link{ + .ag-courses-item_link { width: 400px; height: 300px; } - .ag-courses-item_title{ + + .ag-courses-item_title { font-size: 21px; } } + @media (max-width: 425px) { - .ag-courses-item_link{ + .ag-courses-item_link { width: 290px; height: 270px; } - .ag-courses-item_title{ + + .ag-courses-item_title { font-size: 18px; } - .ag-courses-item_title p{ + + .ag-courses-item_title p { font-size: 1rem !important; } - .ag-courses-item_date span{ + + .ag-courses-item_date span { font-size: 15px; } - .bx{ + + .bx { font-size: 15px !important; } + .days-buttons { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; grid-auto-columns: auto; } - .days-buttons button{ + + .days-buttons button { font-size: 16px !important; justify-self: center; } - .new{ + + .new { font-size: .8rem !important; } } + /*-------------------------------------------------------------- # Partner With us --------------------------------------------------------------*/ @@ -1561,27 +1844,33 @@ div .contact_name .name { padding: 0px; } } + @media (max-width: 768px) { .cta h2 { font-size: 20px; } + .cta .card-ct h3 { font-size: 2rem; } + .cta-btn { padding: 8px 16px; font-size: 14px; } + .cta .card-ct p { font-size: 1rem; } } + @media(max-width: 480px) { .puw-btn { display: flex; flex-direction: column; } } + /*-------------------------------------------------------------- # Judges & Speakers --------------------------------------------------------------*/ @@ -1591,48 +1880,59 @@ div .contact_name .name { margin-top: 90px; } } -@media(max-width: 1200px) and (min-width: 768px){ + +@media(max-width: 1200px) and (min-width: 768px) { .card__container { grid-template-columns: repeat(3, 1fr) !important; margin-top: 90px; } } + @media screen and (min-width: 768px) { .bd-container { margin-left: auto; margin-right: auto; } + .card { padding: 0; } + .card__container { grid-template-columns: repeat(4, 1fr); align-content: center; margin-top: 50px; } + .card__circle1 { left: 5%; top: 12%; } + .card__circle2 { right: 8%; bottom: 15%; } } -@media(max-width: 568px){ - .card__container{ + +@media(max-width: 568px) { + .card__container { margin-top: 80px; } - .third-row , .third-row .card__glass{ + + .third-row, + .third-row .card__glass { width: 100%; } - .third-row{ + + .third-row { flex-direction: column; row-gap: 25px; } } -@media(max-width: 400px){ - .card__profession{ + +@media(max-width: 400px) { + .card__profession { font-size: .8rem; } } @@ -1640,352 +1940,445 @@ div .contact_name .name { /*-------------------------------------------------------------- # Our Team --------------------------------------------------------------*/ -@media (max-width: 2700px){ - .modify{ +@media (max-width: 2700px) { + .modify { font-size: 260px !important; } - .layout .card .content{ + + .layout .card .content { flex-direction: row; justify-content: space-evenly; } } -@media (max-width: 2100px){ - .container-team .grid .card{ + +@media (max-width: 2100px) { + .container-team .grid .card { width: 240px; height: 300px; } - .modify{ + + .modify { font-size: 235px !important; } - .container-team .card .content .img{ + + .container-team .card .content .img { width: 110px; height: 110px; } + .container-team .card .sci li a { font-size: 22px; } - .cardContent p{ + + .cardContent p { margin-bottom: 30px; } - .layout .card .content , .layout .card{ + + .layout .card .content, + .layout .card { width: 400px !important; height: 230px !important; } - .layout .card .sci{ + + .layout .card .sci { position: absolute !important; bottom: 45px !important; right: 40px !important; } } -@media (max-width: 1750px){ - .container-team .grid .card{ + +@media (max-width: 1750px) { + .container-team .grid .card { width: 210px; height: 270px; } - .modify{ + + .modify { font-size: 210px !important; } - .container-team .card .content .img{ + + .container-team .card .content .img { width: 100px; height: 100px; } - .container-team .card .content .cardContent h3{ + + .container-team .card .content .cardContent h3 { font-size: 18px; } + .container-team .card .sci li a { font-size: 20px; } - .layout .card .content , .layout .card{ + + .layout .card .content, + .layout .card { width: 350px !important; height: 180px !important; } - .layout .card .sci{ + + .layout .card .sci { position: absolute !important; bottom: 20px !important; right: 40px !important; } - .hod .card .sci{ + + .hod .card .sci { right: 75px !important; } } -@media (max-width: 1560px){ - .container-team .grid .card{ + +@media (max-width: 1560px) { + .container-team .grid .card { width: 200px; height: 260px; margin: .5em; } - .modify{ + + .modify { font-size: 185px !important; } + .container-team .card .sci li a { font-size: 17px; } } -@media(max-width: 1400px){ - .grid{ + +@media(max-width: 1400px) { + .grid { grid-template-columns: auto auto auto auto; } - .modify{ + + .modify { font-size: 150px !important; } } + @media(max-width: 1075px) { - .grid{ + .grid { grid-template-columns: auto auto auto; } - .modify{ + + .modify { font-size: 125px !important; } - .layout .card .content .cardContent h3{ + + .layout .card .content .cardContent h3 { font-size: 20px !important; } } -@media(max-width: 968px){ - .modify{ + +@media(max-width: 968px) { + .modify { font-size: 100px !important; } } + @media(max-width: 768px) { .grid { grid-template-columns: auto auto; } - .modify{ + + .modify { font-size: 70px !important; } - .hod .card .sci{ + + .hod .card .sci { right: 90px !important; } - .event-directors .eve_card .sci{ + + .event-directors .eve_card .sci { right: 50px !important; } - .cardContent p{ + + .cardContent p { margin-bottom: 10px !important; } + .container .card .content .cardContent h3 { letter-spacing: 0; font-size: 12px; } + .container .card .content .cardContent p { font-size: 15px; } - .container-team .grid .card , .event-directors .card , .first .card { + + .container-team .grid .card, + .event-directors .card, + .first .card { margin: .5em; width: 250px !important; height: 260px !important; } - .layout .card .content{ + + .layout .card .content { height: auto !important; width: auto !important; } - .event-directors{ + + .event-directors { margin: 20px 0px 10px 0px; column-gap: 25px; } - .container-team .event-directors .card , .container-team .first .card{ + + .container-team .event-directors .card, + .container-team .first .card { margin: .1em; } - .modify-small{ + + .modify-small { font-size: 50px; } - .layout .card .content{ + + .layout .card .content { flex-direction: column !important; } } + @media(max-width: 530px) { - .container-team .grid .card , .event-directors .card , .first .card{ + + .container-team .grid .card, + .event-directors .card, + .first .card { width: 200px; height: 280px; } - .modify{ + + .modify { font-size: 45px !important; } - .event-directors .card{ + + .event-directors .card { padding: 40px 0px; } - .event-directors .eve_card .sci{ + + .event-directors .eve_card .sci { right: 43px !important; } } -@media(max-width: 450px){ - .container-team .grid .card , .event-directors .card , .first .card{ + +@media(max-width: 450px) { + + .container-team .grid .card, + .event-directors .card, + .first .card { width: 170px !important; height: 250px; } - .container-team .card .content .img{ + + .container-team .card .content .img { width: 80px; height: 80px; } - .event-directors .card{ + + .event-directors .card { padding: 20px 0px; } - .container-team .card .content .cardContent h3{ + + .container-team .card .content .cardContent h3 { font-size: 13px !important; } + .container-team .card .sci li a { font-size: 15px; } - .event-directors .eve_card .sci{ + + .event-directors .eve_card .sci { right: 25px !important; } - .event-directors .eve_card .sci li{ + + .event-directors .eve_card .sci li { width: 10px; } - .hod .card .sci{ + + .hod .card .sci { right: 50px !important; } } -@media(max-width: 375px){ - .container-team .grid .card , .event-directors .card , .first .card{ + +@media(max-width: 375px) { + + .container-team .grid .card, + .event-directors .card, + .first .card { width: 130px !important; height: 230px; margin: .3em; } - .event-directors{ + + .event-directors { column-gap: 10px; } - .modify-small{ + + .modify-small { font-size: 35px !important; } - .modify{ + + .modify { font-size: 40px !important; } - .container-team .card .content .img{ + + .container-team .card .content .img { width: 75px; height: 75px; } + .container-team .card .sci li a { font-size: 14px; } - .cardContent p{ + + .cardContent p { margin-bottom: 20px; } - .event-directors .eve_card .sci{ + + .event-directors .eve_card .sci { right: 16px !important; } - .event-directors .eve_card .sci li{ + + .event-directors .eve_card .sci li { width: 5px; } - .hod .card .sci{ + + .hod .card .sci { right: 32px !important; } } -@media(max-width: 1000px) and (min-width: 768px){ - .container-team .grid .card{ + +@media(max-width: 1000px) and (min-width: 768px) { + .container-team .grid .card { width: 250px; margin: .1em; height: 300px; } - .grid{ + + .grid { row-gap: 15px; margin-top: 15px; } } + /*-------------------------------------------------------------- # Track Prices --------------------------------------------------------------*/ @media screen and (min-width: 1024px) { :root { - --h2-font-size: 1.5rem; - --normal-font-size: 1rem; + --h2-font-size: 1.5rem; + --normal-font-size: 1rem; } - } +} + @media (hover: none) { + .card__article:hover .card__scale-1, .card__article:hover .card__scale-2 { - transform: none; + transform: none; } - } - - @media screen and (max-width: 320px) { +} + +@media screen and (max-width: 320px) { .track-price { - margin-inline: 1rem; + margin-inline: 1rem; } - + .card__article { - padding: 2rem 1rem; + padding: 2rem 1rem; } - + .card__scale-1 { - top: 2rem; + top: 2rem; } - + .card__scale-2 { - top: 3rem; + top: 3rem; } - } - - @media screen and (min-width: 576px) { +} + +@media screen and (min-width: 576px) { .price-box { - grid-template-columns: 328px; + grid-template-columns: 328px; } - } - - @media screen and (min-width: 768px) { +} + +@media screen and (min-width: 768px) { .price-box { - grid-template-columns: repeat(2, 328px); + grid-template-columns: repeat(2, 328px); } - } - - @media screen and (min-width: 1120px) { - +} + +@media screen and (min-width: 1120px) { + .price-box { - grid-template-columns: repeat(3, 345px); + grid-template-columns: repeat(3, 345px); } - + .card__article { - padding: 2rem; + padding: 2rem; } - } - @media(max-width: 578px){ +} + +@media(max-width: 578px) { .price-box { grid-template-columns: 258px; - } - .card__shape-3 img{ + } + + .card__shape-3 img { width: 170px; height: auto; } - .card__shape-3{ + + .card__shape-3 { background: none; height: auto; } - .card__shape-1{ + + .card__shape-1 { height: 100px } - .card__title{ + + .card__title { font-size: 2rem; } - .card__description{ + + .card__description { font-size: 1.5rem; margin-bottom: 0; } - .card__article{ + + .card__article { row-gap: 10px; } - } - @media(max-width: 480px){ - .card__shape-3 img{ +} + +@media(max-width: 480px) { + .card__shape-3 img { width: 150px; height: auto; } - .card__shape-3{ + + .card__shape-3 { background: none; height: auto; } - .card__shape-1{ + + .card__shape-1 { height: 100px } - .card__title{ + + .card__title { font-size: 1.5rem; } - .card__description{ + + .card__description { font-size: 1rem; margin-bottom: 0; } - .card__article{ + + .card__article { row-gap: 5px; padding: 2rem 2rem 1rem; } - } +} + /*-------------------------------------------------------------- # FAQs --------------------------------------------------------------*/ @@ -1994,17 +2387,20 @@ div .contact_name .name { margin-top: 25px; } } + @media (max-width: 768px) { - #faq .faq-column { - width: 100%; - margin-bottom: 20px; - } + #faq .faq-column { + width: 100%; + margin-bottom: 20px; + } } -@media(max-width: 480px){ - #faq .accordion{ + +@media(max-width: 480px) { + #faq .accordion { padding: 0px !important; } - .faq-column{ + + .faq-column { margin-bottom: 0px !important; } } \ No newline at end of file diff --git a/css/style3.css b/css/style3.css index 5fd2531..f5ef4ae 100644 --- a/css/style3.css +++ b/css/style3.css @@ -2,36 +2,42 @@ # Footer --------------------------------------------------------------*/ .custom-footer { - + background-color: #222; color: #fff; padding: 40px 0; font-family: Arial, sans-serif; letter-spacing: 0.07rem; } + .custom-container { width: 90%; margin: 0 auto; max-width: 1200px; } + .custom-row { display: flex; flex-wrap: wrap; gap: 20px; } + .custom-col { flex: 1; min-width: 200px; } + .custom-footer-logo { font-size: 50px; font-weight: bold; margin-bottom: 15px; } + .custom-footer-text { font-size: 26px; letter-spacing: 0.04rem; } + .custom-social-links { list-style: none; padding: 0; @@ -39,88 +45,103 @@ gap: 15px; } + .custom-social-links li a { color: #fff; font-size: 18px; } -.bx-chevron-right{ + +.bx-chevron-right { color: #cc1616; } + .custom-footer-heading { font-size: 24px; font-weight: bold; margin-bottom: 10px; } + .custom-footer-address, .custom-footer-links { margin-bottom: 15px; font-size: 20px; } -.custom-footer-para{ +.custom-footer-para { font-size: 14px; } + .custom-footer-links { list-style: none; padding: 0; } + .custom-footer-links li { margin-bottom: 10px; } + .custom-footer-links li a { color: #fff; text-decoration: none; } + .custom-footer-links li a:hover { text-decoration: underline; } + /*-------------------------------------------------------------- # Twinkle Stars as Background --------------------------------------------------------------*/ .twinkle_back { - position: relative; - z-index: 1; - overflow: hidden; + position: relative; + z-index: 1; + overflow: hidden; } + .background-container { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - z-index: 0; - pointer-events: none; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + z-index: 0; + pointer-events: none; } + .stars { - background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png) repeat; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - z-index: 0; + background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png) repeat; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 0; } + .twinkling { - width: 10000px; - height: 100%; - background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png") repeat; - background-size: 1000px 1000px; - position: absolute; - right: 0; - top: 0; - bottom: 0; - z-index: 1; - animation: move-background 70s linear infinite; + width: 10000px; + height: 100%; + background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png") repeat; + background-size: 1000px 1000px; + position: absolute; + right: 0; + top: 0; + bottom: 0; + z-index: 1; + animation: move-background 70s linear infinite; } + @keyframes move-background { - from { - -webkit-transform: translate3d(0px, 0px, 0px); - } - to { - -webkit-transform: translate3d(1000px, 0px, 0px); - } + from { + -webkit-transform: translate3d(0px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(1000px, 0px, 0px); + } } + /*-------------------------------------------------------------- # Our Patrons --------------------------------------------------------------*/ @@ -129,11 +150,13 @@ font-size: 12vw; } } + @media(max-width: 768px) { .p-res { font-size: 10vw; } } + @media(max-width: 1200px) { .con { gap: 150px; @@ -143,6 +166,7 @@ width: 430px; } } + @media(max-width: 992px) { .con { gap: 70px; @@ -152,14 +176,17 @@ width: 370px; } } + @media(max-width: 768px) { .con { flex-direction: column; } + .con img { width: 400px; } } + /*-------------------------------------------------------------- # RESPONSIVE STYLES FOR STYLE 3 --------------------------------------------------------------*/ diff --git a/index.html b/index.html index 12276f7..fa43d19 100644 --- a/index.html +++ b/index.html @@ -34,7 +34,7 @@ - + @@ -67,7 +67,7 @@ - + FAQs - Major League Hacking 2025 Hackathon Season + Major League Hacking 2025 Hackathon Season @@ -151,7 +155,7 @@
- +
@@ -165,13 +169,15 @@

- SCHOOL REGISTRATION

JOIN OUR + class="btn btn-secondary me-2 join_com white" style="background-color: black;">JOIN + OUR COMMUNITY

@@ -246,7 +252,8 @@

Welcome, Innovators and Change-Makers!

+ colors="primary:#ffffff,secondary:#ffffff" + style="width:70px;height:70px">

300+ Hackers

@@ -255,7 +262,8 @@

Welcome, Innovators and Change-Makers!

+ colors="primary:#ffffff,secondary:#ffffff" + style="width:70px;height:70px">

60+ Projects

@@ -263,8 +271,9 @@

Welcome, Innovators and Change-Makers!

- +

8 Prizes

@@ -272,8 +281,9 @@

Welcome, Innovators and Change-Makers!

- +

Prize Pool - ₹ 19 Lakhs
@@ -314,12 +324,10 @@

GLIMPSE

- Avatar + Avatar
- Avatar + Avatar
@@ -328,12 +336,10 @@

GLIMPSE

- Avatar + Avatar
- Avatar + Avatar
@@ -342,12 +348,10 @@

GLIMPSE

- Avatar + Avatar
- Avatar + Avatar
@@ -358,12 +362,10 @@

GLIMPSE

- Avatar + Avatar
- Avatar + Avatar
@@ -372,12 +374,10 @@

GLIMPSE

- Avatar + Avatar
- Avatar + Avatar
@@ -388,12 +388,10 @@

GLIMPSE

- Avatar + Avatar
- Avatar + Avatar
@@ -402,12 +400,10 @@

GLIMPSE

- Avatar + Avatar
- Avatar + Avatar
@@ -416,12 +412,10 @@

GLIMPSE

- Avatar + Avatar
- Avatar + Avatar
@@ -432,12 +426,10 @@

GLIMPSE

- Avatar + Avatar
- Avatar + Avatar
@@ -446,12 +438,10 @@

GLIMPSE

- Avatar + Avatar
- Avatar + Avatar
@@ -462,12 +452,10 @@

GLIMPSE

- Avatar + Avatar
- Avatar + Avatar
@@ -476,12 +464,10 @@

GLIMPSE

- Avatar + Avatar
- Avatar + Avatar
@@ -490,12 +476,10 @@

GLIMPSE

- Avatar + Avatar
- Avatar + Avatar
@@ -768,7 +752,8 @@

- First Prize Winner + First Prize Winner

Winner

@@ -781,7 +766,8 @@

Winner

- Second Prize Winner + Second Prize Winner

First Runner Up

@@ -790,7 +776,8 @@

First Runner Up

- Third Prize Winner + Third Prize Winner

Second Runner Up

@@ -803,7 +790,8 @@

Second Runner Up

- School Prize Winner + School Prize Winner

High School Prize

@@ -877,14 +865,14 @@

-
+
- Aptos + Aptos
@@ -895,14 +883,14 @@

Aptos

-
+
- Polygon + Polygon
@@ -919,8 +907,7 @@

Polygon

- ETH India + ETH India
@@ -973,7 +960,7 @@

 
-
+
S
@@ -1003,20 +990,24 @@

- +

Abhilash Chakkan

Enterprise Architect / Consulting Engineer
Unisys

@@ -1024,13 +1015,14 @@

Abhilash Chakkan

Judge
- +

Yogesh Eganandam

AI/ML Solutions Engineer

@@ -1038,13 +1030,14 @@

Yogesh Eganandam

Judge
- +

Kumaravel N

Technology Consultant

@@ -1052,13 +1045,14 @@

Kumaravel N

Judge
- +

Magesh Rajamani

Senior Solution Architect
IBM Expert Labs

@@ -1066,13 +1060,14 @@

Magesh Rajamani

Judge
- +

Santhosh Chaluvadi

Founder & CEO
Supraja Technologies

@@ -1080,28 +1075,33 @@

Santhosh Chaluvadi

Judge
- +

Mike Odnis

Farmingdale State University
New York

Workshop Speaker
- +

Ayush Kurlekar

Software Engineer
OneMagnify

@@ -1109,13 +1109,14 @@

Ayush Kurlekar

Workshop Speaker
- +

Veerasolaiyappan V

Senior Software Developer
TEKsystems

@@ -1123,13 +1124,14 @@

Veerasolaiyappan V

Workshop Speaker
- +

Nikhil Kumaran S

Co-Founder
Chennai React

@@ -1137,13 +1139,14 @@

Nikhil Kumaran S

Workshop Speaker
- +

Smruthi Balaji

Shiv Nadar University
Chennai

@@ -1151,13 +1154,14 @@

Smruthi Balaji

GitHub Campus Expert
- +

Bhawna Chauhan

Hansraj College
Delhi

@@ -1165,7 +1169,8 @@

Bhawna Chauhan

GitHub Campus Expert
@@ -1192,302 +1197,340 @@

Anil Gupta

- -
-
-
-
-
-
-

WORKSHOPS

-

-
W
-
O
-
R
-
K
-
S
-
H
-
O
-
P
-
S
-

-
- -
-
- - - - - - - + +
+
+
+
+
+
+

WORKSHOPS

+

+
+
W
+
+
+
O
+
+
+
R
+
+
+
K
+
+
+
S
+
+
+
H
+
+
+
O
+
+
+
P
+
+
+
S
+
+

-
- -
-
-
-
- -
-
- - - 16.12.2024 - - - - 6.30 - 8.30 PM - -
-
- - - -
-
-
- - -
-
-
- - -
- +
+ @@ -1568,14 +1611,11 @@

GOLD SPONSORS

DEVFOLIO LOGO + src="assets/sponsors/4_lqjtfq.png" alt="DEVFOLIO LOGO" /> POLYGON LOGO + src="assets/sponsors/6_cic6mb.png" alt="POLYGON LOGO" /> APTOS LOGO + src="assets/sponsors/44_rgsqli.png" alt="APTOS LOGO" />

@@ -1584,21 +1624,17 @@

SILVER SPONSORS

Silver Sponsor + src="assets/sponsors/35_isudye.png" alt="Silver Sponsor" /> ETHINDIA LOGO + src="assets/sponsors/37_q1zwzr.png" alt="ETHINDIA LOGO" /> LOFT LABS LOGO + src="assets/sponsors/loftlabs.png" alt="LOFT LABS LOGO" />

HACKATHON PARTNER

Hackathon_Partner + src="img/MLH_Logo.png" alt="Hackathon_Partner" />

BRONZE SPONSORS

@@ -1606,92 +1642,68 @@

@@ -1706,45 +1718,53 @@

- +

MEDIA PARTNER

- MEDIA PARTNER + MEDIA PARTNER
@@ -2155,7 +2214,8 @@

WANT TO PARTNER WITH US?

Be part of the transformation and make a lasting impact by partnering PEC HACKS, a premier hackathon event that brings together - talented individuals to innovate and create groundbreaking solutions.

As a partner, you'll + talented individuals to innovate and create groundbreaking solutions.

As a partner, + you'll gain valuable visibility among a highly engaged audience, connect with top tech talent, and position your brand as a leader in the @@ -2222,9 +2282,7 @@

-
Dr D Anuradha +
Dr D Anuradha

Dr D Anuradha

@@ -2233,11 +2291,12 @@

Dr D Anuradha

  • - +
  • - +
@@ -2259,10 +2318,12 @@

Laaveshwaran P

  • - +
  • - +
  • @@ -2286,10 +2347,12 @@

    Aswin A S

  • - +
  • - +
  • @@ -2301,9 +2364,7 @@

    Aswin A S

    -
    Harrish M +
    Harrish M

    Harrish M

    @@ -2315,10 +2376,12 @@

    Harrish M

  • - +
  • - +
  • @@ -2327,9 +2390,7 @@

    Harrish M

  • -
    Noyal Surya J J +
    Noyal Surya J J

    Noyal Surya J J

    @@ -2341,10 +2402,12 @@

    Noyal Surya J J

  • - +
  • - +
  • @@ -2354,9 +2417,7 @@

    Noyal Surya J J

    -
    Ajay Raj +
    Ajay Raj

    Ajay Raj

    @@ -2368,10 +2429,12 @@

    Ajay Raj

  • - +
  • - +
  • @@ -2380,9 +2443,7 @@

    Ajay Raj

  • -
    Dilip V +
    Dilip V

    Dilip V

    @@ -2394,10 +2455,12 @@

    Dilip V

  • - +
  • - +
  • @@ -2406,9 +2469,7 @@

    Dilip V

  • -
    Aakash M +
    Aakash M

    Aakash M

    @@ -2424,8 +2485,8 @@

    Aakash M

    class="fa fa-linkedin">
  • - +
  • @@ -2434,9 +2495,7 @@

    Aakash M

  • -
    Alen Rex T +
    Alen Rex T

    Alen Rex T

    @@ -2462,9 +2521,7 @@

    Alen Rex T

    -
    Archana G +
    Archana G

    Archana G

    @@ -2490,9 +2547,7 @@

    Archana G

    -
    Bharanivelan J +
    Bharanivelan J

    Bharanivelan J

    @@ -2508,19 +2563,18 @@

    Bharanivelan J

    class="fa fa-linkedin">
  • - +
  • - +
  • -
    Inba M +
    Inba M

    Inba M

    @@ -2546,9 +2600,7 @@

    Inba M

    -
    Keshni B +
    Keshni B

    Keshni B

    @@ -2564,8 +2616,8 @@

    Keshni B

    class="fa fa-linkedin">
  • - +
  • @@ -2574,9 +2626,7 @@

    Keshni B

  • -
    Praveen M +
    Praveen M

    Praveen M

    @@ -2596,15 +2646,14 @@

    Praveen M

    class="fa fa-instagram">
  • - +
  • -
    Sarath Kumaran P +
    Sarath Kumaran P

    Sarath Kumaran P

    @@ -2613,14 +2662,16 @@

    Sarath Kumaran P

    • - +
    • - +
    @@ -2641,7 +2692,8 @@

    Sarath Kumaran P

    -
    +

    Email Us

    @@ -2649,7 +2701,8 @@

    Email Us

    -
    +

    Call Us

    @@ -2818,16 +2871,19 @@

    FREQUENTLY ASKED QUESTIONS

    @@ -2850,7 +2906,8 @@