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="container">
  <div class="phone">
    <div class="top">
      <h1>View Ticket</h1>
      <div class="name">
        <h2>EVENT NAME</h2>
      </div>
    </div>
    <div class="printer"></div>
    <div class="printer"></div>
    <div class="ticket">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 293.63 446.67"><defs><style></style></defs><title>ticket</title><g id="bottom"><g id="bottom-2" data-name="bottom"><path class="cls-1" d="M829.5,252A15.5,15.5,0,0,1,814,236.5H553A15.49,15.49,0,0,1,538.38,252V515.5h292V252C830.08,252,829.8,252,829.5,252Z" transform="translate(-536.75 -70.33)"/><rect class="cls-2" y="430.67" width="292.5" height="16"/><path d="M614.76,443.65v-11.4h3.8v7.22h7v-5.74h3.8v5.74h8.17v-7.22h3.8v11.4Z" transform="translate(-536.75 -70.33)"/><path d="M614.76,431v-4.22L635.39,424v-.08l-20.63-2.73v-3.84l26.6,4v5.54Z" transform="translate(-536.75 -70.33)"/><path d="M614.76,415.33v-11.4h3.8v7.22h7v-5.74h3.8v5.74h8.17v-7.22h3.8v11.4Z" transform="translate(-536.75 -70.33)"/><path d="M614.76,401.54v-5.25l15.92-4.07v-.07H614.76v-3.73h26.6v4.3l-19.42,5v.07h19.42v3.73Z" transform="translate(-536.75 -70.33)"/><path d="M618.56,382v4.37h-3.8V373.49h3.8v4.37h22.8V382Z" transform="translate(-536.75 -70.33)"/><path d="M618.56,362.12v4.37h-3.8V353.57h3.8v4.37h22.8v4.18Z" transform="translate(-536.75 -70.33)"/><path d="M614.76,351.56v-4.18h26.6v4.18Z" transform="translate(-536.75 -70.33)"/><path d="M640,343a6.87,6.87,0,0,1-4.83,1.58H620.91a6.84,6.84,0,0,1-4.82-1.58,7,7,0,0,1,0-9.16,6.84,6.84,0,0,1,4.82-1.58h2.82v4h-3.08c-1.65,0-2.47.7-2.47,2.1s.82,2.09,2.47,2.09h14.86c1.62,0,2.43-.7,2.43-2.09s-.81-2.1-2.43-2.1h-4.07v-4h3.76a6.87,6.87,0,0,1,4.83,1.58,7,7,0,0,1,0,9.16Z" transform="translate(-536.75 -70.33)"/><path d="M614.76,329.7v-4.18H626l-11.21-5.32V316l9.76,5,16.84-5.06v4.38l-11.86,3.53,3.38,1.67h8.48v4.18Z" transform="translate(-536.75 -70.33)"/><path d="M614.76,314v-11.4h3.8v7.22h7v-5.74h3.8v5.74h8.17v-7.22h3.8V314Z" transform="translate(-536.75 -70.33)"/><path d="M618.56,296.9v4.37h-3.8V288.35h3.8v4.37h22.8v4.18Z" transform="translate(-536.75 -70.33)"/><rect class="cls-3" x="699.84" y="352.31" width="143.7" height="47.37" transform="translate(-141.06 1077.36) rotate(-90)"/><rect x="769.71" y="415.08" width="3.95" height="47.37" transform="translate(-203.83 1140.13) rotate(-90)"/><rect x="770.5" y="409.56" width="2.37" height="47.37" transform="translate(-198.31 1134.6) rotate(-90)"/><rect x="768.92" y="404.03" width="5.53" height="47.37" transform="translate(-192.78 1129.08) rotate(-90)"/><rect x="770.5" y="398.5" width="2.37" height="47.37" transform="translate(-187.25 1123.55) rotate(-90)"/><rect x="769.71" y="393.77" width="3.95" height="47.37" transform="translate(-182.52 1118.81) rotate(-90)"/><rect x="770.5" y="388.24" width="2.37" height="47.37" transform="translate(-176.99 1113.28) rotate(-90)"/><rect x="768.92" y="382.71" width="5.53" height="47.37" transform="translate(-171.46 1107.76) rotate(-90)"/><rect x="770.5" y="377.18" width="2.37" height="47.37" transform="translate(-165.93 1102.23) rotate(-90)"/><rect x="769.71" y="371.66" width="3.95" height="47.37" transform="translate(-160.41 1096.7) rotate(-90)"/><rect x="770.5" y="366.13" width="2.37" height="47.37" transform="translate(-154.88 1091.18) rotate(-90)"/><rect x="768.92" y="360.6" width="5.53" height="47.37" transform="translate(-149.35 1085.65) rotate(-90)"/><rect x="770.5" y="355.08" width="2.37" height="47.37" transform="translate(-143.83 1080.12) rotate(-90)"/><rect x="769.71" y="350.34" width="3.95" height="47.37" transform="translate(-139.09 1075.38) rotate(-90)"/><rect x="770.5" y="344.81" width="2.37" height="47.37" transform="translate(-133.56 1069.86) rotate(-90)"/><rect x="768.92" y="339.28" width="5.53" height="47.37" transform="translate(-128.03 1064.33) rotate(-90)"/><rect x="770.5" y="333.76" width="2.37" height="47.37" transform="translate(-122.51 1058.8) rotate(-90)"/><rect x="769.71" y="329.02" width="3.95" height="47.37" transform="translate(-117.77 1054.07) rotate(-90)"/><rect x="770.5" y="323.49" width="2.37" height="47.37" transform="translate(-112.24 1048.54) rotate(-90)"/><rect x="768.92" y="317.97" width="5.53" height="47.37" transform="translate(-106.72 1043.01) rotate(-90)"/><rect x="770.5" y="312.44" width="2.37" height="47.37" transform="translate(-101.19 1037.48) rotate(-90)"/><rect x="769.71" y="306.91" width="3.95" height="47.37" transform="translate(-95.66 1031.96) rotate(-90)"/><rect x="770.5" y="301.38" width="2.37" height="47.37" transform="translate(-90.13 1026.43) rotate(-90)"/><rect x="768.92" y="295.86" width="5.53" height="47.37" transform="translate(-84.61 1020.9) rotate(-90)"/><rect x="770.5" y="290.33" width="2.37" height="47.37" transform="translate(-79.08 1015.38) rotate(-90)"/><path d="M672.21,413.27v-6.41h2.14v4.06h3.95V407.7h2.14v3.22H685v-4.06h2.14v6.41Z" transform="translate(-536.75 -70.33)"/><path d="M672.21,405.52v-2.95l8.95-2.28v-.05h-8.95v-2.09h15v2.41l-10.92,2.82v.05h10.92v2.09Z" transform="translate(-536.75 -70.33)"/><path d="M674.35,394.56V397h-2.14v-7.26h2.14v2.45h12.82v2.35Z" transform="translate(-536.75 -70.33)"/><path d="M672.21,388.62v-6.4h2.14v4h3.95v-3.22h2.14v3.22H685v-4h2.14v6.4Z" transform="translate(-536.75 -70.33)"/><path d="M672.21,380.87v-3.48a3.58,3.58,0,0,1,.85-2.65,3.54,3.54,0,0,1,2.59-.83h.92c1.55,0,2.54.51,2.95,1.53h0a1.83,1.83,0,0,1,1.05-1.2,5.15,5.15,0,0,1,2.11-.35h2.63a9.48,9.48,0,0,0,1-.05,2.83,2.83,0,0,0,.78-.21V376a3.3,3.3,0,0,1-.69.17,10.05,10.05,0,0,1-1.15,0h-2.74a2.32,2.32,0,0,0-1.43.34,1.4,1.4,0,0,0-.4,1.14v.81h6.41v2.35Zm6.41-3.2a1.42,1.42,0,0,0-.36-1.06,1.7,1.7,0,0,0-1.22-.35h-1.15a1.93,1.93,0,0,0-1.18.28,1.11,1.11,0,0,0-.36.91v1.07h4.27Z" transform="translate(-536.75 -70.33)"/><path d="M686.41,368.12a4,4,0,0,1-2.79.9h-7.86a4,4,0,0,1-2.79-.9,3.37,3.37,0,0,1-1-2.61,3.34,3.34,0,0,1,1-2.6,4,4,0,0,1,2.79-.9H677v2.22h-1.43c-1,0-1.47.41-1.47,1.22s.49,1.22,1.47,1.22h8.18c1,0,1.45-.41,1.45-1.22s-.48-1.22-1.45-1.22h-2.93v1.18h-2.13V362h4.89a4,4,0,0,1,2.79.9,3.34,3.34,0,0,1,1,2.6A3.37,3.37,0,0,1,686.41,368.12Z" transform="translate(-536.75 -70.33)"/><path d="M672.21,358.68V355.5l15-2.44v2.35l-3,.43h0v2.67l2.93.42v2.18Zm10-2.57-7.39,1.05v0l7.39,1Z" transform="translate(-536.75 -70.33)"/><path d="M674.35,351.07v2.46h-2.14v-7.26h2.14v2.45h12.82v2.35Z" transform="translate(-536.75 -70.33)"/><path d="M672.21,345.14v-6.41h2.14v4.06h3.95v-3.23h2.14v3.23H685v-4.06h2.14v6.41Z" transform="translate(-536.75 -70.33)"/><path class="cls-2" d="M724.7,388.72a11,11,0,0,1-4.5-.84,15.52,15.52,0,0,1-4.15-3,18,18,0,0,0-3.88-2.95,7.26,7.26,0,0,0-3.36-.83,3.52,3.52,0,0,0-2.19.51,1.81,1.81,0,0,0-.61,1.49c0,1.33.8,2,2.41,2h2.63v3.64h-2.38a6.5,6.5,0,0,1-4.57-1.47,6.53,6.53,0,0,1,0-8.54,6.5,6.5,0,0,1,4.57-1.47,9.68,9.68,0,0,1,4.37,1.07,21.29,21.29,0,0,1,4.9,3.69,14.52,14.52,0,0,0,3,2.31,5.14,5.14,0,0,0,2.43.6h.53v-7.32h3.5v11.13Z" transform="translate(-536.75 -70.33)"/><path class="cls-2" d="M726.12,373.29a6.52,6.52,0,0,1-4.57,1.47h-1.93v-3.64h2.21c1.59,0,2.38-.67,2.38-2s-.79-2-2.38-2h-5.5c-1.61,0-2.41.66-2.41,2s.8,2,2.41,2h.21v3.64l-13.68-.7V363.91h3.5v6.72l5.84.31v-.07a3.61,3.61,0,0,1-1.78-3.32,3.78,3.78,0,0,1,1.43-3.19,6.87,6.87,0,0,1,4.17-1.08h5.53a6.52,6.52,0,0,1,4.57,1.47,6.53,6.53,0,0,1,0,8.54Z" transform="translate(-536.75 -70.33)"/></g></g><g id="top"><g id="top-2" data-name="top"><path class="cls-1" d="M829,221.08V72H537V221c.17,0,.33,0,.5,0A15.48,15.48,0,0,1,553,236H815A15.48,15.48,0,0,1,829,221.08Z" transform="translate(-536.75 -70.33)"/><rect class="cls-4" x="75.2" y="84.67" width="145.6" height="48"/><rect x="82.4" y="84.67" width="4" height="48"/><rect x="88.8" y="84.67" width="2.4" height="48"/><rect x="92.8" y="84.67" width="5.6" height="48"/><rect x="100" y="84.67" width="2.4" height="48"/><rect x="104" y="84.67" width="4" height="48"/><rect x="110.4" y="84.67" width="2.4" height="48"/><rect x="114.4" y="84.67" width="5.6" height="48"/><rect x="121.6" y="84.67" width="2.4" height="48"/><rect x="126.4" y="84.67" width="4" height="48"/><rect x="132.8" y="84.67" width="2.4" height="48"/><rect x="136.8" y="84.67" width="5.6" height="48"/><rect x="144" y="84.67" width="2.4" height="48"/><rect x="148" y="84.67" width="4" height="48"/><rect x="154.4" y="84.67" width="2.4" height="48"/><rect x="158.4" y="84.67" width="5.6" height="48"/><rect x="165.6" y="84.67" width="2.4" height="48"/><rect x="169.6" y="84.67" width="4" height="48"/><rect x="176" y="84.67" width="2.4" height="48"/><rect x="180" y="84.67" width="5.6" height="48"/><rect x="187.2" y="84.67" width="2.4" height="48"/><rect x="192" y="84.67" width="4" height="48"/><rect x="198.4" y="84.67" width="2.4" height="48"/><rect x="202.4" y="84.67" width="5.6" height="48"/><rect x="209.6" y="84.67" width="2.4" height="48"/><path d="M619.38,109.17H629v3.2H622.9v5.92h4.83v3.2H622.9v6.88H629v3.2h-9.6Z" transform="translate(-536.75 -70.33)"/><path d="M630.06,109.17h3.56l2.3,17.38H636l2.31-17.38h3.23l-3.39,22.4h-4.67Z" transform="translate(-536.75 -70.33)"/><path d="M643.22,109.17h9.6v3.2h-6.08v5.92h4.83v3.2h-4.83v6.88h6.08v3.2h-9.6Z" transform="translate(-536.75 -70.33)"/><path d="M654.83,109.17h4.42l3.42,13.41h.06V109.17h3.14v22.4h-3.62L658,115.22H658v16.35h-3.14Z" transform="translate(-536.75 -70.33)"/><path d="M671.25,112.37h-3.68v-3.2h10.88v3.2h-3.68v19.2h-3.52Z" transform="translate(-536.75 -70.33)"/><path d="M688,112.37h-3.68v-3.2h10.88v3.2h-3.68v19.2H688Z" transform="translate(-536.75 -70.33)"/><path d="M696.91,109.17h3.52v22.4h-3.52Z" transform="translate(-536.75 -70.33)"/><path d="M704.16,130.45a5.74,5.74,0,0,1-1.33-4.06v-12a5.76,5.76,0,0,1,1.33-4.06,5.88,5.88,0,0,1,7.71,0,5.81,5.81,0,0,1,1.33,4.06v2.37h-3.33v-2.59c0-1.39-.59-2.08-1.76-2.08s-1.76.69-1.76,2.08v12.51c0,1.37.59,2,1.76,2s1.76-.68,1.76-2v-3.42h3.33v3.17a5.79,5.79,0,0,1-1.33,4.06,5.88,5.88,0,0,1-7.71,0Z" transform="translate(-536.75 -70.33)"/><path d="M715.31,109.17h3.52v9.44l4.48-9.44h3.52l-4.19,8.22,4.25,14.18h-3.68l-3-10-1.41,2.84v7.14h-3.52Z" transform="translate(-536.75 -70.33)"/><path d="M728.56,109.17h9.6v3.2h-6.08v5.92h4.83v3.2h-4.83v6.88h6.08v3.2h-9.6Z" transform="translate(-536.75 -70.33)"/><path d="M742.92,112.37h-3.68v-3.2h10.88v3.2h-3.68v19.2h-3.52Z" transform="translate(-536.75 -70.33)"/><rect class="cls-4" x="75.7" y="85" width="145.6" height="48"/><rect x="82.9" y="85" width="4" height="48"/><rect x="89.3" y="85" width="2.4" height="48"/><rect x="93.3" y="85" width="5.6" height="48"/><rect x="100.5" y="85" width="2.4" height="48"/><rect x="104.5" y="85" width="4" height="48"/><rect x="110.9" y="85" width="2.4" height="48"/><rect x="114.9" y="85" width="5.6" height="48"/><rect x="122.1" y="85" width="2.4" height="48"/><rect x="126.9" y="85" width="4" height="48"/><rect x="133.3" y="85" width="2.4" height="48"/><rect x="137.3" y="85" width="5.6" height="48"/><rect x="144.5" y="85" width="2.4" height="48"/><rect x="148.5" y="85" width="4" height="48"/><rect x="154.9" y="85" width="2.4" height="48"/><rect x="158.9" y="85" width="5.6" height="48"/><rect x="166.1" y="85" width="2.4" height="48"/><rect x="170.1" y="85" width="4" height="48"/><rect x="176.5" y="85" width="2.4" height="48"/><rect x="180.5" y="85" width="5.6" height="48"/><rect x="187.7" y="85" width="2.4" height="48"/><rect x="192.5" y="85" width="4" height="48"/><rect x="198.9" y="85" width="2.4" height="48"/><rect x="202.9" y="85" width="5.6" height="48"/><rect x="210.1" y="85" width="2.4" height="48"/><path d="M619.88,109.5h9.6v3.2H623.4v5.92h4.83v3.2H623.4v6.88h6.08v3.2h-9.6Z" transform="translate(-536.75 -70.33)"/><path d="M630.56,109.5h3.56l2.3,17.38h.06l2.31-17.38H642l-3.39,22.4H634Z" transform="translate(-536.75 -70.33)"/><path d="M643.72,109.5h9.6v3.2h-6.08v5.92h4.83v3.2h-4.83v6.88h6.08v3.2h-9.6Z" transform="translate(-536.75 -70.33)"/><path d="M655.33,109.5h4.42l3.42,13.41h.06V109.5h3.14v22.4h-3.62l-4.22-16.35h-.06V131.9h-3.14Z" transform="translate(-536.75 -70.33)"/><path d="M671.75,112.7h-3.68v-3.2H679v3.2h-3.68v19.2h-3.52Z" transform="translate(-536.75 -70.33)"/><path d="M688.51,112.7h-3.68v-3.2h10.88v3.2H692v19.2h-3.52Z" transform="translate(-536.75 -70.33)"/><path d="M697.41,109.5h3.52v22.4h-3.52Z" transform="translate(-536.75 -70.33)"/><path d="M704.66,130.78a5.74,5.74,0,0,1-1.33-4.06v-12a5.76,5.76,0,0,1,1.33-4.06,5.88,5.88,0,0,1,7.71,0,5.81,5.81,0,0,1,1.33,4.06v2.37h-3.33v-2.59c0-1.39-.59-2.08-1.76-2.08s-1.76.69-1.76,2.08V127c0,1.37.59,2.05,1.76,2.05s1.76-.68,1.76-2.05v-3.42h3.33v3.17a5.79,5.79,0,0,1-1.33,4.06,5.88,5.88,0,0,1-7.71,0Z" transform="translate(-536.75 -70.33)"/><path d="M715.81,109.5h3.52v9.44l4.48-9.44h3.52l-4.19,8.22,4.25,14.18h-3.68l-3-10-1.41,2.84v7.14h-3.52Z" transform="translate(-536.75 -70.33)"/><path d="M729.06,109.5h9.6v3.2h-6.08v5.92h4.83v3.2h-4.83v6.88h6.08v3.2h-9.6Z" transform="translate(-536.75 -70.33)"/><path d="M743.42,112.7h-3.68v-3.2h10.88v3.2h-3.68v19.2h-3.52Z" transform="translate(-536.75 -70.33)"/><rect class="cls-2" x="0.5" width="292" height="16"/></g></g></svg>
    </div>
  </div>
