diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..155422b --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5503 +} \ No newline at end of file diff --git a/Assets/moon.png b/Assets/moon.png new file mode 100644 index 0000000..c39c90d Binary files /dev/null and b/Assets/moon.png differ diff --git a/Assets/sun.png b/Assets/sun.png new file mode 100644 index 0000000..9ad0caa Binary files /dev/null and b/Assets/sun.png differ diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md deleted file mode 100644 index 3882a8e..0000000 --- a/CODE_OF_CONDUCT.md +++ /dev/null @@ -1,60 +0,0 @@ -# OpenTekHub - Blockchain Project Code of Conduct - -## Welcome - -Welcome to the Blockchain repository by OpenTekHub! This project aims to provide an open-source platform for learning and contributing to blockchain technology. We are committed to maintaining a positive, inclusive, and harassment-free environment for everyone involved. - -## Our Pledge - -We as members, contributors, and leaders pledge to make participation in our project and community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation. - -We pledge to act in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community. - -## Our Standards - -Examples of behavior that contributes to a positive environment include: - -- Demonstrating empathy and kindness toward others -- Being respectful of differing opinions, viewpoints, and experiences -- Gracefully accepting constructive feedback -- Apologizing when mistakes are made, and learning from the experience -- Focusing on what is best for the community - -Unacceptable behavior includes: - -- The use of sexualized language or imagery and unwelcome sexual attention -- Trolling, insulting/derogatory comments, and personal or political attacks -- Harassment in any form, including public or private harassment -- Publishing others’ private information without explicit permission -- Any other conduct which would reasonably be considered inappropriate in a professional setting - -## Project Specifics - -This repository focuses on building and implementing cryptocurrency features like **Cryptocurrency Price Prediction**. We encourage contributions that enhance the project and make it an educational platform for blockchain enthusiasts worldwide. - -## Enforcement Responsibilities - -Community leaders are responsible for clarifying and enforcing standards of acceptable behavior and will take appropriate corrective action in response to any unacceptable behavior. - -Leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned with this Code of Conduct. They may also take action to address anything they deem inappropriate. - -## Scope - -This Code of Conduct applies to all spaces managed by OpenTekHub, including GitHub repositories, communication channels, and public spaces where individuals represent the community. - -## Reporting Violations - -Instances of abusive, harassing, or unacceptable behavior may be reported by contacting the community leaders at **peddinaharish2003@gmail.com**. All complaints will be reviewed and addressed promptly and fairly. - -## Enforcement Guidelines - -Community leaders will follow these guidelines to determine the consequences for violations of this Code of Conduct: - -1. **Correction**: A private warning about the violation with clarity on why the behavior was inappropriate. -2. **Warning**: A warning and temporary restrictions from interacting with the community. -3. **Temporary Ban**: A temporary ban for serious violations. -4. **Permanent Ban**: A permanent ban for repeated or severe violations. - -## Attribution - -This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org), version 2.0, available [here](https://www.contributor-covenant.org/version/2/0/code_of_conduct.html). diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 718a117..0000000 --- a/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2024 OpenTekHub - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/README.md b/README.md deleted file mode 100644 index d16b899..0000000 --- a/README.md +++ /dev/null @@ -1,31 +0,0 @@ -### All the code is available at gh-pages branch - -# Blockchain - OpenTekHub - -Welcome to the **Blockchain** repository by [OpenTekHub](https://opentekhub.github.io/blockchain/)! This project is a part of the **Winter of Blockchain** ([WoB](https://gs-wob.vercel.app/wob)) and aims to provide an open-source platform for learning and contributing to blockchain technology. - -You can explore the project live at [OpenTekHub Blockchain](https://opentekhub.github.io/blockchain/). - -## About the Project - -This repository focuses on building and implementing cryptocurrency features like price prediction. We encourage blockchain enthusiasts to contribute to this open-source project, making it an educational platform for developers worldwide. - -### Key Features - -- **Cryptocurrency Price Prediction:** A feature that predicts the prices of the latest cryptocurrencies. - -### Contribution guidelines -- Switch to the gh-pages branch all the changes need to be done in the gh-pages branch -- Fork the repo of gh-pages branch -- And then clone the forked repo into ur system using the git clone command -- And then make the changes and then commit back the changes to your forked repo -- And then make a pull request addressing the issue -- We will make the commit based upon our requirments and the quality of your code or changes - - -## Getting Started - -- **Explore**: Take a look at our [live website](https://opentekhub.github.io/blockchain/) to get a feel for the project. -- **Check out the issues**: We frequently update the [Issues](https://github.com/OpenTekHub/blockchain/issues) section with bugs, features, and other contributions we need help with. -- **Contact us**: If you need assistance or have any questions, feel free to reach out by opening a new issue or emailing the maintainers. - diff --git a/index.html b/index.html new file mode 100644 index 0000000..b0ab0b1 --- /dev/null +++ b/index.html @@ -0,0 +1,181 @@ + + + + + + + OpenTekHub Blockchain Repo + + + + + + + + + + +
+

