Accueil

Modèles de services 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 services

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Restaurant Template</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
    <aside id="sidebar">
        <h2>Menu</h2>
        <ul class="nav-links">
            <li><a href="#home">Home</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </aside>

    <main>
        <header>
            <h1>Daily Life Services</h1>
        </header>

        <section id="home">
            <h2>Welcome to Daily Life Services!</h2>
            <p>Explore our range of services to make your daily life easier.</p>
        </section>

        <section id="services">
            <h2>Our Services</h2>

            <div class="service">
                <h3>House Cleaning</h3>
                <p>Description: Professional cleaning services for your home.</p>
            </div>

            <div class="service">
                <h3>Grocery Shopping</h3>
                <p>Description: We'll handle your grocery shopping for you.</p>
            </div>

            <div class="service">
                <h3>Pet Walking</h3>
                <p>Description: Let us take your furry friend for a walk.</p>
            </div>

            <!-- Add more services as needed -->

        </section>

        <section id="contact">
            <h2>Contact Us</h2>

            <form id="contact-form">
                <label for="service">Select Service:</label>
                <select id="service" name="service" required>
                    <option value="House Cleaning">House Cleaning</option>
                    <option value="Grocery Shopping">Grocery Shopping</option>
                    <option value="Pet Walking">Pet Walking</option>
                    <!-- Add options for additional services -->
                </select>

                <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>

                <button type="submit">Submit Request</button>
            </form>
        </section>
    </main>
</div>

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

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    display: flex;
}

#sidebar {
    width: 20%;
    background-color: #333;
    color: white;
    padding: 20px;
}

#sidebar h2 {
    margin-bottom: 20px;
}

main {
    width: 80%;
    padding: 20px;
}

header {
    background-color: #333;
    color: white;
    padding: 1em;
    text-align: center;
}

nav {
    display: flex;
    justify-content: center;
}

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

.nav-links li {
    margin-bottom: 10px;
}

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

section {
    padding: 20px;
    text-align: center;
}

#services .service {
    border: 1px solid #ddd;
    padding: 10px;
    margin: 10px;
}

form {
    display: flex;
    flex-direction: column;
    max-width: 400px;
    margin: 0 auto;
}

label {
    margin-bottom: 8px;
}

input,
select {
    padding: 8px;
    margin-bottom: 16px;
}

button {
    padding: 10px;
    background-color: #333;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #555;
}

Aperçu