Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="grid">
  <div class="rotate-container">
    <div class="card card-front">
      <div class="card-header">
        <p>About Me</p>
      </div>
      <div class="card-background"></div>
      <div class="card-block">
        <img class="avatar" src="https://d3iw72m71ie81c.cloudfront.net/male-11.jpg" alt="Avatar" />
        <h3 class="card-title">John Connor</h3>
        <p>Time Traveler</p>
        <button class="btn btn-primary btn-rotate">Read more &nbsp;
                                   <i class="fa fa-long-arrow-right"></i>
                              </button>
      </div>
    </div>
    <div class="card card-back">
      <div class="card-header">
        <p>More About Me</p>
      </div>
      <div class="card-block">
        <h4>Interests</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a faucibus.</p>
        <h4>Connect:</h4>
        <ul class="social-links list-unstyled d-flex justify-content-center">
          <li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
          <li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
          <li><a href="#" target="_blank"><i class="fa fa-snapchat"></i></a></li>
          <li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
        </ul>
        <button class="btn btn-primary btn-rotate">
                                   <i class="fa fa-long-arrow-left"></i>&nbsp;Back
                              </button>
      </div>
    </div>
  </div>
  <div class="rotate-container">
    <div class="card card-front">
      <div class="card-header">
        <p>About Me</p>
      </div>
      <div class="card-background"></div>
      <div class="card-block">
        <img class="avatar" src="https://d3iw72m71ie81c.cloudfront.net/male-11.jpg" alt="Avatar" />
        <h3 class="card-title">John Connor</h3>
        <p>Time Traveler</p>
        <button class="btn btn-primary btn-rotate">Read more &nbsp;
                                   <i class="fa fa-long-arrow-right"></i>
                              </button>
      </div>
    </div>
    <div class="card card-back">
      <div class="card-header">
        <p>More About Me</p>
      </div>
      <div class="card-block">
        <h4>Interests</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a faucibus.</p>
        <h4>Connect:</h4>
        <ul class="social-links list-unstyled d-flex justify-content-center">
          <li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
          <li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
          <li><a href="#" target="_blank"><i class="fa fa-snapchat"></i></a></li>
          <li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
        </ul>
        <button class="btn btn-primary btn-rotate">
                                   <i class="fa fa-long-arrow-left"></i>&nbsp;Back
                              </button>
      </div>
    </div>
  </div>
  <div class="rotate-container">
    <div class="card card-front">
      <div class="card-header">
        <p>About Me</p>
      </div>
      <div class="card-background"></div>
      <div class="card-block">
        <img class="avatar" src="https://d3iw72m71ie81c.cloudfront.net/male-11.jpg" alt="Avatar" />
        <h3 class="card-title">John Connor</h3>
        <p>Time Traveler</p>
        <button class="btn btn-primary btn-rotate">Read more &nbsp;
                                   <i class="fa fa-long-arrow-right"></i>
                              </button>
      </div>
    </div>
    <div class="card card-back">
      <div class="card-header">
        <p>More About Me</p>
      </div>
      <div class="card-block">
        <h4>Interests</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a faucibus.</p>
        <h4>Connect:</h4>
        <ul class="social-links list-unstyled d-flex justify-content-center">
          <li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
          <li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
          <li><a href="#" target="_blank"><i class="fa fa-snapchat"></i></a></li>
          <li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
        </ul>
        <button class="btn btn-primary btn-rotate">
                                   <i class="fa fa-long-arrow-left"></i>&nbsp;Back
                              </button>
      </div>
    </div>
  </div>
</div>
              
            
!

CSS

              
                // Main variables

// Colors
$carbon:                                #A9A9A9     !default;
$watermelon:                            #FF3B3F     !default;
$neutral:                               #EFEFEF     !default;
$tinted-neutral:                        #E4E4E4     !default;
$charcoal:                              #292b2c     !default;
$white:                                    #FFF     !default;

// Body
//
$body-bg-color:                    $tinted-neutral  !default;
$body-color:                             $charcoal  !default;
$btn-primary:                          $watermelon  !default;
$a-link-color:                         $watermelon  !default;

// No font family is set as default

$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
$font-size-md:   .995rem !default;
$font-size-sm:   .875rem !default;

// Font weights
$font-weight-normal: normal !default;
$font-weight-bold: bold !default;

// Font weight and line heigh
$font-weight-base: $font-weight-normal !default;
$line-height-base: 1.5 !default;
$font-letter-spacing: 0.02rem !default;

// Font sizes for headers
$font-size-h1: 2.5rem !default;
$font-size-h2: 2rem !default;
$font-size-h3: 1.75rem !default;
$font-size-h4: 1.5rem !default;
$font-size-h5: 1.25rem !default;
$font-size-h6: 1rem !default;

// Headings defaults
$headings-margin-bottom: 1rem !default;
$headings-font-family:   inherit !default;
$headings-font-weight:   500 !default;
$headings-line-height:   1.5 !default;
$headings-color:         inherit !default;

// Main styles
* {
     margin: 0;
     padding: 0;
     outline: none;
     box-sizing: border-box;

     &::after, &::before {
          box-sizing: border-box;
     }
}

h1 {
     font-size: $font-size-h1;
}

h2 {
     font-size: $font-size-h2;
}

h3 {
     font-size: $font-size-h3;
}

