Pure CSS Snippet Taste using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//// 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
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 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
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Taste "
Pure CSS 1.0.0 Snippet by divyalahad

Related: See More

Questions / Comments:

"Taste " Pure CSS 1.0.0 Snippet by divyalahad

Related: See More

Questions / Comments:

"Taste "
Pure CSS 1.0.0 Snippet by divyalahad