Blog Free Templates

You can freely copy the code or you can use our free live HTML editor to modify the code according to your specific needs.

Blog website Templates

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog Template</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<header class="header">
    <div class="container">
        <h1 class="logo">My Blog</h1>
        <nav class="nav">
            <ul class="nav-links">
                <li><a href="#home">Home</a></li>
                <li><a href="#blog">Blog</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </div>
</header>

<section id="home" class="home">
    <div class="container">
        <h2 class="headline">Welcome to My Blog!</h2>
        <p class="intro">Explore my thoughts and experiences.</p>
    </div>
</section>

<section id="blog" class="blog">
    <div class="container">
        <h2 class="section-title">Latest Blog Posts</h2>

        <article class="blog-post">
            <h3 class="post-title">Post Title 1</h3>
            <p class="post-date">Date: January 1, 2023</p>
            <p class="post-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget mauris felis.</p>
        </article>

        <article class="blog-post">
            <h3 class="post-title">Post Title 2</h3>
            <p class="post-date">Date: February 15, 2023</p>
            <p class="post-content">Integer et nisi vitae turpis ultricies consequat nec eu risus.</p>
        </article>

        <!-- Add more blog posts as needed -->

    </div>
</section>

<section id="contact" class="contact">
    <div class="container">
        <h2 class="section-title">Contact Me</h2>

        <form id="contact-form" class="contact-form">
            <label for="name" class="form-label">Name:</label>
            <input type="text" id="name" name="name" class="form-input" required>

            <label for="email" class="form-label">Email:</label>
            <input type="email" id="email" name="email" class="form-input" required>

            <label for="message" class="form-label">Message:</label>
            <textarea id="message" name="message" class="form-textarea" required></textarea>

            <button type="submit" class="submit-button">Send Message</button>
        </form>
    </div>
</section>

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

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #f5f5f5;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.header {
    background-color: #2c3e50;
    color: white;
    padding: 1em 0;
}

.logo {
    font-size: 1.5em;
}

.nav {
    display: flex;
    justify-content: flex-end;
}

.nav-links {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.nav-links li {
    display: inline;
    margin-right: 20px;
}

.nav-links a {
    text-decoration: none;
    color: white;
    font-weight: bold;
}

.home {
    background-color: #3498db;
    color: white;
    padding: 100px 0;
    text-align: center;
}

.headline {
    font-size: 2.5em;
    margin-bottom: 20px;
}

.intro {
    font-size: 1.2em;
}

.blog {
    background-color: #ecf0f1;
    padding: 50px 0;
}

.section-title {
    font-size: 2em;
    margin-bottom: 20px;
}

.blog-post {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}

.post-title {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.post-date {
    color: #95a5a6;
}

.post-content {
    line-height: 1.6;
}

.contact {
    background-color: #2ecc71;
    color: white;
    padding: 50px 0;
    text-align: center;
}

.form-label {
    font-size: 1.2em;
    margin-bottom: 8px;
    display: block;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 16px;
    border: 1px solid #bdc3c7;
    border-radius: 4px;
    box-sizing: border-box;
}

.submit-button {
    background-color: #e74c3c;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.2em;
}

.submit-button:hover {
    background-color: #c0392b;
}

Preview