From f7274d9e60a40ded0971e8aba7048a6298fefb06 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Tue, 23 Jul 2024 19:29:29 +0530 Subject: [PATCH 1/6] Create a template for project --- Source-Code/FAQApplication/index.html | 17 +++++++++++++++++ Source-Code/FAQApplication/script.js | 0 Source-Code/FAQApplication/style.css | 0 3 files changed, 17 insertions(+) create mode 100644 Source-Code/FAQApplication/index.html create mode 100644 Source-Code/FAQApplication/script.js create mode 100644 Source-Code/FAQApplication/style.css diff --git a/Source-Code/FAQApplication/index.html b/Source-Code/FAQApplication/index.html new file mode 100644 index 0000000..9d81fd0 --- /dev/null +++ b/Source-Code/FAQApplication/index.html @@ -0,0 +1,17 @@ + + + + + + FAQ Application + + + + + + diff --git a/Source-Code/FAQApplication/script.js b/Source-Code/FAQApplication/script.js new file mode 100644 index 0000000..e69de29 diff --git a/Source-Code/FAQApplication/style.css b/Source-Code/FAQApplication/style.css new file mode 100644 index 0000000..e69de29 From 414459eb68078bea6d663dd39ac284f7aa0c029f Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Tue, 23 Jul 2024 19:54:29 +0530 Subject: [PATCH 2/6] Add text and icon --- Source-Code/FAQApplication/index.html | 78 ++++++++++++++++++++++++++- 1 file changed, 76 insertions(+), 2 deletions(-) diff --git a/Source-Code/FAQApplication/index.html b/Source-Code/FAQApplication/index.html index 9d81fd0..cba4bb8 100644 --- a/Source-Code/FAQApplication/index.html +++ b/Source-Code/FAQApplication/index.html @@ -10,8 +10,82 @@ integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous" /> - - + +
+

Frequently Asked Questions

+
+
+

1. What are the prerequisites for the training ?

+ +
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, + vitae officia? Modi, ut? Eius, voluptatum commodi. Porro voluptatum + quidem dolorem commodi laborum possimus voluptatibus quod minus, id + ipsum quo ducimus! +

+
+
+
+
+

2. When can I start my training ?

+ +
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, + vitae officia? Modi, ut? Eius, voluptatum commodi. Porro voluptatum + quidem dolorem commodi laborum possimus voluptatibus quod minus, id + ipsum quo ducimus! +

+
+
+
+
+

3. What will be the timings of the training ?

+ +
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, + vitae officia? Modi, ut? Eius, voluptatum commodi. Porro voluptatum + quidem dolorem commodi laborum possimus voluptatibus quod minus, id + ipsum quo ducimus! +

+
+
+
+
+

4. Will I get a hard copy of the certificate ?

+ +
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, + vitae officia? Modi, ut? Eius, voluptatum commodi. Porro voluptatum + quidem dolorem commodi laborum possimus voluptatibus quod minus, id + ipsum quo ducimus! +

+
+
+
+
+

5. What are the benifits of this training ?

+ +
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, + vitae officia? Modi, ut? Eius, voluptatum commodi. Porro voluptatum + quidem dolorem commodi laborum possimus voluptatibus quod minus, id + ipsum quo ducimus! +

