Untitled

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
          <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
        @media screen and (max-width: 640px){
            #top_menu{
                display: none;
            }
            #drop_menu{
                display: block;
                background-color: black;
                color: white;
                border: 1px solid white;
                float: right;
            }
        }

        @media screen and (min-width: 641px){
            #drop_menu{
                display: none;
            }
        }

        nav{
            margin-bottom: 0 !important;
        }

        .categories{
            float: left;
        }

        main div{
            display: inline-block;
            border: 1px black solid;
        }
        </style>


        <script type="text/javascript">
            $(document).ready(function(){
                $('#drop_menu').click(function(){
                    $('#top_menu').toggle('slow');
                });
            });
        </script>
    </head>
    <body>
    <header>
    <!--Top menu-->
        <nav class="navbar navbar-inverse">
          <div class="container-fluid">
            <div class="navbar-header">
              <a class="navbar-brand col-lg-offset-2" href="#">My Blog</a>
              <button class="btn navbar-brand navbar-right" id="drop_menu">Menu</button>
            </div>
            <ul class="nav navbar-nav navbar-right" id="top_menu">
              <li><a href="#">Home</a></li>
              <li><a href="#">Posts</a></li>
              <li><a href="#">New post</a></li>
              <li><a href="#">Contact us</a></li>
              <li><a href="#">Account</a></li>
            </ul>
          </div>
        </nav>
        <img src="image.jpg" class="img-responsive" style="margin: auto;">
    </header>
    <main>
        <div class="categories col-xs-6 col-xs-offset-3 col-md-3 col-md-offset-1 col-lg-3 col-lg-offset-1 col-sm-offset-1 col-sm-3">
            <p>Here will be catgories</p>
        </div>
        <div class="col-lg-4 col-md-4 col-xs-6 col-xs-offset-3 col-sm-4">
            <p>This is post_area</p>
        </div>

        <div class="col-lg-3 col-md-3 col-xs-offset-3 col-xs-6 col-sm-3 col-sm-offset-0">
            <p>Here I will put some newest posts</p>
        </div>

        </main>
    </body>
</html>