Cacher is the code snippet organizer for pro developers

<div class="container">
   <section class="section">
      <h3 class="h3-responsive text-xs-center animated fadeInUp">Here is your code...you are welcome!</h3>
   </section>
   <!-- Cards -->
   <div class="card-group">
      <!-- Rotating card 1 -->
      <div class="card-wrapper col-md-4">
         <div id="card-1" class="card card-rotating effect__click">
            <!-- Front Side -->
            <div class="face front">
               <!-- Image-->
               <div class="card-up">
                  <img src="http://mdbootstrap.com/images/reg/reg%20(35).jpg" class="img-fluid">
               </div>
               <!-- Triggering button -->
               <a class="btn-floating btn-action rotate-btn deep-purple" data-card="card-1"><i class="fa fa-chevron-right"></i></a>
               <!-- Content -->
               <div class="card-block">
                  <h4>Jonathan Doe</h4>
                  <p>Web developer</p>
               </div>
            </div>
            <!-- /.Front Side -->
            <!-- Back Side -->
            <div class="face back">
               <!-- Content -->
               <h4>About me</h4>
               <hr>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?</p>
               <hr>
               <!-- Social Icons -->
               <ul class="inline-ul">
                  <li><a class="icons-sm fb-ic"><i class="fa fa-facebook"></i></a></li>
                  <li><a class="icons-sm tw-ic"><i class="fa fa-twitter"></i></a></li>
                  <li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"></i></a></li>
                  <li><a class="icons-sm li-ic"><i class="fa fa-linkedin"></i></a></li>
               </ul>
               <!-- Triggering button -->
               <a class="btn-floating rotate-btn deep-purple" data-card="card-1"><i class="fa fa-chevron-left"></i></a>
            </div>
            <!-- /.Back Side -->
         </div>
      </div>
      <!-- /.Rotating card 1 -->
      <!-- Rotating card 2 -->
      <div class="card-wrapper col-md-4">
         <div id="card-2" class="card card-rotating effect__click">
            <!-- Front Side -->
            <div class="face front">
               <!-- Image-->
               <div class="card-up">
                  <img src="http://mdbootstrap.com/images/reg/reg%20(35).jpg" class="img-fluid">
               </div>
               <!-- Triggering button -->
               <a class="btn-floating btn-action rotate-btn deep-purple" data-card="card-2"><i class="fa fa-chevron-right"></i></a>
               <!-- Content -->
               <div class="card-block">
                  <h4>Jonathan Doe</h4>
                  <p>Web developer</p>
               </div>
            </div>
            <!-- /.Front Side -->
            <!-- Back Side -->
            <div class="face back">
               <!-- Content -->
               <h4>About me</h4>
               <hr>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?</p>
               <hr>
               <!-- Social Icons -->
               <ul class="inline-ul">
                  <li><a class="icons-sm fb-ic"><i class="fa fa-facebook"></i></a></li>
                  <li><a class="icons-sm tw-ic"><i class="fa fa-twitter"></i></a></li>
                  <li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"></i></a></li>
                  <li><a class="icons-sm li-ic"><i class="fa fa-linkedin"></i></a></li>
               </ul>
               <!-- Triggering button -->
               <a class="btn-floating rotate-btn deep-purple" data-card="card-2"><i class="fa fa-chevron-left"></i></a>
            </div>
            <!-- /.Back Side -->
         </div>
      </div>
      <!-- /.Rotating card 2 -->
      <!-- Rotating card 3 -->
      <div class="card-wrapper col-md-4">
         <div id="card-3" class="card card-rotating effect__click">
            <!-- Front Side -->
            <div class="face front">
               <!-- Image-->
               <div class="card-up">
                  <img src="http://mdbootstrap.com/images/reg/reg%20(35).jpg" class="img-fluid">
               </div>
               <!-- Triggering button -->
               <a class="btn-floating btn-action rotate-btn deep-purple" data-card="card-3"><i class="fa fa-chevron-right"></i></a>
               <!-- Content -->
               <div class="card-block">
                  <h4>Jonathan Doe</h4>
                  <p>Web developer</p>
               </div>
            </div>
            <!-- /.Front Side -->
            <!-- Back Side -->
            <div class="face back">
               <!-- Content -->
               <h4>About me</h4>
               <hr>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?</p>
               <hr>
               <!-- Social Icons -->
               <ul class="inline-ul">
                  <li><a class="icons-sm fb-ic"><i class="fa fa-facebook"></i></a></li>
                  <li><a class="icons-sm tw-ic"><i class="fa fa-twitter"></i></a></li>
                  <li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"></i></a></li>
                  <li><a class="icons-sm li-ic"><i class="fa fa-linkedin"></i></a></li>
               </ul>
               <!-- Triggering button -->
               <a class="btn-floating rotate-btn deep-purple" data-card="card-3"><i class="fa fa-chevron-left"></i></a>
            </div>
            <!-- /.Back Side -->
         </div>
      </div>
      <!-- /.Rotating card 3 -->
   </div>
   <!-- /.card group -->
</div>
<!-- /.container -->