online book store

PHOTO EMBED

Fri Nov 01 2024 13:59:08 GMT+0000 (Coordinated Universal Time)

Saved by @abhigna 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Online Book Store</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            background-color: #f4f4f4;
        }
        header {
            background-color: #333;
            color: white;
            padding: 15px;
            text-align: center;
        }
        nav a {
            color: white;
            margin: 10px;
            text-decoration: none;
        }
        .container {
            display: none; /* Hide all sections initially */
            padding: 20px;
        }
        .active {
            display: block; /* Show the active section */
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        input[type="text"], input[type="email"], input[type="password"] {
            width: 100%;
            padding: 10px;
            margin: 5px 0 10px;
            border: 1px solid #ccc;
        }
        input[type="submit"] {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            border: none;
            cursor: pointer;
            width: 100%;
        }
        input[type="submit"]:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <header>
        <h1>Online Book Store</h1>
        <nav>
            <a href="#" onclick="showSection('home')">Home</a>
            <a href="#" onclick="showSection('login')">Login</a>
            <a href="#" onclick="showSection('catalogue')">Catalogue</a>
            <a href="#" onclick="showSection('registration')">Register</a>
        </nav>
    </header>

    <div id="home" class="container active">
        <h2>Welcome to the Online Book Store!</h2>
        <p>Find your favorite books here.</p>
    </div>

    <div id="login" class="container">
        <h2>Login</h2>
        <form action="#">
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
            <input type="submit" value="Login">
        </form>
    </div>

    <div id="catalogue" class="container">
        <h2>Book Catalogue</h2>
        <table>
            <thead>
                <tr>
                    <th>Book Title</th>
                    <th>Author</th>
                    <th>Price</th>
                    <th>Availability</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>The Great Gatsby</td>
                    <td>F. Scott Fitzgerald</td>
                    <td>$10.99</td>
                    <td>In Stock</td>
                </tr>
                <tr>
                    <td>1984</td>
                    <td>George Orwell</td>
                    <td>$8.99</td>
                    <td>In Stock</td>
                </tr>
                <tr>
                    <td>To Kill a Mockingbird</td>
                    <td>Harper Lee</td>
                    <td>$12.99</td>
                    <td>Out of Stock</td>
                </tr>
                <tr>
                    <td>Pride and Prejudice</td>
                    <td>Jane Austen</td>
                    <td>$7.99</td>
                    <td>In Stock</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div id="registration" class="container">
        <h2>Registration</h2>
        <form action="#">
            <label for="new-username">Username:</label>
            <input type="text" id="new-username" name="username" required>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>
            <label for="new-password">Password:</label>
            <input type="password" id="new-password" name="password" required>
            <input type="submit" value="Register">
        </form>
    </div>

    <script>
        function showSection(sectionId) {
            const sections = document.querySelectorAll('.container');
            sections.forEach(section => {
                section.classList.remove('active'); // Hide all sections
            });
            document.getElementById(sectionId).classList.add('active'); // Show the selected section
        }
    </script>
</body>
</html>
content_copyCOPY