.. week 3 50% done. Lets take some notes. Here is the link to the course itself!
This is using bootstrap 3!
index.html
and style.css
And a few screenshots:
This is using bootstrap 3!
index.html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Koray Tugay 's Bistro</title> <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/styles.css"> </head> <body> <header> <nav id="header-nav" class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a href="index.html" class="pull-left visible-md visible-lg"> <div id="logo-img"></div> </a> <div class="navbar-brand"> <a href="index.html"> <h1>Koray Tugay 's Bistro</h1> </a> <p> <img src="images/star-k-logo.png" alt="Kosher NOT Certified" /> <span>Kosher <strong><em>NOT</em></strong> Certified!</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><!-- navbar header --> <div id="collapsable-nav" class="collapse navbar-collapse"> <ul id="nav-list" class="nav navbar-nav navbar-right"> <li> <a href=""> <span class="glyphicon glyphicon-cutlery"></span> <br class="hidden-xs"/> Menu </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> 410-602-5008 </span> </a> <div> • We Deliver </div> </li> </ul><!-- nav list --> </div><!-- navbar collapse --> </div><!-- container --> </nav> <div class="visible-xs" id="phone-number-xs"> <span class="glyphicon glyphicon-earphone"></span> <a href="tel:410-602-5008"> <span> 410-602-5008 </span> </a> </div> <div class="text-center visible-xs" id="xs-deliver"> * We Deliver </div> </header> <script src="js/jquery-2.1.4.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
and style.css
body { font-family: 'Montserrat', sans-serif; font-size: 16px; color: #fff; background-color: #61122f; } #header-nav { background-color: orange; border-style: none; border-radius: 0; padding-top: 10px; padding-bottom: 10px; } #logo-img { background: url("../images/restaurant-logo_large.png"); background-repeat: no-repeat; width: 150px; height: 150px; } /* navbar-brand related */ .navbar-brand { padding-left: 20px; } .navbar-brand h1 { color: green; margin-top: 0; font-size: 1.5em; font-weight: bold; text-shadow: 1px 1px 1px black; text-transform: uppercase; } .navbar-brand a:hover, .navbar-brand a:focus { text-decoration: none; } .navbar-brand p { /* Kosher cert */ color: #000; text-transform: uppercase; font-size: .7em; margin-top: 15px; } .navbar-brand p span { /* Star-K */ vertical-align: middle; } /* end navbar-brand related */ /* This is for making the button on top right maroonish.. */ .navbar-header button.navbar-toggle, .navbar-header .icon-bar { border: 1px; border-style: solid; border-color: maroon; } .navbar-header button.navbar-toggle { margin-top: -80px; clear:both; } /* nav-list related */ #nav-list { margin-top: 10px; } #nav-list a { color: maroon; text-align: center; } #nav-list a:hover { background: beige; } #nav-list a span { font-size: 1.2em; } /* end nav-list related */ #phone a { text-align: right; padding-bottom: 0px; } #phone div { color: green; text-align: right; padding-right: 15px; } /* Large devices only */ @media (min-width: 1200px) { } /* Medium devices only */ @media (min-width: 992px) and (max-width: 1199px) { #logo-img { background: url("../images/restaurant-logo_medium.png"); background-repeat: no-repeat; width: 100px; height: 100px; margin: 5px 5px 5px 0; } } /* Small devices only */ @media (min-width: 768px) and (max-width: 991px) { .navbar-brand h1 { font-size: 1.25em; } } /* Extra small devices only */ @media (max-width: 767px) { .navbar-brand { height: 100px; } .navbar-brand h1 { /* Restaurant name */ font-size: 5vw; } .navbar-brand p { /* Kosher text */ font-size: 10px; } .navbar-brand p img { /* Star image */ height: 20px; } #collapsable-nav a { /* Menu items */ font-size: 1.2em; } #collapsable-nav a span { /* Menu items - icons only */ font-size: 1em; margin: 5px; } #phone-number-xs { margin: 10px; border: 2px solid white; padding: 15px; background-color: orange; color: maroon; font-size: 1.5em; text-decoration: none; text-align: center; } #phone-number-xs span { color: maroon; } #phone-number-xs a:hover { text-decoration: none; } #phone-number-xs a:focus { text-decoration: none; } }
And a few screenshots: