-
Notifications
You must be signed in to change notification settings - Fork 11
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 #37 from A1Kumari/master
Footer
- Loading branch information
Showing
20 changed files
with
435 additions
and
280 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
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,100 +1,63 @@ | ||
| @import url('https://fonts.googleapis.com/css2?family=Tektur:wght@500&display=swap'); | ||
|
|
||
| @import url("https://fonts.googleapis.com/css?family=Sacramento&display=swap"); | ||
|
|
||
| @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap'); | ||
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap'); | ||
| .RuleHead{ | ||
| font-size: 80px; | ||
| color: antiquewhite; | ||
| font-family: 'Tektur', cursive; | ||
| text-decoration: underline ; | ||
| /* box-shadow: 2px 2px 2px 1px rgba(198, 33, 33, 0.441); */ | ||
|
|
||
| font-size: calc(20px + 18vh); | ||
| line-height: calc(20px + 20vh); | ||
| text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000; | ||
| color: #fff6a9; | ||
| font-family: "Sacramento", cursive; | ||
| text-align: center; | ||
| animation: blink 12s infinite; | ||
| -webkit-animation: blink 12s infinite; | ||
| } | ||
|
|
||
| @-webkit-keyframes blink { | ||
|
|
||
| 20%, | ||
| 24%, | ||
| 55% { | ||
| color: #111; | ||
| text-shadow: none; | ||
| } | ||
|
|
||
| 0%, | ||
| 19%, | ||
| 21%, | ||
| 23%, | ||
| 25%, | ||
| 54%, | ||
| 56%, | ||
| 100% { | ||
| /* color: #fccaff; | ||
| text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff, | ||
| 0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092; */ | ||
| text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000; | ||
| color: #fff6a9; | ||
| } | ||
| } | ||
|
|
||
| @keyframes blink { | ||
|
|
||
| 20%, | ||
| 24%, | ||
| 55% { | ||
| color: #111; | ||
| text-shadow: none; | ||
| } | ||
|
|
||
| 0%, | ||
| 19%, | ||
| 21%, | ||
| 23%, | ||
| 25%, | ||
| 54%, | ||
| 56%, | ||
| 100% { | ||
| text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000; | ||
| color: #fff6a9; | ||
| } | ||
| } | ||
| .faltudiv { | ||
| height: 50px; | ||
| background-color: rgb(0, 0, 0); | ||
| } | ||
| .RulePoints ,.RulePoints2{ | ||
| font-size: 30px; | ||
| /* color: rgb(188, 185, 236); | ||
| font-family: 'Roboto Slab', serif; | ||
| text-shadow:0 0 5px #6718e7 , 0 0 2px #6a34d7 , 0 0 15px #9595e7; */ | ||
| /* color: rgb(155, 233, 178); */ | ||
| color: rgb(255, 255, 255); | ||
| /* font-family: 'Roboto Slab', serif; */ | ||
| font-family: 'Playfair Display', serif; | ||
| text-shadow: 0 0 10px #cf6767; | ||
| /* text-shadow: 0 0 5px #000000, 0 0 2px #000000, 0 0 18px #25d622; */ | ||
| } | ||
| .ruleclass{ | ||
| background-color: black; | ||
| } | ||
| @media screen and (max-width:440px) { | ||
| .RuleHead{ | ||
| font-size: 40px; | ||
| } | ||
| .RulePoints{ | ||
| font-size: 15px; | ||
| } | ||
| .RulePoints2{ | ||
| font-size: 15px; | ||
| } | ||
|
|
||
| } | ||
| /* Color Theme */ | ||
| :root { | ||
| --primary-color: #6B5B95; /* Dark Purple */ | ||
| --secondary-color: #222222; /* Dark Gray */ | ||
| --accent-color: #6C63FF; /* Vibrant Blue */ | ||
| --background-color: #000; /* Light Gray */ | ||
| } | ||
|
|
||
| /* FAQ Section */ | ||
| .faq-section { | ||
| background-color: var(--background-color); | ||
| padding: 40px; | ||
| } | ||
|
|
||
| .heading { | ||
| text-align: center; | ||
| margin-bottom: 20px; | ||
| color: var(--primary-color); | ||
| } | ||
|
|
||
| .faq-container { | ||
| max-width: 800px; | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
| .faq-item { | ||
| border: 1px solid var(--secondary-color); | ||
| border-radius: 4px; | ||
| padding: 20px; | ||
| margin-bottom: 10px; | ||
| cursor: pointer; | ||
| background-color: #222; /* Default background color for items */ | ||
| transition: background-color 0.3s ease; /* Smooth transition on hover */ | ||
| } | ||
|
|
||
| .faq-item.active { | ||
| background-color: var(--primary-color); /* Active item background color */ | ||
| border-color: var(--primary-color); /* Active item border color */ | ||
| } | ||
|
|
||
| .question { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| color: #fff; | ||
| } | ||
|
|
||
| .arrow-icon { | ||
| font-size: 20px; | ||
| color: var(--primary-color); /* Arrow icon color */ | ||
| } | ||
|
|
||
| .answer { | ||
| display: none; | ||
| margin-top: 10px; | ||
| color: var(--primary-color); /* Answer text color */ | ||
| } | ||
|
|
||
| .faq-item.active .answer { | ||
| display: block; | ||
| color: #fff; /* Answer text color for active item */ | ||
| } | ||
|
|
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,11 +1,82 @@ | ||
| import React from "react"; | ||
| import { Container } from "react-bootstrap"; | ||
| import Row from "react-bootstrap/Row"; | ||
| import Col from "react-bootstrap/Col"; | ||
| import React, { useState } from "react"; | ||
| import "./Ask.css"; | ||
| export default function Ask() { | ||
|
|
||
| const faqData = [ | ||
| { | ||
| question: "What is a Hackathon", | ||
| answer: `Hackathons are community events, where you get to interact with students from all around the world as well as forming teams to create future tech.`, | ||
| }, | ||
| { | ||
| question: "I have no idea what coding is", | ||
| answer: "Thats why you must attend our event, we will guide you through everything with awesome workshops,tech talk and many more", | ||
| }, | ||
| { | ||
| question: "Do I need to pay any money ", | ||
| answer: "Absolutely not ! our event is free and open for all , if incase anyone asks for money you can dm any of our moderator.", | ||
| }, | ||
| { | ||
| question: "What are the conduct of guidlines ", | ||
| answer: "We strongly follow the DEVFOLIO code of conduct, Our team members will enforce this code throughout the event.", | ||
| }, | ||
| { | ||
| question: "Is it necessary to form the team of 4 students", | ||
| answer: "No the team can range from 2 to 4 members.", | ||
| }, | ||
| { | ||
| question: "How to participate", | ||
| answer: "All you need is to fill our form above and we will guide you through everything in email.", | ||
| }, | ||
| { | ||
| question: "I have more doubts", | ||
| answer: "Reach us directly at ([email protected]) we would happy to help you.", | ||
| }, | ||
| { | ||
| question: "Is the registration open to all colleges", | ||
| answer: "Yes, it's open to all engineering/ polytechnic/ science colleges.", | ||
| }, | ||
| { | ||
| question: "Can the team member be from the different college", | ||
| answer: "Yes, all members can be from different colleges, departments and years.", | ||
| }, | ||
|
|
||
| // Add more FAQ items here | ||
| ]; | ||
|
|
||
| const Ask = () => { | ||
| const [activeIndex, setActiveIndex] = useState(null); | ||
|
|
||
| const toggleAccordion = (index) => { | ||
| if (activeIndex === index) { | ||
| setActiveIndex(null); | ||
| } else { | ||
| setActiveIndex(index); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| </> | ||
| <section className="faq-section"> | ||
| <div className="heading"><h2>Frequently Asked Questions</h2></div> | ||
|
|
||
| <div className="faq-container"> | ||
| {faqData.map((item, index) => ( | ||
| <div | ||
| key={index} | ||
| className={`faq-item ${activeIndex === index ? "active" : ""}`} | ||
| > | ||
| <div className="question" onClick={() => toggleAccordion(index)}> | ||
| {item.question} | ||
| <div className="arrow-icon"> | ||
| <span>▼</span> | ||
| </div> | ||
| </div> | ||
| {activeIndex === index && ( | ||
| <div className="answer">{item.answer}</div> | ||
| )} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </section> | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| export default Ask; |
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
Oops, something went wrong.