-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #42 from ComputerSocietyVITC/ayush
Fixed the Footer and ImageAccordion/HAccord
- Loading branch information
Showing
8 changed files
with
162 additions
and
208 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,77 +1,42 @@ | ||
| import React, { useState } from "react"; | ||
| import "./style_h.css"; | ||
| const items = [ | ||
| { | ||
| header: "ABOUT US", | ||
| header2: "ABOUT US", | ||
| content: "IEEE Computer Society VIT Chennai is a zealous community of diverse minds striving to Learn, Create (sometimes Break!), Develop, and Explore. Here we combine an infectious desire to grow together, and a stubborn persistence to keep going, with a healthy ambition for the next audacious challenge. Come join us on this journey!", | ||
|
|
||
| }, | ||
|
|
||
| { | ||
| header: "OUR VISION", | ||
| header2: "OUR VISION", | ||
| content: "At IEEE Computer Society VITC, our belief is grounded in the principles of mutual learning and growth. We believe in empowering the community to innovate, develop, create, and to empower itself, which for us is, the greatest Return on Investment for a Technical Society. With a transcendent passion for Tech, and a solemn cognizance of people's struggles, we aspire to solve the great problems of today, and prepare together for a brighter tomorrow.", | ||
|
|
||
|
|
||
| }, | ||
|
|
||
| { | ||
| header: "NEWSLETTER", | ||
| header2: "NEWSLETTER", | ||
| content: " Want to stay updated with the latest news about IEEE CS VITC? Enter you email address and allow notifications.", | ||
| }, | ||
| { | ||
| header: "CONTACT", | ||
| header2: "CONTACT", | ||
| content: "", | ||
| }, | ||
| ]; | ||
|
|
||
|
|
||
|
|
||
| function HAccord() { | ||
| const HAccord = ({items}) => { | ||
| const [accord, setActiveAccord] = useState(-1); | ||
|
|
||
| const toggleAccordion = (index) => { | ||
| setActiveAccord(index); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="text-white h_accord_main flex flex-col items-center"> | ||
| {" "} | ||
| {/* */} | ||
| {items.map((item, index) => { | ||
| return ( | ||
| <div key={index} onClick={() => toggleAccordion(index)}> | ||
| <div className="flex justify-between max-[640px]:justify-between p-6 max-[640px]:p-3"> | ||
| <div className="h_accord_heading"> | ||
| <h3 className={accord === index ? "active" : ""}> | ||
| {item.header} | ||
| </h3> | ||
| </div> | ||
| <div> | ||
| {accord === index ? ( | ||
| <> | ||
| <span className="verticle">-</span> | ||
| </> | ||
| ) : ( | ||
| <> | ||
| <span className="verticle">+</span> | ||
| </> | ||
| )} | ||
| </div> | ||
| <div className="text-white h_accord_main flex flex-col items-center"> | ||
| {items.map((item, index) => { | ||
| return ( | ||
| <div key={index} onClick={() => toggleAccordion(index)}> | ||
| <div className="flex justify-between max-[640px]:justify-between p-6 max-[640px]:p-3"> | ||
| <div className="h_accord_heading"> | ||
| <h3 className={accord === index ? "active" : ""}> | ||
| {item.header} | ||
| </h3> | ||
| </div> | ||
| <div> | ||
| <p className={accord === index ? "active" : "inactive"}> | ||
| {item.content3} | ||
| </p> | ||
| {accord === index ? ( | ||
| <span className="verticle">-</span> | ||
| ) : ( | ||
| <span className="verticle">+</span> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
| })} | ||
| </div> | ||
| </> | ||
| <div> | ||
| <p className={accord === index ? "active" : "inactive"}> | ||
| {item.content} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| ); | ||
| })} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default HAccord; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,46 +1,47 @@ | ||
| .h_accord_main .inactive { | ||
| display:none; | ||
| display: none; | ||
| } | ||
|
|
||
| .h_accord_main >div { | ||
| background-image: linear-gradient(to bottom, #061b24 2%, #072031, #000b11 91%); | ||
| border: 2px solid #319795; | ||
| margin-bottom:20px; | ||
| padding:0px 20px; | ||
| border-radius:15px; | ||
| cursor:pointer; | ||
| width:80%; | ||
|
|
||
| margin-bottom: 20px; | ||
| padding: 0px 20px; | ||
| border-radius: 16px; | ||
| cursor: pointer; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .h_accord_heading { | ||
| display:flex; | ||
| justify-content:space-between; | ||
| align-items:center; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .h_accord_heading .active { | ||
| color:#05FFF0; | ||
| color: #05FFF0; | ||
| } | ||
|
|
||
| .h_accord_heading h3 { | ||
| color:rgb(20 184 166 / var(--tw-border-opacity)); | ||
| font-weight:600; | ||
| font-size:larger; | ||
| color: rgb(20 184 166 / var(--tw-border-opacity)); | ||
| font-weight: 600; | ||
| font-size: larger; | ||
| } | ||
|
|
||
| .h_accord_main p { | ||
| margin:2px; | ||
| padding: 20px; | ||
| text-align:center; | ||
| color:#05FFF0; | ||
| line-height:1.4; | ||
|
|
||
| } | ||
|
|
||
| @media screen and (max-width:640px) { | ||
| .h_accord_main >div { | ||
| background-image: linear-gradient(to bottom, #061b24 2%, #072031, #000b11 91%); | ||
| border: 2px solid #319795; | ||
| margin-bottom:20px; | ||
| padding:0px 5px; | ||
| border-radius:15px; | ||
| cursor:pointer; | ||
| min-width:250px; | ||
| .h_accord_main >div { | ||
| background-image: linear-gradient(to bottom, #061b24 2%, #072031, #000b11 91%); | ||
| border: 2px solid #319795; | ||
| margin-bottom:20px; | ||
| padding:0px 5px; | ||
| border-radius:15=6px; | ||
| cursor:pointer; | ||
| min-width:250px; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,81 @@ | ||
| import socialMediaLinks from "./socialMediaLinks"; | ||
|
|
||
| const items = [ | ||
| { | ||
| header: "About Us", | ||
| content3: | ||
| "IEEE Computer Society VIT Chennai is a zealous community of diverse minds striving to Learn, Create (sometimes Break!), Develop, and Explore. Here we combine an infectious desire to grow together, and a stubborn persistence to keep going, with a healthy ambition for the next audacious challenge. Come join us on this journey!", | ||
| header: "ABOUT US", | ||
| content: ( | ||
| <div className="about-us-content"> | ||
| IEEE Computer Society VIT Chennai is a zealous community of diverse minds striving to Learn, Create (sometimes Break!), Develop, and Explore. Here we combine an infectious desire to grow together, and a stubborn persistence to keep going, with a healthy ambition for the next audacious challenge. Come join us on this journey! | ||
| </div> | ||
| ), | ||
| }, | ||
|
|
||
| { | ||
| header: "Our Vision", | ||
| content3: | ||
| "At IEEE Computer Society VITC, our belief is grounded in the principles of mutual learning and growth. We believe in empowering the community to innovate, develop, create, and to empower itself, which for us is, the greatest Return on Investment for a Technical Society. With a transcendent passion for Tech, and a solemn cognizance of people's struggles, we aspire to solve the great problems of today, and prepare together for a brighter tomorrow.", | ||
| header: "OUR VISION", | ||
| content: ( | ||
| <div className="our-vision-content"> | ||
| At IEEE Computer Society VITC, our belief is grounded in the principles of mutual learning and growth. We believe in empowering the community to innovate, develop, create, and to empower itself, which for us is, the greatest Return on Investment for a Technical Society. With a transcendent passion for Tech, and a solemn cognizance of people's struggles, we aspire to solve the great problems of today, and prepare together for a brighter tomorrow. | ||
| </div> | ||
| ), | ||
| }, | ||
|
|
||
| { | ||
| header: "Newsletter", | ||
| content3: | ||
| " Want to stay updated with the latest news about IEEE CS VITC? Enter you email address and allow notifications.", | ||
| header: "NEWSLETTER", | ||
| content: ( | ||
| <div className="newsletter-content text-center"> | ||
| Want to stay updated with the latest news about IEEE CS VITC? Enter your email address and allow notifications. | ||
| <input | ||
| type="email" | ||
| className="border-2 border-teal-300/[0.8] bg-gradient-to-r from-[#123838] to-[#0C2B38] rounded-lg mt-12 mb-3 text-md px-2 py-1 w-full text-center " | ||
| /> | ||
| <button className="hover:scale-110 duration-200 transition border-2 border-cyan-100/[0.6] bg-gradient-to-r from-[#123838] to-[#0C2B38] rounded-2xl my-4 text-xl px-4 p-2 text-center text-blue-100/[0.8]"> | ||
| Subscribe | ||
| </button> | ||
| </div> | ||
| ), | ||
| }, | ||
| { | ||
| header: "Contact", | ||
| content3: "", | ||
| header: "CONTACT", | ||
| content: ( | ||
| <div className="contact-content"> | ||
| <div className="flex flex-col"> | ||
| <div className="text-lg sm:self-center md:self-center lg:text-base text-blue-200 inline-block mb-3 font-bold"> | ||
| </div> | ||
| <a | ||
| href="mailto:[email protected]" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| className="my-3 block text-white hover:text-white/[0.8] text-base lg:text-lg lg:text-left hover:scale-125 transition duration-200" | ||
| > | ||
| [email protected] | ||
| </a> | ||
| </div> | ||
| <div className="my-4 w-full flex flex-col justify-center lg:order-4"> | ||
| <div className="text-lg lg:text-base lg:text-center text-blue-200 inline-block mb-3 md:self-center sm:self-center font-bold"> | ||
| Social Media | ||
| </div> | ||
| <div className="grid grid-cols-4 place-items-center"> | ||
| {socialMediaLinks.map((link, index) => ( | ||
| <div | ||
| key={index} | ||
| className="hover:scale-150 transition duration-200" | ||
| > | ||
| <a | ||
| href={link.url} | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| > | ||
| <img | ||
| src={link.icon} | ||
| alt={link.platform} | ||
| className="h-7 my-5 " | ||
| /> | ||
| </a> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ), | ||
| }, | ||
| ]; | ||
|
|
||
|
|
||
Oops, something went wrong.