<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" /> <link rel="stylesheet" href="style.css" /> <title>FAQ</title> </head> <body> <h1>Frequently Asked Questions</h1> <div class="faq-container"> <div class="faq active"> <h3 class="faq-title"> Why shouldn't we trust atoms? </h3> <p class="faq-text"> They make up everything </p> <button class="faq-toggle"> <i class="fas fa-chevron-down"></i> <i class="fas fa-times"></i> </button> </div> <div class="faq"> <h3 class="faq-title"> What do you call someone with no body and no nose? </h3> <p class="faq-text"> Nobody knows. </p> <button class="faq-toggle"> <i class="fas fa-chevron-down"></i> <i class="fas fa-times"></i> </button> </div> <div class="faq"> <h3 class="faq-title"> What's the object-oriented way to become wealthy? </h3> <p class="faq-text"> Inheritance. </p> <button class="faq-toggle"> <i class="fas fa-chevron-down"></i> <i class="fas fa-times"></i> </button> </div> <div class="faq"> <h3 class="faq-title"> How many tickles does it take to tickle an octopus? </h3> <p class="faq-text"> Ten-tickles! </p> <button class="faq-toggle"> <i class="fas fa-chevron-down"></i> <i class="fas fa-times"></i> </button> </div> <div class="faq"> <h3 class="faq-title"> What is: 1 + 1? </h3> <p class="faq-text"> Depends on who are you asking. </p> <button class="faq-toggle"> <i class="fas fa-chevron-down"></i> <i class="fas fa-times"></i> </button> </div> </div> <script src="script.js"></script> </body> </html>