<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="wrapper"> <div class="container"> <div class="row"> <div class="col-md-12"> <header id="header"> <nav class="navbar navbar-default "> <!-- 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="#mainNav"> <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="mainNav" > <ul class="nav navbar-nav"> <li><a href="#"><i class="fa fa-home"></i> HOME</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-google-plus"></i></a></li> </ul> </div><!-- /.navbar-collapse --> </nav> <div class="slider"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="https://www.freewebheaders.com/wordpress/wp-content/gallery/medical/red-heart-and-cardiac-health-monitoring-web-header.jpg"> <div class="header-text hidden-xs"> <div class="col-md-12 text-center"> <h2> <span>Welcome to <strong>LOREM IPSUM</strong></span> </h2> <br> <h3> <span>Join this awesome community.</span> </h3> <br> <div class=""> <a class="btn btn-theme btn-sm btn-min-block" href="#">Login</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Register</a></div> </div> </div><!-- /header-text --> </div> </div> </div> </div><!--slider--> </header><!--/#HEADER--> <div id="home"> <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Forums</a></li> </ol> <div class="row"> <div class="col-md-8"> <div class="panel"> <div class="panel-heading custom-header-panel"> <h3 class="panel-title roboto">Category</h3> </div> <div class="panel-body"> body </div> </div> <div class="panel"> <div class="panel-heading custom-header-panel"> <h3 class="panel-title roboto">Category 2</h3> </div> <div class="panel-body"> body </div> </div> <div class="panel"> <div class="panel-heading custom-header-panel"> <h3 class="panel-title roboto">Category 3</h3> </div> <div class="panel-body"> <div class="row"> <div class="col-md-8"> <div class="hidden-xs visible-sm visible-lg visible-md pull-left forum-icon"> <h5><i class="fa fa-comment-o fa-3x" aria-hidden="true"></i></h5> </div><h5> <a href="subcategory.php?subcatid=1"> Stel jezelf voor</a></h5> <span><p class="text-muted">test</span></p></div> <div class="col-md-4"> <h5> <a href="topic.php?id=5">Laatste topic</a></h5> </div></div> </div> <div class="col-md-8"> <div class="hidden-xs visible-sm visible-lg visible-md pull-left forum-icon"> <h5><i class="fa fa-comment-o fa-3x" aria-hidden="true"></i></h5> </div><h5> <a href="subcategory.php?subcatid=1"> Stel jezelf voor</a></h5> <span><p class="text-muted">test</span></p></div> <div class="col-md-4"> <h5> <a href="topic.php?id=5">Laatste topic</a></h5> </div></div> </div> <div class="col-md-4"> <div class="panel"> <div class="panel-heading custom-header-panel"> <h3 class="panel-title roboto">Kort geleden</h3> </div> <div class="panel-body"> <div class="row"> <div class="col-md-12"> <h5> <a href="topic.php?id=5">test</h4></a> <span> <p class="text-muted">Door: <strong>Teun</strong> <span class="pull-right"> 6 hours ago</span></p></a> </div> <div class="col-md-12"> <h5> <a href="topic.php?id=5">dit werkt!</h4></a> <span> <p class="text-muted">Door: <strong>Teun</strong> <span class="pull-right"> 6 hours ago</span></p></a> </div> </div> </div> </div> </div> </div> </div> <footer class="container-fluid text-center bg-lightgray"> <div class="copyrights" style="margin-top:25px;"> <p>Leiden © 2017, All Rights Reserved <br> <span>Developed by: Teun Strik</span></p> <p><a href="browncoconut.com" target="_blank">Brown Coconut</a></p> </div> </footer>

@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,400,700); body{ background:#e9eaed; } .container{ } .wrapper{ } #home{ background-color: white; height:550px; padding: 15px; } #header{ border:1px solid #ddd; } /* Font ROBOTO */ /* custom background for panel */ /* custom background header panel */ .custom-header-panel{ background-color: #e74c3c !important; border-color: #e74c3c !important; color: white; } .no-margin-form-group { margin: 0 !important; } .requerido { color: red; } .btn-orange-md { background: #FF791F !important; border-bottom: 3px solid #ae4d13 !important; color: white; } .btn-orange-md:hover { background: #d86016 !important; color: white !important; } .navbar{ border-radius:0; margin-bottom:0; border:none; } .navbar > li >a{ } .navbar-header{ } .navbar-brand{ width:160px; height:160px; float:left; padding:0; margin-top:-130px; overflow:hidden; border:3px solid #eee; margin-left:15px; background:#333; text-align:center; line-height:160px; color:#fff !important; font-size:2em; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out ; } .site-name{ color:#fff; font-size:2.4em; float:left; margin-top:-65px !important; margin-left:15px; font-family: 'Open Sans Condensed', sans-serif, sans-serif; } .site-description{ color:#fff; font-size:1.3em; float:left; margin-top:-30px !important; margin-left:15px; } .main-menu{ position:absolute; left:190px; } .slider, .carousel{ max-height:360px; overflow:hidden; } .carousel-control .fa-angle-left, .carousel-control .fa-angle-right { position: absolute; top: 50%; font-size:2em; z-index: 5; display: inline-block; } .carousel-control{ background-color:transparent; background-image:none !important; } .carousel-control:hover, .carousel-control:focus { color: #fff; text-decoration: none; background-color:transparent !important; background-image:none !important; outline: 0; } @media (max-width: 768px) { .navbar-brand{ max-width: 100px; max-height:100px; float:left; margin-top:-65px; margin-left:15px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out ; } .navbar{ border-radius:0; margin-bottom:0; border:none; } .main-menu{ left:0; position:relative; } } @media (max-width: 490px) { .site-name{ color:#fff; font-size:1.5em; float:left; line-height:20px; margin-top:-100px !important; margin-left:125px; } .site-description{ color:#fff; font-size:1.3em; float:left; margin-top:-80px !important; margin-left:125px; } } /* Carousel Header Styles */ .header-text { position: absolute; top: 20%; left: 1.8%; right: auto; width: 96.66666666666666%; color: #fff; } .header-text h2 { font-size: 40px; } .header-text h2 span { background-color: #2980b9; padding: 10px; } .header-text h3 span { background-color: #000; padding: 15px; } .btn-min-block { min-width: 170px; line-height: 26px; } .btn-theme { color: #fff; background-color: #03A9F4; border: 2px solid #03A9F4; margin-right: 15px; } .btn-theme:hover { color: #000; background-color: #fff; border-color: #fff; } @media (min-width: 1200px){ .container { width: 1310px; } } @import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css); .bg-lightgray { background-color:#b5b5b5; } .navbar-default { background-color: white; /* border-color: #e7e7e7; */ } .forum-icon, .forum-icon-read, .forum-icon-unread { color: #5183b2; font-size: 30px; margin: -5px auto; display: inline-block; line-height: 50px; width: 100px; text-align: center; vertical-align: bottom; }