ابدأ التعلم

قوالب الخدمات المجانية

يمكنك نسخ الكود بحرية أو استخدام خدمتنا المجانية البرمجة المباشرة لتعديل الكود وفقًا لاحتياجاتك الخاصة.


قوالب مواقع الويب البسيطة للخدمات

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

معاينة