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.

    +
    • diff --git a/Source-Code/FAQApplication/index.html b/Source-Code/FAQApplication/index.html new file mode 100644 index 0000000..cba4bb8 --- /dev/null +++ b/Source-Code/FAQApplication/index.html @@ -0,0 +1,91 @@ + + + + + + FAQ Application + + + + +
    +

    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! +

    +
    +
    +
    + + + diff --git a/Source-Code/FAQApplication/script.js b/Source-Code/FAQApplication/script.js new file mode 100644 index 0000000..8f4b892 --- /dev/null +++ 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'); + }); +}); diff --git a/Source-Code/FAQApplication/style.css b/Source-Code/FAQApplication/style.css new file mode 100644 index 0000000..ead0e59 --- /dev/null +++ b/Source-Code/FAQApplication/style.css @@ -0,0 +1,108 @@ +* { + 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; +} + +.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 */ +}