signup.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YumTrade - SignUp</title>
    <script src="signup.js"></script>
    <link rel="stylesheet" href="signupstyle.css">
</head>

<body>
    <header>
        <nav class="navigation">
            <div class="left-items">
                <img src="logo.png" alt="Logo" id="logo">
                <div id="company-name">
                    <h2>
                        YumTrade
                    </h2>
                    <span id="description">Food Market Exchange</span>
                </div>
            </div>
            <div class="right-items">
                <a href="signup.html" target="_self">Home</a>
                <a href="main.html">Listings</a>
                <button id="signupButton">Sign Up</button>
                <div id="signupBox" class="hidden">
                    <form id="signupForm">
                        <input type="text" placeholder="Username">
                        <input type="email" placeholder="Email">
                        <input type="password" placeholder="Password">
                        <button type="submit">Sign Up</button>
                    </form>
                </div>
            </div>
        </nav>
    </header>


    <div class="video-background">
        <video autoplay muted loop id="video-bg">
            <source src="video1.mp4" type="video/mp4">
        </video>

        <h1 id="slogan">
            <span>Savor the Flavor, Swap with Favor!</span>
        </h1>

    </div>

    <br>
    <br>
    <br>

    <div class="wrapper">
        <div class="form-box signup">
            <form class="form" action="#" id="signup">
                <h2 class="form__title">Ready to trade? List the item!</h2>
                <br>
                <p>Enter Username</p>
                <input id="name" type="text" class="form__input" autofocus placeholder="Username">
                <br>
                <p>Enter your swap item</p>
                <input id="item" type="text" class="form__input" autofocus placeholder="Swap Name">
                <br>
                <p>Send a picture of the item to be swaped</p>
                <input id="photo" type="file" name="photo" accept="image/*" placeholder="Photo of item">
                <br>
                <p>Enter the number of days since the purchase</p>
                <input id="swapinfo" type="number" class="form__input" autofocus placeholder="Days since bought">
                <br>
            <div class="form-box signup">
            </div>
            <div id="button">
                <button id="submit" type="button">Submit</button>
            </div>
        </form>
    </div>
</body>
<script src="signup2.js" type="module"></script>
</html>