<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>NAVBAR Try...!</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <!-- java --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <!--Font--> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Faster+One&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <style> #header-nav{ background-color: white; border-radius: 0; border: 0; } .navbar-brand{ padding-top: 5px; padding-left: -200px; padding-right: -300px; } .navbar-brand{ font-family: 'Faster One', cursive; font-size: 1em; text-transform: uppercase; text-shadow: 1px 1px 1px; margin-top: 0; margin-bottom: 0; line-height: .75; } .navbar-brand a h1{ color: black; } .navbar-brand a:hover, .navbar-brand a:focus { text-decoration: none; } .navbar-brand p { /* Kosher cert */ color: black ; font-size: .7em; margin-top: 15px; } .navbar-brand p span { /* Star-K */ vertical-align: middle; font-family: 'Lato', sans-serif; } hr.new3 { border-top: 1px dotted red; width: 100%; } #nav-list { margin-top: 10px; } #nav-list a { color: #951C49; text-align: center; } #nav-list a:hover { background: #E7E7E7; } #nav-list a span { font-size: 1.8em; } #phone { margin-top: 5px; } #phone a { /* Phone number */ text-align: right; padding-bottom: 0; } #phone div { /* We Deliver */ color: #557c3e; text-align: right; padding-right: 15px; } .navbar-header button.navbar-toggle, .navbar-header .icon-bar { border: 1px solid #61122f; } .navbar-header button.navbar-toggle { clear: both; margin-top: -30px; } /* END HEADER */ .panel-footer section { margin-bottom: 30px; text-align: center; } .panel-footer section:nth-child(3) { margin-bottom: 500; /* margin already exists on the whole row */ } .panel-footer section hr { width: 50%; } @import url(https://fonts.googleapis.com/css?family=Lato); @import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css); body { font-family: 'Lato', sans-serif; color: #FFF; background: #322f30; -webkit-font-smoothing: antialiased; } a { text-decoration: none; color: #fff; } p > a:hover{ color: #d9d9d9; text-decoration: underline; } h1, h2, h3, h4, h5, h6 { margin: 1% 0 1% 0; } ._12 { font-size: 1.2em; } ul { padding:0; list-style: none; } .footer-social-icons { width: 350px; display:block; margin:500; } .social-icon { color: #fff; } ul.social-icons { margin-top: 10px; } .social-icons li { vertical-align: top; display: inline; height: 100px; } .social-icons a { color: #fff; text-decoration: none; } .fa-facebook { padding:10px 14px; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition: .5s; background-color: #322f30; } .fa-facebook:hover { background-color: #3d5b99; } .fa-twitter { padding:10px 12px; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition: .5s; background-color: #322f30; } .fa-twitter:hover { background-color: #00aced; } .fa-rss { padding:10px 14px; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition: .5s; background-color: #322f30; } .fa-rss:hover { background-color: #eb8231; } .fa-youtube { padding:10px 14px; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition: .5s; background-color: #322f30; } .fa-youtube:hover { background-color: #e64a41; } .fa-linkedin { padding:10px 14px; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition: .5s; background-color: #322f30; } .fa-linkedin:hover { background-color: #0073a4; } .fa-github { padding:10px 14px; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition: .5s; background-color: #322f30; } .fa-github:hover { background-color: #5a32a3; } /* End Footer */ /* Home Page */ .container .jumbotron { margin-top: 30px; padding: 0; } #menu-tile, #specials-tile { width: 360px; margin: 0 auto 15px; } </style> <body> <header> <nav id="header-nav" class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <a href="index.html" class="pull-left visible-md visible-lg"> <img src="1.png" alt="Show Light" width="125" height="100"> </a> <div class="navbar-brand"> <a href="index.html"><h1>Abhinav Sam.</h1></a> <p> <img src="3.jpg" alt="Show Light" width="50" height="50"> <span>this is my first navbar.</span> </p> </div> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="collapsable-nav" class="collapse navbar-collapse"> <ul id="nav-list" class="nav navbar-nav navbar-right"> <li> <a href="menu-categories.html"> <span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs"> Manadhe eedhi antha</a> </li> <li> <a href="#"> <span class="glyphicon glyphicon-info-sign"></span><br class="hidden-xs"> About</a> </li> <li> <a href="#"> <span class="glyphicon glyphicon-certificate"></span><br class="hidden-xs"> Awards</a> </li> <li id="phone" class="hidden-xs"> <a href="tel:410-602-5008"> <span>telephone no. 1..2..3.</span></a><div>* We Deliver</div> </li> </ul><!-- #nav-list --> <hr class="new3"></div><!-- .collapse .navbar-collapse --> </div><!-- .container --> </nav><!-- #header-nav --> </header> <footer class="panel-footer"> <div class="container"> <div class="row"> <section id="hours" class="col-sm-4"> <span>Hours:</span><br> time is important yaa...<br> temp. Closed <hr class="visible-xs"> </section> <section id="address" class="col-sm-4"> <span>Address:</span><br> okay... <p>* kannuko.</p> <hr class="visible-xs"> </section> <section id="testimonials" class="col-sm-4"> <p>"manchidhi mama"</p> </section> </div> <div class="text-center">© Abhinav Samudrala<div>Since 2002</div></div> </div> <div class="text-center"> <a href="https://twitter.com/" target="_blank"> <span class="fa fa-twitter"></span> </a> <a href="https://www.facebook.com/" target="_blank"> <span class="fa fa-facebook"></span> </a> <a href="https://www.google.com/" target="_blank"> <span class="fa fa-google"></span> </a> <a href="https://www.linkedin.com/signup/cold-join?session_redirect=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Fprofile%2Fview&trk=login_reg_redirect" target="_blank"> <span class="fa fa-linkedin"></span> </a> <a href="https://www.instagram.com/?hl=en" target="_blank"> <span class="fa fa-instagram"></span> </a> </div> </footer> </body> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </html>