RoelofWobben/roelof.html

## roelof.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap" rel="stylesheet">
  <link href="./roelof.css" rel="stylesheet">
  <title>Frontend Mentor | FAQ Accordion Card</title>

  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
</head>
<body>
    <div class="container">
        <div class="logo-container">
            <img src="./images/illustration-woman-online-mobile.svg" class="logo">
            <img src="./images/bg-pattern-mobile.svg" class="background_logo">
        </div>
        <div class="text">
            <h1>FAQ</h1>
        </div>
        <ul>
            <li class="question">
                <button type="button" class="faq-btn" aria-expanded="false" aria-controls="answer1">
                    <span> How many team members can I invite?</span>
                    <img src="./images/icon-arrow-down.svg" alt="" class="icon">
                </button>
                    <div id="answer1" class="question_answer" hidden>
                    <p>
                        You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.
                    </p>
                </div>
            </li>

            <li class="question">
                <button type="button" class="faq-btn" aria-expanded="false" aria-controls="answer2">
                    <span> What is the maximum file upload size?</span>
                    <img src="./images/icon-arrow-down.svg" alt="" class="icon">
                </button>
                <div id="answer2" class="question_answer" hidden>
                  <p>
                    No more than 2GB. All files in your account must fit your allotted storage space.
                  </p>
                </div>
            </li>

            <li class="question">
                <button type="button" class="faq-btn" aria-expanded="false" aria-controls="answer3">
                    <span> How do I reset my password?</span>
                    <img src="./images/icon-arrow-down.svg" alt="" class="icon">
                </button>
                <div id="answer3" class="question_answer" hidden>
                  <p>
                    Click “Forgot password” from the login page or “Change password” from your profile page.
                    A reset link will be emailed to you.
                  </p>
                </div>
            </li>

            <li class="question">
                <button type="button" class="faq-btn" aria-expanded="false" aria-controls="answer4">
                    <span> Do you provide additional support?</span>
                    <img src="./images/icon-arrow-down.svg" alt="" class="icon">
                </button>
                <div id="answer4" class="question_answer" hidden>
                  <p>
                    Chat and email support is available 24/7. Phone lines are open during normal business hours.
                  </p>
                </div>
            </li>
        </ul>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

	<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap" rel="stylesheet">
	<link href="./roelof.css" rel="stylesheet">
	<title>Frontend Mentor \| FAQ Accordion Card</title>

	<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
	</head>
	<body>
	<div class="container">
	<div class="logo-container">
	<img src="./images/illustration-woman-online-mobile.svg" class="logo">
	<img src="./images/bg-pattern-mobile.svg" class="background_logo">
	</div>
	<div class="text">
	<h1>FAQ</h1>
	</div>
	<ul>
	<li class="question">
	<button type="button" class="faq-btn" aria-expanded="false" aria-controls="answer1">
	<span> How many team members can I invite?</span>
	<img src="./images/icon-arrow-down.svg" alt="" class="icon">
	</button>
	<div id="answer1" class="question_answer" hidden>
	<p>
	You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.
	</p>
	</div>
	</li>

	<li class="question">
	<button type="button" class="faq-btn" aria-expanded="false" aria-controls="answer2">
	<span> What is the maximum file upload size?</span>
	<img src="./images/icon-arrow-down.svg" alt="" class="icon">
	</button>
	<div id="answer2" class="question_answer" hidden>
	<p>
	No more than 2GB. All files in your account must fit your allotted storage space.
	</p>
	</div>
	</li>

	<li class="question">
	<button type="button" class="faq-btn" aria-expanded="false" aria-controls="answer3">
	<span> How do I reset my password?</span>
	<img src="./images/icon-arrow-down.svg" alt="" class="icon">
	</button>
	<div id="answer3" class="question_answer" hidden>
	<p>
	Click “Forgot password” from the login page or “Change password” from your profile page.
	A reset link will be emailed to you.
	</p>
	</div>
	</li>

	<li class="question">
	<button type="button" class="faq-btn" aria-expanded="false" aria-controls="answer4">
	<span> Do you provide additional support?</span>
	<img src="./images/icon-arrow-down.svg" alt="" class="icon">
	</button>
	<div id="answer4" class="question_answer" hidden>
	<p>
	Chat and email support is available 24/7. Phone lines are open during normal business hours.
	</p>
	</div>
	</li>
	</ul>
	</body>
	</html>