diff --git a/faq.html b/faq.html index 18eefae..bc5e91b 100644 --- a/faq.html +++ b/faq.html @@ -1,21 +1,28 @@ + + + FAQ + + + + + + + + + - - - FAQ - - - - - - - - - - - - + - - -
-
-
-

- Do You Have Questions? -

-

- We have answers (well, most of the time!) -

-

- Below you'll find answers to the most common questions you may have on Project-Vault. If you still can't find the answers you're looking for - -

-
-
- Faqs -
- -
-
-

About Us

-
-
- What is Project Vault? - + +
+
+
+

+ Do You Have Questions? +

+

We have answers (well, most of the time!)

+

+ Below you'll find answers to the most common questions you may have + on Project-Vault. If you still can't find the answers you're looking + for + +

-
- Project Vault is a curated platform that showcases categorized tech projects across various domains including - Web Development, Machine Learning, Game Development, and more. +
+ Faqs
-
+
-
-
- Who is Project Vault for? - + -
-
- Project Vault is ideal for both beginners looking for project inspiration and experienced developers searching - for reference code or collaboration opportunities. +
+

+ About Us +

+
+
+ What is Project Vault? + + +
+
+ Project Vault is a curated platform that showcases categorized tech + projects across various domains including Web Development, Machine + Learning, Game Development, and more. +
-
-
-
- What kind of projects are featured? - + -
-
- The platform includes real-world projects from domains like Web Development, Machine Learning, Games, Mobile - Apps, DevOps, and Open Source Contributions. +
+
+ Who is Project Vault for? + + +
+
+ Project Vault is ideal for both beginners looking for project + inspiration and experienced developers searching for reference code + or collaboration opportunities. +
-
-
-
- Can I contribute my own projects? - + -
-
- Yes! Developers can submit their projects using the "Submit Project" form. Submissions are reviewed before - being listed on the platform. +
+
+ What kind of projects are featured? + + +
+
+ The platform includes real-world projects from domains like Web + Development, Machine Learning, Games, Mobile Apps, DevOps, and Open + Source Contributions. +
-
-
-
- How are projects categorized? - + -
-
- Projects are categorized by domain, tech stack, and difficulty level. Users can filter projects based on their - preferences and learning goals. +
+
+ Can I contribute my own projects? + + +
+
+ Yes! Developers can submit their projects using the "Submit Project" + form. Submissions are reviewed before being listed on the platform. +
-
-
-
- Are there beginner-friendly projects? - + -
-
- Absolutely! Project Vault features beginner, intermediate, and advanced projects to suit learners at every - stage. +
+
+ How are projects categorized? + + +
+
+ Projects are categorized by domain, tech stack, and difficulty + level. Users can filter projects based on their preferences and + learning goals. +
-
-
-
- Do the projects include source code? - + +
+
+ Are there beginner-friendly projects? + + +
+
+ Absolutely! Project Vault features beginner, intermediate, and + advanced projects to suit learners at every stage. +
-
- Yes, most listed projects provide direct links to their GitHub repositories or other open-source sources for - easy access and exploration. + +
+
+ Do the projects include source code? + + +
+
+ Yes, most listed projects provide direct links to their GitHub + repositories or other open-source sources for easy access and + exploration. +
-
-
-
- How frequently is Project Vault updated? - + +
+
+ How frequently is Project Vault updated? + + +
+
+ Project Vault is regularly updated with new project submissions, + ensuring a fresh and diverse collection for all users. +
-
- Project Vault is regularly updated with new project submissions, ensuring a fresh and diverse collection for - all users. +
+
+ + + + diff --git a/features.html b/features.html index bac6c98..1392a06 100644 --- a/features.html +++ b/features.html @@ -1,198 +1,231 @@ - - - - Feature Section - Project Vault - - - -
-
-

The Project Vault platform empowers developers with curated tech projects

-

Explore categorized real-world projects with ease, filtered by domain and tech stack.

-
- -
- Project Mail UI Preview -
- -
-
-
- - - - -

Faaast

-
-

It supports an entire helping developers and innovate.

