Start learning

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.


Simple 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