+
+
+
+ + From d32561c5e3e98cf412328f862afed7a0639f99c3 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Tue, 23 Jul 2024 19:54:49 +0530 Subject: [PATCH 3/6] Add styles --- Source-Code/FAQApplication/style.css | 109 +++++++++++++++++++++++++++ 1 file changed, 109 insertions(+) diff --git a/Source-Code/FAQApplication/style.css b/Source-Code/FAQApplication/style.css index e69de29..d58b8d7 100644 --- a/Source-Code/FAQApplication/style.css +++ b/Source-Code/FAQApplication/style.css @@ -0,0 +1,109 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: "Times New Roman", Times, serif; + background: linear-gradient(to right, #26265a, #2f1532); + color: white; + background-attachment: fixed; + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} + +section { + justify-items: center; + display: flex; + flex-direction: column; + align-items: center; + margin: auto; + padding: auto; +} + +.title { + font-size: 35px; + margin: 40px 0; + color: rgb(234, 209, 231); +} + +.faq { + max-width: 700px; + margin-top: 20px; + padding: 20px; + border: 2px solid greenyellow; + cursor: pointer; + border-radius: 15px; +} + +.question { + display: flex; + justify-content: space-between; + align-items: center; +} + +h3 { + font-size: 25px; + color: rgb(234, 209, 231); +} + +.answer { + max-height: 0; + overflow: hidden; + transition: max-height 1.4s ease; + color: rgb(191, 253, 233); +} + +.answer p { + padding-top: 20px; + line-height: 1.6; + font-size: 20px; +} + +.faq.active .answer { + max-height: 300px; + animation: fade 1s ease-in-out; +} + +i { + transition: transform 0.5s ease-in; + color: yellow; +} + +.faq.active i { + transform: rotate(180deg); +} + +@keyframes fade { + from { + opacity: 0; + transform: translateY(-10px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +/* @media screen and (max-width: 768px) { + section { + margin: 0 auto; + } + } + + @media screen and (max-width: 1024px) { + section { + margin: 0 auto; + } + } */ + +::-webkit-scrollbar { + width: 0; + height: 0; +} + +body::-webkit-scrollbar { + display: none; /* Safari and Chrome */ +} From 08a57f15e21e794c38b808f3002ed27b7a1f232e Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Tue, 23 Jul 2024 19:55:06 +0530 Subject: [PATCH 4/6] Add toggle button --- Source-Code/FAQApplication/script.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/Source-Code/FAQApplication/script.js b/Source-Code/FAQApplication/script.js index e69de29..8f4b892 100644 --- a/Source-Code/FAQApplication/script.js +++ b/Source-Code/FAQApplication/script.js @@ -0,0 +1,7 @@ +const faqs = document.querySelectorAll('.faq'); + +faqs.forEach((faq) => { + faq.addEventListener('click', () => { + faq.classList.toggle('active'); + }); +}); From d99ed6dfc82329135ed28484ed140672bcc950f5 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Tue, 23 Jul 2024 20:02:50 +0530 Subject: [PATCH 5/6] update the project --- README.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 04e2e49..779b5cb 100644 --- a/README.md +++ b/README.md @@ -260,7 +260,18 @@ In order to run this project you need:

Analog Watch is a visually appealing and functional timekeeping tool built using HTML, CSS, and JavaScript. This project features a classic analog clock design with distinct hour, minute, and second hands. The clock displays the current time with real-time updates, and its stylish design includes subtle shadowing and color adjustments to enhance its aesthetic appeal. The clock’s hands are dynamically styled with CSS for a modern and engaging look.

+ + + +
  • +
    +FAQ Application +

    The FAQ Application is a responsive web-based tool designed to provide users with quick and easy access to frequently asked questions and their answers. Built with HTML, CSS, and JavaScript, this project showcases a clean and intuitive interface that allows users to expand and collapse answers with a simple click.

    +
    • From 09eebeef89b75be85cb9cdb5d8e68bc1b63d3d1b Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Tue, 23 Jul 2024 20:08:52 +0530 Subject: [PATCH 6/6] solve linter error --- Source-Code/FAQApplication/style.css | 1 - 1 file changed, 1 deletion(-) diff --git a/Source-Code/FAQApplication/style.css b/Source-Code/FAQApplication/style.css index d58b8d7..ead0e59 100644 --- a/Source-Code/FAQApplication/style.css +++ b/Source-Code/FAQApplication/style.css @@ -19,7 +19,6 @@ section { flex-direction: column; align-items: center; margin: auto; - padding: auto; } .title {