<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>My Blog</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<header>

<h1>Welcome to My Blog</h1>

<p>Sharing thoughts, ideas, and projects</p>

</header>


<main>

<section id="blog-container">

<!-- Blog articles will be inserted here -->

</section>


<section id="add-article">

<h2>Add New Blog Article</h2>

<form id="blog-form">

<label for="title">Title:</label>

<input type="text" id="title" name="title" required><br><br>


<label for="content">Content:</label><br>

<textarea id="content" name="content" rows="4" cols="50" required></textarea><br><br>


<label for="image">Image URL:</label>

<input type="url" id="image" name="image"><br><br>


<button type="submit">Add Article</button>

</form>

</section>

</main>


<footer>

<p>&copy; 2024 My Blog</p>

</footer>


<script src="script.js"></script>

</body>

</html>