contacctdetail.html

<!doctype html>
<html lang="en" class="h-100">

<head>
    <title>Contact Pro</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--fonts-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700;800&family=Roboto:ital,wght@0,100;0,400;0,900;1,100;1,300;1,500;1,900&display=swap"
        rel="stylesheet">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

    <!--Dev Icons-->
    <link href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css" rel="stylesheet">
    <!--Bootstrap icons-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">

    <link href="/css/site.css" rel="stylesheet">

</head>

<body>

    <nav class="navbar navbar-expand-md navbar-light fixed-top border-bottom border-light navShadow">
        <div class="container-fluid">
            <a class="navbar-brand" href="#"><img src="/img/ContactPro.png" height=45></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
                aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav me-auto mb-2 mb-md-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="index.html">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/contactlist.html">Contacts</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/category.html">Categories</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item me-2 mb-2">
                        <a type="button" class="btn btn-primary rounded-pill btnlinks" href="#">Register</a>
                    </li>
                    <li class="nav-item me-2">
                        <a type="button" class="btn btn-outline-primary rounded-pill btnlinks" href="#">Login</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <main class="content">
        <section class="container">
            <h1>EDIT CONTACT</h1>
            <div class="p-3 border border-2 shadow-lg bg-light">
                <form>
                    <div class="row g-3 p-2">
                        <div class="col-12 col-lg-4">
                            <div class="square-img-container">
                                <img class="square-img" src="/img/ClaudiaBlack.png">
                            </div>
                            <div>
                                <label asp-for="ImageFile" class="control-label"></label>
                                <input type="file" class="form-control" accept=".png,.jpg,.jpeg,.gif">
                            </div>
                        </div>
                        <div class="col-12 col-lg-8">
                            <div class="row">
                                <div class="col-12 col-lg-6 ">
                                    <label for="inputFirstName" class="form-label">First Name</label>
                                    <input type="text" class="form-control" id="inputFirstName" value="Elizabeth">
                                </div>
                                <div class="col-12 col-lg-6">
                                    <label for="inputLastName" class="form-label">Last Name</label>
                                    <input type="text" class="form-control" id="inputLastName" value="Brant">
                                </div>
                                <div class="col-12 col-lg-6 mt-2">
                                    <label for="inputEmail" class="form-label">Email</label>
                                    <input type="email" class="form-control" id="inputEmail"
                                        value="bbrant@dailybugle.net">
                                </div>
                                <div class="col-12 col-lg-6 mt-2">
                                    <label for="inputPhone" class="form-label">Phone</label>
                                    <input type="tel" class="form-control" id="inputPhone" value="212-555-8513">
                                </div>
                                <div class="col-12 mt-2">
                                    <label for="inputAddress" class="form-label">Address</label>
                                    <input type="text" class="form-control" id="inputAddress"
                                        value="405 East 14th street">
                                </div>
                                <div class="col-12 mt-2">
                                    <label for="inputAddress2" class="form-label">Address 2</label>
                                    <input type="text" class="form-control" id="inputAddress2" value="Apt 05-C">
                                </div>
                                <div class="col-12 col-lg-6 mt-2">
                                    <label for="inputCity" class="form-label">City</label>
                                    <input type="text" class="form-control" id="inputCity" value="New York">
                                </div>
                                <div class="col-12 col-lg-4 mt-2">
                                    <label for="inputState" class="form-label">State</label>
                                    <select id="inputState" class="form-select">
                                        <option selected>Choose...</option>
                                        <option value="AL">Alabama</option>
                                        <option value="AK">Alaska</option>
                                        <option value="AZ">Arizona</option>
                                        <option value="AR">Arkansas</option>
                                        <option value="CA">California</option>
                                        <option value="CO">Colorado</option>
                                        <option value="CT">Connecticut</option>
                                        <option value="DE">Delaware</option>
                                        <option value="DC">District Of Columbia</option>
                                        <option value="FL">Florida</option>
                                        <option value="GA">Georgia</option>
                                        <option value="HI">Hawaii</option>
                                        <option value="ID">Idaho</option>
                                        <option value="IL">Illinois</option>
                                        <option value="IN">Indiana</option>
                                        <option value="IA">Iowa</option>
                                        <option value="KS">Kansas</option>
                                        <option value="KY">Kentucky</option>
                                        <option value="LA">Louisiana</option>
                                        <option value="ME">Maine</option>
                                        <option value="MD">Maryland</option>
                                        <option value="MA">Massachusetts</option>
                                        <option value="MI">Michigan</option>
                                        <option value="MN">Minnesota</option>
                                        <option value="MS">Mississippi</option>
                                        <option value="MO">Missouri</option>
                                        <option value="MT">Montana</option>
                                        <option value="NE">Nebraska</option>
                                        <option value="NV">Nevada</option>
                                        <option value="NH">New Hampshire</option>
                                        <option value="NJ">New Jersey</option>
                                        <option value="NM">New Mexico</option>
                                        <option value="NY" selected>New York</option>
                                        <option value="NC">North Carolina</option>
                                        <option value="ND">North Dakota</option>
                                        <option value="OH">Ohio</option>
                                        <option value="OK">Oklahoma</option>
                                        <option value="OR">Oregon</option>
                                        <option value="PA">Pennsylvania</option>
                                        <option value="RI">Rhode Island</option>
                                        <option value="SC">South Carolina</option>
                                        <option value="SD">South Dakota</option>
                                        <option value="TN">Tennessee</option>
                                        <option value="TX">Texas</option>
                                        <option value="UT">Utah</option>
                                        <option value="VT">Vermont</option>
                                        <option value="VA">Virginia</option>
                                        <option value="WA">Washington</option>
                                        <option value="WV">West Virginia</option>
                                        <option value="WI">Wisconsin</option>
                                        <option value="WY">Wyoming</option>
                                    </select>
                                </div>
                                <div class="col-12 col-lg-2 mt-2">
                                    <label for="inputZip" class="form-label">Zip</label>
                                    <input type="text" class="form-control" id="inputZip" value="10009">
                                </div>
                                <div class="col-12 col-lg-6 mt-3">
                                    <label asp-for="CategoryList" class="control-label">Categories</label>
                                    <select class="form-select" multiple aria-label="multiple select example">
                                        <option selected>Friends</option>
                                        <option value="1">Family</option>
                                        <option value="2">Wedding</option>
                                    </select>
                                </div>
                                <div class="col-12 col-lg-6 mt-3">
                                    <label for="birthdate" class="control-label">Birth Date</label>
                                    <input id="birthdate" type="date" class="form-control" value="1995-03-12">
                                </div>
                                <div class="col-12 d-flex justify-content-end mt-2">
                                    <button type="submit" class="btn btn-lg btn-primary rounded-pill">Save</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </section>
    </main>

    <footer class="footer container-fluid mt-auto">
        <div class="row align-items-center py-2">
            <div class="col">
                <div class="row align-items-center gy-2">
                    <div
                        class="col d-flex justify-content-center justify-content-md-start order-last order-md-first copyright">
                        &copy; 2022 Dane Whitman All Rights Reserved</div>
                    <div class="col d-flex justify-content-center">
                        <img src="img/ContactPro.png" height="50">
                    </div>
                    <div class="col-12 col-lg d-flex justify-content-center justify-content-md-end">
                        <a href="#" class="socialicons"><i class="bi bi-linkedin p-2 "></i></a>
                        <a href="#" class="socialicons"><i class="bi bi-twitter p-2"></i></a>
                        <a href="#" class="socialicons"><i class="bi bi-youtube p-2"></i></a>
                        <a href="#" class="socialicons"><i class="bi bi-instagram p-2 "></i></a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
        integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous">
    </script>
</body>

</html>