diff --git a/CODE_CONTRIBUTORS b/CODE_CONTRIBUTORS index e85215f..3152849 100644 --- a/CODE_CONTRIBUTORS +++ b/CODE_CONTRIBUTORS @@ -1,7 +1,10 @@ # All contributors who made changes to the code to add their details here as + # Full Name + Sresht Thiyagashankar Aryan Krishnan Anika Bindal Maan Biswas Arav Bansal +Rayhaan Sagar diff --git a/projecthearthstone.in/AboutUs/faq.json b/projecthearthstone.in/AboutUs/faq.json index ae07165..fca59a1 100644 --- a/projecthearthstone.in/AboutUs/faq.json +++ b/projecthearthstone.in/AboutUs/faq.json @@ -1,16 +1,16 @@ { - "faq-list" : [ - { - "question": "Placeholder question 1?", - "answer": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." - }, - { - "question": "Placeholder question 2?", - "answer": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." - }, - { - "question": "Placeholder question 3?", - "answer": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." - } - ] + "faq-list": [ + { + "question": "Placeholder question 1?", + "answer": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." + }, + { + "question": "Placeholder question 2?", + "answer": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." + }, + { + "question": "Placeholder question 3?", + "answer": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." + } + ] } diff --git a/projecthearthstone.in/AboutUs/index.html b/projecthearthstone.in/AboutUs/index.html index 50053e7..486b146 100644 --- a/projecthearthstone.in/AboutUs/index.html +++ b/projecthearthstone.in/AboutUs/index.html @@ -1,48 +1,87 @@ - + - - - - + + + + - + Project Hearthstone - Home Page - - + + -
Placeholder Image
+
+ Placeholder Image +
-

About Project Hearthstone

-
-
-
-

The Origin

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

-
-
-

The Inspiration

-

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-
-
-
- Image of Hearthstone from Magnus Chase -
+

About Project Hearthstone

+
+
+
+

The Origin

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. +

+
+
+

The Inspiration

+

+ Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit + anim id est laborum. +

+
+
+
+ Image of Hearthstone from Magnus Chase
+
+
+ +
+
+ Problem + Solution +
+ +
+
+
PROBLEM
+
add text here
+
+ +
+
SOLUTION
+
Add text here
+
+
+ +
+ +
+
PROJECT HEARTHSTONE
+
Add text here .
+
-

Frequently Asked Questions

+

Frequently Asked Questions

-
    -
