<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> <nav class="navbar navbar-expand-sm bg-light navbar-light border fixed-top"> <div class="container"> <!-- Brand --> <a class="navbar-brand" href="#"> <img src="http://sarto.edge-themes.com/wp-content/uploads/2018/04/landing-img-18.png" alt="Logo" style="width:70px;"> </a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#">Order Food</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Menu</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Super Saver</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Corporate Offer</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Students</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Couple</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Society</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Parties</a> </li> </ul> </div> </div> </nav> <section class="bg-family py-5 mt-5" id="banner"> <div class="container py-5 my-5"> <div class="row text-center"> <div class="col-md-12"> <h1 class="display-4">Any bahana. Khao Khana</h1> <p style="color:white !important; font-style: italic;">Order food from the Family story. Ghar jaisa swad</p> </div> </div> <div class="row mt-2"> <div class="col-md-6 offset-md-3"> <button type="button" class="btn btn-2 btn-block"><h1>DIAL : 9988774455</h1></button> </div> </div> </div> </section> <section class="option1 py-4" id="option1"> <div class="container py-2"> <div class="row"> <div class="col-md-7"> <div class="pb-5 mb-5"></div> <h1 class="display-4">Ek baar Chakh to lo.</h1> <p>Order from your favorite restaurants & track on the go, with the all-new Swiggy app.</p> <p>Tera kya jayega be order karne me.</p> <button type="button" class="btn btn-warning">Get More Details</button> </div> <div class="col-md-5"> <img style ="max-height:400px !important" src="https://cdn.clipart.email/f2d4ef93c85d520b6055e85ec8cf239d_indian-cuisine-cooking-recipe-clip-art-housewife-images-588846-_588-846.png"alt=""> </div> </div> </div> </section> <section class="aboutus bg-family2 py-5" id="aboutus"> <div class="container py-5 text-center"> <div class="row"> <div class="col-md-12"> <h2>How it works</h2> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration, by injected humour, or new randomised words.</p> </div> </div> <div class="row pt-4"> <div class="col-md-4"> <i class="fa fa-search fa-3x "></i> <h5 class="py-3">No Minimum Order</h5> <p>Order in for yourself or for the group, with no restrictions on order value </p> </div> <div class="col-md-4"> <i class="fa fa-search fa-3x "></i> <h5 class="py-3">Live Order Tracking</h5> <p>Know where your order is at all times, from the restaurant to your doorstep </p> </div> <div class="col-md-4"> <i class="fa fa-search fa-3x "></i> <h5 class="py-3">Lightning-Fast Delivery </h5> <p>Experience Swiggy's superfast delivery for food delivered fresh & on time </p> </div> </div> </div> </section>

.bg-family {background: #041137; color:#DAA520 !important;} .bg-family2 {background: linear-gradient(to top, #ffcc99 0%, #ffff99 100%);} img {width:100%;} .btn-2 { background: linear-gradient(to top, #ffcc99 0%, #ffff99 100%); } .btn-2:hover { background-position: right center; /* change the direction of the change here */ background: linear-gradient(to top, #ffcc66 0%, #ffff99 100%); box-shadow: 0 5px 15px rgba(145, 92, 182, .4); }