Created
January 12, 2016 10:27
-
-
Save qnm/721c46475eaafaae5ef5 to your computer and use it in GitHub Desktop.
Revisions
-
qnm created this gist
Jan 12, 2016 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,110 @@ <div class="navbar-wrapper"> <div class="container"> <div class="navbar navbar-default navbar-fixed-top"> <div class="navbar-header"> <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="navbar-brand" href="/">MooCakes</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="/about">About</a></li> <li class="active"><a href="/gallery">Gallery</a></li> <li><a href="/contact">Get a quote</a></li> <li><a href="/contact">Contact Us</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"> <div class="container"> <img src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-xft1/v/t1.0-9/12250181_990545027677582_6170769788010209366_n.jpg?oh=25f3c7efd1df5809a8e9d52a76d47fe8&oe=574708B9&__gda__=1460085043_82c4b1f46c6cadb7c97c92e3d489cdeb" /> <div class="carousel-caption"> <h1>Cake designs you love!</h1> <p>Born out of the frustration of buying reasonably-priced novelty cakes, MooCakes create beautiful cakes to your budget.</p> <p><a class="btn btn-primary" href="/contact">Learn More</a> </p> </div> </div> </div> <div class="item"> <div class="container"> <img src="https://scontent-lax3-1.xx.fbcdn.net/hphotos-xfa1/v/t1.0-9/12193571_977783952287023_3381422068984736953_n.jpg?oh=9f2022b037d8bb98520b2aaea6fdb4a0&oe=57087278" /> <div class="carousel-caption"> <h1>If you can imagine it, we can create it.</h1> <p><a class="btn btn-primary" href="/contact">Learn more</a></p> </div> </div> </div> <div class="item"> <div class="container"> <img src="https://scontent-lax3-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/12208297_977781728953912_8944712865129792190_n.jpg?oh=846c4d5276913f76caea4fa384381d90&oe=571162C0" /> <div class="carousel-caption"> <h1>Celebrate your special day with us!</h1> <p><a class="btn btn-primary" href="/gallery">Browse gallery</a></p> </div> </div> </div> </div> </div> <!-- /.carousel --> <div class="container marketing"> <!-- Three columns of text below the carousel --> <div class="row"> <div class="col-md-4 text-center"> <img class="img-circle" src="http://lorempixel.com/140/140/food/1"> <h2>Starting from $85</h2> <p>After something simple? We can help with that.</p> <p><a class="btn btn-default" href="#">View details »</a></p> </div> <div class="col-md-4 text-center"> <img class="img-circle" src="http://lorempixel.com/140/140/food/2"> <h2>Starting from $85</h2> <p>After something simple? We can help with that.</p> <p><a class="btn btn-default" href="#">View details »</a></p> </div> <div class="col-md-4 text-center"> <img class="img-circle" src="http://lorempixel.com/140/140/food/3"> <h2>What's cookin'?</h2> <p>Check out our recent creations!</p> <p><a class="btn btn-default" href="#">View details »</a></p> </div> </div><!-- /.row --> <!-- START THE FEATURETTES --> <div class="featurette"> <img class="featurette-image img-circle pull-right" src="http://lorempixel.com/512/512/food/4"> <h2 class="featurette-heading">Hey Sydney! Check out our cakes! <span class="text-muted">The cake designs you love, personalised cakes for you.</span></h2> <p class="lead">We specialise in the design and creation of quality cakes for Birthdays, Christenings, Weddings, 1st, 16th, 21st birthday, Baby Shower and Corporate events. Interested in seeing more?</p> </div> <div class="featurette"> <img class="featurette-image img-circle pull-left" src="http://lorempixel.com/512/512/food/5"> <h2 class="featurette-heading">Gluten Free? <span class="text-muted">We've got a treat for you!</span></h2> <p class="lead">Baking gluten free is not a problem. Some our favourite clients are gluten intolerant, and they keep coming back as our cakes are tasty AND tolerant.</p> </div> <!-- /END THE FEATURETTES --> </div><!-- /.container --> This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,7 @@ jWmoqm ------ A [Pen](http://codepen.io/qnm/pen/jWmoqm) by [Rob Sharp](http://codepen.io/qnm) on [CodePen](http://codepen.io/). [License](http://codepen.io/qnm/pen/jWmoqm/license). This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,2 @@ <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,177 @@ @import url(http://fonts.googleapis.com/css?family=Lato:400,900,400italic,700italic); body { background-image:url('http://moocakes.com.au/b990809ba73a74f896d2859bd62eb41c.jpg'); background-position: fixed; background-color: #73A68F; background-repeat: repeat; font-family: 'Lato', sans-serif; } /* CUSTOMIZE THE NAVBAR -------------------------------------------------- */ /* 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-nav li { border-bottom: 5px solid #F8F8F8; } .navbar-nav li:hover { border-bottom: 5px solid #7DAE95; } /* CUSTOMIZE THE CAROUSEL -------------------------------------------------- */ /* Carousel base class */ .carousel { margin-bottom: 60px; } /* Since positioning the image, we need to help out the caption */ .carousel-caption { z-index: 1; } /* Declare heights because of positioning of img element */ .carousel .item { height: 300px; vertical-align: center; } .carousel .item { -webkit-transition: opacity 2s; -moz-transition: opacity 2s; -ms-transition: opacity 2s; -o-transition: opacity 2s; transition: opacity 2s; } .carousel .active.left { left: 0; opacity: 0; z-index: 2; } .carousel .next, .carousel .prev { left: 0; opacity: 1; z-index: 1; } .carousel img { position: absolute; top: 0; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 80%; min-height: 400px; -webkit-filter: blur(2px); -moz-filter: blur(2px); -o-filter: blur(2px); -ms-filter: blur(2px); filter: blur(2px); } .circle { border-radius: 50%; width: 300px; height: 300px; background: #ccc; } /* MARKETING CONTENT -------------------------------------------------- */ /* Pad the edges of the mobile views a bit */ .marketing { padding-left: 15px; padding-right: 15px; } /* Center align the text within the three columns below the carousel */ .marketing .col-lg-4 { text-align: center; margin-bottom: 20px; } .marketing h2 { font-weight: normal; } .marketing .col-lg-4 p { margin-left: 10px; margin-right: 10px; } /* Featurettes ------------------------- */ .featurette-divider { margin: 80px 0; /* Space out the Bootstrap <hr> more */ } .featurette { padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */ overflow: hidden; /* Vertically center images part 2: clear their floats. */ } .featurette-image { margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */ } /* Give some space on the sides of the floated elements so text doesn't run right into it. */ .featurette-image.pull-left { margin-right: 40px; } .featurette-image.pull-right { margin-left: 40px; } /* Thin out the marketing headings */ .featurette-heading { font-size: 50px; font-weight: 300; line-height: 1; letter-spacing: -1px; } /* RESPONSIVE CSS -------------------------------------------------- */ @media (min-width: 768px) { /* Remve the edge padding needed for mobile */ .marketing { padding-left: 0; padding-right: 0; } /* Navbar positioning foo */ .navbar-wrapper { margin-top: 20px; margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */ } /* The navbar becomes detached from the top, so we round the corners */ .navbar-wrapper .navbar { border-radius: 4px; } /* Bump up size of carousel content */ .carousel-caption p { margin-bottom: 20px; font-size: 21px; line-height: 1.4; } } This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1 @@ <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />