From e23578d041eac1f8aab3a79849a124eaa99cfe70 Mon Sep 17 00:00:00 2001 From: Adarsh Kumar <54439573+Adarshkumar03@users.noreply.github.com> Date: Thu, 28 Sep 2023 19:47:01 +0530 Subject: [PATCH 1/9] Add spider-web.svg --- src/assets/images/spider-web.svg | 125 +++++++++++++++++++++++++++++++ 1 file changed, 125 insertions(+) create mode 100644 src/assets/images/spider-web.svg diff --git a/src/assets/images/spider-web.svg b/src/assets/images/spider-web.svg new file mode 100644 index 0000000..078903e --- /dev/null +++ b/src/assets/images/spider-web.svg @@ -0,0 +1,125 @@ + + + + + + + \ No newline at end of file From 86490f0f94381b0bb5fe81200a4d2d5050abb086 Mon Sep 17 00:00:00 2001 From: Adarsh Kumar <54439573+Adarshkumar03@users.noreply.github.com> Date: Thu, 28 Sep 2023 19:48:28 +0530 Subject: [PATCH 2/9] Update EventCard.css --- src/components/eventCard/EventCard.css | 64 ++++++++++++++++++++++---- 1 file changed, 55 insertions(+), 9 deletions(-) diff --git a/src/components/eventCard/EventCard.css b/src/components/eventCard/EventCard.css index b2c1eb8..cc9963a 100644 --- a/src/components/eventCard/EventCard.css +++ b/src/components/eventCard/EventCard.css @@ -1,3 +1,7 @@ +:root{ + --purple:#AF0FDD; +} + .codeutsava__section3-events-container .slider .slick-list { margin: 0 2rem; box-sizing: initial; @@ -23,7 +27,7 @@ .slick-list .slick-slide.slick-active.slick-current + .slick-slide { - transition: all 1000ms ease-out; + transition: all 2000ms ease-out; scale: 1.1; transform: translateY(50px); } @@ -36,26 +40,67 @@ padding-bottom: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; - color: white; + color: black; + border-radius: 15px 15px 15px 15px; + background-color: white; } -.codeutsava__section3-image { +.codeutsava__section3-decor-web{ + width:110px; + height:auto; + position: absolute; + +} + +.one{ + left:340px; + top:-40px; +} + +.two{ + left:-50px; + top:-40px; +} + +.codeutsava__section3-decor-web img{ + height: auto; + width:110px; + color:white; cursor: pointer; +} + +.codeutsava__section3-image { + cursor: pointer !important; width: 100%; + height:80%; transition: all 0.2s ease-in-out; + border-top-left-radius:14px; + border-top-right-radius:14px; + border-bottom: 6px solid var(--purple); } .codeutsava__section3-image:hover { - transform: scale(1.02); + transform: scale(2.02); transition: all 0.2s ease-in-out; - cursor: pointer; + cursor:pointer !important; +} + +.codeutsava__section3-content{ + background-color: white; + border-radius: calc(40 * 1px); + display: flex; + flex-direction: column; + justify-items: center; + align-items: center; } .codeutsava__section3-cardTitle { - font-weight: 600; + font-weight: 700; + font-size: x-large; margin-top: 1rem; display: flex; align-items: center; + text-align: center; } .codeutsava__section3-divider { @@ -63,10 +108,11 @@ margin-top: 0.5rem; font-weight: lighter; - width: 100%; + width: 85%; } -.codeutsava__section3-details { +.codeutsava__section3-date { margin: 1rem 0; - color: rgb(220, 220, 220); + font-weight: 400; + color:var(--purple); } From d4c2d09055755c158ac63740f3270f3595324beb Mon Sep 17 00:00:00 2001 From: Adarsh Kumar <54439573+Adarshkumar03@users.noreply.github.com> Date: Thu, 28 Sep 2023 19:49:32 +0530 Subject: [PATCH 3/9] Update EventCard.js --- src/components/eventCard/EventCard.js | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/components/eventCard/EventCard.js b/src/components/eventCard/EventCard.js index 2acd648..003bc97 100644 --- a/src/components/eventCard/EventCard.js +++ b/src/components/eventCard/EventCard.js @@ -1,17 +1,18 @@ import React from "react"; - import "./EventCard.css"; - +import spiderWeb from "../../assets/images/spider-web.svg"; const EventCard = ({ img, title, date, link }) => { return (
- - - -
{title}
-
-
{date}
- +
spiderweb
+ + + +
+
{title}
+
+
{date}
+
); }; From 5f740a5695812886ab649bf6cda44a80f6a6d62a Mon Sep 17 00:00:00 2001 From: Adarsh Kumar <54439573+Adarshkumar03@users.noreply.github.com> Date: Fri, 29 Sep 2023 19:39:22 +0530 Subject: [PATCH 4/9] Update EventCard.js --- src/components/eventCard/EventCard.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/eventCard/EventCard.js b/src/components/eventCard/EventCard.js index 003bc97..dbec795 100644 --- a/src/components/eventCard/EventCard.js +++ b/src/components/eventCard/EventCard.js @@ -4,14 +4,13 @@ import spiderWeb from "../../assets/images/spider-web.svg"; const EventCard = ({ img, title, date, link }) => { return (
-
spiderweb
- - - +
spiderweb
+
{title}
{date}
+ Register Now!!
); From ce208d7a223c756bf9512796acdb3371c34857a3 Mon Sep 17 00:00:00 2001 From: Adarsh Kumar <54439573+Adarshkumar03@users.noreply.github.com> Date: Fri, 29 Sep 2023 19:40:00 +0530 Subject: [PATCH 5/9] Update EventCard.css --- src/components/eventCard/EventCard.css | 91 +++++++++++++++----------- 1 file changed, 51 insertions(+), 40 deletions(-) diff --git a/src/components/eventCard/EventCard.css b/src/components/eventCard/EventCard.css index cc9963a..a725708 100644 --- a/src/components/eventCard/EventCard.css +++ b/src/components/eventCard/EventCard.css @@ -2,37 +2,6 @@ --purple:#AF0FDD; } -.codeutsava__section3-events-container .slider .slick-list { - margin: 0 2rem; - box-sizing: initial; - padding: 80px 0px; - overflow-y: visible; - } - - .slick-prev:before, - .slick-next:before { - display:none; - } - - .codeutsava__section3-events-container .slider .slick-arrow .slick-prev button{ - display: none; - } - .codeutsava__section3-events-container .slider .slick-list .slick-slide > div { - padding: 0 35px; - } - - @media (min-width: 1024px) { - .codeutsava__section3-events-container - .slider - .slick-list - .slick-slide.slick-active.slick-current - + .slick-slide { - transition: all 2000ms ease-out; - scale: 1.1; - transform: translateY(50px); - } - } - .codeutsava__section3-card { position: relative; display: flex; @@ -49,17 +18,25 @@ width:110px; height:auto; position: absolute; - + right:0; + top:-40px; } -.one{ - left:340px; - top:-40px; -} +@media screen and (max-width: 850px) { + .codeutsava__section3-decor-web { + width: 50px; + height: 50px; + position: absolute; + top: -30px; + left:210px; + z-index:2; + } + } + -.two{ - left:-50px; - top:-40px; + +.one{ + } .codeutsava__section3-decor-web img{ @@ -72,7 +49,7 @@ .codeutsava__section3-image { cursor: pointer !important; width: 100%; - height:80%; + height:50%; transition: all 0.2s ease-in-out; border-top-left-radius:14px; border-top-right-radius:14px; @@ -116,3 +93,37 @@ font-weight: 400; color:var(--purple); } + +.codeutsava__section3-link { + background-color: var(--purple); + border: 1px solid var(--purple); + border-radius: 4px; + box-shadow: rgba(0, 0, 0, .1) 0 2px 4px 0; + box-sizing: border-box; + color: #fff; + cursor: pointer; + font-family: inherit; + font-size: 16px; + font-weight: 400; + outline: none; + outline: 0; + padding: 10px 25px; + text-align: center; + transform: translateY(0); + transition: transform 150ms, box-shadow 150ms; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + margin-bottom: 0.5em; +} + +.codeutsava__section3-link:hover { + box-shadow: rgba(0, 0, 0, .15) 0 3px 9px 0; + transform: translateY(-2px); +} + +@media (min-width: 768px) { + .codeutsava__section3-link { + padding: 10px 30px; + } +} From 350e4b38e5319cb78af133758854385f4aaeb28f Mon Sep 17 00:00:00 2001 From: Harsh Pastor Date: Sat, 30 Sep 2023 00:26:20 +0530 Subject: [PATCH 6/9] Music button tooltip --- src/components/introAudio/IntroAudio.css | 36 +++++ src/components/introAudio/IntroAudio.js | 131 ++++++++++++++++++ src/pages/home/HomePage.css | 7 + src/pages/home/HomePage.js | 3 +- src/pages/home/sections/section1/Section1.css | 13 +- src/pages/home/sections/section1/Section1.js | 120 +--------------- 6 files changed, 178 insertions(+), 132 deletions(-) create mode 100644 src/components/introAudio/IntroAudio.css create mode 100644 src/components/introAudio/IntroAudio.js diff --git a/src/components/introAudio/IntroAudio.css b/src/components/introAudio/IntroAudio.css new file mode 100644 index 0000000..99e5ee2 --- /dev/null +++ b/src/components/introAudio/IntroAudio.css @@ -0,0 +1,36 @@ +.codeutsava__section1-intro-audio-div{ + margin-top: 10px; +} + + + + .button.codeutsava__section1-intro-audio-btn { + /* background-color: rgb(244, 117, 21); */ + border-radius: 4px; + padding: 2px; + padding-top:4px ; + border: none; + outline: none; + cursor: pointer; + /* background-image: url(../../assets/images/web.png); */ + + } + button.codeutsava__section1-intro-audio-btn1{ + background-color: rgb(244, 117, 21); + /* border-radius: 4px; */ + padding: 2px; + padding-top:4px ; + border: none; + outline: none; + cursor: pointer; + height: 35px; + width: 35px; + border-radius: 50%; + + } + + button.codeutsava__section1-intro-audio-btn:hover{ + background-color: var(--primary-c); + + + } \ No newline at end of file diff --git a/src/components/introAudio/IntroAudio.js b/src/components/introAudio/IntroAudio.js new file mode 100644 index 0000000..e025c06 --- /dev/null +++ b/src/components/introAudio/IntroAudio.js @@ -0,0 +1,131 @@ +import React, {useEffect, useRef, useState } from "react"; +import intro_music from "../../assets/audio/intro-music.mp3"; +import "./IntroAudio.css"; + +const IntroAudio = () => { + + // Intro-Music-Logic + const [notPlaying, setnotPlaying] = useState(true); + const [scrollisPlaying, setscrollisPlaying] = useState(null); + const audioRef = React.createRef(); + //This part inside useEffect is only to test that music playing upon scrolling part. + const scrollThreshold = 100; + useEffect(() => { + // Function to handle the scroll event + const handleScroll = () => { + //threshold here defines how many pixels you will scroll when the music starts to play + + if (window.scrollY >= scrollThreshold && !scrollisPlaying) { + audioRef.current.play(); + setscrollisPlaying(true); + setnotPlaying(false); //To change the icon + } + }; + window.addEventListener("scroll", handleScroll); + return () => { + window.removeEventListener("scroll", handleScroll); + }; + }, [scrollisPlaying]); + + const toggle = () => { + if (notPlaying) { + audioRef.current.play(); + } else { + audioRef.current.pause(); + } + setscrollisPlaying(false); + setnotPlaying(!notPlaying); + }; + + return ( +
+ +
+ +
+
+ ) +} + +export default IntroAudio \ No newline at end of file diff --git a/src/pages/home/HomePage.css b/src/pages/home/HomePage.css index b2988a5..a774245 100644 --- a/src/pages/home/HomePage.css +++ b/src/pages/home/HomePage.css @@ -11,4 +11,11 @@ margin-top: 10rem; overflow-x: hidden; } +.intro_audio_new_design{ + position: fixed; + bottom:1.5rem; + z-index: 475; + left:2.75rem; +} + diff --git a/src/pages/home/HomePage.js b/src/pages/home/HomePage.js index 4cb6e7a..a8cd5cb 100644 --- a/src/pages/home/HomePage.js +++ b/src/pages/home/HomePage.js @@ -3,6 +3,7 @@ import Navbar from "../../components/navbar/Navbar"; import "./HomePage.css"; import "../../App.css"; import InfiniteCarousel from "../../components/infiniteCarousel/InfiniteCarousel"; +import IntroAudio from "../../components/introAudio/IntroAudio"; import Section1 from "./sections/section1/Section1"; import Section2 from "./sections/section2/Section2"; import Section3 from "./sections/section3/Section3"; @@ -19,7 +20,6 @@ import Section11 from "./sections/section11/Section11"; import Section12 from "./sections/section12/Section12"; import Section13 from "./sections/section13/Section13"; import Section14 from "./sections/section14/Section14"; - import Section16 from "./sections/section16/Section16"; @@ -51,6 +51,7 @@ const HomePage = () => { +
diff --git a/src/pages/home/sections/section1/Section1.css b/src/pages/home/sections/section1/Section1.css index e408830..243e22a 100644 --- a/src/pages/home/sections/section1/Section1.css +++ b/src/pages/home/sections/section1/Section1.css @@ -165,18 +165,7 @@ margin-right: auto; margin-bottom: 12px; } -.codeutsava__section1-intro-audio-div{ - margin-top: 10px; -} -button.codeutsava__section1-intro-audio-btn { - background-color: rgb(244, 117, 21); - border-radius: 4px; - padding: 2px; - padding-top:4px ; - border: none; - outline: none; - cursor: pointer -} + .codeutsava__section1-side-links li button:hover { list-style: none; outline: none; diff --git a/src/pages/home/sections/section1/Section1.js b/src/pages/home/sections/section1/Section1.js index 3ef7a0e..699decf 100644 --- a/src/pages/home/sections/section1/Section1.js +++ b/src/pages/home/sections/section1/Section1.js @@ -18,38 +18,6 @@ import register from "../../../../assets/images/register.pdf"; const Section1 = () => { const c1 = "#7f00a6"; const c2 = "#b200ee"; - // Intro-Music-Logic - const [notPlaying, setnotPlaying] = useState(true); - const [scrollisPlaying, setscrollisPlaying] = useState(null); - const audioRef = React.createRef(); - //This part inside useEffect is only to test that music playing upon scrolling part. - const scrollThreshold = 100; - useEffect(() => { - // Function to handle the scroll event - const handleScroll = () => { - //threshold here defines how many pixels you will scroll when the music starts to play - - if (window.scrollY >= scrollThreshold && !scrollisPlaying) { - audioRef.current.play(); - setscrollisPlaying(true); - setnotPlaying(false); //To change the icon - } - }; - window.addEventListener("scroll", handleScroll); - return () => { - window.removeEventListener("scroll", handleScroll); - }; - }, [scrollisPlaying]); - - const toggle = () => { - if (notPlaying) { - audioRef.current.play(); - } else { - audioRef.current.pause(); - } - setscrollisPlaying(false); - setnotPlaying(!notPlaying); - }; // React.useEffect(() => { // const script = document.createElement("script"); // script.src = "https://apply.devfolio.co/v2/sdk.js"; @@ -322,93 +290,7 @@ const Section1 = () => { {/* ############## Audio section of list ####################################*/} -
  • - -
    - -
    -
    • + Date: Sat, 30 Sep 2023 01:27:32 +0530 Subject: [PATCH 7/9] pumpkin added music button sticky --- src/assets/images/Pumpkin2.svg | 280 +++++++++++++++++++++++ src/components/introAudio/IntroAudio.css | 35 ++- src/components/introAudio/IntroAudio.js | 19 +- src/pages/home/HomePage.css | 4 +- 4 files changed, 309 insertions(+), 29 deletions(-) create mode 100644 src/assets/images/Pumpkin2.svg diff --git a/src/assets/images/Pumpkin2.svg b/src/assets/images/Pumpkin2.svg new file mode 100644 index 0000000..02d7ac4 --- /dev/null +++ b/src/assets/images/Pumpkin2.svg @@ -0,0 +1,280 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/introAudio/IntroAudio.css b/src/components/introAudio/IntroAudio.css index 99e5ee2..90b8043 100644 --- a/src/components/introAudio/IntroAudio.css +++ b/src/components/introAudio/IntroAudio.css @@ -1,10 +1,4 @@ -.codeutsava__section1-intro-audio-div{ - margin-top: 10px; -} - - - - .button.codeutsava__section1-intro-audio-btn { + .button.codeutsava__introAudio-intro-audio-btn { /* background-color: rgb(244, 117, 21); */ border-radius: 4px; padding: 2px; @@ -12,25 +6,30 @@ border: none; outline: none; cursor: pointer; - /* background-image: url(../../assets/images/web.png); */ } - button.codeutsava__section1-intro-audio-btn1{ + button.codeutsava__introAudio-intro-audio-btn1{ background-color: rgb(244, 117, 21); - /* border-radius: 4px; */ + background-color: transparent; + background-image: url("../../assets/images/Pumpkin2.svg"); + background-repeat: no-repeat; + background-size: contain; padding: 2px; padding-top:4px ; border: none; outline: none; cursor: pointer; - height: 35px; - width: 35px; - border-radius: 50%; + height: 60px; + width:55px; + /* border-radius: 50%; */ } + .codeutsava__introAudio-intro-audio-btn1{ + height: 40px; + width:40px; + } + button.codeutsava__introAudio-intro-audio-btn1:hover{ + opacity: 70%; + } - button.codeutsava__section1-intro-audio-btn:hover{ - background-color: var(--primary-c); - - - } \ No newline at end of file + \ No newline at end of file diff --git a/src/components/introAudio/IntroAudio.js b/src/components/introAudio/IntroAudio.js index e025c06..6bb60da 100644 --- a/src/components/introAudio/IntroAudio.js +++ b/src/components/introAudio/IntroAudio.js @@ -38,26 +38,27 @@ const IntroAudio = () => { }; return ( -
    +
    + -
    +
    -
    +
    ) } diff --git a/src/pages/home/HomePage.css b/src/pages/home/HomePage.css index a774245..d38c296 100644 --- a/src/pages/home/HomePage.css +++ b/src/pages/home/HomePage.css @@ -13,9 +13,9 @@ } .intro_audio_new_design{ position: fixed; - bottom:1.5rem; + bottom:0.75rem; z-index: 475; - left:2.75rem; + left:2.2rem; } From c08fd4586e6241fe37f14de075e6f9a97484647d Mon Sep 17 00:00:00 2001 From: Harsh Pastor Date: Sat, 30 Sep 2023 01:55:46 +0530 Subject: [PATCH 8/9] pumpkin color changed to logo color --- src/assets/images/Pumpkin2.svg | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/assets/images/Pumpkin2.svg b/src/assets/images/Pumpkin2.svg index 02d7ac4..a7a4a5c 100644 --- a/src/assets/images/Pumpkin2.svg +++ b/src/assets/images/Pumpkin2.svg @@ -3,7 +3,7 @@ - - - - - - - - - @@ -220,15 +220,15 @@ c4.582,0.056,9.169-0.257,13.595-1.316c4.12,1.351,8.32,2.35,12.592,2.654c7.943,0.565,15.84-1.084,23.376-3.804 c5.221-1.883,10.746-3.599,15.94-5.919c8.211-0.057,16.301-1.999,24.014-6.053c10.543-5.544,19.077-14.882,24.755-26.103 c6.538-4.751,11.122-13.811,13.513-21.354C267.068,167.72,267.608,154.909,265.976,142.289z"/> - - - - { - // Intro-Music-Logic +const IntroAudio = () => { const [notPlaying, setnotPlaying] = useState(true); - const [scrollisPlaying, setscrollisPlaying] = useState(null); const audioRef = React.createRef(); - //This part inside useEffect is only to test that music playing upon scrolling part. - const scrollThreshold = 100; - useEffect(() => { - // Function to handle the scroll event - const handleScroll = () => { - //threshold here defines how many pixels you will scroll when the music starts to play - - if (window.scrollY >= scrollThreshold && !scrollisPlaying) { - audioRef.current.play(); - setscrollisPlaying(true); - setnotPlaying(false); //To change the icon - } - }; - window.addEventListener("scroll", handleScroll); - return () => { - window.removeEventListener("scroll", handleScroll); - }; - }, [scrollisPlaying]); const toggle = () => { if (notPlaying) { @@ -33,100 +12,98 @@ const IntroAudio = () => { } else { audioRef.current.pause(); } - setscrollisPlaying(false); setnotPlaying(!notPlaying); }; return (
    - - -
    - -
    + /> + + + )} + +
    - ) -} + ); +}; -export default IntroAudio \ No newline at end of file +export default IntroAudio; diff --git a/src/motionUtils.js b/src/motionUtils.js index c1582ca..41f6835 100644 --- a/src/motionUtils.js +++ b/src/motionUtils.js @@ -26,6 +26,7 @@ export const sliderSettings = { slidesToShow: 3, slidesToScroll: 1, initialSlide: 0, + lazyload: true, touchMove: true, useCSS: true, autoplay: true, diff --git a/src/pages/home/sections/section1/Section1.css b/src/pages/home/sections/section1/Section1.css index 1adc5ff..454e2c2 100644 --- a/src/pages/home/sections/section1/Section1.css +++ b/src/pages/home/sections/section1/Section1.css @@ -141,7 +141,7 @@ .codeutsava__section1-side-links { position: absolute; left: 48px; - bottom: 4rem; + bottom: 5rem; margin: 0; padding: 0; list-style: none; diff --git a/src/pages/home/sections/section1/Section1.js b/src/pages/home/sections/section1/Section1.js index 85055e6..c0482d5 100644 --- a/src/pages/home/sections/section1/Section1.js +++ b/src/pages/home/sections/section1/Section1.js @@ -3,7 +3,6 @@ import "./Section1.css"; import codeutsavaTitle from "../../../../assets/images/codeutsavaTitle3d.svg"; import discord from "../../../../assets/images/discord.svg"; import wel from "../../../../assets/images/welcome.png"; -import intro_music from "../../../../assets/audio/intro-music.mp3"; import { animate, motion, transform } from "framer-motion"; import { @@ -19,16 +18,16 @@ const Section1 = () => { const c1 = "#7f00a6"; const c2 = "#b200ee"; - // React.useEffect(() => { - // const script = document.createElement("script"); - // script.src = "https://apply.devfolio.co/v2/sdk.js"; - // script.async = true; - // script.defer = true; - // document.body.appendChild(script); - // return () => { - // document.body.removeChild(script); - // }; - // }, []); + React.useEffect(() => { + const script = document.createElement("script"); + script.src = "https://apply.devfolio.co/v2/sdk.js"; + script.async = true; + script.defer = true; + document.body.appendChild(script); + return () => { + document.body.removeChild(script); + }; + }, []); const canvasRef = useRef(null); useEffect(() => {