"Restaurant"
Bootstrap 3.3.0 Snippet by apolyse

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <link href="restaurant.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script> <script src="controls.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-8 col-md-8 col-xs-12 no-padding"> <div class="restaurant-table"> <h1> <div class="row"> <div class="col-sm-2 col-md-2 col-xs-2"><img src='https://www.deliveryup.com/editable/images/logos/front/22.jpg' class = "logo-small" /></div> <div class="col-sm-10 col-md-10 col-xs-10 "> 805 Kabob <label class="restaurant-desc">Closes today at 11:45 PM</label> </div> </div> </h1> <h3><div><span class="radio" id="delivery">Delivery</span><span class="radio" id="takeout">Takeout</span></h3> <ul> <li> <label>Mini Plate</label> <label class="desc">Your choice of 1 item and 3 sides.</label> </li> <li> <label>Regular Plate</label> <label class="desc">Your choice of 2 item and 3 sides.</label> </li> <li> <label>Pita Wrap</label> <label class="desc">Authentic Pita wrap.</label> </li> <li> <label>Salad</label> <label class="desc">Mediterranean salad.</label> </li> <li> <label>Pita Bowl</label> <label class="desc">Pita wrap in a bowl.</label> </li> <li> <label>Burger</label> <label class="desc">Mediterranean-style burger.</label> </li> </ul> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-4"> <div class="panel cart"> <div class="panel-heading"> <div class="panel-title"> <div class="row"> <div class="col-xs-6"> <h5><span class="glyphicon glyphicon-shopping-cart"></span> Cart</h5> </div> </div> </div> </div> <div class="panel-body"> <div class="row"> <div class="col-xs-6"> <h4 class="product-name"><strong>Product name</strong></h4><h4><small>Product description</small></h4> </div> <div class="col-xs-6"> <div class="col-xs-6 text-right"> <h6><strong>$50.00</strong></h6> </div> <div class="col-xs-6"> <input type="text" class="form-control" value="1"> </div> <div class="col-xs-1"> <button type="button" class="btn btn-link btn-xs"> <span class="glyphicon glyphicon-trash"></span> Delete Item </button> </div> </div> </div> <hr class="checkout-hr-border"> <div class="row"> <div class="text-center"> <div class="col-xs-9"> <h6 class="text-right">Subtotal</h6> <h6 class="text-right">Tax</h6> <h6 class="text-right">Delivery Fee</h6> <h6 class="text-right">Gratuity for the Driver</h6> </div> <div class="col-xs-3"> <h6 class="text-left">$50.00</h6> <h6 class="text-left">$4.75</h6> <h6 class="text-left">$3.95</h6> <h6 class="text-left">$5.00</h6> </div> </div> </div> </div> <div class="panel-footer cart-footer"> <div class="row"> <div class="col-xs-12 col-md-12 col-sm-12"> <h4 class="text-right">Total <strong>$50.00</strong></h4> </div> </div> <div class="row text-center"> <div class="col-xs-12 col-sm-12 col-md-12"> <button type="button" class="btn btn-block checkout"> Submit Order </button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>
li{ list-style:none; } h1{ font-size:21px !important; } .container{ padding: 15px 15px; } span.radio { display: inline; cursor: pointer; margin: 5px; padding: 15px; border-radius: 3px; color: #4c493f; } label.desc { font-size:12px; color: #777774; cursor: pointer; font-weight: 200; } label.restaurant-desc { font-size: 11px; margin-top: 10px; font-weight: 200; } .type-table li { color: #ff7200; font-size: 14px; padding: 4px 4px; } .type-table li:hover{ background: #f7eedc; border-radius: 8px; cursor:pointer; -webkit-transition: all .35s; -moz-transition: all .35s; transition: all .35s; } .restaurant-table li { background: #fcf0de none repeat scroll 0 0; border-left: 2px solid #fca037; border-right: 2px solid #fca037; border-bottom: 2px solid #fca037; color: #4c493f; cursor: pointer; font-size: 16px; padding: 15px 24px; } .restaurant-table li:hover{ background: #ffd089; cursor:pointer; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 0 30px 0 rgba(0, 0, 0, 0.19); -webkit-transition: all .35s; -moz-transition: all .35s; transition: all .35s; } .restaurant-table h1{ background: #ffeac9 none repeat scroll 0 0; color: #4c493f; border-left: 2px solid #fca037; border-top: 2px solid #fca037; border-right: 2px solid #fca037; border-bottom: 2px solid #fca037; font-weight: 400; margin: 0; padding: 19px 21px; text-transform: uppercase; } .restaurant-table h3{ font-size:14px; background: #ffeac9 none repeat scroll 0 0; color: #4c493f; border-left: 2px solid #fca037; border-right: 2px solid #fca037; border-bottom: 2px solid #fca037; font-weight: 400; margin: 0; padding: 19px 21px; text-transform: uppercase; } .restaurant-table h1 { border-top-left-radius: 10px; border-top-right-radius: 10px; text-align:left; } img.logo-small{ border-style:double; border-width: 1px; border-color: gray; width: 85%; } .checkout{ background: #ffab35; } .checkout:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 0 3px 0 rgba(0, 0, 0, 0.19); -webkit-transition: all .35s; -moz-transition: all .35s; transition: all .35s; } .checkout:active { background: #ffd089; } .cart{ background: #fcf0de; border: 2px solid #fca037; margin-left: 20px; position:fixed; width: 28%; } .checkout-hr-border{ color: #fca037; background: #fca037; } .cart-footer{ background: #ffeac9; } .panel-heading{ background: #ffeac9; } .fa.fa-check { color: #2cc14f; } .fa.fa-times { color: #BA5340; } .fa{ font-size:30px; } label{ display: block; cursor: pointer; } .no-padding{ padding:0; } ul{ padding:0; } body { background: #fffcf2; }
$(document).ready(function(){ $('.radio').first().css('background-color', '#ffab35'); $('.radio').click(function(){ $(".radio").css('background-color', 'transparent') $(this).css('background-color', '#ffab35'); }); });

Related: See More


Questions / Comments: