Untitled

<!DOCTYPE html>
<html>

<head>
    <title>blank html</title>
    <!-- Latest compiled and minified CSS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="style.css" type="text/css" rel="stylesheet" />
</head>

<body style="margin: 50px;">
    <div class="stuff">
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">WebSiteName</a>
                </div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Page 1</a></li>
                    <li><a href="#">Page 2</a></li>
                    <li><a href="#">Page 3</a></li>
                </ul>
            </div>
        </nav>

        <div class="container">
            <h3>Basic Navbar Example</h3>
            <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
        </div>
    </div>
    <div class="stuff">
        <div style="margin: 50px;">
            <button type="button" class="btn">Basic</button>
            <button type="button" class="btn btn-default">Default</button>
            <button type="button" class="btn btn-primary">Primary</button>
            <button type="button" class="btn btn-success">Success</button>
            <button type="button" class="btn-xxl btn-info">Info</button>
            <button type="button" class="btn btn-warning">Warning</button>
            <button type="button" class="btn btn-danger">Danger</button>
            <button type="button" class="btn btn-link">Link</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-primary">Apple</button>
            <button type="button" class="btn btn-primary">Samsung</button>
            <button type="button" class="btn btn-primary">Sony</button>
        </div>
        <div class="btn-group btn-group-lg">
            <button type="button" class="btn btn-primary">Apple</button>
            <button type="button" class="btn btn-primary">Samsung</button>
            <button type="button" class="btn btn-primary">Sony</button>
        </div>
        <div class="btn-group-vertical">
            <button type="button" class="btn btn-primary">Apple</button>
            <button type="button" class="btn btn-primary">Samsung</button>
            <button type="button" class="btn btn-primary">Sony</button>
        </div>
        <div class="btn-group btn-group-justified">
            <a href="#" class="btn btn-primary">Apple</a>
            <a href="#" class="btn btn-primary">Samsung</a>
            <a href="#" class="btn btn-primary">Sony</a>
        </div>
        <div>
            <h1><span class="label-danger">Moo</span></h1>
        </div>

        <div class="container">
            <h2>Dropdowns</h2>
            <p>The .dropdown class is used to indicate a dropdown menu.</p>
            <p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
            <p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>
            <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                Dropdown Example
                <span class="caret"></span>
            </button>
                <ul class="dropdown-menu">
                    <li><a href="#">HTML</a></li>
                    <li><a href="#">CSS</a></li>
                    <li><a href="#">JavaScript</a></li>
                </ul>
            </div>
        </div>

        <div>
            <img src="http://improvephotography.com/wp-content/uploads/2015/05/riomaggiore-italy-cinque-terre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">
        </div>

        <div>
            <ul class="list-group">
                <li class="list-group-item"><span>News</span> <span class="badge">5</span></li>
                <li class="list-group-item"><span>News</span> <span class="badge">5</span></li>
                <li class="list-group-item"><span>shfghfhfs</span> <span class="badge">5</span></li>
            </ul>
        </div>

        <div class="list-group">
            <a class="list-group-item"><span>News</span> <span class="badge">5</span></a>
            <a class="list-group-item"><span>News</span> <span class="badge">5</span></a>
            <a class="list-group-item"><span>shfghfhfs</span> <span class="badge">5</span></a>
        </div>

        <p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
        <p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
        <p>Print icon: <span class="glyphicon glyphicon-print"></span></p>

        <div class="container">
            <h2>Form control: input</h2>
            <p>The form below contains two input elements; one of type text and one of type password:</p>
            <form>
                <div class="form-group">
                    <label for="usr">Name:</label>
                    <input type="text" class="form-control" id="usr">
                </div>
                <div class="form-group">
                    <label for="pwd">Password:</label>
                    <input type="password" class="form-control" id="pwd">
                </div>
            </form>
        </div>
        <br>
        <div>
            <nav>
                <ul class="nav nav-tabs">
                    <li><a class="active">ggg</a></li>
                    <li><a class="active">ggg</a></li>
                    <li><a class="active">ggg</a></li>
                    <li><a class="active">ggg</a></li>

                </ul>
            </nav>
            <br>
            <nav>
                <ul class="nav nav-pills nav-stacked">
                    <li><a class="active">ggg</a></li>
                    <li><a class="active">ggg</a></li>
                    <li><a class="active">ggg</a></li>
                    <li><a class="active">ggg</a></li>

                </ul>
            </nav>
        </div>
        <br>
    </div>
    <div class="stuff">
        <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li><a href="index.php">Home</a></li>
                        <li><a href="about.php">About</a></li>
                        <li><a href="#portfolio">Portfolio</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="contact.php">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
    <table class="table table-hover">
        <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
        </tr>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
        </tr>
        <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
        </tr>
        <tr>
            <td>Ernst Handel</td>
            <td>Roland Mendel</td>
            <td>Austria</td>
        </tr>
        <tr>
            <td>Island Trading</td>
            <td>Helen Bennett</td>
            <td>UK</td>
        </tr>
        <tr>
            <td>Laughing Bacchus Winecellars</td>
            <td>Yoshi Tannamuri</td>
            <td>Canada</td>
        </tr>
        <tr>
            <td>Magazzini Alimentari Riuniti</td>
            <td>Giovanni Rovelli</td>
            <td>Italy</td>
        </tr>
    </table>
</body>

</html>