<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" style="margin-top:100px;"> <div class="row"> <div class="col-md-10"> <div class="row nav-row"> <div class="col-md-2"> <span class="glyphicon glyphicon-folder-close"></span> <p>Shopping</p> </div> <div class="col-md-2 active"> <span class="glyphicon glyphicon-calendar"></span> <p>Calendar</p> </div> <div class="col-md-2"> <span class="glyphicon glyphicon-globe"></span> <p>Network</p> </div> <div class="col-md-2"> <span class="glyphicon glyphicon-leaf"></span> <p>Ecology</p> </div> <div class="col-md-2"> <span class="glyphicon glyphicon-time"></span> <p>Statistics</p> </div> <div class="col-md-2"> <span class="glyphicon glyphicon-bell"></span> <p>Events</p> </div> </div> <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 class="col-md-2"> <div class="row cart"> <img src="http://habrastorage.org/files/3d7/0a7/7f2/3d70a77f29cf432c913c2d820d074237.jpg" class="img-responsive"> <h2>Prawns</h2> <h4>garlic & pepper</h4> <p>Prawns<span class="pull-right">3 lb</span></p> <p>Salmon<span class="pull-right">2 pks</span></p> <p>Green Salad<span class="pull-right">2 pks</span></p> <p>Onions<span class="pull-right">0,5 lb</span></p> </div> <div class="row add"> <div class="food-logo"> <img src="http://habrastorage.org/files/7d7/60f/409/7d760f409d9b41b98ed1360c2438cc13.png" class="img-responsive"> <h4>Roasted chicken</h4> </div> <div class="row food-info"> <div class="col-md-6"> <h5>Kcal</h5> <h3>3200</h3> </div> <div class="col-md-6"> <h5>Fat</h5> <h3>12%</h3> </div> </div> </div> </div> </div> </div> <!-- --> <div class="container second"> <div class="row"> <div class="col-md-5"> <div class="well well-sm"> <form class="form-horizontal" action="" method="post"> <fieldset> <legend>Contact Form</legend> <!-- Name input--> <div class="form-group"> <div class="col-md-12"> <p>Your Email:</p> <input id="email" name="email" type="email" placeholder="Hello@gmail.com" class="form-control"> </div> </div> <!-- Email input--> <div class="form-group"> <div class="col-md-12"> <p>Subject:</p> <input id="subject" name="subject" type="text" placeholder="Vegetables" class="form-control"> </div> </div> <!-- Message body --> <div class="form-group"> <div class="col-md-12"> <p>Message:</p> <div class="panel panel-primary"> <div class="panel-heading"> <div class="btn-group"> <button type="button" class="btn btn-default" data-toggle="tooltip" title="New file"> <span class="glyphicon glyphicon-bold"></span> </button> <button type="button" class="btn btn-default" data-toggle="tooltip" title="Save"> <span class="glyphicon glyphicon-italic"></span> </button> <button type="button" class="btn btn-default" data-toggle="tooltip" title="Print"> <span class="glyphicon glyphicon-text-height"></span> </button> </div> <div class="btn-group pull-right"> <button type="button" class="btn btn-default" data-toggle="tooltip" title="New file"> <span class="glyphicon glyphicon-sound-dolby"></span> </button> <button type="button" class="btn btn-default" data-toggle="tooltip" title="Save"> <span class="glyphicon glyphicon-align-justify"></span> </button> </div> </div> <div class="panel-body"> <textarea class="form-control" id="message" name="message" placeholder="My Army husband usually eats at the mess hall, so I try to make nice home-cooked meals when he's home." rows="3"></textarea> </div> </div> </div> </div> <!-- Form actions --> <div class="form-group form-group-btn"> <div class="col-md-5"> <button type="submit" class="btn btn-primary btn-lg pull-right">Cancel</button> </div> <div class="col-md-7"> <button type="submit" class="btn btn-primary btn-lg pull-left">Send message</button> </div> </div> </fieldset> </form> </div> </div> <div class="col-md-7 cake"> <div class="row"> <div class="col-md-12"> <img src="http://habrastorage.org/files/3cc/d78/1ca/3ccd781ca426487695345b80fcedae27.jpg" class="img-responsive"> <div class="col-md-5"> <h1>Healthy recipes</h1> </div> <div class="col-md-7"> <p>Our bakery offers a large variety of beautiful birthday cakes, dessert cakes, cupcakes, pastries, cake slices, cookies, macaroons baked fresh daily in our bakery.</p> <h4><span class="glyphicon glyphicon-play-circle"></span> Cake Tastings & Consultations</h4> </div> </div> </div> <div class="row like"> <div class="col-md-12"> <div class="col-md-5"> <img class="img-circle" src="http://habrastorage.org/files/4a3/fb8/904/4a3fb8904c57433b883663670b39aad8.jpg" /> <h3>Pea soup</h3> <p>Finnish pea soup</p> </div> <div class="col-md-2"> <h1 class="portions-count">3</h1> <h5 class="portions">portions</h5> </div> <div class="col-md-2 voice"> <div class="glyphicon glyphicon-plus"></div> <div class="glyphicon glyphicon-minus"></div> </div> <div class="col-md-3"> <span class="glyphicon glyphicon-heart"></span> </div> </div> </div> </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); } .nav-row { text-align: center; } .nav-row p { padding: 5px; } .nav-row .col-md-2 { background-color: #fff; border: 1px solid #e0e1db; border-right: none; } .nav-row .col-md-2:last-child { border: 1px solid #e0e1db; } .nav-row .col-md-2:first-child { border-radius: 5px 0 0 5px; } .nav-row .col-md-2:last-child { border-radius: 0 5px 5px 0; } .nav-row .col-md-2:hover { color: #e92d00; } .nav-row .active { color: #e92d00; margin-top: -6px; border-top: 6px solid #e92d00; border-bottom: 6px solid #e92d00; } .nav-row .active: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: 50%; } .nav-row .glyphicon { padding-top: 15px; font-size: 40px; } .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; } } .cart { background-color: #fff; margin: 0 5px; border-radius: 5px; } .cart p { padding: 15px; margin: 0; } .cart p:nth-child(2n) { background-color: #c5c5c3; } .cart h2 { padding: 10px; padding-top: 10px; margin-top: 0px; padding-bottom: 0; margin-bottom: 0; color: #999; } .cart h4 { padding: 10px; margin-top: 0px; padding-bottom: 0; padding-top: 0; color: #999; } .cart img { border-radius: 5px 5px 0 0; } .add { margin-top: 20px; padding-top: 20px; margin: 0 5px; border-radius: 5px; text-align: center; } .add h4 { color: #fff; padding-bottom: 20px; } .add img { margin: 0 auto; } .food-logo { border-radius: 5px 5px 0 0; background-color: #71af40; } .food-logo h4 { font-weight: bold; } .add .col-md-6 { background-color: #fff; } .add .col-md-6 h4, .add .col-md-6 h3 { padding: 0; } .food-info { margin-top: -25px; padding: 15px; } .food-info .col-md-6:first-child { border-right: 1px solid #ddd; border-radius: 0 0 0 5px; } .food-info .col-md-6:last-child { border-radius: 0 0 5px 0; } /* _________________________________ */ .second .row { margin-left: -30px; margin-right: 5px; } .well-sm { padding: 0px; border: none; background-color: #fff; } legend { background: url(http://habrastorage.org/files/a97/6fb/37b/a976fb37b1234b4e8bf10415d0270b0b.png); padding: 15px; color: #fff; border-radius: 5px 5px 0 0; font-weight: 800; font-size: 18pt; } legend:after { content: ''; position: absolute; border-style: solid; border-width: 6px 6px 0; border-color: #5da22d transparent; display: block; width: 0; margin-top: 15px; z-index: 1; margin-left: -6px; left: 75px; } .form-group-btn { padding: 10px 40px; background-color: #f2f2f0; } .form-group-btn .btn { padding: 15px 40px; color: #fff; border: none; font-weight: 800; } .form-group-btn .col-md-5 .btn { background-color: #b9b9b9; } .form-group-btn .col-md-7 .btn { background-color: #5fa430; } .form-group .col-md-12 { font-weight: bold; } .form-horizontal .form-group-btn { margin-right: 0; margin-left: 0; padding-bottom: 20px; padding-top: 20px; margin-bottom: 0; border-radius: 0 0 5px 5px; } .well .col-md-12 { padding: 0 35px; } .well input { padding: 25px; font-size: 16px; } .well input[type="email"]::-webkit-input-placeholder { color: #166b97; font-weight: 800; } .well textarea { border-radius: 0 0 5px 5px; font-size: 12pt; padding: 15px; color: #000; border-top: none; } .panel-body { padding: 0; } .panel-primary { border: none; } .panel-primary .btn { background-color: #ebece7; border: none; } .panel-primary > .panel-heading { color: #fff; background-color: #ebece7; border: 1px solid #ccc; border-bottom: none; border-radius: 5px 5px 0 0; } .panel-heading { padding: 0 15px; border-bottom: 1px solid transparent; border-top-left-radius: 3px; border-top-right-radius: 3px; } .cake { /*background-color: #fff;*/ padding: 0; } .cake .col-md-12 { padding: 0; border-radius: 5px; background-color: #fff; } .cake .img-responsive { margin-bottom: 30px; border-radius: 5px 5px 0 0; } .cake .col-md-5 { padding-left: 50px; border-right: 1px solid #ddd; } .cake .col-md-5 h1 { margin-top: 0; text-transform: uppercase; } .cake .col-md-7 h4 { color: #d87c41; padding-bottom: 20px; } .cake .row { margin-right: 0; margin-left: 0; } .like { margin-top: 50px; } .like .col-md-5 { padding-left: 20px; padding-top: 20px; padding-right: 10px; } .like .col-md-5 img { float: left; margin-bottom: 20px; margin-right: 20px; } .img-circle { width: 100px; height: 100px; } .img-heart { float: right; } .like .glyphicon { font-size: 30px; padding: 20px; background-color: #f2f2f0; color: #9f9f9f; } .voice { padding: 0; margin: 0; } .like .col-md-2 .glyphicon { float: right; } .like .col-md-2 .glyphicon:first-child { border-bottom: 1px solid #ddd; } .like .col-md-3 { text-align: center; margin: 0; padding: 25px; background-color: #F8B2B2; } .like .col-md-2 { text-align: center; } .like .glyphicon-heart { padding: 26px; color: red; background-color: #FF6464; border: 5px solid red; border-radius: 5px; } .portions-count { font-size: 60px; font-weight: bold; margin-bottom: 0; } .portions { margin-top: 0; }