<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'> <div class="wrapper"> <div class="container"> <div class="row"> <div class="col-md-12"> <header id="header"> <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="http://placehold.it/1200x400/F34336/F34336&text=WORDPRESS THEME DEVELOPER"> </div> <div class="item"> <img src="http://placehold.it/1200x400/20BFA9/ffffff&text=CLEAN %26 SMART"> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="fa fa-angle-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="fa fa-angle-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div><!--slider--> <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> <a class="navbar-brand" href="#"><img class="img-responsive" src="http://rolyart.ro/wp-content/uploads/2016/07/roland-maruntelu-freelancer-romania.jpg"></a> <span class="site-name"><b>Roland</b> Maruntelu</span> <span class="site-description">worpress theme developer</span> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="mainNav" > <ul class="nav main-menu 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> </header><!--/#HEADER-->

@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,400,700); body{ background:#e9eaed; } h1, h2, h3, h4, h5, h6{ font-family: 'Open Sans Condensed', sans-serif, sans-serif; } .container{ } .wrapper{ } #header{ border:1px solid #ddd; margin-bottom:20px; } .navbar{ border-radius:0; margin-bottom:0; border:none; font-family: 'Open Sans Condensed', sans-serif, sans-serif; } .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; } }