<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Template v2</title>
    <link rel="icon" type="image/x-icon" href="images/favicon.ico">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <header class="container flexbox-container">
        <div>
            <h1 id="header-title">
                Forms
            </h1>
        </div>
        <nav>
            <ul>
                <li>
                    <a href="../../index.html">Root Index</a>
                </li>
            </ul>
        </nav>
    </header>
    <main class="container">
        <section class="container" id="form-container">
            <form action="mailto:tonyjanus@gmail.com" method="post" autocomplete="on" enctype="multipart/form-data" id="contact-form">
                <fieldset id="contact-fieldset-info">
                    <legend id="legend-top">Contact Information</legend>
                    <label for="fname">First Name:</label>
                        <input type="text" id="contact-fname" class="form-input" name="fname" placeholder="Enter your first name...">
                    <label for="lname">Last Name:</label>
                        <input type="text" id="contact-lname" class="form-input"  name="lname" placeholder="Enter your last name...">
                    <label for="email">Email:</label>
                        <input type="email" id="contact-email" class="form-input"  name="email" placeholder="Enter your email...">
                    <label for="subject">Subject:</label>
                        <input type="text" id="contact-subject" class="form-input"  name="subject" placeholder="Few words why you're reaching out...">
                </fieldset>
                <fieldset id="field-right">
                    <legend id="legend-right">Optional</legend>
                    
                </fieldset>
                <fieldset id="contact-fieldset-message">
                    <legend>Your Message:</legend>
                    <textarea name="message" rows="10" cols="50" id="contact-message" placeholder="Enter your message here..."></textarea>
                </fieldset>
                <div id="contact-btn-container">
                    <input type="reset" value="Reset" class="contact-btn">
                    <input type="submit" value="Submit" class="contact-btn" >
                </div>
            </form>
        </section>
    </main>
    <footer class="container">
        © 2024 Tony Janus
    </footer>
</body>
</html>