Explore the Blockchain implementation and predict the latest cryptocurrency prices.

+ +
+

Crypto Price Predictor

+
+ + +
+ + +
+
+

Predicted Price:

+

+
+
+ +

Track prices with our Telegram bot

+

Telegram logo@TrackCryptoPriceBot

+
+
+
+ + +
+

About Us

+
+ +
+ + +
+ +

+ Empowering Blockchain Innovations Through Technology +

+
+

+ At OpenTekHub, we are passionate about leveraging blockchain technology to create innovative + solutions that empower industries and individuals. Our Blockchain repository is part of the + Winter of Blockchain (WoB) initiative, designed to provide an open-source platform for + learning and collaboration within the blockchain community. With a focus on developing + cryptocurrency features like price prediction, we aim to create a comprehensive educational + resource for developers and blockchain enthusiasts alike. Join us on our journey to explore, + contribute, and innovate in the realm of blockchain technology. +

+
+
+ + +
+
+
+ 01 +

Cryptocurrency Price Prediction

+

Utilize advanced algorithms to predict cryptocurrency prices, enabling informed investment decisions.

+
+ +
+ 02 +

Telegram Bot Integration

+

Engage users with a Telegram bot that provides real-time updates on cryptocurrency prices and project developments.

+
+ +
+ 03 +

Open-source Collaboration

+

Join our open-source platform to collaborate on blockchain projects, sharing knowledge and contributing to innovations.

+
+ +
+ 04 +

Educational Resources

+

Access comprehensive educational materials and tutorials to enhance your understanding of blockchain technology.

+
+
+
+ + + +
+
+

Frequently Asked Questions

+
+ +

+ Explore commonly asked questions about OpenTekHub and discover how we support technology innovations. +

+ +
+ + + + + + + + + + + + + + + + + +
+
+ +
+ +

About the Repository

+

This repository demonstrates blockchain prices using api and javascript.

