<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Menu</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.php">Voetbal Universe</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">Nieuws</a></li> <li><a href="#">Media</a></li> <li><a href="#">Voetbalcompetities</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Login</a></li> </ul> </div> </div> </nav> <div class="container"> <div class="row"> <div class="col-md-5 col-lg-5"> <!-- artigo em destaque --> <div class="featured-article"> <a href="#"> <img src="http://placehold.it/482x350" alt="" class="thumb"> </a> <div class="block-title"> <h2>Lorem ipsum dolor asit amet</h2> <p class="by-author"><small>By Jhon Doe</small></p> </div> </div> <!-- /.featured-article --> </div> <div class="col-md-7 col-lg-7"> <ul class="media-list main-list"> <li class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placehold.it/150x90" alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Lorem ipsum dolor asit amet</h4> <p class="by-author">By Jhon Doe</p> </div> </li> <li class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placehold.it/150x90" alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Lorem ipsum dolor asit amet</h4> <p class="by-author">By Jhon Doe</p> </div> </li> <li class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placehold.it/150x90" alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Lorem ipsum dolor asit amet</h4> <p class="by-author">By Jhon Doe</p> </div> </li> </ul> </div> </div>

/* image thumbnail */ .thumb { display: block; width: 100%; margin: 0; } /* Style to article Author */ .by-author { font-style: italic; line-height: 1.3; color: #aab6aa; } /* Main Article [Module] ------------------------------------- * Featured Article Thumbnail * have a image and a text title. */ .featured-article { width: 482px; height: 350px; position: relative; margin-bottom: 1em; } .featured-article .block-title { /* Position & Box Model */ position: absolute; bottom: 0; left: 0; z-index: 1; /* background */ background: rgba(0,0,0,0.7); /* Width/Height */ padding: .5em; width: 100%; /* Text color */ color: #fff; } .featured-article .block-title h2 { margin: 0; } /* Featured Articles List [BS3] -------------------------------------------- * show the last 3 articles post */ .main-list { padding-left: .5em; } .main-list .media { padding-bottom: 1.1em; border-bottom: 1px solid #e8e8e8; } .navbar {background-color: #3e3e3e !important; border-color: transparent; border-radius: 0%; box-shadow: 0 0 6px 3px rgba(0,0,0,.35); } /** Default navbar **/ .navbar-default .navbar-nav>li>a { padding-top: 25px; padding-bottom: 25px; min-height: 69px; color: #A4A4A4;} .navbar-default .navbar-nav > li > a:hover {color: #DDBE42;} .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { background-color: transparent; color: #DDBE42; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { background-color: transparent; color: #DDBE42; } .navbar-default .navbar-nav .open .dropdown-menu { background-color: #060606 !important; box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4); } .navbar-default .navbar-nav .open .dropdown-menu > li > a{ color: #585858 !important; padding: 12px 12px 12px 12px !important; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #DDBE42 !important; background-color: transparent !important; } .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { color: #DDBE42 !important; background-color: transparent !important; } .navbar-default .navbar-toggle { border-color: transparent; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { border-color: transparent; background-color: transparent; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: transparent; } .navbar-form { padding-top: 10px !important;} .navbar-text { margin-top: 25px; } .navbar-default .navbar-text { color: #CBAF3B;} .navbar-default .navbar-brand { font-size: 21px; color: #CBAF3B; margin-top: 10px; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #DDBE42; }