<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 ----------> <div class="navbar-wrapper"> <div class="container"> <div class="navbar"> <div class="navbar-header"> <a class="navbar-toggle collapsed" type="button" aria-expanded="false" data-toggle="collapse" data-target=".collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="navbar-brand" href="#">Art Design</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">Page</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Travel</a></li> <li><a href="#">Shop</a></li> <li><a href="#">Short Codes</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div><!-- /container --> </div><!-- /navbar wrapper --> <!-- Carousel ================================================== --> <div id="myCarousel" class="carousel slide"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="http://unwallpapers.com/wp-content/uploads/2015/05/Beautiful-Girl-Glasses-Art-Hd-Wallpaper.jpg" class="fill"> <div class="container"> <div class="carousel-caption"> <h1>Bootstrap 3 Carousel Layout</h1> </div> </div> </div> <div class="item"> <img src="http://unwallpapers.com/wp-content/uploads/2015/05/Beautiful-Girl-Glasses-Art-Hd-Wallpaper.jpg"> <div class="carousel-caption"> <h1>Changes to the Grid</h1> <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p> <p><a class="btn btn-large btn-primary" href="#">Learn more</a></p> </div> </div> <div class="item"> <img src="http://unwallpapers.com/wp-content/uploads/2015/05/Beautiful-Girl-Glasses-Art-Hd-Wallpaper.jpg"> <div class="carousel-caption"> <h1>Changes to the Grid</h1> <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p> <p><a class="btn btn-large btn-primary" href="#">Learn more</a></p> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="icon-next"></span> </a> </div> <!-- /.carousel -->

/* BOOTSTRAP 3.x GLOBAL STYLES -------------------------------------------------- */ body { padding-bottom: 40px; color: #5a5a5a; height: 100%; } /* Show Button of nav */ .icon-bar{ background:#e76831 ; color:#d2b6aa ; } /* CUSTOMIZE THE NAVBAR -------------------------------------------------- */ .navbar { position: relative; } .navbar-brand { position: absolute; display: inline-block; left: 17%; color: #d2b6aa; } .navbar-brand:hover{ color: #e76831; } /* Special class on .container surrounding .navbar, used for positioning it into place. */ .navbar-wrapper { position: absolute; top: 0; left: 0; right: 0; z-index: 10; } .navbar-collapse{ text-align: center; } .navbar-nav{ display: inline-block; float: none; } /* CUSTOMIZE THE CAROUSEL -------------------------------------------------- */ /* Carousel base class */ .carousel { margin-bottom: 60px; height: 100%; } /* Since positioning the image, we need to help out the caption */ .carousel-caption { z-index: 10; } /* Declare heights because of positioning of img element */ .carousel .item { height: 500px; background-color:#bbb; } .carousel img { position: absolute; top: 0; left: 0; min-width: 100%; height: 100%; } .navbar-nav li a{ color: #d2b6aa; } .nav>li>a:hover, .nav>li>a:focus { background-color: transparent; color:#e76831 ; } .navbar-nav li a{ color: #d2b6aa; } .nav>li>a:hover, .nav>li>a:focus { background-color: transparent; color:#e76831 ; } /*media query*/ /*!* RESPONSIVE CSS*/ /*-------------------------------------------------- *!*/ @media(max-width:1250px ){ .carousel .item { height: 250px; background-color:#bbb; } .carousel .img{ height:70% ; } .carousel-caption p,h1{ font-weight: bold; font-size: 18px; } .navbar-brand { left: -3%; } } @media(max-width:1100px ){ .carousel .item { height: 250px; background-color:#bbb; } .carousel .img{ height:70% ; } .carousel-caption p,h1{ font-weight: bold; font-size: 18px; } .navbar-brand { left: -3%; } } @media(max-width:800px ){ .carousel .item { height: 250px; background-color:#bbb; } .carousel .img{ height:70% ; } .carousel-caption p,h1{ font-weight: bold; font-size: 18px; } .navbar-brand { left: -3%; } } @media(max-width:500px ){ .carousel .item { height: 150px; background-color:#bbb; } .carousel .img{ height:65% ; } .carousel-caption p,h1{ display: none; } .navbar-nav li a{ color: #e76831; background:#d2b6aa; } }