Create a responsive personal blog website using pure HTML and CSS. The website should have the following features:
-
A header with the blog title, a navigation menu, and a search bar. The navigation menu should include links to the "Home", "About", "Contact", and "Blog" sections of the website.
-
A main content area with a responsive grid layout that displays a list of blog post cards. Each card should have an image, title, publication date, and a short description. The grid should have 3 columns for large screens, 2 columns for medium screens, and 1 column for small screens.
-
A right sidebar with a list of popular posts, an author bio, and social media links.
-
A footer with copyright information and links to the "Home", "About", "Contact", and "Blog" sections.
-
Make sure to use semantic HTML elements and CSS Flexbox or Grid to create the responsive layout.
-
Add hover effects to buttons, links, and other interactive elements.
-
Ensure that the website is accessible and follows best practices for HTML and CSS.
Here's a basic outline of the HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Blog</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<!-- Add your header content here -->
</header>
<main>
<section class="content">
<!-- Add your main content area here -->
</section>
<aside class="sidebar">
<!-- Add your sidebar content here -->
</aside>
</main>
<footer>
<!-- Add your footer content here -->
</footer>
</body>
</html>Use this structure as a starting point and build the website with the specified features using your creativity and CSS skills.