Accueil

Modèles de blog gratuits

Vous pouvez librement copier le code ou utiliser notre éditeur HTML en direct pour modifier le code selon vos besoins spécifiques.


Modèles de sites web simples pour blogs

<!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;
}

Aperçu