Lab08.html



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <title>Lab08</title>
      
    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/bootstrap-theme.css" />

</head>

<body>

        <header>
        <div class="topHeaderRow">
            <div class="container">
                <div class="pull-right">
                    <ul class="list-inline">
                        <li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Profile</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-star"></span> Favorites</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- end topHeaderRow -->


        <nav class="navbar navbar-default ">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
                    <a class="navbar-brand" href="#">Share Your Travels</a>
                </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 navbar-left">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Browse <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Countries</a></li>
                                <li><a href="#">Images</a></li>
                                <li><a href="#">Posts</a></li>
                            </ul>
                        </li>
                    </ul>


                    <form class="navbar-form navbar-right" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                </div>
                <!-- /.navbar-collapse -->


            </div>
            <!-- /.container-fluid -->
        </nav>
    </header>
    <!-- Page Content -->
    <main class="container">
        <div class="row">
                        <aside class="col-md-2">
                <div class="panel panel-info">
                    <div class="panel-heading">Continents</div>
                    <ul class="list-group">
                        <li class="list-group-item"><a href="#">Africa</a></li>
                        <li class="list-group-item"><a href="#">Asia</a></li>
                        <li class="list-group-item"><a href="#">Europe</a></li>
                        <li class="list-group-item"><a href="#">North America</a></li>
                        <li class="list-group-item"><a href="#">South America</a></li>
                    </ul>
                </div>
                <!-- end continents panel -->

                <div class="panel panel-info">
                    <div class="panel-heading">Popular</div>
                    <ul class="list-group">
                        <li class="list-group-item"><a href="#">Canada</a></li>
                        <li class="list-group-item"><a href="#">France</a></li>
                        <li class="list-group-item"><a href="#">Italy</a></li>
                        <li class="list-group-item"><a href="#">Germany</a></li>
                        <li class="list-group-item"><a href="#">Ghana</a></li>
                        <li class="list-group-item"><a href="#">Greece</a></li>
                        <li class="list-group-item"><a href="#">Hungary</a></li>
                        <li class="list-group-item"><a href="#">Spain</a></li>
                        <li class="list-group-item"><a href="#">United States</a></li>
                        <li class="list-group-item"><a href="#">United Kingdom</a></li>
                    </ul>
                </div>
                <!-- end continents panel -->
            </aside>            <div class="col-md-10">

                <div class="jumbotron" id="postJumbo">
                    <h1>Posts</h1>
                    <p>Read other travellers' posts ... or create your own.</p>
                    <p><a class="btn btn-warning btn-lg">Learn more &raquo;</a></p>
                </div>        
      
                <!-- start post summaries -->
                <div class="postlist">

                    <!-- replace each of these rows with a function call -->
                    <div class="row"><div class="col-md-4"><a href="post.php?id=1" class=""><img src="images/8710320515.jpg" alt="Ekklisia Agii Isidori Church" class="img-responsive"/></a></div><div class="col-md-8"> <h2>Ekklisia Agii Isidori Church</h2><div class="details">Posted by <a href="user.php?id=2" class="">Leonie Kohler</a><span class="pull-right">2/8/2017</span><p class="ratings"><img src="images/star-gold.svg" width="16" /><img src="images/star-gold.svg" width="16" /><img src="images/star-gold.svg" width="16" /><img src="images/star-white.svg" width="16" /><img src="images/star-white.svg" width="16" /> 15 Reviews</p></div><p class="excerpt">At the end of the hot climb up to the top Lycabettus Hill you are greeted with the oasis that is the Ekklisia Agii Isidori church.</p><p><a href="post.php?id=1" class="btn btn-primary btn-sm">Read more</a></p></div></div><hr/><div class="row"><div class="col-md-4"><a href="post.php?id=3" class=""><img src="images/8710247776.jpg" alt="Santorini Sunset" class="img-responsive"/></a></div><div class="col-md-8"> <h2>Santorini Sunset</h2><div class="details">Posted by <a href="user.php?id=5" class="">Frantisek  Wichterlova</a><span class="pull-right">9/9/2017</span><p class="ratings"><img src="images/star-gold.svg" width="16" /><img src="images/star-gold.svg" width="16" /><img src="images/star-gold.svg" width="16" /><img src="images/star-gold.svg" width="16" /><img src="images/star-gold.svg" width="16" /> 38 Reviews</p></div><p class="excerpt">Every evening as the sun sets in Fira, it seems that everyone who is not drinking or eating is rushing with their camera to the most picturesque locations in order to capture that famous Aegean sunset.</p><p><a href="post.php?id=3" class="btn btn-primary btn-sm">Read more</a></p></div></div><hr/><div class="row"><div class="col-md-4"><a href="post.php?id=9" class=""><img src="images/8710289254.jpg" alt="Looking towards Fira" class="img-responsive"/></a></div><div class="col-md-8"> <h2>Looking towards Fira</h2><div class="details">Posted by <a href="user.php?id=13" class="">Edward Francis</a><span class="pull-right">10/19/2017</span><p class="ratings"><img src="images/star-gold.svg" width="16" /><img src="images/star-gold.svg" width="16" /><img src="images/star-white.svg" width="16" /><img src="images/star-white.svg" width="16" /><img src="images/star-white.svg" width="16" /> 3 Reviews</p></div><p class="excerpt">The steamer Mongolia, belonging to the Peninsular and Oriental Company, built of iron, of two thousand eight hundred tons burden, and five hundred horse-power, was due at eleven o'clock a.m. on Wednesday, the 9th of October, at Suez.</p><p><a href="post.php?id=9" class="btn btn-primary btn-sm">Read more</a></p></div></div><hr/>
                </div>  <!-- end post list -->
            </div>  <!-- end col-mid-10 -->
        </div>  <!-- end row -->
    </main>
    

        <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>

</html>