page3.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <link rel="stylesheet" href="css/all.css" />
    <link rel="stylesheet" href="page3/mobilefirst.css" />

    <title>MarsOne</title>
</head>

<body>
    <nav class="nav__bar">
        <img src="page3/bilder3/Nav/logo.png" alt="" class="nav__img" />
        <div class="menu"><i class="fas fa-bars"></i></div>
        <ul class="nav__main-list">
            <li class="nav-list-items"><a href="#"> Mars One</a></li>
            <li class="nav-list-items"><a href="../page2.html">FAQ</a></li>
            <li class="nav-list-items"><a href="../page3.html">Join the Crew</a></li>
        </ul>
    </nav>
    <header>
        <article>
            <h1>Be brave, join the journey!</h1>
            <p>Be one of the next heroes in space</p>
        </article>
    </header>
    <main class="main__page3">
        <article class="main__page3-article1">
            <h2>Join us in the mission</h2>
            <p>
                Be part of the mission. Send us your motivation of why just
                you should be the next space traveler
            </p>
        </article>

        <section class="section__one-page3">
            <form action="" class="forms">
                <div class="column1">
                    <label for="firstname">First name</label></br>
                    <input type="text" id="firstname">
                </div>
                <div class="column2">
                    <label for="lastname">Last name</label></br>
                    <input type="text" id="lastname">
                </div>
                <div class="column3">
                    <label for="dateofbirth">Date of birth</label></br>
                    <input type="text" id="dateofbirth">
                </div>

                <div class="column4">
                    <label for="Professional">Professional</label></br>
                    <input type="text" id="Professional">
                </div>
                <div class="column5">
                    <label for="Primeskill">Prime skill</label></br>
                    <input type="text" id="Primeskill">
                </div>

                <div class="column6">
                    <label for="Motivation">Motivation</label></br>
                    <textarea name="motivation" id="motivation" cols="30" rows="10"></textarea>
                </div>
                <button class="column7">Submit</button>

            </form>


        </section>
    </main>
    <footer>
        <article class="footer__article">
            <h3>Mars One</h3>
            <p>
                This site is made for educational purpose and is based on
                the real <span>Mars One</span> project.
            </p>
        </article>
    </footer>
</body>

</html>