<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 ----------> <!-- Inspired by http://dribbble.com/shots/890759-Ui-Kit-Metro/attachments/97174 --> <div class="container"> <div class="row main"> <div class="col-md-8"> <!-- 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> <li data-target="#myCarousel" data-slide-to="3"></li> </ol> <div class="container"> <div class="carousel-caption"> <h3><span class="glyphicon glyphicon-play-circle"></span>Fresh start</h3> <hr> <h1>Natural food</h1> <p><strong>Don't fall</strong> into a deprivation trap! Satisfy your sweet tooth with updated takes on Chocolate Mousee, Cheesecake and Apple Cake.</p> </div> </div> <div class="carousel-inner"> <div class="item active"> <img src="http://habrastorage.org/files/093/499/c1b/093499c1bc564dd4aa1e614223a600e5.jpg" class="img-responsive"> </div> <div class="item"> <img src="http://habrastorage.org/files/093/499/c1b/093499c1bc564dd4aa1e614223a600e5.jpg" class="img-responsive"> </div> <div class="item"> <img src="http://habrastorage.org/files/093/499/c1b/093499c1bc564dd4aa1e614223a600e5.jpg" class="img-responsive"> </div> <div class="item"> <img src="http://habrastorage.org/files/093/499/c1b/093499c1bc564dd4aa1e614223a600e5.jpg" class="img-responsive"> </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 --> </div> <div class="col-md-4 main-right"> <div class="subscribe"> <h1>Tasty news!</h1> <h4>Subscribe now:</h4> <div class="input-group"> <input type="text" class="form-control" placeholder="Your email"> <span class="input-group-btn"> <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-play-circle"></span></button> </span> </div><!-- /input-group --> </div> <div class="best"></div> </div> </div> <div class="row main-nav"> <div class="col-md-4"> <a href="#" class="btn btn-default btn-circle"><span class="glyphicon glyphicon-heart"></span></a> Popular recipes </div> <div class="col-md-4"> <a href="#" class="btn btn-default btn-circle"><span class="glyphicon glyphicon-camera"></span></a> Upload photos </div> <div class="col-md-4"> <a href="#" class="btn btn-default btn-circle"><span class="glyphicon glyphicon-user"></span></a> Invite friends </div> </div> </div> </div>

/* Inspired by http://dribbble.com/shots/890759-Ui-Kit-Metro/attachments/97174 */ body { background: url(http://habrastorage.org/files/90a/010/3e8/90a0103e8ec749c4843ffdd8697b10e2.jpg); } .main { background-color: #fff; margin-top: 20px; } .main-nav { background: url(http://habrastorage.org/files/f75/559/b17/f75559b1771b4a4d943730257b2b2a6d.png); text-transform: uppercase; color: #fff; font-weight: 800; } .main-nav .col-md-4, .main-nav .col-md-8, .main .col-md-4, .main .col-md-8 { border: 1px solid #fff; border-right: none; margin-bottom: -1px; } .main .col-md-8, .main .main-right { padding: 0; } .main-right { min-height: 400px; } .main .col-md-8 { color: #e92d00; margin-top: -6px; border-top: 6px solid #e92d00; } .main .col-md-8:before { content: ''; position: absolute; border-style: solid; border-width: 6px 6px 0; border-color: #e92d00 transparent; display: block; width: 0; z-index: 1; margin-left: -6px; top: 0; left: 75px; } .subscribe { background: url(http://habrastorage.org/files/9e0/f0b/984/9e0f0b9846364ad5847643d2579e04be.jpg); background-size: cover; width: 100%; min-height: 262px; max-height: 262px; margin-top: -7px; border-top: 6px solid #c86c00; color: #fff; text-align: center; } .subscribe:before { content: ''; position: absolute; border-style: solid; border-width: 6px 6px 0; border-color: #c86c00 transparent; display: block; width: 0; z-index: 1; margin-left: -6px; left: 75px; } .subscribe h1 { text-transform: uppercase; } .subscribe h4:before, .subscribe h4:after { content: "–––"; padding: 10px; } .subscribe .input-group { margin: 0 50px; padding: 10px; } .subscribe input { padding: 22px 10px 22px 10px; } .subscribe .btn { padding: 12px 10px 12px 10px; } .best { background: url(http://habrastorage.org/files/c1b/542/4f3/c1b5424f330849d7a2a461be5e977e15.jpg); background-size: cover; width: 100%; min-height: 202px; max-height: 202px; margin-top: -7px; border-top: 6px solid #5da22d; } .best:before { content: ''; position: absolute; border-style: solid; border-width: 6px 6px 0; border-color: #5da22d transparent; display: block; width: 0; z-index: 1; margin-left: -6px; left: 75px; } .main-nav .glyphicon { font-size: 25px; color: #abab9f; padding: 0; } .main-nav .btn-circle { border: 3px solid #abab9f; width: 45px; height: 45px; text-align: center; padding: 7px 0; font-size: 12px; border-radius: 50%; margin: 20px 5px 20px 40px; } .main-nav { border-radius: 0 0 5px 5px; } .main-nav .col-md-4 { border-bottom: none; } .main-nav .col-md-4:first-child { border-left: none; } .main-nav .col-md-4:last-child { border-right: none; } /* CUSTOMIZE THE CAROUSEL -------------------------------------------------- */ /* Carousel base class */ .carousel { margin-bottom: 0px; } /* 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: 100%; min-height: 450px; padding: 0; float: right; width: 50%; } .carousel-indicators li { width: 20px; height: 20px; background-color: rgba(0, 0, 0, .1); border: 1px solid #aeafa0; } .carousel-indicators .active { width: 20px; height: 20px; margin: 0; background-color: #71af42; } .carousel-indicators { left: 25%; } .carousel img { position: absolute; top: 0; left: 0; min-height: 450px; width: 100%; } .carousel-caption { float: left; margin-right: 50%; top: 30px; text-align: left; } .carousel-caption h3 { color: #ec4720; text-transform: uppercase; } .carousel-caption h1 { color: #aca877; font-size: 30pt; text-transform: uppercase; } .carousel-caption p { color: #000; font-size: 12pt; font-weight: 100; } @media screen and (min-width: 768px) { .carousel-caption { right: 5%; left: 10%; padding-bottom: 30px; } }