HTML, CSS, and Javascript for Web Developers..

.. week 3 50% done. Lets take some notes. Here is the link to the course itself!

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>
                                &#x2022; 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:


 

Etiketler: ,