+ + .header:hover h2 { + transform: translateY(-5px); + } + + .header:hover p { + opacity: 1; + } + + .image-container { + position: relative; + width: 100%; + overflow: hidden; + margin-bottom: 3rem; + border-radius: 24px; + perspective: 1000px; + } + + .image-container img { + width: 100%; + border-radius: 24px; + transition: transform 0.6s ease, box-shadow 0.6s ease; + transform-style: preserve-3d; + } + + .image-container:hover img { + transform: rotateY(8deg) scale(1.02); + box-shadow: 0 25px 45px rgba(0, 0, 0, 0.5); + } + + .features-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 2rem; + padding-top: 1rem; + } + + .feature-card { + background: #1a1a1a; + padding: 1rem; + border-radius: 16px; + box-shadow: 0 0 0 transparent; + transition: all 0.3s ease; + transform-style: preserve-3d; + } + + .feature-card:hover { + transform: translateY(-8px) rotateX(4deg) rotateY(-4deg); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); + } + + .feature-header { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 0.5rem; + } + + .feature-header svg { + width: 18px; + height: 18px; + stroke: #00ffe1; + } + + .feature-header h3 { + font-size: 0.95rem; + font-weight: 500; + } + + .feature-card p { + font-size: 0.875rem; + color: #cccccc; + } + + @media (max-width: 768px) { + .header { + grid-template-columns: 1fr; + text-align: center; + } + + .header p { + margin: 0 auto; + } + } + + + +
+
+

+ The Project Vault platform empowers developers with curated tech + projects +

+

+ Explore categorized real-world projects with ease, filtered by domain + and tech stack. +

-
-
- - - - - - -

Powerful

-
-

It supports an entire helping developers and businesses.

+
+ Project Mail UI Preview
-
-
- - - - - -

Security

+
+
+
+ + + + +

Faaast

+
+

It supports an entire helping developers and innovate.

+
+ +
+
+ + + + + + +

Powerful

+
+

It supports an entire helping developers and businesses.

+
+ +
+
+ + + + + +

Security

+
+

It supports an helping developers businesses innovate.

-

It supports an helping developers businesses innovate.

-
-
-
- - - - - -

AI Powered

+
+
+ + + + + +

AI Powered

+
+

It supports an helping developers businesses innovate.

-

It supports an helping developers businesses innovate.

-
-
- +
+ diff --git a/footer.html b/footer.html index a383ba6..1cdb0dd 100644 --- a/footer.html +++ b/footer.html @@ -1,45 +1,107 @@ \ No newline at end of file + + diff --git a/index.html b/index.html index 140f4e4..7e871f9 100644 --- a/index.html +++ b/index.html @@ -22,18 +22,35 @@
×
- Home - About Us + Home + About Us
- +
- FAQ - Contact Us + FAQ + Contact Us
@@ -47,26 +64,36 @@ -
-

-

-
+
+

+

+
@@ -100,8 +127,11 @@

Want to add your project?

If you have an amazing project that you would like to showcase, please reach out to us!

-
+
Keep In Touch
- + + + + - \ No newline at end of file + diff --git a/script.js b/script.js index 18cd3e3..f3bf943 100644 --- a/script.js +++ b/script.js @@ -180,3 +180,20 @@ const subtitleOptions = { }; const typedSubtitle = new Typed('#animated-text', subtitleOptions); }); + +// Scroll to Top Button + +const scrollToTopBtn = document.getElementById("scroll-to-top-btn"); + window.onscroll = function () { + if ( + document.body.scrollTop > 200 || + document.documentElement.scrollTop > 200 + ) { + scrollToTopBtn.style.display = "block"; + } else { + scrollToTopBtn.style.display = "none"; + } + }; + scrollToTopBtn.addEventListener("click", () => { + window.scrollTo({ top: 0, behavior: "smooth" }); +}); \ No newline at end of file diff --git a/style.css b/style.css index e71b47a..5f3cfd1 100644 --- a/style.css +++ b/style.css @@ -674,3 +674,28 @@ footer { position: relative; z-index: 10; } + +/* Scroll to Top Btn styling */ + +#scroll-to-top-btn { + font-size: 1.4rem; + border-radius: 50%; + position: fixed; + bottom: 4%; + right: 4%; + z-index: 99; + border: none; + outline: none; + padding: 1.1rem; + background: radial-gradient(#fe6799, #e42766, #bf4e6e); + color: #fff; + cursor: pointer; + transition: opacity 0.3s ease, box-shadow 0.3s ease; + transform: scale(1); + display: none; +} + +#scroll-to-top-btn:hover { + transform: scale(1.15); + box-shadow: 0 8px 30px #f6d4e954; +}