Html CSS Quiz.html

﻿<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="HTML CSS Quiz.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project"/>
    <title>HTML CSS Quiz</title>
</head>
   
<body>
    <header>
        <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
        <h1>HTML/CSS Quiz</h1>
        <nav>
            <ul>
                <li><a href="#student-info">INFO</a></li>
                <li><a href="#html-questions">HTML</a></li>
                <li><a href="#css-questions">CSS</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
            <section role="region" aria-labelledby="student-info">
                <h2 id="student-info">Student Info</h2>
                <div class="info">
                    <label for="student-name">Name:</label>
                    <input type="text" name="student-name" id="student-name" />
                </div>
                <div class="info">
                    <label for="student-email">Email:</label>
                    <input type="email" name="student-email" id="student-email" />
                </div>
                <div class="info">
                    <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
                    <input type="date" name="birth-date" id="birth-date" />
                </div>
            </section>
            <section role="region" aria-labelledby="html-questions">
                <h2 id="html-questions">HTML</h2>
                <div class="question-block">
                    <p>1</p>
                    <fieldset class="question" name="html-question-one">
                        <legend>
                            The legend element represents a caption for the content of its
                            parent fieldset element
                        </legend>
                        <ul class="answers-list">
                            <li>
                                <label for="q1-a1">
                                    <input type="radio" id="q1-a1" name="q1" value="true" />
                                    True
                                </label>
                            </li>
                            <li>
                                <label for="q1-a2">
                                    <input type="radio" id="q1-a2" name="q1" value="false" />
                                    False
                                </label>
                            </li>
                        </ul>
                    </fieldset>
                </div>
                <div class="question-block">
                    <p>2</p>
                    <fieldset class="question" name="html-question-two">
                        <legend>
                            A label element nesting an input element is required to have a
                            for attribute with the same value as the input's id
                        </legend>
                        <ul class="answers-list">
                            <li>
                                <label for="q2-a1">
                                    <input type="radio" id="q2-a1" name="q2" value="true" />
                                    True
                                </label>
                            </li>
                            <li>
                                <label for="q2-a2">
                                    <input type="radio" id="q2-a2" name="q2" value="false" />
                                    False
                                </label>
                            </li>
                        </ul>
                    </fieldset>
                </div>
            </section>
            <section role="region" aria-labelledby="css-questions">
                <h2 id="css-questions">CSS</h2>
                <div class="formrow">
                    <div class="question-block">
                        <label for="customer">Are you a frontend developer?</label>
                    </div>
                    <div class="answer">
                        <select name="customer" id="customer" required>
                            <option value="">Select an option</option>
                            <option value="yes">Yes</option>
                            <option value="no">No</option>
                        </select>
                    </div>
                    <div class="question-block">
                        <label for="css-questions">Do you have any questions:</label>
                    </div>
                    <div class="answer">
                        <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
                    </div>
                </div>
            </section>
            <button type="submit">Submit</button>
        </form>
    </main>

    <footer>
        <address>
            <a href="https://freecodecamp.org">freeCodeCamp</a><br />
            San Francisco<br />
            California<br />
            USA
        </address>
    </footer>

</body>
</html>