Merge pull request #82 from A1Kumari/master

heading
CodechefAdgitm · Aug 20, 2023 · 4940bf1 · 4940bf1
2 parents 7fc5a8c + 0499de4
commit 4940bf1
Show file tree

Hide file tree

Showing 17 changed files with 194 additions and 129 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -4,6 +4,7 @@ import Blob from "./components/blob/blob";
 import Navbar from "./components/navbar/Navbar";
 import Hero from "./components/hero/Hero";
 import About from "./components/about/About";
+import Event from "./components/about/Events"
 import Themes from "./components/themes/Themes";
 import Rules from "./components/participation_rules/Rules";
 import Prize from "./components/prize_section/Prize";
@@ -19,6 +20,7 @@ function App() {
       <Navbar/>
       <Hero />
       <About />
+      <Event/>
       <Themes />
       <Rules />
       <Prize />

diff --git a/src/assets/images/Codechef ADGITM.jpg → src/assets/images/Codechef_ADGITM.jpg b/src/assets/images/Codechef ADGITM.jpg → src/assets/images/Codechef_ADGITM.jpg
diff --git a/src/components/about/About.css b/src/components/about/About.css
@@ -1,4 +1,53 @@
 /* About.css */
+.head {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  text-align: center;
+  margin-top: 150px; /* Adjust as needed */
+  margin-bottom: 20px !important;
+}
+
+.distortedshape {
+  width: 120px;
+  height: 120px;
+  background-color: #728F83;
+  border-radius: 60px 20px;
+  margin-top: 10px;
+ margin-left: 170px;
+  bottom: -20px;
+  right: -20px;
+  transform: skewX(-20deg);
+  z-index: 1;
+}
+
+.mainheading {
+  font-size: 66px;
+  color: #000;
+  font-weight: 900;
+  letter-spacing: 0.1rem;
+  margin: 0;
+  padding: 0;
+  z-index: 2;
+  margin-top: -120px;
+}
+
+.subheading {
+  font-size: 21px;
+  color: #000;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  z-index: 2;
+}
+
+.subheading::before {
+  content: "-";
+  font-weight: bold;
+  margin-right: 5px;
+}
+
 
 /* Apply the color theme */
 .lightbluebackground {
@@ -17,17 +66,7 @@
   color: #0c94fe; /* Vivid Blue */
 }
 
-.subheading {
-  background-color: #ffecfa;
-  padding: 5px;
-  font-size: 3rem;
-  font-weight: 400;
-  border-radius: 10px;
-  color: #f175d0;
-  width: 14%;
-  margin: auto;
-  text-align: center;
-}
+
 .pink {
   background-color: #ffecfa;
   color: #f175d0;
@@ -52,47 +91,18 @@
   /* flex-wrap: wrap; Allow the flex items to wrap on smaller screens */
 
   color: #000;
-  letter-spacing: 2px;
+
   padding: 20px;
-  border-radius: 10px;
-  border: 1px solid;
-  border-color: rgb(213, 220, 226) rgb(213, 220, 226) rgb(184, 194, 204);
+
   transition: background-color 0.3s ease-in-out; /* Add smooth transition */
 
-  background-color: #fff; /* Default background color */
-  border-radius: 8px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  padding: 20px;
   text-align: center;
   cursor: pointer; /* Add cursor pointer on hover */
   transition: background-color 0.3s ease-in-out; /* Add smooth transition */
   position: relative; /* Add relative position for the strip effect */
 }
 
-.points-container-main:hover {
-  transform: translateY(-5px); /* Apply hover effect */
-  background-color: #f3f3f3; /* Change background color on hover */
-  transform: perspective(450em) rotateX(18deg);
-  box-shadow: rgba(22, 31, 39, 0.42) 0px 60px 123px -25px,
-    rgba(19, 26, 32, 0.08) 0px 35px 75px -35px;
-  transition: transform 0.3s ease; 
-}
 
-.points-container-main::before {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 5px;
-  background-color: #b3defe; /* Pink color */
-  z-index: -1;
-  transition: height 0.3s ease-in-out; /* Add smooth transition */
-}
-
-.points-container-main:hover::before {
-  height: 100%; /* Extend the strip on hover */
-}
 
 .points-container-main p {
   font-size: 18px;

diff --git a/src/components/about/About.jsx b/src/components/about/About.jsx
@@ -2,21 +2,44 @@ import React from "react";
 import aboutSvg from "../../assets/images/about.svg";
 import CClogo from "../../assets/images/codechef-logo.jpg";
 import Elixerlogo from "../../assets/images/Elixer.png";
+import cclogo from "../../assets/images/Codechef_ADGITM.jpg";
+import Livethecode from "../../assets/images/LOGOFINAL.png";
 import "./About.css";
 import "../../App.css";
 
 export default function About() {
   return (
     <section className="lightbluebackground" id="about">
+      <div className="head">
+        <div className="distortedshape"></div>
+      <h1 className="mainheading">About</h1>
+      <h3 className="subheading">know more about us</h3>
+      </div>
+
       <div data-aos="fade-up">
-        <h3 className="subheading pink">Codechef</h3>
         <div id="wrapper" className="participation-rules">
-
+        
           <div className="points-container-main">
-            <div>
-              <img src={CClogo} alt="About Us" className="abtimg" />
-            </div>
+            {/* <div>
+              <img src={cclogo} alt="About Us" className="abtimg" />
+            </div> */}
+            <ul>
+              <h3 className="subheading purple">Codechef</h3>
+              <p>
+                Elixir aces as an unparalleled community consisting of the
+                greatest minds of our college. It has people ranging from tech
+                domains to non-tech sectors, all of whom are competent in their
+                respective areas and strive together to make Elixir an
+                astounding entity. With the perfect space to learn, collaborate,
+                and explore, you are bound to experience many "Hello World"
+                moments here. With our aim to provide our students an
+                environment that fosters self-growth, we are proud to call
+                ourselves a community FOR THE STUDENTS, BY THE STUDENTS, AND OF
+                THE STUDENTS.
+              </p>
+            </ul>
             <ul>
+            <h3 className="subheading pink">Elixir</h3>
               <p>
                 We, CodeChef ADGITM chapter is a close-knit community of
                 diligent coders who come together and share best practices, new
@@ -35,30 +58,7 @@ export default function About() {
         </div>
       </div>
 
-      <div data-aos="fade-up">
-        <h3 className="subheading purple">Elixir</h3>
-        <div id="wrapper" className="participation-rules">
-          <div className="points-container-main">
-            <ul>
-              <p className="effect">
-                Elixir aces as an unparalleled community consisting of the
-                greatest minds of our college. It has people ranging from tech
-                domains to non-tech sectors, all of whom are competent in their
-                respective areas and strive together to make Elixir an
-                astounding entity. With the perfect space to learn, collaborate,
-                and explore, you are bound to experience many "Hello World"
-                moments here. With our aim to provide our students an
-                environment that fosters self-growth, we are proud to call
-                ourselves a community FOR THE STUDENTS, BY THE STUDENTS, AND OF
-                THE STUDENTS.
-              </p>
-            </ul>
-            <div>
-              <img src={Elixerlogo} alt="About Us" className="abtimg" />
-            </div>
-          </div>
-        </div>
-      </div>
+
     </section>
   );
 }
diff --git a/src/components/about/Event.css b/src/components/about/Event.css
@@ -1,6 +1,6 @@
 /* -------------Events--------------------- */
 .events {
-  background: #a682ff;
+  background: #f8f8f8;
   /* height: 100%; */
   padding-top: 2rem;
   padding-bottom: 40px;
@@ -136,7 +136,7 @@
 /* Apply the color theme */
 .themes {
   padding: 2vw 0;
-  background: linear-gradient(135deg, #a682ff 0%, #5887ff 100%); /* Gradient background */
+  background: linear-gradient(135deg, #2AA1FE 0%, #5887ff 100%); /* Gradient background */
 }
 
 /* Rest of the .themes styles... */

diff --git a/src/components/about/Events.jsx b/src/components/about/Events.jsx
@@ -14,7 +14,11 @@ export default function Events() {
   return (
     <>
       <div className="events">
-        <h1>Event timline</h1>
+      <div className="head">
+        <div className="distortedshape"></div>
+      <h1 className="mainheading">Timeline</h1>
+      <h3 className="subheading">Mark the Dates to set yourself on fire</h3>
+      </div>
         <div className="timeline">
           <div className="container-event left-container">
 

diff --git a/src/components/ask/Ask.css b/src/components/ask/Ask.css
@@ -1,5 +1,5 @@
 :root {
-  --primary-color: #a682ff; /* Vibrant Purple */
+  --primary-color: #2AA1FE; /* Vibrant Purple */
   --secondary-color: #00000; /* Black */
   --accent-color: #13293d; /* Dark Blue */
   --background-color: #f8f8f8; /* Light Gray */

diff --git a/src/components/contact/Contact.jsx b/src/components/contact/Contact.jsx
@@ -12,8 +12,13 @@ export default function Contact() {
       <div className="footer-content">
         <div className="footer-left">
           <h3>Contact Us</h3>
-          <p>Email: codechef.adgitm@adgitmdelhi.ac.in <br/>codechefadgitmchapter@gmail.com</p>
-          <p>Phone:  Ansh Saxena - +91 73557 43158 <br/>Tanisha Bansal - +91 92131 16476 <br/>Mansi Sharma - +91 99539 30377</p>
+          <p>Email: <br/> Codechef <br/> codechef.adgitm@adgitmdelhi.ac.in <br/> codechefadgitmchapter@gmail.com <br/> Elixir <br/>techcommunityelixir@gmail.com </p>
+
+        </div>
+        <div className="footer-middle">
+          <h3>Contact Us</h3>
+
+          <p>Phone: <br/> Codechef <br/>Mansi Sharma - +91 99539 30377  <br/> Tanisha Bansal - +91 92131 16476 <br/> Elixir <br/>  Ansh Saxena - +91 73557 43158 <br/></p>
         </div>
         <div className="footer-right">
           <h3>Follow Us</h3>

diff --git a/src/components/hero/Hero.jsx b/src/components/hero/Hero.jsx
@@ -32,9 +32,6 @@ export default function Hero() {
                 style={{ height: "44px", width: "312px" }}
               ></div>
             </div>
-            <a href="#about" class="learn-more-btn">
-              Learn More
-            </a>
           </div>
         </div>
       </div>

diff --git a/src/components/navbar/Navbar.jsx b/src/components/navbar/Navbar.jsx
@@ -6,9 +6,19 @@ import menu from "../../assets/images/menu.png";
 
 export default function Navbar() {
   const [showMenu, setShowMenu] = useState(false);
+  const [colorChange, setColorchange] = useState(false);
+    const changeNavbarColor = () => {
+        if (window.scrollY >= 80) {
+            setColorchange(true);
+        }
+        else {
+            setColorchange(false);
+        }
+    };
+    window.addEventListener('scroll', changeNavbarColor);
   return (
-    <div className="navbar-body">
-      <nav className="navbar">
+    <div className={colorChange ? 'navbar_body colorChange' : 'navbar_body'}>
+      <nav className="navbar" >
         <div className="desktopMenu">
           <Link to="home" smooth={true} offset={-100} spy={true} duration={500} className="desktopMenuListItem">
             Home