index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" media = " screen and (max-width:774px" href="css/phone.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Baloo+Bhai+2&family=Bree+Serif&display=swap" rel="stylesheet">

    <title>Best online food delivery Services | myonlinemeal.com</title>
</head>
<body>
    <div class="main-relative">
    <nav id="navbar">
        <div id="logo"><img src="images/logo.jpg" alt="myonlinemeal.com logo"></div>
        <ul>
            <li class="item"><a href="#home">Home</a></li>
            <li class="item"><a  href="#services">Services</a></li>
            <li class="item"><a href="#contact">Contact us</a></li>
            <li class="item"><a href="#services">About Us</a></li>
        </ul>
    </nav>

    <section id="home">
        <h1 id="home-primary">Welcome to MyOnlineMeal</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum nihil vero labore quis iste error expedita quisquam dolorum eum corporis. ?</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum nihil vero labore quis iste error expedita ?</p>
        <button id="btn">Order Now</button>
    </section>
</div>

    <section id="section-container">
        <h1 id="section-primary">Our Services</h1>
        <div id="services">
            <div id="box">
                <img src="images/pizza.jpg" alt="">
                <h1>Food Ordering</h1>
                <p class="s-secondary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio voluptas amet ab sapiente deleniti sunt ut totam impedit aperiam veniam iure omnis minima voluptate sint nobis officia asperiores officiis laudantium provident, vitae rerum laborum.</p>
            </div>
            <div id="box">
                <img src="images/burgur.jpg" alt="">
                <h1>Food Rendering</h1>
                <p class="s-secondary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio voluptas amet ab sapiente deleniti sunt ut totam impedit aperiam veniam iure omnis minima voluptate sint nobis officia asperiores officiis laudantium provident, vitae rerum laborum.</p>
            </div>
            <div id="box">
                <img src="images/delivery.jpg" alt="">
                <h1>Customer Support</h1>
                <p class="s-secondary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio voluptas amet ab sapiente deleniti sunt ut totam impedit aperiam veniam iure omnis minima voluptate sint nobis officia asperiores officiis laudantium provident, vitae rerum laborum.</p>
            </div>
        </div>
    </section>

    <section id="client-section">
        <h1 id="client-primary">Our Clients</h1>
        <div id="clients">
            <div id="client-item"><img src="images/apple.png" alt=""></div>
            <div id="client-item"><img src="images/facebook.png" alt=""></div>
            <div id="client-item"><img src="images/instagram.jpg" alt=""></div>
            <div id="client-item"><img src="images/microsoft.png" alt=""></div>
        </div>
    </section>

    <section id="contact">
        <h1 class="h-primary">Contact Us</h1>
        <div id="contact-box">
            <form action="">
                <div class="form-group">
                    <label for="name">Name: </label>
                    <input type="text" name="name" id="name" placeholder="Enter your name" >
                </div>
                <div class="form-group">
                    <label for="Email">Email: </label>
                    <input type="email" name="name" id="email" placeholder="Enter your email" >
                </div>
                <div class="form-group">
                    <label for="Phone number">Phone number: </label>
                    <input type="phone" name="name" id="phone" placeholder="Enter your phone" >
                </div>
                <div class="form-group">
                    <label for="name">Message: </label>
                    <textarea name="message" id="messege" cols="30" rows="10"></textarea>
                </div>
            </form>
        </div>
    </section>

    <footer>
        <div class="footer">
            Copyright &copy; www.onlinemeal.com All Rights Reserved 2021
        </div>
    </footer>
</body>
</html>