Practice project for Boulder Salad- responsive flip menu, pure CSS

In this example below you will see how to do a Practice project for Boulder Salad- responsive flip menu, pure CSS with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 120hit, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 120hit ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Practice project for Boulder Salad- responsive flip menu, pure CSS</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1 class='title'>Boulder Salad Menu</h1>

<head>
  <header>
    <p class="creds">created by <a href="https://www.facebook.com/120HEAT">Rohit Rai Shrestha</a></p>
  </header>

</head>

<body>
  <!-- 10 things in hmtl to make a img into a flip card
      -div class=flip-menu
      -section class=flip-item-wrap
      -img class=fake-image src="www.example1.com"
      -input type=checkbox and class=flipper and id=a
      -label for=a and class=flip-item
      -figure class=front and inside is img src="www.example1.com"
      -figure class=back and inside is img src="www.example1.com" 
      -div class=flip-item-desc
      -h4 class=flip-item-title
      -p text
-->

  <div class="flip-menu">

    <section class="flip-item-wrap">
      <img class="fake-image" src="http://www.afullplatenyc.com/wp-content/uploads/2016/06/Grilled-Chicken-Greek-Salad-2-500x500.jpg" alt="" />
      <input type="checkbox" class="flipper" id="a">
      <label for="a" class="flip-item">
        <figure class="front"><img src="http://www.afullplatenyc.com/wp-content/uploads/2016/06/Grilled-Chicken-Greek-Salad-2-500x500.jpg" alt=""></img></figure>
      <figure class="back">
        <img src="http://www.afullplatenyc.com/wp-content/uploads/2016/06/Grilled-Chicken-Greek-Salad-2-500x500.jpg" alt="">
        <div class="flip-item-desc">
          <h4 class="flip-item-title">Grilled Chicken Caesar</h4>
          <div class="p">
          <p><center>Romaine</center></p>
          <p><center>Croutons</center></p>
          <p><center>Parmesan</center></p>
          <p><center>Caesar Dressing</center></p>
          <p><center>Grilled Chicken Breast</center></p>
          </div>
          
          <!--<ul>
            
            <li>Romaine</li>
            <li>Croutons</li>
            <li>Parmesan</li>
            <li>Caesar Dressing</li>
            <li>Grilled Chicken Breast</li>
          </ul> -->
         
         
          <p class="c1">32 oz: $8.49</p>
          <p class="c2">48 oz: $11.49</p>
        
            </div>
          </figure>
        </label>
    </section>
  </div>

  <section class="flip-item-wrap">
    <img class="fake-image" src="https://media1.popsugar-assets.com/files/thumbor/RzOaGxVZcjSE73XZx5G3mzYYI4I/fit-in/500x500/filters:format_auto-!!-:strip_icc-!!-/2015/01/30/890/n/1922729/7b44e78d_edit_img_image_1346497_1422646860/i/Mediterranean-Quinoa-Salad.png"
      alt="" />
    <input type="checkbox" class="flipper" id="b">
    <label for="b" class="flip-item">
        <figure class="front"><img src="https://media1.popsugar-assets.com/files/thumbor/RzOaGxVZcjSE73XZx5G3mzYYI4I/fit-in/500x500/filters:format_auto-!!-:strip_icc-!!-/2015/01/30/890/n/1922729/7b44e78d_edit_img_image_1346497_1422646860/i/Mediterranean-Quinoa-Salad.png" alt=""></img></figure>
      <figure class="back">
        <img src="https://media1.popsugar-assets.com/files/thumbor/RzOaGxVZcjSE73XZx5G3mzYYI4I/fit-in/500x500/filters:format_auto-!!-:strip_icc-!!-/2015/01/30/890/n/1922729/7b44e78d_edit_img_image_1346497_1422646860/i/Mediterranean-Quinoa-Salad.png" alt="">
        <div class="flip-item-desc">
          <h4 class="flip-item-title">Greek To Me</h4>
          <ul>
            <li>Feta</li>
            <li>Romaine</li>
            <li>Red Onions</li>
            <li>Black Olives</li>
            <li>Artichoke Hearts</li>
            <li>Classic Greek Dressing</li>
          </ul>
         
         
          <p class="c1">32 oz: $7.49</p>
          <p class="c2">48 oz: $10.49</p>
        
            </div>
          </figure>
        </label>
  </section>
  </div>

  <section class="flip-item-wrap">
    <img class="fake-image" src="http://mvpfirenowfans.com/wp-content/uploads/waldorf-chicken-salad.jpg" alt="" />
    <input type="checkbox" class="flipper" id="c">
    <label for="c" class="flip-item">
        <figure class="front"><img src="http://mvpfirenowfans.com/wp-content/uploads/waldorf-chicken-salad.jpg" alt=""></img></figure>
      <figure class="back">
        <img src="http://mvpfirenowfans.com/wp-content/uploads/waldorf-chicken-salad.jpg" alt="">
        <div class="flip-item-desc">
          <h4 class="flip-item-title">Buffalo Chicken</h4>
         <ul>
            <li>Iceberg</li>
            <li>Carrots</li>
            <li>Croutons</li>
            <li>Blue Cheese</li>
            <li>Buffalo Chicken</li>
            <li>buffalo blue cheese dressing</li>
          </ul>
         
          <p class="c1">32 oz: $8.49</p>
          <p class="c2">48 oz: $11.49</p>
        
            </div>
          </figure>
        </label>
  </section>
  </div>

  <section class="flip-item-wrap">
    <img class="fake-image" src="https://www.pamperedchef.com/iceberg/com/recipe/71616-lg.jpg" alt="" />
    <input type="checkbox" class="flipper" id="d">
    <label for="d" class="flip-item">
        <figure class="front"><img src="https://www.pamperedchef.com/iceberg/com/recipe/71616-lg.jpg" alt=""></img></figure>
      <figure class="back">
        <img src="https://www.pamperedchef.com/iceberg/com/recipe/71616-lg.jpg" alt="">
        <div class="flip-item-desc">
          <h4 class="flip-item-title">Home Style</h4>
         <ul>
            <li>Carrots</li>
            <li>Iceberg</li>
            <li>Croutons</li>
            <li>Cucumber</li>
            <li>Mushroom</li>
            <li>Tomatoes</li>
            <li>Creamy Ranch</li>
          </ul>
         
          <p class="c1">32 oz: $7.49</p>
          <p class="c2">48 oz: $10.49</p>
        
            </div>
          </figure>
        </label>
  </section>
  </div>

  <section class="flip-item-wrap">
    <img class="fake-image" src="https://www.pamperedchef.com/iceberg/com/recipe/80896-lg.jpg" alt="" />
    <input type="checkbox" class="flipper" id="e">
    <label for="e" class="flip-item">
        <figure class="front"><img src="https://www.pamperedchef.com/iceberg/com/recipe/80896-lg.jpg" alt=""></img></figure>
      <figure class="back">
        <img src="https://www.pamperedchef.com/iceberg/com/recipe/80896-lg.jpg" alt="">
        <div class="flip-item-desc">
          <h4 class="flip-item-title">The Italiano</h4>
         <ul>
          
            <li>Iceberg</li>
            <li>Mozzarella</li>
            <li>Red Onions</li>
            <li>Black Olives</li>
            <li>Italian Dressing</li>
            <li>Banana Pepper Tomatoes</li>
          </ul>
         
          <p class="c1">32 oz: $7.49</p>
          <p class="c2">48 oz: $10.49</p>
        
            </div>
          </figure>
        </label>
  </section>
  </div>

  <section class="flip-item-wrap">
    <img class="fake-image" src="http://www.dinnerdelicious.com/wp-content/uploads/2016/06/Caprese_wood-500x500.jpg" alt="" />
    <input type="checkbox" class="flipper" id="f">
    <label for="f" class="flip-item">
        <figure class="front"><img src="http://www.dinnerdelicious.com/wp-content/uploads/2016/06/Caprese_wood-500x500.jpg" alt=""></img></figure>
      <figure class="back">
        <img src="http://www.dinnerdelicious.com/wp-content/uploads/2016/06/Caprese_wood-500x500.jpg" alt="">
        <div class="flip-item-desc">
          <h4 class="flip-item-title">Caprese</h4>
         <ul>
           <li>Basil</li>
           <li>Olive Oil</li>
           <li>tomatoes</li>
           <li>Croutons</li>
           <li>Mozzarella</li>
           <li>Mix Greeens</li>
           <li>Salt & Pepper</li>
           <li>Balsamic Vinegar</li>
          </ul>
         
          <p class="c1">32 oz: $7.49</p>
          <p class="c2">48 oz: $10.49</p>
        
            </div>
          </figure>
        </label>
  </section>
  </div>


