Tutorial membuat website sederhana namun sudah responsive

Diposting oleh
Assalamu’alaikum…
  hay sobat kembali lagi bersama saya. kali ini saya mau membagi ilmu yang merupakan masih dasar ini, apakah itu? saya mencoba membuat web makan jawa dan mengapa saya memilih tema itu karena orang temanggung suka dengan makanan .hehehe ,saya mengerjakan web ini selama 2 hari tapi ini belum begitu sempurna cuman bagian depannya saja
nah ini contoh web dinamis namun sudah responsive  :
  • Hasilnya Seperti ini :

 
 nih gans skripnya :
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <title>Web makan Jawa  </title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  8.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  9.   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  10.   <meta name="viewport" content="width=device-width, initial-scale=1">
  11.   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  12.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  13.   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  14.   <meta name="viewport" content="width=device-width, initial-scale=1">
  15. <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
  16. <meta name="viewport" content="width=device-width, initial-scale=1">
  17. <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
  18. <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
  19.   <style>
  20.     /* Remove the navbar's default margin-bottom and rounded borders */
  21.     .navbar {
  22.       margin-bottom: 0;
  23.       border-radius: 0;
  24.     }
  25.     /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
  26.     .row.content {height: 450px}
  27.    
  28.     /* Set gray background color and 100% height */
  29.     .sidenav {
  30.       padding-top: 20px;
  31.       background-color: #0943;
  32.       height: 100%;
  33.     }
  34.     /* Set black background color, white text and some padding */
  35.     footer {
  36.       background-color: #555;
  37.       color: white;
  38.       padding: 15px;
  39.     }  
  40.     /* On small screens, set height to 'auto' for sidenav and grid */
  41.     @media screen and (max-width: 767px) {
  42.       .sidenav {
  43.         height: auto;
  44.         padding: 15px;
  45.       }
  46.       .row.content {height:auto;}
  47.     }
  48.     .carousel-inner > .item > img,
  49.   .carousel-inner > .item > a > img {
  50.       width: 50%;
  51.       margin: auto;
  52.       position:center center;
  53.   }
  54.  .container {
  55.     position: relative;
  56.     position:center center;
  57. }
  58. .center {
  59.     position: absolute;
  60.     left: 0;
  61.     top: 50%;
  62.     width: 100%;
  63.     text-align: center;
  64.     font-size: 18px;
  65. }
  66.  </style>
  67. </head>
  68. <body>
  69. <nav class="navbar navbar-inverse">
  70.   <div class="container-fluid">
  71.     <div class="navbar-header">
  72.       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
  73.         <span class="icon-bar"></span>
  74.         <span class="icon-bar"></span>
  75.         <span class="icon-bar"></span>                       
  76.        </button>
  77.       <a class="navbar-brand" href="#">Makanan Populer</a>
  78.       <ul id="navlist">
  79.   <li id="home"><a href="default.asp"></a></li>
  80.     </div>
  81.     <div class="collapse navbar-collapse" id="myNavbar">
  82.       <ul class="nav navbar-nav">
  83.          <ul class="w3-navbar w3-light-grey w3-small w3-border">
  84.             <li class="active">
  85.             <a class="w3-green" href="#"><i class="fa fa-home w3-small">Home</i></a></li>
  86.         <li><a href="#"><i class="fa fa-search w3-small">cari</i></a></li>
  87.         <li><a href="#"><i class="fa fa-envelope w3-small">pesan</i></a></li>
  88.         <li><a href="#"><i class="fa fa-whatsapp">Contact</i></a></li>
  89.          <li><a href="#"><i class="fa fa-car"></i></a></l>
  90.         <li><a href="./login.php"><span class="glyphicon glyphicon-log-in"></span> login</a></li>
  91.       </ul>
  92.     </div>
  93.   </div>
  94. </nav>
  95. <div class="container-fluid text-center">   
  96.   <div class="row content">
  97.     <div class="col-sm-2 sidenav">
  98. </div>
  99.    <div class="col-sm-8 text-left">
  100.        <h1><center></center></h1>
  101.           <p><center> makanan Jawa </p>
  102.       <div class="w3-container w3-section">
  103. <div class="w3-tag w3- w3-red">T</div>
  104. <div class="w3-tag w3-">e</div>
  105. <div class="w3-tag w3- w3-yellow">m</div>
  106. <div class="w3-tag w3-">a</div>
  107. <div class="w3-tag w3- w3-red">n</div>
  108. <div class="w3-tag w3-">g</div>
  109. <div class="w3-tag w3- w3-yellow">g</div>
  110. <div class="w3-tag w3-">u</div>
  111. <div class="w3-tag w3- w3-red">n</div>
  112. <div class="w3-tag w3-">g</div>
  113.   </center>
  114.       <p><center>Serba ada diwiyalah indonesia</center></p>
  115.       <p><marquee >dan makanan ini memliki kas dari jawa se-indonesia </marquee></p>
  116.       <hr>
  117.          <h3>
  118.       </h3>
  119.   <p>
  120. <div class="container-img-center">
  121.   <br>
  122.   <div id="myCarousel" class="carousel slide" data-ride="carousel">
  123.     <!-- Indicators -->
  124.     <ol class="carousel-indicators">
  125.       <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  126.       <li data-target="#myCarousel" data-slide-to="1"></li>
  127.       <li data-target="#myCarousel" data-slide-to="2"></li>
  128.       <li data-target="#myCarousel" data-slide-to="3"></li>
  129.     </ol>
  130.     <!-- Wrapper for slides -->
  131.     <div class="carousel-inner" role="listbox">
  132.       <div class="item active">
  133.         <img src="mk8.png" alt="makanan" width="20" height="24">
  134.       </div>
  135.       <div class="item">
  136.         <img src="mk1.png" alt="makanan" width="10" height="14">
  137.       </div>
  138.       <div class="item">
  139.         <img src="mk1.png" alt="Flower" width="460" height="345">
  140.       </div>
  141.       <div class="item">
  142.         <img src="mk8.png" alt="Flower" width="460" height="345">     
  143.         </div>
  144.     </div>  
  145. </div>
  146. </div>
  147. </p>
  148. <div class="container">
  149. <div class="header"><h1 class="header">Warung-makan.com</h1></div>
  150. </div>
  151. <footer class="container-fluid text-center">
  152. <p>copy@2017</p>
  153. </footer>
  154. </body>
  155. </html>
*catatan : silahkan kalian kembangkan Sendiri
sekian teman tunggu selajutnya lagi ..
Semoga bermanfaat bagi kalian kawan ....
perkenalkan nama saya husnulbudiawan saya seorang CEO disini dan saya punya keingian kuat era kedepan

Komentar

Posting Komentar