Start learning

Services 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 Services website Templates

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

Preview