"MyHome_Banner"
Bootstrap 4.0.0 Snippet by episcore

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <div class= "banner-sektion banner-overlay "> <div class="container text-center"> <div class="col-md-12"> <div class="banner-heading "> <h2>Enjoy Food Order and dine-out </h2> <P>Find restaurants, specials, and coupons for free</P> <form class="navbar-form" role="search"> <div class="input-group"> <input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text"> <div class="input-group-btn"> <button class="btn btn-primary site-btn" type="submit"><i class="glyphicon glyphicon-search"></i></button> </div> </div> </form> </div> </div> </div> </div>
/*************************** 1. Automatic Navigation java ***************************/ /* .................. 2. Carousel ..........................*/ /* Generic CSS */ .bg-grey { border-top: 1px solid rgba(0, 0, 0, .1); border-bottom: 1px solid rgba(0, 0, 0, .1); background-color: #f5f5f5; } .bg-dgrey { border-top: 1px solid rgba(0, 0, 0, .1); border-bottom: 1px solid rgba(0, 0, 0, .1); background-color: #414551; color:#fff; } .border { background: #e8500e none repeat scroll 0 0; border-radius: 2px; display: inline-block; height: 2px; position: relative; width: 250px; margin-bottom:25px; } /* Banner CSS */ .banner-overlay { background: url("https://lh3.googleusercontent.com/OJ3UirvBgjqm7cOwPXY1eIomlmPKO9G78ncmHsr9hC5KUqouy-iAoLJ98BZjVh0eWFitDw=s170"); background-repeat: no-repeat; background-size: cover; background-position: center center; color: #fff; padding-top: 200px; padding-bottom:100px; } .banner-heading h2 { color:#fff; font-size: 42px; font-weight: 600; } .banner-heading P { color:#fff; padding-bottom:20px; font-size: 19px; font-weight: 400; } .banner-heading span p { color:#cd0e00; } input.form-control { height: 55px; background-color: #fff; color:#000; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; border: 1px solid #e9e6e0; -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075); box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075); } /* Site-Heading */ .site-heading h3 { text-transform: uppercase; font-size: 25px; margin-bottom: 17px; font-weight: 600; }

Related: See More


Questions / Comments: