cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              <div class="ad-frame slide-1">
  <h1>Flexible, responsive <br>emails that just work.</h1>
  <div class="device client empty hidden">
    <div class="screen">
      <div class="email">
        <div class="header">
          <div class="logo">
          </div>
        </div>
        <div class="content">
          <ul class="full">
            <li class="img"></li>
            <li class="link"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li class="link"></li>
            <li></li>
            <li class="link"></li>
          </ul>
          <ul class="half left">
            <li class="img"></li>
            <li class="link"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li class="link"></li>
            <li></li>
            <li class="link"></li>
          </ul>
          <ul class="half right">
            <li class="img"></li>
            <li></li>
            <li class="link"></li>
            <li></li>
            <li></li>
            <li class="link"></li>
            <li></li>
            <li class="link"></li>
            <li class="link"></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="stand">
    </div>
  </div>
  <div class="shadow">
  </div>
  
  <svg  class="replay" version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 61 59" enable-background="new 0 0 61 59" xml:space="preserve">
    <path d="M10.5,46.9l5.3-5.3l1.8-1.8l1.8,1.8c6.6,6.6,17.5,6.6,24.1,0c6.6-6.6,6.6-17.5,0-24.1c-6.6-6.6-17.5-6.6-24.1,0
	c-0.5,0.5-1,1-1.4,1.6l5.4,5.3l4.3,4.3l-6.1,0l-19,0l-2.5,0l0-2.5l0-19l0-6l4.3,4.3l4.8,4.8c0.5-0.5,0.9-1.1,1.4-1.6
	C22-2.9,40.8-2.9,52.3,8.6c11.5,11.5,11.6,30.3,0,41.8C40.8,62,22.1,62,10.5,50.5l-1.8-1.8L10.5,46.9z"/>
  </svg>

  <h2>Create a beautiful email <br>template in Canvas.</h2>
  <a href="https://www.campaignmonitor.com/email-templates/?utm_source=codepen&utm_medium=banner&utm_campaign=canvas" class="button" target="_blank">Start building</a>

  <svg class="cm-logo" version="1.1" id="Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 291.9 197.5" enable-background="new 0 0 291.9 197.5" xml:space="preserve">
    <g>
      <path d="M289.9,4.7c-3.5-5-150.4-6.2-15.5-2.7L2,192.8c2,2.9,5.3,4.7,9.1,4.7l0,0v0h269.7c6.1,0,11.1-5,11.1-11.1V10.9 C291.9,8.8,291.2,6.6,289.9,4.7"/>
      <path d="M17.5,2C12.5-1.5,5.5-0.3,2,4.7c-1.3,1.9-2,4.1-2,6.2l0,175.8L129.7,80.5L17.5,2z"/>
    </g>
  </svg>
  
  <svg class="cm-logo-word" version="1.1" id="Logotype" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 2837.8 326.9" enable-background="new 0 0 2837.8 326.9" xml:space="preserve">
    <g>
      <path d="M1167.8,0c-13.1,0-23.2,2.8-23.2,14.9v11.9c0,12.1,10.1,15.3,23.2,15.3c13.1,0,23.2-3.1,23.2-15.3V14.9
        C1191,2.8,1180.9,0,1167.8,0z"/>
      <path d="M1177.2,65.8h-18.5c-6.1,0-11.1,5-11.1,11.1v159c0,6.1,5,11.1,11.1,11.1h18.5c6.1,0,11.1-5,11.1-11.1v-159
        C1188.3,70.7,1183.3,65.8,1177.2,65.8z"/>
      <path d="M636.8,63.9c-26.9,0-45.8,11.8-59.9,30.6c-9.4-18.8-27.6-30.6-53.2-30.6c-27.2,0-42.7,14.8-54.2,30.6l0-17.7
        c0-6.1-5-11.1-11.1-11.1H440c-6.1,0-11.1,5-11.1,11.1v159c0,6.1,5,11.1,11.1,11.1h18.5c6.1,0,11.1-5,11.1-11.1l0-90.8
        c0-27.3,15.5-44.1,38-44.1c22.5,0,36,15.5,36,43.1v91.8c0,6.1,5,11.1,11.1,11.1h18.5c6.1,0,11.1-5,11.1-11.1V145
        c0-28.6,15.8-44.1,38-44.1c22.9,0,36,15.2,36,43.4l0,91.5c0,6.1,5,11.1,11.1,11.1H688c6.1,0,11.1-5,11.1-11.1v-104
        C699.1,88.5,675.5,63.9,636.8,63.9z"/>
      <path d="M2354.4,0c-13.1,0-23.2,2.8-23.2,14.9v11.9c0,12.1,10.1,15.3,23.2,15.3c13.1,0,23.2-3.1,23.2-15.3V14.9
        C2377.6,2.8,2367.5,0,2354.4,0z"/>
      <path d="M2363.8,65.8h-18.5c-6.1,0-11.1,5-11.1,11.1v159c0,6.1,5,11.1,11.1,11.1h18.5c6.1,0,11.1-5,11.1-11.1v-159
        C2374.9,70.7,2370,65.8,2363.8,65.8z"/>
      <path d="M121.6,47.2c17.7,0,34.5,5.6,48.4,16.3c1.9,1.4,4.1,2.2,6.5,2.2c2.8,0,5.5-1.1,7.6-3.1l14.2-14.2c2.1-2.2,3.3-5.1,3.1-8.2
        c-0.2-3-1.6-5.9-4-7.8c-21.7-17.3-47.9-26.5-75.8-26.5C54.6,5.9,0,60.5,0,127.5c0,67.1,54.6,121.6,121.6,121.6
        c27.9,0,54.2-9.2,75.8-26.5c2.4-1.9,3.8-4.7,4-7.7c0.2-3.1-1-6-3.1-8.2l-14.2-14.2c-2-2-4.7-3.1-7.6-3.1c-2.4,0-4.6,0.7-6.5,2.2
        c-14,10.6-30.7,16.3-48.4,16.3c-44.3,0-80.3-36-80.3-80.3C41.3,83.2,77.3,47.2,121.6,47.2z"/>
      <path d="M1380.8,65.8h-18.5c-6.1,0-11.1,5-11.1,11.1v17.8c-13.1-18.5-31.6-30.6-60.6-30.6c-41.7,0-82.4,33-82.4,92.2v0.7
        c0,58.9,40.4,92.2,82.4,92.2c29.6,0,48.1-13.6,60.6-30.1l0.3-0.4v16.4c0,30.6-23.6,58.7-56.6,58.7c-20.3,0-38.8-9.4-48.1-25.2
        c-3.2-5.2-10-6.9-15.2-3.7l-7.8,5.2c-5.3,3.2-6.9,10-3.8,15.3c15.3,25,42.4,41.6,76.7,41.6c58.9,0,95.2-42.1,95.2-92.5V76.9
        C1391.9,70.7,1386.9,65.8,1380.8,65.8z M1347.5,156.9c0,34-23.3,56.9-49.9,56.9c-26.9,0-48.1-21.9-48.1-56.9v-0.7
        c0-34.3,21.5-56.8,48.1-56.8c26.6,0,49.9,22.9,49.9,56.8V156.9z"/>
      <path d="M2242.4,64.1c-27.6,0-44.1,14-55.5,30.5V76.9c0-6.1-5-11.1-11.1-11.1h-18.5c-6.1,0-11.1,5-11.1,11.1v159
        c0,6.1,5,11.1,11.1,11.1h18.5c6.1,0,11.1-5,11.1-12.8l0-95.7c0-21.6,17.5-39,39-39s39,17.5,39,39v97.4c0,6.1,5,11.1,11.1,11.1h18.5
        c6.1,0,11.1-5,11.1-11.1V132C2305.6,91,2282.4,64.1,2242.4,64.1z"/>
      <path d="M1516.7,64.1c-27.6,0-44.1,14-55.5,30.5V76.9c0-6.1-5-11.1-11.1-11.1h-18.5c-6.1,0-11.1,5-11.1,11.1v159
        c0,6.1,5,11.1,11.1,11.1h18.5c6.1,0,11.1-5,11.1-12.8l0-95.7c0-21.6,17.5-39,39-39s39,17.5,39,39v97.4c0,6.1,5,11.1,11.1,11.1h18.5
        c6.1,0,11.1-5,11.1-11.1V132C1579.9,91,1556.7,64.1,1516.7,64.1z"/>
      <path d="M2833.2,66.2c-0.5-0.2-0.9-0.4-1.2-0.5c-0.4-0.1-0.9-0.2-1.4-0.3c-3.8-0.9-7.7-1.3-11.8-1.3c-21.2,0-39.6,12.4-48.2,30.3
        V76.9c0-6.1-5-11.1-11.1-11.1h-18.5c-6.1,0-11.1,5-11.1,11.1v159c0,6.1,5,11.1,11.1,11.1h18.5c6.1,0,11.1-5,11.1-11.1v-67.3
        c0-54.3,28.4-64.1,44.7-62.8c3.2,0.3,6,0.7,8.4,1c0,0,0.9,0.1,1.4,0.1c0.2,0,0.5,0,0.7,0c3.8,0,7-2.7,7.7-6.3l4.1-26.1
        c0.1-0.4,0.1-0.8,0.1-1.2C2837.8,70.1,2835.9,67.4,2833.2,66.2z"/>
      <path d="M2031.3,64.1c-54.5,0-94.5,41.4-94.5,92.2v0.4v0.4c0,50.8,40,92.2,94.5,92.2s94.5-41.4,94.5-92.2v-0.4v-0.4
        C2125.8,105.5,2085.8,64.1,2031.3,64.1z M2084.5,156.7v0.6c0,31.1-21.6,56.2-53.2,56.5c-31.6-0.3-53.2-25.5-53.2-56.5v-0.6v-0.6
        c0-31.1,21.6-56.2,53.2-56.5c31.6,0.3,53.2,25.5,53.2,56.5V156.7z"/>
      <path d="M2614.3,64.1c-54.5,0-94.5,41.4-94.5,92.2v0.4v0.4c0,50.8,40,92.2,94.5,92.2s94.5-41.4,94.5-92.2v-0.4v-0.4
        C2708.9,105.5,2668.8,64.1,2614.3,64.1z M2667.5,156.7v0.6c0,31.1-21.6,56.2-53.2,56.5c-31.6-0.3-53.2-25.5-53.2-56.5v-0.6v-0.6
        c0-31.1,21.6-56.2,53.2-56.5c31.6,0.3,53.2,25.5,53.2,56.5V156.7z"/>
      <path d="M1904.5,8.4H1886c-3.6,0-6.8,1.8-8.9,4.5l-76.5,104.5l-76.5-104.5c-2.1-2.7-5.2-4.5-8.9-4.5h-18.6c-6.1,0-11.1,5-11.1,11.1
        v216.3c0,6.1,5,11.1,11.1,11.1h18.5c6.1,0,11.1-5,11.1-11.1V85.8l67.6,86.7c0.1,0.1,0.1,0.1,0.2,0.2l0.5,0.7h0
        c1.5,1.7,3.6,2.7,6,2.7c2.4,0,4.6-1.1,6-2.7h0l0.5-0.7c0.1-0.1,0.1-0.1,0.2-0.2l67.6-86.7v150.1c0,6.1,5,11.1,11.1,11.1h18.5
        c6.1,0,11.1-5,11.1-11.1V19.5C1915.6,13.4,1910.7,8.4,1904.5,8.4z"/>
      <polygon points="1800.6,176.1 1800.6,176.1 1800.6,176.1 	"/>
      <path d="M828.9,64.1c-28.9,0-47.4,12-60.6,30.5V76.9c0-6.1-5-11.1-11.1-11.1h-18.5c-6.1,0-11.1,5-11.1,11.1v233.3
        c0,6.1,5,11.1,11.1,11.1h18.5c6.1,0,11.1-5,11.1-11.1v-91.6c12.5,16.5,31,30.5,60.6,30.5c42.1,0,82.4-33.3,82.4-92.2v-0.7
        C911.3,97.1,870.6,64.1,828.9,64.1z M870,156.9c0,34-23.3,56.9-49.9,56.9c-26.9,0-48.1-21.9-48.1-56.9v-0.7
        c0-34.3,21.5-56.8,48.1-56.8c26.6,0,49.9,22.9,49.9,56.8V156.9z"/>
      <path d="M402,218.2L402,218.2L402,218.2c-4.3,0-7.9-3.5-7.9-7.8V76.9c0-6.1-5-11.1-11.1-11.1h-18.5c-6.1,0-11.1,5-11.1,11.1v17.7
        c-13.1-18.5-31.6-30.5-60.6-30.5c-41.7,0-82.4,33-82.4,92.2v0.7c0,58.9,40.4,92.2,82.4,92.2c30.5,0,52-13.7,61.2-30.5
        c4.7,16.4,19.7,28.3,37.6,28.3v0l10.3,0c4.3,0,7.8-3.5,7.8-7.8l0-13.1C409.9,221.7,406.4,218.2,402,218.2z M349.8,156.9
        c0,34-23.3,56.9-49.9,56.9c-26.9,0-48.1-21.9-48.1-56.9v-0.7c0-34.3,21.5-56.8,48.1-56.8c26.6,0,49.9,22.9,49.9,56.8V156.9z"/>
      <path d="M1120.3,218.2L1120.3,218.2L1120.3,218.2c-4.3,0-7.9-3.5-7.9-7.8V76.9c0-6.1-5-11.1-11.1-11.1h-18.5
        c-6.1,0-11.1,5-11.1,11.1v17.7c-13.1-18.5-31.6-30.5-60.6-30.5c-41.7,0-82.4,33-82.4,92.2v0.7c0,58.9,40.4,92.2,82.4,92.2
        c30.5,0,52-13.7,61.2-30.5c4.7,16.4,19.7,28.3,37.6,28.3v0l10.3,0c4.3,0,7.8-3.5,7.8-7.8l0-13.1
        C1128.1,221.7,1124.6,218.2,1120.3,218.2z M1068.1,156.9c0,34-23.3,56.9-49.9,56.9c-26.9,0-48.1-21.9-48.1-56.9v-0.7
        c0-34.3,21.5-56.8,48.1-56.8c26.6,0,49.9,22.9,49.9,56.8V156.9z"/>
      <path d="M2499.7,65.8H2461V16.2h0c0-1.5-0.5-3.1-1.4-4.4c-2.5-3.6-7.4-4.4-10.9-1.9l0,0l-19.3,13.6c-5.5,3.7-9,10-9,17.1v25.3
		h-13.1c-6.1,0-11.1,5-11.1,11.1v11.4c0,6.1,5,11.1,11.1,11.1h13.1v97.8c0,39,21.2,52.2,51.1,52.2c15.9,0,32.2-6.1,32.2-6.1
		s5.5-1.7,4.1-8.1c-0.5-2.2-3.2-17.4-3.2-17.4c-0.7-3.7-2.2-6.7-7.5-5.9c-2.6,0.4-7.5,1.2-14.2,1.2c-13.8,0-21.8-6.4-21.8-22.2V99.4
		h38.7c6.2,0,11.1-5,11.1-11.1V76.9C2510.8,70.8,2505.8,65.8,2499.7,65.8z"/>
    </g>
  </svg>
  
  <a class="link-ad" href="https://www.campaignmonitor.com/email-templates/?utm_source=codepen&utm_medium=banner&utm_campaign=canvas" target="_blank"></a>
