<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">

    <title>Producer Sign up</title>
</head>
<style>
    .pill-navbar{
        border-radius: 50px;  
        padding:10px 20px;
        
    }
    @media(max-width:900px){
        
        .pill-navbar{
        border-radius: 25px;  
        margin-top:10px;

        }
        .pill-navbar .collapse-navbar{
            margin-top:10px;
            padding-top:10px;
            border-top:1px#eee
        }
    }
    .card{
        max-width:50vw;
        border-radius: 40px;  
        padding: 50px;
        max-height:90vh;
        overflow-y:auto;
    }

   
    .button{
        min-height:5vh;
        max-height:5vh;
    }

    body{

        background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.7)), url("Dark-theme.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        min-height:100vh;
      
    }
    .form-group{
        margin-bottom:1rem;
    }

</style>
<body>
    
  
    
    
    <!-- navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light shadow pill-navbar w-50 mx-auto my-4 ">
    
        <a class="navbar-brand" href="#">Logo</a>

        <!-- expand/collapse button -->
        <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#Navbar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- nav links -->
        <div class="collapse navbar-collapse ms-4" id="Navbar">
            <ul class="navbar-nav mt-auto">
                <li class="nav-item"><a class="nav-link" href="">Products</a></li>
                <li class="nav-item"><a class="nav-link" href="">Suppliers</a></li>
                <li class="nav-item"><a class="nav-link" href="">Orders</a></li>
            </ul>
            <!-- right side nav links -->
            <ul class="navbar-nav ms-auto ">
                <li class="nav-item"><a class="nav-link" href="">Login<span class="bi bi-person-fill"></span></a></li>
                <li class="nav-item"><a class="nav-link" href="">Settings<span class="bi bi-gear-fill"></span></a></li>
            </ul>
        </div>

    </nav>

    
    
    <!-- main content -->
   <div class="container p-3 mt-5 ">
        <div class="col-lg-7 mx-auto">
            <div class="card mx-auto">
                <div class="header">
                    <div class="card-title text-center">  
                        <h1>Become a producer for GLH today</h1><p></p><h5 class="text-muted">Add and edit products on the website for people to see and order, mananage stock leves and see trending products. Producers also have informaition about themsleves on the website for customers to build familiarity with there products</h5>
                    </div>
                </div>
                <div class="card-body px-auto mt-3">
                    <h3 class="card-sutitle text-center">Signup</h3>
                    <div class="card-text px-auto">
                        

                        <form action="AccountCreate.php" method="post">
                        
                            <div class="form-group">
                                <label for="name">Company name</label>
                                <input class="form-control" type="text" name="name" id="name">
                            </div>


                            <div class="form-group">
                                <label for="logo">Comapny Logo link</label>
                                <input class="form-control" type="text" name="logo" id="logo">
                            </div>


                            <div class="form-group">
                                <label for="email">Compay Email</label>
                                <input class="form-control" type="email" name="email" id="email">
                            </div>

                            <div class="form-group">
                                <label for="address">Company Address</label>
                                <input class="form-control" type="text" name="address" id="address">
                            </div>

                            
                            <div class="form-group">
                                <label for="desc" class="form-label">Company description</label>
                                <textarea class="form-control" type="text" name="desc" id="desc" rows="5"></textarea>
                            </div>
                            
                            <button class="btn btn-primary" type="submit">Enter</button>

                        </form>

                    </div>
                </div>
            </div>
            

        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>