+
    - - + diff --git a/projecthearthstone.in/AboutUs/script.js b/projecthearthstone.in/AboutUs/script.js index 5e98c42..32d4773 100644 --- a/projecthearthstone.in/AboutUs/script.js +++ b/projecthearthstone.in/AboutUs/script.js @@ -1,36 +1,35 @@ document.addEventListener("DOMContentLoaded", () => { - fetch("faq.json") - .then(response => response.json()) - .then(data => { - const faqList = document.getElementById("faq-list"); - data["faq-list"].forEach(item => { - - const li = document.createElement("li"); + fetch("faq.json") + .then((response) => response.json()) + .then((data) => { + const faqList = document.getElementById("faq-list"); + data["faq-list"].forEach((item) => { + const li = document.createElement("li"); - const button = document.createElement("button"); - button.addEventListener("click", () => { - const answer = button.nextElementSibling; - button.classList.toggle("active"); - button.firstElementChild.classList.toggle("active"); - answer.classList.toggle("active"); - button.parentElement.classList.toggle("active"); - }); - button.classList.add("faq-btn"); - button.innerHTML = ` + const button = document.createElement("button"); + button.addEventListener("click", () => { + const answer = button.nextElementSibling; + button.classList.toggle("active"); + button.firstElementChild.classList.toggle("active"); + answer.classList.toggle("active"); + button.parentElement.classList.toggle("active"); + }); + button.classList.add("faq-btn"); + button.innerHTML = ` ${item.question} Down Arrow `; - const answerDiv = document.createElement("div"); - answerDiv.classList.add("faq-answer"); - answerDiv.innerHTML = `

    ${item.answer}

    `; + const answerDiv = document.createElement("div"); + answerDiv.classList.add("faq-answer"); + answerDiv.innerHTML = `

    ${item.answer}

    `; - li.appendChild(button); - li.appendChild(answerDiv); - faqList.appendChild(li); - }); - }) - .catch(error => console.error("Error loading FAQ:", error)); + li.appendChild(button); + li.appendChild(answerDiv); + faqList.appendChild(li); + }); + }) + .catch((error) => console.error("Error loading FAQ:", error)); }); diff --git a/projecthearthstone.in/AboutUs/style.css b/projecthearthstone.in/AboutUs/style.css index 496d5a3..d1fecc9 100644 --- a/projecthearthstone.in/AboutUs/style.css +++ b/projecthearthstone.in/AboutUs/style.css @@ -1,209 +1,314 @@ @import url(../Common/styles.css); @font-face { - font-family: 'cooper-hewitt'; - font-style: normal; - font-display: swap; - font-weight: 400; - src: url(https://cdn.jsdelivr.net/fontsource/fonts/cooper-hewitt@latest/latin-400-normal.woff2) - format('woff2'), - url(https://cdn.jsdelivr.net/fontsource/fonts/cooper-hewitt@latest/latin-400-normal.woff) - format('woff'); /* Link: https://fontsource.org/fonts/cooper-hewitt/cdn */ + font-family: "cooper-hewitt"; + font-style: normal; + font-display: swap; + font-weight: 400; + src: + url(https://cdn.jsdelivr.net/fontsource/fonts/cooper-hewitt@latest/latin-400-normal.woff2) + format("woff2"), + url(https://cdn.jsdelivr.net/fontsource/fonts/cooper-hewitt@latest/latin-400-normal.woff) + format("woff"); /* Link: https://fontsource.org/fonts/cooper-hewitt/cdn */ } body { - font-family: 'cooper-hewitt'; - background-color: var(--bg-color); - color: var(--text-color); - padding: 0px 0px; - margin: 0px 0px; + font-family: "cooper-hewitt"; + background-color: var(--bg-color); + color: var(--text-color); + padding: 0px 0px; + margin: 0px 0px; } button { - font-family: 'cooper-hewitt'; - background-color: var(--sec-bg); - color: var(--text-color); - border: none; - cursor: pointer; + font-family: "cooper-hewitt"; + background-color: var(--sec-bg); + color: var(--text-color); + border: none; + cursor: pointer; } h1 { - font-size: 55px; - margin: -15px 0px 50px 0px; - text-decoration: underline; - text-decoration-color: var(--sec-accent-color); + font-size: 55px; + margin: -15px 0px 50px 0px; + text-decoration: underline; + text-decoration-color: var(--sec-accent-color); } /* Navigation Bar */ nav { - border-radius: 10px ; - min-height: 10vh; + border-radius: 10px; + min-height: 10vh; } /* Hero Section */ .hero-image-container { - width: 100%; - height: 93vh; - overflow: hidden; - opacity: 0; - animation: fadeDown 2s ease forwards; - margin-bottom: 15vh; - -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%); - mask-image: linear-gradient(to bottom, black 50%, transparent 100%); + width: 100%; + height: 93vh; + overflow: hidden; + opacity: 0; + animation: fadeDown 2s ease forwards; + margin-bottom: 15vh; + -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%); + mask-image: linear-gradient(to bottom, black 50%, transparent 100%); } .hero-image-container img { - width: 100%; - height: 100%; - object-fit: cover; + width: 100%; + height: 100%; + object-fit: cover; } @keyframes fadeDown { - to { - opacity: 1; - } + to { + opacity: 1; + } } /* Divider */ .divider-box { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - padding: 40px 0px; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + padding: 40px 0px; } .divider-line { - height: 5px; - background-color: var(--accent-color); - width: 90%; - border-radius: 5px; + height: 5px; + background-color: var(--accent-color); + width: 90%; + border-radius: 5px; } /* Sections */ .section { - padding: 0px 3vw; - margin: 30px; + padding: 0px 3vw; + margin: 30px; } /* About Us Section */ #vertical-columns { - display: flex; - justify-content: space-between; - width: 100%; + display: flex; + justify-content: space-between; + width: 100%; } #vertical-columns { - display: flex; - align-items: flex-start; - gap: 40px; + display: flex; + align-items: flex-start; + gap: 40px; } #about-us-text { - flex: 1; - display: flex; - flex-direction: column; - gap: 40px; - height: 70vh; + flex: 1; + display: flex; + flex-direction: column; + gap: 40px; + height: 70vh; } #about-us-image img { - height: 70vh; - width: auto; - display: block; - border-radius: 50px; + height: 70vh; + width: auto; + display: block; + border-radius: 50px; } .about-us-text-section { - padding: 3vh 2vw; - background-color: var(--sec-bg); - border-radius: 50px; - transition: padding 0.5s ease; + padding: 3vh 2vw; + background-color: var(--sec-bg); + border-radius: 50px; + transition: padding 0.5s ease; } .about-us-text-section:hover { - padding: 5vh 2vw; + padding: 5vh 2vw; } .about-us-text-section h2 { - font-size: 30px; + font-size: 30px; } .about-us-text-section p { - font-size: 20px; + font-size: 20px; } /* FAQ Section */ #faq-list { - list-style-type: none; - padding: 0; + list-style-type: none; + padding: 0; } #faq-list li { - background-color: none; - border-radius: 20px; - margin-bottom: 35px; - align-items: center; - transition: margin-bottom 0.5s ease; + background-color: none; + border-radius: 20px; + margin-bottom: 35px; + align-items: center; + transition: margin-bottom 0.5s ease; } #faq-list li.active { - margin-bottom: 15px; + margin-bottom: 15px; } #faq-list li button { - padding: 20px 30px; - border-radius: 30px; - font-size: 25px; - width: 100%; - text-align: left; - transition: background-color 0.5s ease; - display: flex; - justify-content: space-between; - align-items: center; - z-index: 1; - position: relative; + padding: 20px 30px; + border-radius: 30px; + font-size: 25px; + width: 100%; + text-align: left; + transition: background-color 0.5s ease; + display: flex; + justify-content: space-between; + align-items: center; + z-index: 1; + position: relative; } #faq-list li button:hover { - background-color: var(--sec-accent-color); - color: black; + background-color: var(--sec-accent-color); + color: black; } #faq-list li button:hover .arrow-icon { - filter: invert(0); + filter: invert(0); } .arrow-icon { - width: 20px; - height: 20px; - filter: invert(1); - transition: width 0.5s ease; - transition: height 0.5s ease; - transition: transform 0.5s ease; + width: 20px; + height: 20px; + filter: invert(1); + transition: width 0.5s ease; + transition: height 0.5s ease; + transition: transform 0.5s ease; } .arrow-icon.active { - transform: rotate(180deg); + transform: rotate(180deg); } .faq-answer { - background-color: var(--text-bg); - border-radius: 0px 0px 20px 20px; - margin-top: -20px; - margin-bottom: 0px; - max-height: 0px; - overflow: hidden; - transition: max-height 0.5s ease; - z-index: -1; - position: relative; + background-color: var(--text-bg); + border-radius: 0px 0px 20px 20px; + margin-top: -20px; + margin-bottom: 0px; + max-height: 0px; + overflow: hidden; + transition: max-height 0.5s ease; + z-index: -1; + position: relative; } .faq-answer.active { - max-height: 200px; + max-height: 200px; } .faq-answer p { - margin: 5px 25px 20px 25px; - padding: 30px 0px 0px 0px; - font-size: 20px; + margin: 5px 25px 20px 25px; + padding: 30px 0px 0px 0px; + font-size: 20px; +} + +/* Problem Solution Section */ +.problem-img { + margin-left: -30px; +} + +body { + margin: 0; + background: #000; + font-family: Arial, sans-serif; + color: #ccc; +} + +.container { + max-width: 1100px; + margin: auto; + padding: 40px 20px; +} + +.top-image { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 40px; +} + +.top-image img { + width: 48%; + height: auto; +} + +.row { + display: flex; + justify-content: space-between; + gap: 60px; +} + +.box { + flex: 1; +} + +.title { + font-size: 48px; + font-weight: bold; + margin-bottom: 20px; +} + +.problem { + color: white; +} + +.solution { + color: #7a3cff; + margin-left: 20px; +} + +.desc { + color: #aaa; + line-height: 1.6; + max-width: 450px; +} + +.divider { + margin: 60px 0; + height: 1px; + background: #5a2dff; + opacity: 0.5; +} + +.project-box { + border: 1px solid #5a2dff; + border-radius: 20px; + padding: 50px 20px; + text-align: center; +} + +.project-title { + font-size: 36px; + color: #7a3cff; + margin-bottom: 20px; + font-weight: bold; +} + +.project-desc { + max-width: 600px; + margin: auto; + color: #aaa; + line-height: 1.6; +} + +@media (max-width: 800px) { + .row { + flex-direction: column; + } + + .top-image { + flex-direction: column; + gap: 20px; + } + + .top-image img { + width: 80%; + } }