Untitled

<!-- Step 1 - Intro -->
<section class="intro-section">
    <h2>Teasting intro</h2>
    <p class="intro-section__text">
        At GlamSavor you will find your dining experience that is as <span class="intro-section__text--highlight">unique</span> as you are. With this test you will find the meal that suits you exactly. We will find your taste preference that matches your fabulous photo.
    </p>
    <div class="intro-section__form-container">
        <h2 class="intro-section__form-title">name:</h2>
        
            <input type="text" class="intro-section__input" name="name" required placeholder="name" size="30">
        </form>
    </div>
    <button class="intro-section__button" type="submit">let's start</button>
</section>

<!-- Step 2 - Country -->
<section class=" country-section">
    <h2 class="question">Which country do you think has the tastiest cuisine?</h2>

    <div class="slider">
        <?php foreach ($countries as $country): ?>
            <div class="slider__slide">
                <p class="slider__country-name"><?php echo $country['name']; ?></p>
                <form class="slider__form" method="post" action="index.php?page=country&id=<?php echo $teasting['id']; ?>">
                    <input type="text" class="slider__input visually-hidden" name="country" value="<?php echo $country['name']; ?>" />
                    <div class="slider__content">
                        <button class="slider__button" type="submit" name="answer">
                            <img class="slider__flag" src="assets/<?php echo $country['icon']; ?>" alt="<?php echo $country['name']; ?>">
                        </button>
                        <img class="slider__background" src="assets/<?php echo $country['background']; ?>" alt="">
                    </div>
                </form>
            </div>
        <?php endforeach; ?>
        <div class="slider__controls">
            <button class="slider__control slider__control--prev" onclick="prevSlide()">&#10094;</button>
            <button class="slider__control slider__control--next" onclick="nextSlide()">&#10095;</button>
        </div>
    </div>
</section>

<!-- Step 3 - Hat -->
<section class="hat-section">
    <h2 class="question">Make your hat delicious!</h2>
    <img class="hat-question__image" src="assets/had.png" alt="Delicious hat image">
    <form class="hat-question__form" method="POST">
        <?php: ?>
            <input type="radio" class="hat-question__input visually-hidden" id="" name="" value="" />
        <?php ?>
    </form>
</section>

<!-- Step 4 - Smile -->
<section class=" country-section">
    <h2 class="question">Make your hat delicious!</h2>
    <img class="hat-question__image" src="assets/had.png" alt="Delicious hat image">
    <form class="hat-question__form" method="POST">
        <?php: ?>
            <input type="radio" class="hat-question__input visually-hidden" id="" name="" value="" />
        <?php ?>
    </form>
</section>