</div>

            
          
!
            
              
// Variables
$body-background: #16b8e8;
$width-cm-logo: 14px;
$height-cm-logo: 11px;

$device-border: #202123;

$client-width: 144px;
$client-height: 216px;

$desktop-width: 222px;
$desktop-height: 147px;
$desktop-radius: 5px;
$desktop-padding-top: 11px;
$desktop-padding-right: 12px;
$desktop-padding-bottom: 16px;
$desktop-padding-left: 12px;
$desktop-width-stand: 32px;
$desktop-height-stand: 17px;
$desktop-width-bottom-stand: 72px;
$desktop-height-bottom-stand: 6px;
$desktop-color-stand: #8E959D;


$tablet-width: 88px;
$tablet-height: 130px;
$tablet-radius: 6px;
$tablet-padding-top: 11px;
$tablet-padding-right: 4px;
$tablet-padding-bottom: 13px;
$tablet-padding-left: 4px;
$tablet-size-homebutton: 8px;
$tablet-color-homebutton: #72777D;
$tablet-width-camera-speaker: 3px;
$tablet-height-camera-speaker: 2px;
$tablet-color-camera-speaker: #72777D;

$phone-width: 54px;
$phone-height: 110px;
$phone-radius: 3px;
$phone-padding-top: 11px;
$phone-padding-right: 3px;
$phone-padding-bottom: 14px;
$phone-padding-left: 3px;
$phone-size-homebutton: 8px;
$phone-color-homebutton: #72777D;
$phone-width-camera-speaker: 10px;
$phone-height-camera-speaker: 2px;
$phone-color-camera-speaker: #72777D;