h4 {
     font-size: $font-size-h4;
}

h5 {
     font-size: $font-size-h5;
}

h6 {
     font-size: $font-size-h6;
}
a {
     text-decoration: none;
     color: $a-link-color;
}
ul, ol {
     padding-left: 2.5rem;
}


h1, h2, h3, h4, h5, h6 {
     font-weight: $headings-font-weight;
     font-family: $headings-font-family;
     margin-bottom: $headings-margin-bottom;
     line-height: $headings-line-height;
     color: $headings-color;
}

// Helper classes
.btn-primary {
     display: inline-block;
     cursor: pointer;
     color: $white;
     padding: 0.5rem 1.5rem;
     margin: 1rem auto 0 auto;
     text-decoration: none;
     background-color: $btn-primary;
     border-radius: 2px;
     border: 0;
     text-align: center;
}

// Custom CSS
body {
     font-size: $font-size-sm;
     letter-spacing: $font-letter-spacing;
     line-height: $headings-line-height;
     font-family: 'Lato', sans-serif;
     background: $body-bg-color;
     color: $body-color;

     // For code pen purposes only
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;

     @media (min-width: 576px) {
          font-size: $font-size-md;
     }

     @media (min-width: 768px) {
          font-size: $font-size-base;
     }
}

.grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, 304px);  // Fills the column space dynamically without media queries
     /* Important note: There are alot of different ways to get the 3 column layout that was used here. In order to keep the sizing dynamic without any media queries I decided to make the columns with an equal size and not use fractional units. The size of the grid is 960px, dividing that into 3 equals parts amounts to 320px but it is important to take notice of the grid gap which in this case amounts to 1rem or 16px, by subtracting that we get the 304px necessary so that each card can move to the next row whenever there is not enough space for the container to be at 960px. You could also divide the columns into 12 and make the cards span 4 columns, but in the end, it's all a matter of choice and design */
     grid-auto-rows: minmax(max-content, 1fr); // Controls the rows dynamically without media queries
     grid-gap: 1rem;
     width: 960px;
     max-width: 100%;
     margin: 0 auto;
	  
}

// Card styles
/* Card styles for rotation */
.rotate-container {
     position: relative;
     // Height: 25em // Height can ensure height consitency between front and back cards
     .card-front {
          width: 100%;
          height: 100%;
          transform: perspective(600px) rotateY(0deg);
          backface-visibility: hidden;
          transition: all .5s linear 0s;
     }

     .card-back {
          @extend .card-front;
          transform: perspective(1600px) rotateY(180deg);
          position: absolute;
          top: 0;
     }

     .rotate-card-front {
          transform: perspective(1600px) rotateY(-180deg);
     }


     .rotate-card-back {
          transform: perspective(1600px) rotateY(0deg);
     }
}


/* Modified card styles */
.card {
     box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.5);
     text-align: center;
     background: $white;
     border: 1px solid transparentize($carbon, 0.5);
     border-radius: .25rem;

     .card-header {
          padding: .75rem 1.25rem;
          margin-bottom: 0;
          background-color: $neutral;
          border-bottom: 1px solid transparentize($carbon, 0.5);

          p {
               margin: 0;
          }
     }

     .card-background {
          background: url('https://static.pexels.com/photos/443374/pexels-photo-443374.jpeg');
          height: 8em;
          background-position: center center;
          background-size: cover;
     }

     .card-block {
          padding: 1rem;
			 .card-title {
          	   margin-bottom: 0;
     		 }
          h4 ~ h4 {
               margin: 1rem 0 0.5rem 0;
          }
     }

     // Absolute positioning can be used if negative margins are not preffered.
     .avatar {
          max-width: 6em;
          max-height: 6em;
          margin-top: -4em;
          margin-bottom: 1em;
          border: 4px solid white;
          border-radius: 50%;
          background: radial-gradient(#e3e3e3, #329A7C, #109381);
     }

     .btn {
          margin-bottom: 1em;
     }

     .social-links {
          padding-left: 0;
          list-style: none;
          display: flex;
          justify-content: center;

          li {
               margin: .5em;
               a {
                    font-size: 1.5em;
               }
          }
     }
}

              
            
!

JS

              
                $(function() {
	// Time wasted here: 3 hours

	// For card rotation
	$(".btn-rotate").click(function() {
		// Long explanation: The button that is clicked, will have its grand parent add a class to its child. The main reason I couldn't use .parent() was that it gets the closest positioned parent, either relative or absolute. The problem was that the card-front got the .rotate-container as its parent, but the card-back was being the closest positioned element as the parent of the button. In order to circumvent this I either needed to use 3 offsetparent() and have really messy code, or just use the .closest() which as its name suggests gets the closest named or unnamed element. So in the end, I get the grand parent of the button which is the .rotate container and I find its children which are the .card-front and .card-back and toggle the rotation classes on them. Also if I didn't specify which button's ancestor would assign the class, whenever any btn-rotate button is clicked, all three cards would rotate at once which makes for a funny yet unhelpful design.
		var $parent = $(this).closest(".rotate-container");

		// Probably easier to use an id, but I made it work
		$parent.children(".card-front").toggleClass(" rotate-card-front");
		$parent.children(".card-back").toggleClass(" rotate-card-back");
	});
});

              
            
!
999px

Console