<link href="//cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/pure-min.css" rel="stylesheet" id="bootstrap-css">
<script src=""></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- A splash page cover for a website that features a unique click/touch event to pull up a menu.-->
<!-- The menu here is traditional navigation, but could include anything, really (video, images, blog posts, etc.).-->
<!-- Note: Kruse's Baked Goods is a real bakery in Calgary, AB, Canada. I used their logo and tagline without permission for-->
<!-- demonstration purposes. The background image is also used without permission. It's a bakery in Sweden. -->
<!-- This variation is to highlight what to do with really long content. Look in the food menu to see it in action.-->
<!-- There isn't really anything to be done in the browser about the ugly scroll bars. But mobile looks good!-->
<div class="image"><img src="http://krusesbakery.com/wp-content/uploads/2014/10/kruses-logo_solo2.png"/>
<h1>The taste of tradition with a pinch of innovation</h1>
</div>
<!-- Modals-->
<div class="overlay"></div>
<section class="modal popup nav-wrapper">
<!-- buttons-->
<div class="buttons__wrapper"><a class="button" href="#" data-popup="menu">Menu</a><a class="button" href="#" data-popup="locations">Locations</a><a class="button" href="#" data-popup="contact">Contact</a></div>
</section>
<section class="modal popup menu" id="menu">
<h1>Our Menu</h1>
<div class="menu__wrapper">
<article class="menu__goodies goodies__names">
<p>Stollen</p>
<p>Gluten Free Brownies</p>
<p>Coarse Rye Bred</p>
<p>Hockey Puck</p>
<p>Pumpkin Pie</p>
<p>Stollen</p>
<p>Gluten Free Brownies</p>
<p>Coarse Rye Bred</p>
<p>Hockey Puck</p>
<p>Pumpkin Pie</p>
<p>Stollen</p>
<p>Gluten Free Brownies</p>
<p>Coarse Rye Bred</p>
<p>Hockey Puck</p>
<p>Pumpkin Pie</p>
<p>Stollen</p>
<p>Gluten Free Brownies</p>
<p>Coarse Rye Bred</p>
<p>Hockey Puck</p>
<p>Pumpkin Pie</p>
</article>
<article class="menu__goodies goodies__prices">
<p>$1.99 / loaf</p>
<p>$0.99 / ea</p>
<p>$2.49 / loaf</p>
<p>$0.99 / 3</p>
<P>$7.99 / whole</P>
<p>$1.99 / loaf</p>
<p>$0.99 / ea</p>
<p>$2.49 / loaf</p>
<p>$0.99 / 3</p>
<P>$7.99 / whole</P>
<p>$1.99 / loaf</p>
<p>$0.99 / ea</p>
<p>$2.49 / loaf</p>
<p>$0.99 / 3</p>
<P>$7.99 / whole</P>
<p>$1.99 / loaf</p>
<p>$0.99 / ea</p>
<p>$2.49 / loaf</p>
<p>$0.99 / 3</p>
<P>$7.99 / whole</P>
</article>
</div>
</section>
<section class="modal popup locations" id="locations">
<h1>Our Locations</h1>
<article class="location__names">
<p>Los Angeles</p>
<p>La Jolla</p>
<P>Pasadena</P>
</article>
</section>
<section class="modal popup contact" id="contact">
<h1>Contact Us</h1>
<article class="contact__names">
<p> <a href="mailto:contact@krusesbakery.com">contact@krusesbakery.com</a></p>
<p> <a href="tel:+11234567890">(123) 456-7890</a></p>
<P> <a href="https://www.google.com/maps/place/Pasadena,+CA/@34.1844659,-118.1668283,13z/data=!3m1!4b1!4m5!3m4!1s0x80c2c2dc38330b51:0x52b41161ad18f4a!8m2!3d34.1477849!4d-118.1445155" target="_blank">123 Somewhere St.<br>Pasadena, CA 91101</a></P>
</article>
</section>
<p class="controls back"><i class="fa fa-angle-left" aria-hidden="true"></i></p>
<p class="controls close"><i class="fa fa-times" aria-hidden="true"></i></p>
//// General Styles
body
margin: 0
font-family: 'Raleway', sans-serif
position: relative
a
text-decoration: none
color: white
//// Cover image and tagline
.image
background: linear-gradient(rgba(black, 0.3), rgba(black, 0.3)), url(https://www.urbanpixxels.com/wp-content/uploads/29-7947-post/Swedish-bakery-Fabrique.jpg)
size: cover
position: center
height: 100vh // creates splash page effect, covers viewport
text-align: center
padding: 0 2rem
img
width: 75%
text-align: center
filter: drop-shadow(0px 0px 45px rgba(black, 0.3)) // weak drop shadow just on the image, not the image container
@media (min-width: 600px)
img
width: 50%
@media (min-width: 900px)
img
width: 30%
h1
color: white
text-transform: capitalize
font-size: 2.5rem
@media (min-width: 600px)
h1
font-size: 3rem
@media (min-width: 900px)
h1
font-size: 4rem
//// Popup navigation styles
// the background overlay shown on click
.overlay
background:
color: #000
position: absolute
top: 0
left: 0
width: 100%
height: 100vh
z-index: 10
opacity: 0.9
// outside modal container
.modal
display: none
position: absolute
top: 0
left: 0
width: 100%
height: 100%
z-index: 15
// inside modal container
.popup
color: white
z-index: 49
display: flex
flex-direction: column
justify-content: center
text-align: center
h1
text-align: center
margin-bottom: 2rem
// root navigation with buttons
.nav-wrapper
display: flex
flex-direction: column // aligns the content vertically in a column
justify-content: center // centers the content vertically
align-items: center // centers content horizontally
z-index: 50
// button styles on overlay
a.button
display: block
width: 150px
border: 3px solid white
padding: 1rem 3rem
margin: 2rem 0
border-radius: 50px
z-index: 50
&:hover
background:
color: white
color: black
@media (min-width: 600px)
a.button
font-size: 2rem
ul
list-style: none
padding-left: 0
margin: 0
padding: 0
li
padding: 1rem
font-size: 1.5rem
@media (min-width: 600px)
.nav-wrapper
ul
li
font-size: 2rem
// locations menu style
@media (min-width: 600px)
.locations
font-size: 2rem
.location__names
font-size: 1.3em
//// Men controls (back and close triggers)
.controls
position: fixed
bottom: 0
font-size: 2rem
color: #777
cursor: pointer
z-index: 50
// back to main menu button
.back
right: 2rem
i
font-weight: bold
@media (min-width: 600px)
.back
top: 0
font-size: 2.5rem
// the close button (the "X" in the top right)
.close
right: 2rem
@media (min-width: 600px)
.close
top: 0
font-size: 2.5rem
//// Styles for the food menu
.menu
font-size: 1.1rem
text-align: left
@media (min-width: 675px)
.menu
font-size: 2rem
.menu__wrapper
display: flex
justify-content: center
align-items: center
height: 40% // set the height of the container. i'd say no more than 50% so that it doesn't affect the back and close buttons
overflow-y: scroll // set this to auto (or scroll to be explicit)
.menu__goodies
margin: 0 1rem
.goodies__names
font-weight: bold
//// Styles for the contact menu
.contact
font-size: 1.3rem
@media (min-width: 600px)
.contact
font-size: 2rem
// hide items on load
// could also hide them with classes and switch flex on and off by addClass method
$(".overlay, .popup, .close, .back").hide();
// click on cover image and menu items appear
$(".image").on("click", function() {
$(".overlay, .nav-wrapper, .close").fadeIn(300);
});
// close everything when clicking on the "X"
$(".close").on("click", function() {
$(".overlay, .popup, .close").fadeOut(300);
});
// menu popup
$(".buttons__wrapper .button").on("click", function(e) {
e.preventDefault();
var popupID = $(this).attr("data-popup"); // assign popup ID of item clicked
$(".close").hide(); // hide close button
$(".back").fadeIn(300); // show back button
$(".popup").fadeOut(300); // close all popups
$("#" + popupID).fadeIn(300); // open popup that goes with element clicked
});
// takes user back to main menu
$(".back").on("click", function() {
$(".close").fadeIn(300); // show the close button ("X")
$(".back").hide(); // hide back button
$(".popup").fadeOut(300); // hide all popups
$(".overlay, .nav-wrapper, .close").fadeIn(300); // show main menu elements
});