$email-header-color: #F1ECE6;
$email-header-color-logo: #FECE3C;
$email-header-color-wordmark: #5F6A70;
$email-content-color: #fff;
$email-content-color-image: #2C96D2;
$email-content-color-text: #94CBEA;
$email-content-color-link: #F6BE33;
/*
$last-slide-color: #2f343d;*/
$last-slide-color: $body-background;


body {
  min-height: 100vh;
  background: #333;
}

.ad-frame {
  width: 100%;
  min-width: 260px;
  height: 100%;
  min-height: 260px;
  max-height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow:hidden;
  background: $body-background;
  transition: background 0.2s linear;
  
  &:after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -40px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 400px 0 0 700px;
    border-color: transparent transparent transparent rgba(0, 0, 0, 0.02);
  }
  
  &:before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 400px 700px;
    border-color: transparent transparent rgba(0, 0, 0, 0.03) transparent;
  }
  
  .shadow {
    opacity: 0;
    content:'';
    display: block;
    position: absolute;
    height:4px;
    bottom: 62px;
    left: 50%;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    transition: all 0.15s cubic-bezier(0.275, 0.140, 0.205, 1.165);
  }
  
  &.slide-7 {
    background-color: $last-slide-color;
  }
  
  &.slide-4 {
    .shadow {
      opacity: 1;
      min-width: $desktop-width-bottom-stand;
      margin-left: ($desktop-width-bottom-stand / 2 * -1);
    }
  }
    
  &.slide-5 {
    .shadow {
      opacity: 1;
      min-width: $tablet-width;
      margin-left: ($tablet-width / 2 * -1);
    }
  }
      
  &.slide-6 {
    .shadow {
      opacity: 1;
      min-width: $phone-width;
      margin-left: ($phone-width / 2 * -1);
    }
  }
}

