In the vast landscape of the internet, creating a simple yet effective blog archive page is a valuable asset for bloggers and content creators. In this beginner-friendly guide, we’ll walk through the process of crafting a sleek blog archive page using HTML and CSS. This archive will feature a header with a captivating title and image, a call-to-action (CTA) section with a subscription form, and a footer for a polished finish.
The Header - Welcoming Your Audience
The header is the first impression your readers will have of your blog archive page. Let’s start strong with an enticing title and an inviting image.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog Archive Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>Welcome to Our Blog Archive</h1>
<img src="archive-header-image.jpg" alt="Blog Archive Image">
</header>
</body>
</html>
CSS (style.css):
/* Header styles */
header {
text-align: center;
background-color: #007BFF;
color: #fff;
padding: 60px;
}
header h1 {
font-size: 36px;
}
header img {
width: 300px;
height: auto;
margin-top: 20px;
}In the header section, we’ve employed a captivating title and an engaging image to set the tone for the blog archive.
Blog Articles - The Heart of Your Archive
The main content of your blog archive page is the list of blog articles. We’ll create a simple blog article card structure to showcase your content.
HTML:
<section class="blog-archive">
<div class="blog-card">
<img src="blog-image-1.jpg" alt="Blog 1 Image">
<h3>Blog Title 1</h3>
<p>Published on: Date 1</p>
<a href="blog-1.html">Read More</a>
</div>
<!-- Repeat this structure for Blog 2 and Blog 3 -->
</section>CSS (style.css):
/* Blog archive styles */
.blog-archive {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 20px;
}
.blog-card {
text-align: center;
max-width: 300px;
margin: 20px;
padding: 20px;
background-color: #fff;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}
.blog-card img {
width: 100%;
height: auto;
margin-top: 10px;
}
.blog-card h3 {
font-size: 20px;
margin: 10px 0;
}
.blog-card p {
color: #777;
margin: 5px 0;
}
.blog-card a {
color: #007BFF;
text-decoration: none;
display: block;
margin-top: 10px;
}
.blog-card a:hover {
text-decoration: underline;
}
The blog archive section features individual blog cards with images, titles, publication dates, and “Read More” links. The use of flexbox ensures that these cards arrange themselves neatly on various screen sizes.
Call-to-Action (CTA) - Engaging with Your Readers
The CTA section is where you can encourage readers to subscribe to your blog. We’ll include a simple subscription form to make it easy for them to stay updated.
HTML:
<section class="cta">
<h2>Stay In the Loop</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="Subscribe">
</form>
</section>
CSS (style.css):
/* CTA section styles */
.cta {
text-align: center;
background-color: #007BFF;
color: #fff;
padding: 40px;
}
/* Form styles */
form {
display: flex;
flex-direction: column;
max-width: 300px;
margin: 0 auto;
}
label {
font-weight: bold;
margin-bottom: 10px;
}
input {
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
In this section, we’ve included a clear message and a user-friendly subscription form to help readers stay updated with your blog.
Wrapping it up with a Footer
The footer is the finishing touch, providing important information about your blog.
HTML:
<footer>
<p>© 2023 Your Blog. All rights reserved.</p>
</footer>
</html>CSS (style.css):
/* Footer styles */
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px 0;
}The footer displays a copyright notice and maintains the overall design theme.
To upload your image and host your website on GitHub Pages, follow these steps:
- Create a GitHub account if you don’t have one.
- Create a new GitHub repository and name it something like “your-username.github.io,” where “your-username” is your GitHub username.
- Now, you’ll be on the repository page. Click on the “Add file” button, then select “Upload files.”
- You can either drag and drop your image files into the designated area or click on “choose your files” to browse for the image on your computer.
- Once you’ve selected your image files, scroll down to the “Commit changes” section. You can add a brief description of your commit if you like. Click the “Commit changes” button to upload your images.
- After committing the changes, your image files will be uploaded to your repository.
- To get the URL of your image, click on the image file you want to use. You’ll see your image displayed on a page. Right-click on the image and select “Copy image address” or “Copy image location” (the exact option may vary depending on your web browser). Now, you can use this URL to display the image in your HTML article.
- Commit your HTML and CSS files to the repository.
- Go to the “Settings” tab of your repository.
- Under the “GitHub Pages” section, set the source branch to “main” (or “master”).
- Your website should now be accessible at “https://your-username.github.io.”
With these HTML and CSS elements, you can create a captivating and functional blog archive page that showcases your content and invites readers to engage. Make sure to optimize your page for mobile devices and follow SEO best practices to enhance your blog’s discoverability in search engines. Happy blogging!
Click here to get the complete source code.
