index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Microblogging App</title>
    <link rel="stylesheet" href="../../css/main.css">
     <!-- above Link to the main CSS stylesheet -->
</head>
<body>
    <!-- Header section with the app's name -->
    <header>
        <h1>Abhinay's Microblogging App</h1>
    </header>
    <!-- Container for displaying dynamically generated blog posts -->
    <div class="blogs-container">
        <!-- Blog posts will be displayed here dynamically -->
    </div>
    <!-- Button to create a new blog -->
    <button id="create-button">Create Blog</button>
    <!-- Form for creating a new blog, initially hidden -->
    <div id="create-blog-form" class="hidden">
        <h2>Create a New Blog</h2>
        <form>
            <label for="blog-title">Title:</label>
            <input type="text" id="blog-title" placeholder="Enter the title" required>
            <label for="blog-author">Author:</label>
            <input type="text" id="blog-author" placeholder="Enter the author" required>
            <label for="blog-content">Content:</label>
            <textarea id="blog-content" rows="4" placeholder="Enter the content" required></textarea>
            <button id="submit-blog">Submit</button>
        </form>
    </div>
    <script src="main.js"></script>
    <body background="Microblogging-pic.jpeg"></body>
</body>
</html>