"Restaurant Demo Website Design"
Bootstrap 4.0.0 Snippet by bulbul1

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE HTML> <html lang="en-US"> <head> <title>BD Restaurant</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" media="all" /> <link rel="stylesheet" href="css/custom.css" /> <link rel="stylesheet" href="css/all.min.css" /> <link rel="stylesheet" href="css/fontawesome.min.css" /> <script src="js/jquery-3.5.1.min.js"> </script> <script src="main.js"> </script> <script src="js/jquery-slim.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"> </script> </head> <body> <div class="hero"> <div class="nav-bar"> <div class="nav-logo"> <img src="img/r2.png" alt="Logo" title="ShapeHouse"/> </div> <div class="nav-links" id="nav-links"> <i class="fas fa-times"onclick="closeMenu()"></i> <ul> <a href="#"><li>Home</li></a> <a href="#"><li>About</li></a> <a href="#"><li>Recipe</li></a> <a href="#"><li>Contact</li></a> </ul> <button class="btn btn-warning"><b>Sign Up</b></button> </div> <i class="fas fa-bars"onclick="showMenu()"></i> </div> <div class="banner-title"> <h1>Good <span>Food, Good Health<br>Food Doesn't</span> Have a Religion</br></h1> <button class="btn btn-warning"><b>Explore</b></button> </div> <div class="vertical-bar"> <div class="search-icon"> <i class="fas fa-list-alt"></i> <i class="fas fa-search"></i> </div> <div class="social-icons"> <i class="fab fa-facebook-square"></i> <i class="fab fa-behance-square"></i> <i class="fab fa-linkedin"></i> <i class="fab fa-twitter-square"></i> </div> </div> </div> <script> var show= document.getElementById("nav-links"); function showMenu(){ show.style.right="0"; } function closeMenu(){ show.style.right="-200px"; } </script> </body> </html>
*{margin:0; padding:0; font-family:roboto; } .hero{height:100vh; background-image:linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)),url(../img/hamburger.jpg); background-position:center; background-size:cover; overflow-x:hidden; position:relative; } .nav-bar{ display:flex; padding:10px 90px; } .nav-logo img{width:90px; } .nav-links{flex:1; } .nav-links ul{margin-left:50px; display:inline; } .nav-links ul li{list-style:none; display:inline-block; padding:8px 25px; } .nav-links ul a{color:white; text-decoration:none; font-size:16px; } .nav-links ul li::after{content:''; width:0; height:2px; background:yellow; display:block; margin:auto; transition:1s; } .nav-links ul li:hover::after{width:100%;} .nav-links .btn{float:right; } .banner-title{margin:80px 130px; color:white; } .banner-title h1{font-size:64px; margin-bottom:30px; } .banner-title h1 span{color:yellow;} .vertical-bar{height:100%; background:#000; top:0px; left:0px; position:absolute; } .search-icon{height:60%; width:80px; } .search-icon .fas{margin:45px 23px; display:block; color:#fff; font-size:30px; cursor:pointer; } .social-icons{height:35%; width:80px; background:yellow; text-align:center; padding-top:15%; bottom:0px; position:absolute; } .social-icons .fab{margin:15px 23px; display:block; padding:8px; border:1px solid #000; border-radius:50%; cursor:pointer; color:black; } .nav-bar .fas{display:none;} @media(max-width:700px){ .vertical-bar{ display:none; } .banner-title{margin:80px 40px; } .banner-title h1{font-size:35px; } .nav-bar{ padding:10px 30px; } .fas-bars{ position:absolute; right:20px; top:10px; } .nav-bar .fas{display:block; color:#ffff; margin:10px 25px; font-size:22px; cursor:pointer; } .nav-links{height:100vh; width:200px; background:#000; top:0; right:-200px; position:absolute; text-align:left; z-index:2; transition:0.5s; } .nav-links ul a{display:block; } .nav-links .btn{float:none; margin-left:25px; margin-top:10px; } }

Related: See More

Vue Argon Design System
Bootstrap 4 Footer Design
Bootstrap Dual Design Registration Form
Team Design Section with Pure CSS Effect

Questions / Comments: