categorydetail.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" href="/index.html">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/contactlist.html">Contacts</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" 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 mt-5">
            <h1>EDIT CATEGORY</h1>
            <div class="form-group">
                <label for="categoryName" class="form-label">Category Name</label>
                <input id="categoryName" class="form-control" placeholder="Enter category name" />                
            </div>
            <div class="form-group text-end mt-2">
                <input type="submit" value="Save" class="btn btn-primary rounded-pill btnlinks" />
            </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/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous">
    </script>
</body>

</html>