</body>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/120hit/practice-project-for-boulder-salad-responsive-flip-menu-pure-css-yMejVe */
body {
  margin: 0;
  font: 14px helvetica, Arial, serif;
}

.title {
  text-align: center;
  color: #333;
  font-size: 1.6em
}

.creds {
  text-align: center;
  color: #666;
  font-size: 1.00em;
}

.creds a {
  color: #000;
  text-decoraton: none;
}

.flip-menu {
  margin: 30px 0 0;
}

.flip-item-wrap {
  width: 25%;
  height: auto;
  float: left;
  position: relative;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -ms-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
}

@media screen and (min-width: 1280px) {
  .flip-item-wrap {
    width: 16.6%;
  }
}

@media screen and (max-width: 979px) {
  .flip-item-wrap {
    width: 33.3%;
  }
}

@media screen and (max-width: 639px) {
  .flip-item-wrap {
    width: 50%;
  }
}

@media screen and (max-width: 379px) {
  .flip-item-wrap {
    width: 100%;
  }
}

.flip-item-wrap img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
}

.flip-item-wrap input {
  display: none;
}

.flip-item-wrap .fake-image {
  visibility: hidden;
}

.flip-item {
  display: block;
  width: 100%;
  height: 100%;
  float: left;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  color: #fff;
  <!-- wekit applied from outsource --> -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
}

.flip-item figure {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  <!-- another webkit outsource --> -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-item .back {
  width: 100%;
  display: block;
  margin: 0;
  <!-- webkit #3 --> -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -ms-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

.flipper:checked + .flip-item {
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -ms-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

.flip-item-desc {
  background: rgba(0, 0, 0, 0.2);
  width: 90%;
  height: 100%;
  padding: 5%;
  position: absolute;
  top: 0;
  left: 0;
  text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}

.flip-item-title {
  font-size: 1.5em;
  margin: 1em 0 0.8em;
}

.c1 {
  text-align: center;
}

.c2 {
  text-align: center;
}

h4 {
  text-align: center;
}

.p {
  font: Helvetica
}

Comments