+ BlockChain Repository +
+ + + + + diff --git a/public/Telegram.png b/public/Telegram.png new file mode 100644 index 0000000..d03a551 Binary files /dev/null and b/public/Telegram.png differ diff --git a/public/about-bgvideo.mp4 b/public/about-bgvideo.mp4 new file mode 100644 index 0000000..570700a Binary files /dev/null and b/public/about-bgvideo.mp4 differ diff --git a/public/github.png b/public/github.png new file mode 100644 index 0000000..b3902e3 Binary files /dev/null and b/public/github.png differ diff --git a/script.js b/script.js new file mode 100644 index 0000000..4fa8c7c --- /dev/null +++ b/script.js @@ -0,0 +1,296 @@ +// Dark Mode Toggle Functionality +const themeSwitch = document.getElementById('theme-switch'); // Ensure this matches your HTML button's ID +const body = document.body; +const header = document.querySelector('header'); +const footer = document.querySelector('footer'); + +// Function to enable dark mode +function enableDarkMode() { + body.classList.add('dark-mode'); + header.classList.add('dark-mode'); + themeSwitch.classList.add('dark-theme'); // Update the switch appearance + footer.classList.add('dark-mode'); +} + +// Function to disable dark mode +function disableDarkMode() { + body.classList.remove('dark-mode'); + header.classList.remove('dark-mode'); + themeSwitch.classList.remove('dark-theme'); // Update the switch appearance + footer.classList.remove('dark-mode'); +} + +// Event listener for dark mode toggle button +themeSwitch.addEventListener('click', () => { + if (body.classList.contains('dark-mode')) { + disableDarkMode(); // Switch to light mode + localStorage.removeItem('dark-mode'); // Remove from local storage + } else { + enableDarkMode(); // Switch to dark mode + localStorage.setItem('dark-mode', 'enabled'); // Save in local storage + } +}); + +// Optional: Check the initial mode on page load and apply the correct theme based on local storage +if (localStorage.getItem('dark-mode') === 'enabled') { + enableDarkMode(); +} else { + disableDarkMode(); // Default to light mode on load if localStorage is empty +} + +// navbar hamburger +function toggleMenu() { + const menu = document.querySelector('.menu-items'); + const hamburger = document.querySelector('.hamburger-lines'); + menu.classList.toggle('menu-active'); + hamburger.classList.toggle('hamburger-active'); +} + +// A map of symbols to their corresponding API names +const cryptoMap = { + // Major cryptocurrencies + 'BTC': 'bitcoin', + 'ETH': 'ethereum', + 'USDT': 'tether', + 'BNB': 'binancecoin', + 'USDC': 'usd-coin', + 'XRP': 'ripple', + 'DOGE': 'dogecoin', + 'ADA': 'cardano', + 'SOL': 'solana', + 'DOT': 'polkadot', + 'MATIC': 'matic-network', + 'SHIB': 'shiba-inu', + 'LTC': 'litecoin', + 'TRX': 'tron', + 'AVAX': 'avalanche-2', + 'ATOM': 'cosmos', + 'LINK': 'chainlink', + 'XMR': 'monero', + 'BCH': 'bitcoin-cash', + 'ALGO': 'algorand', + 'ICP': 'internet-computer', + 'VET': 'vechain', + 'FIL': 'filecoin', + 'NEAR': 'near', + 'HBAR': 'hedera-hashgraph', + 'TON': 'toncoin', + 'SUI':'sui', + 'OP': 'optimism', + 'INJ': 'injective', + 'ARB': 'arbitrum', + + // Stablecoins + 'DAI': 'dai', + 'BUSD': 'binance-usd', + 'PAX': 'paxos-standard', + + // DeFi tokens + 'UNI': 'uniswap', + 'AAVE': 'aave', + 'SUSHI': 'sushi', + 'COMP': 'compound-governance-token', + 'YFI': 'yearn-finance', + + // Layer 2 solutions and scaling + 'LRC': 'loopring', + 'ZRX': '0x', + 'OMG': 'omisego', + + // NFT and metaverse tokens + 'MANA': 'decentraland', + 'SAND': 'the-sandbox', + 'ENJ': 'enjincoin', + 'AXS': 'axie-infinity', + 'GALA': 'gala', + + // Privacy coins + 'ZEC': 'zcash', + 'DASH': 'dash', + + // Other popular tokens + 'FTM': 'fantom', + 'GRT': 'the-graph', + '1INCH': '1inch', + 'CHZ': 'chiliz', + 'BAT': 'basic-attention-token', + 'CRV': 'curve-dao-token', + 'KSM': 'kusama', + 'QTUM': 'qtum', + 'ZIL': 'zilliqa', + 'EGLD': 'elrond-erd-2', + 'HOT': 'holotoken', + 'THETA': 'theta-token', + 'HNT': 'helium', + 'SNX': 'synthetix-network-token', + 'RUNE': 'thorchain', + 'XLM': 'stellar', + 'REN': 'ren', + 'FTT': 'ftx-token', + 'RVN': 'ravencoin', + 'KAVA': 'kava', + 'CRO': 'crypto-com-chain', + 'MIOTA': 'iota', + 'ETC': 'ethereum-classic', + + // Meme coins + 'BABYDOGE': 'baby-doge-coin', + 'SAFEMOON': 'safemoon', + 'ELON': 'dogelon-mars', + 'PEPE': 'memetic', + 'WIF': 'dogwithat', + 'BONK': 'bonk', + 'FLOKI': 'floki', + + // Add more symbols and tokens as needed + 'WETH': 'wrapped-ethereum', + 'MKR': 'maker', + 'BAL': 'balancer', + 'WLD': 'worldcoin', + 'OM': 'mantra-dao', + 'PHB': 'phoenix', + 'LISTA': 'lista', + 'RENDER': 'render', +}; + +const cryptoInput = document.getElementById('crypto'); +const suggestionsBox = document.getElementById('crypto-suggestions'); + +cryptoInput.addEventListener('input', function() { + const inputValue = cryptoInput.value.toUpperCase(); + suggestionsBox.innerHTML = ''; + + const filteredCryptos = Object.keys(cryptoMap).filter(crypto => crypto.includes(inputValue)); + + if (inputValue && filteredCryptos.length > 0) { + suggestionsBox.style.display = 'block'; + filteredCryptos.forEach(crypto => { + const suggestionItem = document.createElement('div'); + suggestionItem.textContent = crypto; + suggestionItem.addEventListener('click', function() { + cryptoInput.value = crypto; + suggestionsBox.style.display = 'none'; + }); + suggestionsBox.appendChild(suggestionItem); + }); + } else { + suggestionsBox.style.display = 'none'; + } +}); + +document.addEventListener('click', function(event) { + if (!event.target.closest('#crypto-form')) { + suggestionsBox.style.display = 'none'; + } +}); + +document.getElementById('predict-btn').addEventListener('click', function() { + const cryptoInputValue = cryptoInput.value.toUpperCase(); + const crypto = cryptoMap[cryptoInputValue]; + + if (crypto) { + fetch(`https://api.coingecko.com/api/v3/simple/price?ids=${crypto}&vs_currencies=usd`) + .then(response => response.json()) + .then(data => { + if (data[crypto]) { + document.getElementById("price").innerText = "$" + data[crypto].usd; + } else { + document.getElementById("price").innerText = "Cryptocurrency not found!"; + } + }) + .catch(error => { + document.getElementById("price").innerText = "Error fetching price data."; + console.error("Error:", error); + }); + } else { + document.getElementById("price").innerText = "Please enter a valid cryptocurrency symbol."; + } +}); + +// GSAP Animations +document.addEventListener('DOMContentLoaded', () => { + // Timeline for header and intro text animations + let tl = gsap.timeline(); + + tl.from("header h1", { + y: -50, + opacity: 0, + duration: 1, + ease: "bounce.out" + }); + + tl.from(".tagline", { + x: -100, + opacity: 0, + duration: 1, + ease: "power3.out", + delay: 0.2 + }); + + // Crypto price predictor section + tl.from("#crypto-price-predictor h2", { + y: 50, + opacity: 0, + duration: 0.8, + ease: "back.out(1.7)", + delay: 0.3 + }); + + tl.from("#crypto-form", { + opacity: 0, + y: 50, + duration: 0.6, + ease: "power1.out" + }); + + tl.from("#predict-btn", { + scale: 0.5, + opacity: 0, + duration: 0.6, + ease: "back.out(1.5)", + delay: 0.2 + }); + + // Animate the price result after prediction + gsap.from("#price-result", { + opacity: 0, + duration: 1, + ease: "power2.inOut", + delay: 1.5 + }); + + // Telegram bot section animation + gsap.from("#telegram-bot", { + opacity: 0, + y: 100, + duration: 0.8, + ease: "power2.out", + delay: 1 + }); + + // Repo info section + gsap.from("#repo-info h2", { + opacity: 0, + x: -100, + duration: 0.8, + ease: "power3.out", + delay: 1.5 + }); + + gsap.from("#repo-info p", { + opacity: 0, + y: 30, + duration: 0.8, + ease: "power3.out", + delay: 1.7 + }); + + gsap.from("#repo-info a", { + opacity: 0, + scale: 0.8, + duration: 0.6, + ease: "elastic.out(1, 0.75)", + delay: 1.9 + }); +}); + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..6d01331 --- /dev/null +++ b/styles.css @@ -0,0 +1,727 @@ +body { + margin: 0; + padding: 0; + background: linear-gradient(135deg, #000000, #1a1a4b, black); /* Black, Dark Blue, Black*/ + color: white; + height: 100vh; + font-family: "Roboto", sans-serif; + font-weight: 400; + font-style: normal; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +img{ + width:5vw; +} + +#Telegram{ + position:relative; + top:1.9vw +} + +h1, h2, h3 { + margin: 0; +} + +#git{ + position:relative; + top:1.4vw; + max-width: 4vw; + min-width:2vw; +} + +.header { + text-align: center; + background: linear-gradient(135deg, #000000, #1a1a4b, black); /* Black, Dark Blue, , Black */ + color: white; + padding: 1.2rem; + font-family: "Roboto", sans-serif; + font-size: 1.8rem; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); +} + +.tagline { + text-align: center; + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 1.6rem; + color: #ffffff; + margin: 1rem auto; + max-width: 85%; +} + +.central { + display: flex; + flex-direction: column; + align-items: center; + margin: 1.2rem 1rem; + gap: 1rem; +} + +.central p{ + margin-top: 5rem; +} + +#crypto-price-predictor { + background: rgba(255, 255, 255, 0.1); + border-radius: 15px; + padding: 1.2rem; + font-size: 0.9rem; + text-align: center; + width: 95%; + max-width: 400px; + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); + margin-top: 5rem; + margin-bottom: 3rem; +} + +#crypto-price-predictor h2 { + margin-bottom: 0.6rem; + color: white; + font-family: "Roboto", sans-serif; + font-size: 1.3rem; +} + +#crypto { + display: block; + width: 100%; + max-width: 100%; /* Ensures it stays within the container */ + font-size: 1.1rem; + padding: 0.7rem; + border-radius: 10px; + border: none; + margin: 0.8rem 0; + background-color: #f0f0f0; + color: #000; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); + box-sizing: border-box; +} + +#predict-btn { + font-family: "Roboto", sans-serif; + border-radius: 19px; + color: white; + font-size: 1.1rem; + background: rgb(5, 11, 44); + padding: 0.6rem 1.8rem; + border: none; + cursor: pointer; + transition: background 0.3s ease; +} + +#predict-btn:hover { + background: #fbd786; +} + +#price-result { + margin-top: 1.2rem; +} + +#price { + margin-top: 0; + font-size: 1.5rem; + color: white; + font-weight: bold; +} + +#repo-info { + background-color: #fffefe10; + text-align: center; + padding: 1.5rem; + box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.2); + font-size: 1rem; +} + +#repo-info p { + margin: 0.5rem 0; + color: #FFF; +} + +#repo-info a { + color: white; + text-decoration: none; + font-weight: bold; + transition: color 0.3s ease; +} + +#repo-info a:hover { + color: #fbd786; +} + +#crypto-suggestions { + display: none; + position: absolute; + border: 1px solid #ccc; + border-radius: 5px; + background-color: #fff; + max-height: 150px; + overflow-y: auto; + width: 90%; + z-index: 1000; + left: 5%; + color: #000; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); +} + +#crypto-suggestions div { + padding: 10px; + cursor: pointer; +} + +#crypto-suggestions div:hover { + background-color: #f0f0f0; +} + +@media (min-width: 768px) { + .central { + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + } + + #crypto-price-predictor { + width: 45%; + } + + .tagline { + font-size: 2.5rem; + max-width: 70%; + } + + .header h1 { + font-size: 3rem; + } +} + +@media (max-width: 767px) { + #crypto-price-predictor { + width: 100%; + padding: 1.2rem; + } + + #crypto { + font-size: 1rem; + } + + #predict-btn { + font-size: 1rem; + padding: 0.5rem 1.2rem; + } + + .tagline { + font-size: 1rem; + max-width: 90%; + text-align: center; + margin: 0.8rem auto; + } + + .header h1 { + font-size: 1.4rem; + } + + #repo-info { + padding: 1rem; + font-size: 0.9rem; + } + + #repo-info h2{ + font-size: 1rem; + } + + #repo-info p { + font-size: 0.9rem; + margin: 0.5rem auto; + max-width: 90%; + } + + #repo-info a { + font-size: 1rem; + word-wrap: break-word; + } +} + +#telegram-bot { + align-items: center; + display: flex; + flex-direction: column; + gap: 0.25rem; +} + +.bot-link{ + text-decoration: none; + color: white; +} + +.bot-text{ + font-size: 1rem; + margin-block: 0px; +} + + +/* Here are the styles for the theme toggel */ +/* Theme switcher */ +.theme-switch { + display: inline-block; + width: 60px; + height: 30px; + border-radius: 30px; + background: linear-gradient(116deg, #ffffff, #a00101); + position: relative; + cursor: pointer; + transition: background 0.3s ease-in-out; + vertical-align: middle; +} + +.theme-switch::before { + content: ''; + position: absolute; + top: 3px; + left: 3px; /* Initial position for light mode */ + width: 24px; + height: 24px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + transition: left 0.3s ease-in-out, background-image 0.3s ease-in-out; + background-image: url('Assets/moon.png'); /* Icon for light mode */ +} + +.theme-switch.dark-theme { + background: linear-gradient(92deg, #ff0000, #ffffff); /* Background for dark mode */ +} + +.theme-switch.dark-theme::before { + left: 33px; /* Move the toggle to the right for dark mode */ + background-image: url('Assets/sun.png'); /* Icon for dark mode */ +} + +/* Other dark mode styles */ +.header.dark-mode { + background: linear-gradient(303deg, #000000, #500210); +} + +body.dark-mode{ + background: linear-gradient(303deg, #000000, #500210); + color: #ffecec; +} +p.tagline.dark-mode{ + color: #ffffff; +} + +/* About Section */ +#about { + position: relative; + overflow: clip; + background-color: rgba(255, 255, 255, 0.1); + padding: 10rem; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); +} + +.background-video { + position: absolute; + top: 50%; + left: 50%; + min-width: 100%; + min-height: 100%; + width: auto; + height: auto; + z-index: 1; + transform: translate(-50%, -50%); +} + +.overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 2; +} + +.tagline { + color: white; + position: relative; + z-index: 3; + font-size: 35px; + text-shadow: 0 0 20px #dec6ff; +} + +#about .content p { + font-size: 1.2rem; + line-height: 1.6; + color: #ffffff; + position: relative; + z-index: 3; + text-align: center; + text-shadow: + 0 0 10px rgba(255, 255, 255, 1), + 0 0 20px rgba(255, 255, 255, 0.8), + 0 0 30px rgba(255, 255, 255, 0.6), + 0 0 40px rgba(255, 255, 255, 0.4), + 0 0 50px rgba(0, 255, 255, 0.6); +} + +/* Why Us Section */ +.why-us { + background: linear-gradient(135deg, #000000, #1a1a4b, black); /* Black, Dark Blue, Black */ + padding: 2rem 1rem; + border-radius: 15px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); +} + +.row { + margin-top: 5px; + margin-bottom: 40px; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin: 0 -0.5; +} + +.card { + background: black; + border-radius: 10px; + padding: 1.5rem; + flex: 0 0 calc(50% - 1rem); + margin: 0.5rem; + color: #FFF; + transition: transform 0.3s ease; + display: block; + box-sizing: border-box; +} + +.card:hover { + background: rgba(28, 0, 46, 0.523); + transform: translateY(-5px); +} + +.card span{ + font-size: 30px; + font-weight: bold; +} + +.card h4 { + color: white; + font-family: "Fredoka", sans-serif; + font-size: 1.2rem; +} + +.card p { + font-size: 0.9rem; +} + +/* FAQ section */ +#faq .tagline{ + color: white; + text-shadow: + 0 0 10px rgb(0, 0, 0), + 0 0 20px rgba(0, 0, 0, 0.8); + font-size: 15px; +} + +.faq-heading { + font-weight: 400; + font-size: 20px; + transition: text-indent 0.2s; + text-indent: 20px; + color: white; +} + +.faq-text { + font-weight: 400; + color: white; + + width: 95%; + padding-left: 20px; + margin-bottom: 10px; +} + +.faq { + width: auto; + margin: 0 auto; + + background: linear-gradient(135deg, #000000, #1a1a4b, black); /* Black, Dark Blue, Black */ + position: relative; + border: 1px solid #2E073F; + padding-top: 60px; /* Adjust according to your navbar height */ + margin-top: -60px; /* Negative margin to balance the spacing */ +} + +.faq label { + display: block; + position: relative; + overflow: hidden; + cursor: pointer; + height: 56px; + padding-top:1px; + background: linear-gradient(135deg, #000000, #1a1a4b); /* Black, Dark Blue, Black */; + border-bottom: 1px solid #2E073F; + +} + +.faq input[type="checkbox"] { + display: none; +} + +.faq .faq-arrow { + width: 5px; + height: 5px; + transition: -webkit-transform 0.8s; + transition: transform 0.8s; + transition: transform 0.8s, -webkit-transform 0.8s; + transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); + border-top: 3px solid white; + border-right: 3px solid white; + float: right; + position: relative; + top: -30px; + right: 27px; + transform: rotate(45deg); +} + +.faq input[type="checkbox"]:checked + label > .faq-arrow { + transition: -webkit-transform 0.8s; + transition: transform 0.8s; + transition: transform 0.8s, -webkit-transform 0.8s; + transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); + transform: rotate(135deg); +} + +.faq input[type="checkbox"]:checked + label { + display: block; + background: black!important; + color: #4f7351; + height: 225px; + transition: height 0.8s; + transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +.faq input[type='checkbox']:not(:checked) + label { + display: block; + transition: height 0.8s; + height: 60px; + transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +.container { + max-width: 1200px; + width: 90%; + margin: auto; +} + +.navbar { + box-shadow: 0px 5px 10px 0px #aaa; + position: fixed; + width: 100%; + background: black; + color: white; + /* opacity: ; */ + z-index: 100; +} + +.navbar-container { + display: flex; + justify-content: space-between; + height: 64px; + align-items: center; +} + +.menu-items { + order: 2; + display: flex; +} + +.logo { + order: 1; + font-size: 2.0rem; +} + +.menu-items li { + list-style: none; + margin-left: 1.5rem; + font-size: 1.3rem; +} + +.navbar a { + color: white; + text-decoration: none; + font-weight: 700; + transition: color 0.3s ease-in-out; +} + +.navbar a:hover { + color: #f6ff00; +} + +/* Media Queries for Mobile View */ + +/* Medium devices (tablets, 768px and below) */ +@media (max-width: 768px) { + .navbar { + opacity: 0.95; + } + + .navbar-container { + display: block; + position: relative; + height: 64px; + } + + .menu-items { + padding-top: 100px; + background: #fff; + height: 100vh; + max-width: 300px; + transform: translate(-150%); + display: flex; + flex-direction: column; + margin-left: -40px; + padding-left: 40px; + transition: transform 0.5s ease-in-out; + box-shadow: 5px 0px 10px 0px #aaa; + overflow: scroll; + } + + .menu-items li { + margin-bottom: 1.8rem; + font-size: 1.1rem; + font-weight: 500; + } + + .logo { + position: absolute; + top: 10px; + right: 15px; + font-size: 2.5rem; + } + + .row { + flex-direction: column; + } + + .card { + flex: 1 1 100%; + } +} + +/* Small devices (phones, 500px and below) */ +@media (max-width: 500px) { + .logo { + font-size: 2.2rem; + } + + #about { + padding: 5rem 1rem; + } + + .tagline { + font-size: 24px; + } + + #about .content p { + font-size: 1rem; + } + + .card { + padding: 1rem; + flex: 1 1 100%; + } + + .menu-items { + padding-left: 20px; + } + + .faq-heading { + font-size: 16px; + } +} + + +@media (max-width: 768px) { + .navbar { + opacity: 0.95; + } + + .navbar-container { + display: block; + position: relative; + height: 50px; + } + + .hamburger-lines { + display: block; + height: 28px; + width: 35px; + position: absolute; + top: 10px; + left: 20px; + z-index: 2; + display: flex; + flex-direction: column; + justify-content: space-between; + cursor: pointer; + } + + .hamburger-lines .line { + display: block; + height: 4px; + width: 100%; + border-radius: 10px; + background: #EBD3F8; + } + + .menu-items { + padding-top: 100px; + background: #606060f0; + height: 100vh; + max-width: 300px; + transform: translate(-150%); + display: flex; + flex-direction: column; + margin-left: -40px; + padding-left: 40px; + transition: transform 0.5s ease-in-out; + box-shadow: 5px 0px 10px 0px #aaa; + overflow: scroll; + } + + .navbar .menu-items li { + margin-bottom: 1.8rem; + font-size: 1rem; + font-weight: 500; + } + + .logo { + position: absolute; + top: 10px; + right: 15px; + font-size: 1rem; + } + + .menu-active { + transform: translateX(0); + } + + .hamburger-active .line1 { + transform: rotate(45deg); + } + + .hamburger-active .line2 { + transform: scaleY(0); + } + + .hamburger-active .line3 { + transform: rotate(-45deg); + } +} + +@media (max-width: 500px) { + .logo { + font-size: 1rem; + } +} + +