<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8" /> <title>FaZeBook</title> <!-- Bootstrap, JQuery, Stylesheet --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link rel="stylesheet" type="text/css" href="style.css"> <!-- For social Network symbols <--> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> </head> <!-- Body --> <body> <!-- Header --> <header class="container-fluid page-header"> <img class="col-sm-3" src="img/FaZeDoge.png"> <div class="col-sm-9"> <h1>FaZeBook</h1> <h3>Das erste asoziale Netzwerk</h3> </div> <br> <!-- Navbar --> <nav class="col-sm-12 navbar navbar-custom"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"> <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="#">FaZeBook</a> </div> <div class="collapse navbar-collapse" id="navbar"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#"><span class="glyphicon glyphicon-home"/><span class="sr-only">(current)</span></a></li> <li class="active"><a href="#"><span class="glyphicon glyphicon-bullhorn"/><span class="sr-only">(current)</span></a></li> <li class="active"><a href="#"><span class="glyphicon glyphicon-cog"/><span class="sr-only">(current)</span></a></li> </ul> <form class="navbar-form navbar-right search-form" role="search"> <input type="text" class="form-control" placeholder="Search" /> </form> </div> </div> </nav> <!-- end navbar --> </header> <!-- end header --> <!-- main --> <main class="container-fluid"> <!-- aside left --> <aside class="col-sm-3 sidebar-module sidebar-module-inset"> <ul class="list-group"> <li class="list-group-item">Felix disliked Human Rights<span class="badge">16:17</span></li> <li class="list-group-item">Walter rated Felix <span class="badge">16:15</span></li> <li class="list-group-item">Jonas rated Clemens <span class="badge">16:13</span></li> </ul> </aside> <!-- end aside left --> <!-- article --> <article class="blog-main blog-sidebar col-sm-5"> <section class="jumbotron"> <h4>Gib den Namen der Person ein und läster!</h4> <form method="post"> <label for="vorname">Vorname</label> <input class="form-control" type="text" id="vorname" value="" style="margin-bottom:7px"/> <label for="nachname">Nachname</label> <input class="form-control" type="text" id="nachname" value="" style="margin-bottom:7px"/> <label for="gossip_message">Was willst du loswerden?</label> <textarea class="form-control" type="text" id="gossip_message" rows="5"></textarea> <br> <button class="btn btn-success pull-right" type="submit">Absenden</button> </form> </section> </article> <!-- end article --> <!-- aside right --> <aside class="sidebar-module sidebar-module-inset col-sm-4"> <!-- online table --> <table class="table table-hover"> <tbody> <tr> <td>Felix</td> <td>Kirchmann</td> <td>5 Dislikes</td> <td><span class="btn btn-circle btn-success" /> </td> </tr> <tr> <td>Walter</td> <td>Schikowski</td> <td>3 Dislikes</td> <td><span class="btn btn-circle btn-danger" /> </td> </tr> <tr> <td>Clemens</td> <td>Löbbert</td> <td>Overflow</td> <td><span class="btn btn-circle btn-success" /> </td> </tr> <tr> <td>Jonas</td> <td>Scheller</td> <td>0 Dislikes</td> <td><span class="btn btn-circle btn-danger" /> </td> </tr> </tbody> </table> <!-- end online table --> <!-- chat --> <div class=""> <div class=""> <div class=""> <div class="panel panel-primary"> <div class="panel-heading" id="accordion"> <span class="glyphicon glyphicon-comment"></span> Chat <div class="btn-group pull-right"> <a type="button" class="btn btn-default btn-xs" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> <span class="glyphicon glyphicon-chevron-down"></span> </a> </div> </div> <div class="panel-collapse collapse" id="collapseOne"> <div class="panel-body"> <ul class="chat"> <li class="left clearfix"><span class="chat-img pull-left"> <img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" /> </span> <div class="chat-body clearfix"> <div class="header"> <strong class="primary-font">Jack Sparrow</strong> <small class="pull-right text-muted"> <span class="glyphicon glyphicon-time"></span>12 mins ago</small> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. </p> </div> </li> <li class="right clearfix"><span class="chat-img pull-right"> <img src="http://placehold.it/50/FA6F57/fff&text=ME" alt="User Avatar" class="img-circle" /> </span> <div class="chat-body clearfix"> <div class="header"> <small class=" text-muted"><span class="glyphicon glyphicon-time"></span>13 mins ago</small> <strong class="pull-right primary-font">Bhaumik Patel</strong> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. </p> </div> </li> <li class="left clearfix"><span class="chat-img pull-left"> <img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" /> </span> <div class="chat-body clearfix"> <div class="header"> <strong class="primary-font">Jack Sparrow</strong> <small class="pull-right text-muted"> <span class="glyphicon glyphicon-time"></span>14 mins ago</small> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. </p> </div> </li> <li class="right clearfix"><span class="chat-img pull-right"> <img src="http://placehold.it/50/FA6F57/fff&text=ME" alt="User Avatar" class="img-circle" /> </span> <div class="chat-body clearfix"> <div class="header"> <small class=" text-muted"><span class="glyphicon glyphicon-time"></span>15 mins ago</small> <strong class="pull-right primary-font">Bhaumik Patel</strong> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. </p> </div> </li> </ul> </div> <div class="panel-footer"> <div class="input-group"> <input id="btn-input" type="text" class="form-control input-sm" placeholder="Type your message here..." /> <span class="input-group-btn"> <button class="btn btn-warning btn-sm" id="btn-chat"> Send</button> </span> </div> </div> </div> </div> </div> </div> </div> <!-- end chat --> </aside> <!-- End aside right --> </main> <!-- footer --> <footer class="footer container-fluid"> <hr /> <div class="col-sm-12"> <div class="col-sm-9"> 420 Code IT GmbH </div> <div class="col-sm-3"> <button class="btn btn-social-icon btn-twitter btn-default btn-circle btn-lg"> <span class="fa fa-twitter"></span> </button> <button class="btn btn-social-icon btn-facebook btn-default btn-circle btn-lg"> <span class="fa fa-facebook"></span> </button> <a class="btn btn-social-icon btn-default btn-circle btn-lg"> <span class="fa fa-github"></span> </a> <a class="btn btn-social-icon btn-default btn-circle btn-lg"> <span class="fa fa-instagram"></span> </a> <a class="btn btn-social-icon btn-default btn-circle btn-lg"> <span class="fa fa-bitbucket"></span> </a> </div> </div> </footer> <!-- end footer --> </body> </html>