.cm-logo {
	width: $width-cm-logo;
	height: $height-cm-logo;
	fill: #fff;
	position: absolute;
	top: 16px;
	left: 50%;
  z-index: 1;
	margin-left: ($width-cm-logo / 2 * -1);
  
  .slide-7 & {
    opacity: 0;
  }
}

.cm-logo-word {
  width: 146px;
  height: 22px;
  fill: #fff;
  position: absolute;
  bottom: 16px;
  left: 50%;
	margin-left: (146px / 2 * -1);
  opacity: 0;
  
  .slide-7 & {
    transition: all 0.4s linear;
    opacity: 1;
  }
}

h1, h2 {
  font-family: "Avenir", sans-serif;
  color: #fff;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 21px;
  line-height: 1.3em;
  text-align: center;
  letter-spacing: -0.05em;
  position: absolute;
  width: 100%;
}

h1 {
  opacity: 0;
  top: 22%;
  transition: all 0.3s ease-out;
  
  .slide-1 & {
    opacity: 1;
  }
}

h2 {
  opacity: 0;
  z-index: 4;
  .slide-7 & {
    transition: opacity 0.3s ease-out;
    transition-delay: 0.4s;
    opacity: 1;
    top: 22%;
  }
}

.link-ad {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.replay {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  color: lighten($last-slide-color, 30%);
  fill: #fff;
  width: 16px;
  height: 16px;
  padding: 8px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  opacity: 0;
  cursor: pointer;
  z-index: 0;
  
  .slide-7 & {
    transition: opacity 0.3s ease-out;
    transition-delay: 0.4s;
    opacity: 1;
    z-index: 11;
  }
}

.button {
  display: inline-block;
  font-family: 'Avenir', sans-serif;
  font-weight: 700;
  font-style: normal;
  text-decoration: none;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0em;
  text-shadow: 0 1px 2px #426d06;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 0 #a0d642, 0 2px 2px rgba(0, 0, 0, 0.1);
  background: #7cbc27;
  background: linear-gradient(to bottom,#7cbc27 0,#62a30c 100%);
  border-radius: 3px;
  padding: 20px 0 19px 0;
  color: #fff;
  border: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  z-index: 11;
  border-top: 1px solid #61a30c;
  border-left: 1px solid #579409;
  border-right: 1px solid #579409;
  border-bottom: 1px solid #4a8004;
  opacity: 0;
  top: 44%;
  position: absolute;
  width: 260px;
  left: 50%;
  margin-left: -130px;
  cursor: pointer;
  
  .slide-7 & {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.1s ease-out;
    transition-delay: 0.4s;
  }
  
  &:hover {
    background: linear-gradient(to bottom,#87c32b 0,#6eaf0e 100%);
  }
  
  &:active {
    box-shadow: inset 0 3px 10px #4f8514;
    padding: 22px 0 17px 0;
    outline: 0;
    border-color: #4f8514;
  }
  
  &:focus {
    outline: 0;
  }
}

.device {
	position: absolute;
	bottom: 50%;
	left: 50%;
	background: $device-border;
	box-sizing: border-box;
   z-index: 2;
	transition: all 0.1s ease-in;

  .screen {
    background: #D9DEE2;
	  width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .stand {
    position: absolute;
    opacity: 0;
    transform: translateY((($desktop-height-stand + $desktop-height-bottom-stand) * -1));
    transition: all 0.1s ease-out;
    z-index: 0;
    bottom: ($desktop-height-stand * -1);
    left: 50%;
    margin-left: ($desktop-width-stand / 2 * -1);
    min-width: $desktop-width-stand;
    min-height: $desktop-height-stand;
    width: $desktop-width-stand;
    height: $desktop-height-stand;
    background: $desktop-color-stand;
    box-shadow: inset 0 4px 0 darken($desktop-color-stand, 16%);
    
    &:after {
      min-width: $desktop-width-bottom-stand;
      min-height: $desktop-height-bottom-stand;
      width: $desktop-width-bottom-stand;
      height: $desktop-height-bottom-stand;
      background: lighten($desktop-color-stand, 10%);
      content: '';
      position: absolute;
      bottom: ($desktop-height-bottom-stand * -1);
      left: 50%;
      margin-left: ($desktop-width-bottom-stand / 2 * -1);
      border-radius: 3px;
      box-shadow: inset 0 -2px 0 darken($desktop-color-stand, 8%);
    }
  }
  
  &:before, &:after {
    content: '';
    position: absolute;
    transition: all 0.1s ease-out;
    opacity: 0;
  }
  
  &:before {   
    left: 50%;
    top: 5px;
  }
  
  &:after {   
    left: 50%;
    bottom: 5px;
  }
  
  &.client {
    min-width: $client-width;
    min-height: $client-height;
    width: $client-width;
    height: $client-height;
    margin-bottom: (($client-height / 2 * -1) - 10px);
    margin-left: ($client-width / 2 * -1);
    box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.2);
    
    .screen {
      
      .email {
        
        .content {
          max-width: 100%;
          opacity: 1;
          padding-bottom: 35px;
          transition: opacity 0.2s linear;
          
          > ul {
            opacity: 1;
            background: none;    
            box-shadow: none;
            text-align: left;
            
            &.full {
              margin-bottom: 8px;
              transition-delay: 0.1s !important;
              
              li {
                margin-bottom: 5px;
                height: 5px;
                min-height: 5px;
                
                &.img {
                  height: 54px;
                  min-height: 54px;
                  transition: transform 0.15s cubic-bezier(0.275, 0.140, 0.205, 1.165) !important;
                  transition-delay: 0.1s !important;
                }
                
                &:nth-child(2), &:nth-child(3), &:nth-child(4), &:nth-child(5), &:nth-child(6), &:nth-child(7), &:nth-child(8), &:nth-child(9) {
                  transition: transform 0.15s cubic-bezier(0.275, 0.140, 0.205, 1.165) !important;
                  transition-delay: 0.2s !important;
                }
              }
            }
            
            &.half {
              li {
                &.img {
                  height: 27px;
                  min-height: 27px; 
                }
              }
              &.left {
                transition-delay: 1.1s !important;
                margin-right: 8%;
                li {
                  
                  &.img {
                    transition: transform 0.15s cubic-bezier(0.275, 0.140, 0.205, 1.165) !important;
                    transition-delay: 1.1s !important;
                  }

                  &:nth-child(2), &:nth-child(3), &:nth-child(4), &:nth-child(5), &:nth-child(6), &:nth-child(7), &:nth-child(8), &:nth-child(9) {
                    transition: transform 0.15s cubic-bezier(0.275, 0.140, 0.205, 1.165) !important;
                    transition-delay: 1.2s !important;
                  }
                }
              }
              &.right {
                
                transition-delay: 2.1s !important;
                li {
                  &.img {
                    transition: transform 0.15s cubic-bezier(0.275, 0.140, 0.205, 1.165) !important;
                    transition-delay: 2.1s !important;
                  }

                  &:nth-child(2), &:nth-child(3), &:nth-child(4), &:nth-child(5), &:nth-child(6), &:nth-child(7), &:nth-child(8), &:nth-child(9) {
                    transition: transform 0.15s cubic-bezier(0.275, 0.140, 0.205, 1.165) !important;
                    transition-delay: 2.2s !important;
                  }
                }
              }
              
            }
          }
        }
      }
    }
    
    &.empty {
      
      transition: transform 0.4s cubic-bezier(0.275, 0.140, 0.205, 1.165), min-width 0.1s ease-out, min-height 0.1s ease-out;
      transition-delay: 0.1s;
      
      .screen {
        .email {
          .content {
            position: relative;
            transition: opacity 0.1s linear;
            > ul {
              border-radius: 3px;
              background: #ebebec;
              box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.1);
              text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
              box-sizing: border-box;
              margin-bottom: 8px;
              &.half.left {
                margin-right: 8%;
              }
              li {
                opacity: 0 !important;
                transform: translateX(-250px) translateY(-20px) scale(2) !important;
              }
              
              &.half.right {
                li {
                  transform: translateX(-350px) translateY(60px) scale(2) !important;
                }
              }
            }
          }
        }
      }
    }
    
    &.hidden {
      transform: translateY(90px);
      transition-delay: 0s;
    }
  }
  
  &.desktop {
    min-width: $desktop-width;
    min-height: $desktop-height;
    width: $desktop-width;
    height: $desktop-height;
    border-radius: $desktop-radius;
    margin-bottom: (($desktop-height - $desktop-height-stand - $desktop-height-bottom-stand) / 2 * -1);
    margin-left: ($desktop-width / 2 * -1);
    padding: $desktop-padding-top $desktop-padding-right $desktop-padding-bottom $desktop-padding-left;
    
    animation: animationDevicesDesktop 300ms linear 100ms;
    
    
    .stand {
      opacity: 1;
      transform: translateY(0);
    }
    
    .screen {
      .email {
        
        .header {
          height: 23px;
          min-height: 23px;
          box-shadow: inset 0 -2px 0 darken($email-header-color, 5%);
          
          .logo {
            width: 12px;
            height: 12px;
            min-width: 12px;
            min-height: 12px;
            top: 4px;
            left: 7px;
            
            &:after {
              width: 27px;
              height: 3px;
              min-width: 27px;
              min-height: 3px;
              top: 5px;
              right: -31px;
            }
          }
        }
        .content {
          width: 100px;
          min-width: 100px;
          margin: 0 auto;
          padding: 9px 13px;
          
          > ul {
            
            &.full {
              padding-bottom: 4px;
              
              li {
               
                margin-bottom: 3px;
                height: 3px;
                min-height: 3px;
                
                &.img {
                  height: 38px;
                  min-height: 38px;
                }
               
              }
            }
            
            &.half {
              
              li {
                margin-bottom: 2px;
                height: 2px;
                min-height: 2px;
                
                &.img {
                  height: 19px; 
                  min-height: 19px; 
                }
              }
            }
          }
        }
      }
    }
	}

  &.tablet {
    min-width: $tablet-width;
    min-height: $tablet-height;
    width: $tablet-width;
    height: $tablet-height;
    border-radius: $tablet-radius;
    margin-bottom: ($tablet-height / 2 * -1);
    margin-left: ($tablet-width / 2 * -1);
    padding: $tablet-padding-top $tablet-padding-right $tablet-padding-bottom $tablet-padding-left;
    animation: animationDevicesTablet 300ms linear 100ms;

    &:before {
      min-width: $tablet-width-camera-speaker;
      min-height: $tablet-height-camera-speaker;
      background: $tablet-color-camera-speaker;
      left: 50%;
      top: 5px;
      margin-left: ($tablet-width-camera-speaker / 2 * -1);
      opacity: 1;
    }
    
    &:after {
      min-width: $tablet-size-homebutton;
      min-height: $tablet-size-homebutton;
      background: $tablet-color-homebutton;
      border-radius: 50%;
      left: 50%;
      bottom: 2px;
      margin-left: ($tablet-size-homebutton / 2 * -1);
      opacity: 1;
    }
    
    .screen {
      .email {
        .header {
          height: 20px;
          min-height: 20px;
          box-shadow: inset 0 -2px 0 darken($email-header-color, 5%);
          
          .logo {
            width: 10px;
            height: 10px;
            min-width: 10px;
            min-height: 10px;
            top: 4px;
            left: 6px;
            
            &:after {
              width: 21px;
              height: 2px;
              min-width: 21px;
              min-height: 2px;
              top: 4px;
              right: -24px;
            }
          }
        }
        .content {
          padding: 7px 11px;
          max-width: 100px;
          
          > ul {
            
            &.full {
              padding-bottom: 3px;
              
              li {
                margin-bottom: 2px;
                height: 3px;
                min-height: 3px;
                
                &.img {
                  height: 30px;
                  min-height: 30px;
                }
             
              }
            }
            
            &.half {
              
              li {
                margin-bottom: 2px;
                height: 2px;
                min-height: 2px;
                
                &.img {
                  height: 14px;
                  min-height: 14px; 
                }
              }
            }
          }
        }
      }
    }
	}

  &.phone {
    min-width: $phone-width;
    min-height: $phone-height;
    width: $phone-width;
    height: $phone-height;
    border-radius: $phone-radius;
    margin-bottom: ($phone-height / 2 * -1);
    margin-left: ($phone-width / 2 * -1);
    padding: $phone-padding-top $phone-padding-right $phone-padding-bottom $phone-padding-left;
    animation: animationDevicesPhone 300ms linear 100ms;
    
    &:before {
      min-width: $phone-width-camera-speaker;
      min-height: $phone-height-camera-speaker;
      background: $phone-color-camera-speaker;
      left: 50%;
      top: 5px;
      margin-left: ($phone-width-camera-speaker / 2 * -1);
      opacity: 1;
    }
    
    &:after {
      min-width: $phone-size-homebutton;
      min-height: $phone-size-homebutton;
      background: $phone-color-homebutton;
      border-radius: 50%;
      left: 50%;
      bottom: 3px;
      margin-left: ($phone-size-homebutton / 2 * -1);
      opacity: 1;
    }
    
    .screen {
      .email {
        .header {
          height: 10px;
          min-height: 10px;
          box-shadow: none;
          
          .logo {
            width: 6px;
            height: 6px;
            min-width: 6px;
            min-height: 6px;
            top: 2px;
            left: 4px;
            
            &:after {
              width: 14px;
              height: 2px;
              min-width: 14px;
              min-height: 2px;
              top: 2px;
              right: -17px;
            }
          }
        }
        .content {
          padding: 4px 5px;
          
          > ul {
            
            &.full {
              padding-bottom: 2px;
              
              li {
                height: 2px;
                min-height: 2px;
                margin-bottom: 2px;
                
                
                &.img {
                  height: 22px;
                  min-height: 22px;
                }
                
              
              }
            }
            
            &.half {
              width: calc(100%);
              min-width: calc(100%);
              float: none;
              margin: 0 auto;
              
              li {
                margin-bottom: 2px;
                height: 2px;
                min-height: 2px;
                
                &.img {
                  height: 20px; 
                  min-height: 20px; 
                }
              }
            }
          }
        }
      }
    }
    
    &.lost {
      min-width: 2px;
      min-height: 2px;
      height: 2px;
      width: 2px;
      margin-left: -1px;
      margin-bottom: -1px;
      background: transparent;
      transition: all 0.2s ease-out !important;
      
      &:before, &:after, * {
        background: transparent !important;
        transition: none !important;
      }

      .email {
        transform: scale(1);
      }
    }
	}
}

.email {
  .header {
    position: relative;
    background: $email-header-color;
    box-shadow: inset 0 -4px 0 darken($email-header-color, 5%);
    height: 35px;
    width: 100%;
    transition: all 0.1s ease-out;
    
    .logo {
      background: $email-header-color-logo;
      width: 17px;
      height:17px;
      border-radius: 50%;
      position: absolute;
      top: 7px;
      left: 11px;
      transition: all 0.1s ease-out;
      
      &:after {
        content: '';
        position: absolute;
        right: -45px;
        top: 7px;
        background: $email-header-color-wordmark;
        width: 38px;
        height: 4px;
        transition: all 0.1s ease-out;
      }
    }
  }
  
  .content {
    background: $email-content-color;
    box-sizing: border-box;
    padding: 15px 18px;
    overflow: hidden;
    
    
    max-width: 144px;
    margin: 0 auto;
    
    > ul {
      font-size: 0;
      transition: all 0.1s ease-out;
      
      li {
        display: inline-block;
        background: $email-content-color-text;
        transition: all 0.2s ease-out !important;
        
        &:nth-child(4), &:nth-child(7), &:nth-child(9) {
          margin-right: 0 !important;
        }
        
        &.img {
          background: $email-content-color-image;
          min-width: 100%;
          width: 100%;
          margin-right: 0 !important;
        }
        
        &.link {
          background: $email-content-color-link;
        }
      }
      
      &.full {
        padding-bottom: 4px;
        li {
          margin-right: 3%;
          margin-bottom: 5px;
          height: 5px;
          min-height: 5px;
          
          &.img {
            height: 54px;
            min-height: 54px;
          }
          
          &:nth-child(2) {
            min-width: 24%;
          }
          &:nth-child(3) {
            min-width: 28%;
          }
          &:nth-child(4) {
            min-width: 42%;
          }
          &:nth-child(5) {
            min-width: 32%;
          }
          &:nth-child(6) {
            min-width: 32%;
          }
          &:nth-child(7) {
            min-width: 27%;
          }
          &:nth-child(8) {
            min-width: 61%;
          }
          &:nth-child(9) {
            min-width: 35%;
          }
        }
      }
      
      &.half {
        width: calc(46%);
        float: left;
        
                
        li {
          margin-right: 4%;
          height: 3px;
          min-height: 3px;
          margin-bottom: 4px;
        }
        
        &.left {
          margin-right: 8%;
          li {
            &:nth-child(2) {
              min-width: 15%;
            }
            &:nth-child(3) {
              min-width: 26%;
            }
            &:nth-child(4) {
              min-width: 48%;
            }
            &:nth-child(5) {
              min-width: 32%;
            }
            &:nth-child(6) {
              min-width: 26%;
            }
            &:nth-child(7) {
              min-width: 22%;
            }
            &:nth-child(8) {
              min-width: 56%;
            }
            &:nth-child(9) {
              min-width: 35%;
            }
          }
        }
        &.right {
          li {
            &:nth-child(3), &:nth-child(6), &:nth-child(9) {
              margin-right: 0 !important;
            }
            
            &:nth-child(2) {
              min-width: 53%;
            }
            &:nth-child(3) {
              min-width: 31%;
            }
            &:nth-child(4) {
              min-width: 42%;
              margin-right: 4% !important;
            }
            &:nth-child(5) {
              min-width: 37%;
            }
            &:nth-child(6) {
              min-width: 8%;
            }
            &:nth-child(7) {
              min-width: 36%;
              margin-right: 4% !important;
            }
            &:nth-child(8) {
              min-width: 19%;
            }
            &:nth-child(9) {
              min-width: 8%;
            }
          }
        }
      }
    }
  }
}

.slide-1 *, .slide-1 *:before, .slide-1 *:after {
  transition: none !important;
}




@keyframes animationDevicesDesktop { 
  0% {
    transform: scale3d(.8, .8, .8);
  }

  20% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  40% {
    transform: scale3d(.95, .95, .95);
  }

  60% {
    transform: scale3d(1.01, 1.01, 1.01);
  }

  80% {
    transform: scale3d(.99, .99, .99);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes animationDevicesTablet { 
  0% {
    transform: scale3d(.9, .9, .9);
  }

  20% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  40% {
    transform: scale3d(.95, .95, .95);
  }

  60% {
    transform: scale3d(1.01, 1.01, 1.01);
  }

  80% {
    transform: scale3d(.99, .99, .99);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes animationDevicesPhone { 
  0% {
    transform: scale3d(.8, .8, .8);
  }

  20% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  40% {
    transform: scale3d(.95, .95, .95);
  }

  60% {
    transform: scale3d(1.01, 1.01, 1.01);
  }

  80% {
    transform: scale3d(.99, .99, .99);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}

  
            
          
!
            
              $('.replay').on('click', function() {
  showSlides();
});


showSlides();



function showSlides() {
  var device = $('.device');
  var body =  $('.ad-frame');
  
  body.removeClass().addClass('ad-frame slide-1');
  device.removeClass().addClass('device client empty hidden');

  setTimeout(function() {
      body.removeClass('slide-1').addClass('slide-2');
      device.removeClass('hidden');
  }, 2000);
setTimeout(function() {
      body.removeClass('slide-2').addClass('slide-3'); 
      device.removeClass('empty');
  }, 3750);
 setTimeout(function() {
      body.removeClass('slide-3').addClass('slide-4'); 
      device.removeClass('client').addClass('desktop');
  }, 7500);

  setTimeout(function() {
      body.removeClass('slide-4').addClass('slide-5'); 
      device.removeClass('desktop').addClass('tablet');
  }, 9500);

  setTimeout(function() {
      body.removeClass('slide-5').addClass('slide-6'); 
      device.removeClass('tablet').addClass('phone');
  }, 11500);
  
  setTimeout(function() {
      body.removeClass('slide-6').addClass('slide-7'); 
      device.addClass('lost');
  }, 13500);
}

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console