</div>
              
            
!

CSS

              
                @mixin for-phone-only {
  @media (max-width: 599px) {
    @content;
  }
}
@mixin for-tablet-portrait-up {
  @media (min-width: 600px) {
    @content;
  }
}
@mixin for-tablet-landscape-up {
  @media (min-width: 900px) {
    @content;
  }
}
@mixin for-desktop-up {
  @media (min-width: 1200px) {
    @content;
  }
}
@mixin for-big-desktop-up {
  @media (min-width: 1800px) {
    @content;
  }
}

body {
  font-family: "Raleway", sans-serif;
  font-size: 10px;
  box-sizing: border-box;
   @include for-phone-only {
    font-size: 6px;
  }    
  .container {
    position: relative;
    background: #eee;
    width: 100vw;
    height: 100vh;
    .phone {
      border: 10px solid #000;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 29em;
      height: 57em;
      background: #ff4c4d;
      background: #4ca7ff;
      border-radius: 15px;
      overflow: hidden;
      .top {
        position: absolute;
        z-index: 3;
        background: #ff3334;
        background: #198eff;
        box-sizing: border-box;
        width: 29em;
        height: 8em;
        // border-radius: 15px;
        h1 {
          padding: 1.5em;
          font-size: 13px;
          font-weight: bolder;
          color: #fff;
        }
        .name {
          height: 3em;
          width: 29em;

          display: flex;
          justify-content: center;
          align-items: center;
          font-weight: bold;
          color: #fff;
        }
      }
    }
    .printer {
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 22em;
      height: 0.75em;
      background: #333;
      border: 10px solid #232323;
      border-radius: 10px;
      &:nth-of-type(2) {
        height: 15em;
        top: 15.3%;
        background: #4ca7ff;
        border: 0;
        border-bottom: 10px solid #232323;
        z-index: 2;
      }
    }
    .ticket {
      position: absolute;
      top: 4.5%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: 28em;
      svg {
        .cls-3{stroke:#fff;stroke-miterlimit:10;}
        .cls-3,.cls-4{fill:#fcfcfc;}
        .cls-2{fill:#6f87ff;}
        .cls-1 {
          fill: #fff;
        }
        .a {
          fill: #fff;
          stroke: red;
          stroke-width: 5px;
          &:nth-of-type(2) {
            stroke: green;
          }
        }
        height: 100%;
      }
    }
  }
}
.a {
}
.b {
  fill: #6f87ff;
}
.c,
.d {
  fill: #fcfcfc;
}
.c {
  stroke: #fff;
  stroke-miterlimit: 10;
}

              
            
!

JS

              
                let ticket = document.querySelector('.ticket');

let printer = document.querySelector('.printer');
let elem = document.querySelector('h1');

var bounds = (elem.getBoundingClientRect())

var b = printer.getBoundingClientRect(); 
console.log(b)

var tl = gsap.timeline({delay: 1, });
tl.to(ticket, {
  y: '6em',
  duration: 1,
  ease: 'back'
});
tl.to(ticket, {
  y: '12em',
  duration: 1,
  ease: 'back'
});
tl.to(ticket, {
  y: '18em',
  duration: 1,
  ease: 'back'
});
tl.to(ticket, {
  y: '24em',
  duration: 1,
  ease: 'back'
});
tl.to(ticket, {
  y: '27.8em',
  duration: 1,
  ease: 'back'
});
tl.to("#bottom", {
  x: '-85.8em',
  duration: 1,
  ease: 'back'
});
              
            
!
999px

Console