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

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.

            
              
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
  <head>
    <meta https-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--[if !mso]><!-->
    <meta https-equiv="X-UA-Compatible" content="IE=edge" />
    <!--<![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="robots" content="noindex,nofollow">
    <meta property="og:title" content="Two Newsletter">
    <!--[if gte mso 9]>
    <xml>
      <o:OfficeDocumentSettings>
        <o:AllowPNG/>
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->
    <title>A  &nbsp;&nbsp;L  &nbsp;&nbsp;I  &nbsp;&nbsp;E  &nbsp;&nbsp;N</title>

  </head>
  <body margintop="0" marginleft="0" marginright="0" style="min-width:100% !important; Margin:0 auto; padding:0;" class="blackfade">
    <table width="100%" align="center" cellspacing="0" cellpadding="0" border="0" role="presentation">
      <tr>
        <td valign="middle" >
          <center>
            <div align="center" valign="top" style="font-size:0; max-width:960px; overflow:hidden;">
              <div style="padding:0px 0px;">
                <!-- ALIEN TITLE-->
                <div style="padding:0px 0px;" class="flicker">
                  <div class="logoup" style="padding:40px 0px 20px 0px;">
                    <div class="alienlogotxt" style="padding:0px 2px;">
                      <h1 style="font-family:arial, sans-serif; font-size:30px; line-height:30px; padding:0; color:#ffffff; text-align:left;"><span class="htxt" style="letter-spacing:102px;">A L I E </span>N</h1>
                    </div>
                  </div>
                </div>
                <!-- INPUTS -->      
                <!-- OPENING CORRIDOR SETTING -->
                <div class="shuddership">
                  <input name="monitor_check" type="checkbox" id="monitor_check" class="pallette"> 
                  <div class="alien_setting">
                    <div style="padding:54% 0 0 0;" class="message1">
                      <label for="monitor_check" style="background:rgba(0,0,0,0); padding:10px 7px; cursor: pointer;">
                        <p style="padding:0; margin:0; text-align:center;">&nbsp;Be Careful in there...&nbsp;</p>
                        <p class="comptext" style="padding:0; margin:0; text-align:center;">&nbsp;Check your monitor&nbsp;&gt;&nbsp;</p>
                      </label>
                    </div>
                  </div>
                  <input name="alien_run" type="checkbox" id="alien_run" class="pallette"> 
                  <div class="monitor">
                    <div style="padding:54% 0 0 0; display:block;" class="message2">
                      <label for="alien_run" style=" background:rgba(0,0,0,0); padding:10px 7px; cursor: pointer;">
                        <p class="comptext" style="padding:0; margin:0; text-align:center;"><span>&nbsp;GET OUT OF THERE!&nbsp;&gt;&nbsp;</span></p>
                      </label>
                    </div>
                  </div>
                  <!-- ALIEN ATTACKS -->         
                  <div align="center" valign="top" style="font-size:0; max-width:960px;" >
                    <div style="padding:0px 0px;" class="shudderalien">
                      <div class="alienattx">
                        <div class="strapline" style="padding:0px 2px 0px 2px; display:block;">
                          <h4 style="font-family:arial, sans-serif; font-weight:normal; font-size:22px; line-height:30px; padding:0; color: rgba(123,121,124,1.0); text-align:center;">In space no one can hear you scream</h4>
                        </div>
                        <div class="finalcta" style="padding:0px 2px 0px 2px; display:block;">
                          <a href="http://blog.two-uk.com/2017/03/17/alien_email/" style=" background:rgba(0,0,0,0); padding:10px 7px; text-decoration:none;">
                            <p class="comptext" style="padding:0; margin:0; text-align:center;">&nbsp;COMING MARCH 2017&nbsp;&gt;&nbsp;</p>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="preload" height="0" style="height:0px; overflow:hidden; line-height: 0px; width:0px;"></div>
              </div>
            </div>
          </center>
        </td>
      </tr>
    </table>
  </body>
</html>
            
          
!
            
                  <style type="text/css">
      /* RESETS AND CLIENT SPECIFIC */
      div, p, a, li, td {-webkit-text-size-adjust:none; -ms-text-size-adjust:none; -webkit-font-smoothing:antialiased !important;}
      body {min-width:100% !important; Margin:0 auto !important; padding:0; background-color:#dedede;}
      #outlook a {padding:0;}
      .ReadMsgBody {width:100%;}
      .ExternalClass {width:100%;}
      .ExternalClass * {line-height:110%;}
      table { }
      table td {padding:0; border-collapse:collapse;}
      img {display:block; line-height:100%; border:0; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;}
      .pallette {display:none;}
      h1 {margin:0;}
      p {margin:0;}
      @media only screen {
      a[x-apple-data-detectors] {color:inherit !important; text-decoration:none !important; font-size:inherit !important; font-family:inherit !important; font-weight:inherit !important; line-height:inherit !important;}
      }
      @media only screen and (min-device-width:320px) and (max-device-width:1024px) {
      a[href^='tel'], a[href^='sms'], a {color:inherit !important; cursor:default !important; text-decoration:none !important;}
      }
    </style>
    <style type="text/css">
	/* PRELOADS */ 
      .preload{
      animation-name: pre;
      animation-duration: 0.5s;
      animation-delay:0.5s;
      }
      @keyframes pre{
      0%{background-image: url('http://kristianrobinson.co.uk//Alien/Alien_2/build/img/setting.jpg');}
      10%{background-image: url('http://kristianrobinson.co.uk//Alien/Alien_2/build/img/monitor_setting.jpg');}
      20%{background-image: url('http://kristianrobinson.co.uk//Alien/Alien_2/build/img/monitor_setting2.jpg');}
      30%{background-image: url('http://kristianrobinson.co.uk//Alien/Alien_2/build/img/alien_sprite960.jpg');}
      40%{background-image: url('http://kristianrobinson.co.uk//Alien/Alien_2/build/img/setting_mob.jpg');}
      50%{background-image: url('http://kristianrobinson.co.uk//Alien/Alien_2/build/img/monitor_mob.jpg');}
      60%{background-image: url('http://kristianrobinson.co.uk//Alien/Alien_2/build/img/monitor_setting2_mob.jpg');}
      70%{background-image: url("http://kristianrobinson.co.uk//Alien/Alien_2/build/img/alien_sprite.jpg");}
      }
      /* A  L  I  E  N  ENTRANCE*/ 
      .logoup{
      animation-name: slideUp;-webkit-animation-name: slideUp;  
      animation-duration: 2s;-webkit-animation-duration: 2s;
      animation-timing-function: ease;-webkit-animation-timing-function: ease;
      visibility: visible !important; 
      }
      @keyframes slideUp {
      0% {transform: translateY(15%); opacity:0;}   
      60% {transform: translateY(7%); opacity:0;}     
      100% {transform: translateY(0%); opacity:1;}   
      }
      @-webkit-keyframes slideUp {
      0% {-webkit-transform: translateY(15%); opacity:0;}   
      60% {-webkit-transform: translateY(7%); opacity:0;}     
      100% {-webkit-transform: translateY(0%); opacity:1;}  
      }
      /* A  L  I   E  N - IN AND OUT */   
      .flicker {
      animation: blinker 10s linear infinite;
      }
      @keyframes blinker {  
      25% { opacity: 0.1; }
      50% { opacity: 1; }
      66% { opacity: 0.1; }
      }
      /* DARKER SURROUND ON OPENING */   
      .blackfade {
      animation-duration: 2s;
      animation-delay: 0.5s;
      animation-iteration-count: 1;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-name: openblack;
      background-color: #000000;
      }
      @keyframes openblack {
      0% {
      background-color: #0c0c0c;
      }
      10% {
      background-color: #0c0c0c;
      }
      100% {
      background-color: #000000;
      }
      } 
      /* SUBTLE SHUDDER */  
      .shuddership {
      animation: judder 0.8s infinite cubic-bezier(.36,.07,.19,.97) both;
      transform: translate3d(0, 0, 0);
      animation-delay: 0s;
      backface-visibility: hidden;
      perspective: 1000px;
      }
      @keyframes judder {
      10%, 90% {
      transform: translate3d(-0px, -0px, -0px);
      }
      20%, 80% {
      transform: translate3d(0px, 0px, -0px);
      }
      30%, 50%, 70% {
      transform: translate3d(-0px, -1px, -0px);
      }
      40%, 60% {
      transform: translate3d(0px, 0px, -0px);
      }
      }  
      /* OPENING SCENE */ 
      .alien_setting { 
      background-color:black;
      background-image: url('http://kristianrobinson.co.uk//Alien/Alien_2/build/img/setting.jpg');
      background-position: 600% 100%;
      width: 960px;
      height: 585px;
      background-size: 600% 100%;
      background-repeat: no-repeat;
      animation-fill-mode: both;
      animation-duration: 20s;
      animation-iteration-count: infinite;
      animation-timing-function: steps(1), linear;
      animation-name: alienset;
      animation-delay: 0s;
      animation-fill-mode: both;
      opacity:.6;
      }
      @keyframes alienset {
      0% { background-position: 0% 0%;}
      9%  { background-position: 100% 0%; }
      12%  { background-position: 20% 0%; }
      14% { background-position: 60% 0%; }
      16% { background-position: 100% 0%; }
      18% { background-position: 60% 0%; }
      20% { background-position: 0% 0%; }
      27% { background-position: 60% 0%; }
      40% { background-position: 80% 0%; }
      54% { background-position: 60% 0%; }
      64% { background-position: 60% 0%; }
      70% { background-position: 60% 0%; }
      88% { background-position: 60% 0%; }
      90% { background-position: 60% 0%; }
      91% { background-position: 60% 0%; }
      100% { background-position: 60% 0%; }
      }	
	  
	  
      .message2{ display:none !important;} 
      #monitor_check:checked ~ * .message2{
      display:block !important;
      animation-name: getout;
      animation-duration: 5.5s;
      }
      @keyframes getout {
      0% { opacity: 0;}
      99% { opacity: 0;}
      100% { opacity: 1;}
      }
      #alien_run:checked ~ *.shuddership{
      animation: judder 0.0s 1 cubic-bezier(.36,.07,.19,.97) both;
      transform: translate3d(0, 0, 0);
      animation-delay: 0s;
      backface-visibility: hidden;
      perspective: 1000px;
      }
      @keyframes judder {
      10%, 90% {
      transform: translate3d(-0px, -0px, -0px);
      }
      20%, 80% {
      transform: translate3d(0px, 0px, -0px);
      }
      30%, 50%, 70% {
      transform: translate3d(-0px, -0px, -0px);
      }
      40%, 60% {
      transform: translate3d(0px, 0px, -0px);
      }
      }  
      #alien_run:checked ~ * .strapline{
      opacity: 1;} 	 
      #alien_run:checked ~ * .cta{
      display: none;}
      .strapline{	 opacity: 0;	}
      .finalcta{	 opacity: 0;	}
      #monitor_check:checked ~ *.alien_setting{
      display: none;} 
      #monitor_check:checked ~ *.message1{
      display: none;} 	 
      #monitor_check:checked ~ *.monitor { 
      background-color:black !important;
      background-image: url('http://kristianrobinson.co.uk//Alien/Alien_2/build/img/monitor_setting.jpg');
      background-position: 1000% 1000%;
      width: 960px;
      height: 585px;
      background-size: 600% 200%;
      background-repeat: no-repeat;
      animation-fill-mode: both;
      animation-duration: 7s;
      animation-iteration-count: 1;
      animation-timing-function: steps(1), linear;
      animation-name: monitors;
      animation-delay: 0s;
      animation-fill-mode: both;
      opacity:.6;
      }
      @keyframes monitors {
      0% { background-position: 0% 0%;}
      1%  { background-position: 20% 0%; }
      2%  { background-position: 40% 0%; }
      3% { background-position: 60% 0%; }
      4% { background-position: 80% 0%; }
      5% { background-position: 80% 100%; }
      10% { background-position: 0% 100%; }
      15% { background-position: 20% 100%; }
      20% { background-position: 60% 100%; }
      25% { background-position: 20% 100%; }
      30% { background-position: 60% 100%; }
      35% { background-position: 80% 100%; }
      40% { background-position: 40% 100%; }
      45% { background-position: 20% 100%; }
      50% { background-position: 40% 100%; }
      51% { background-position: 100% 0%; }
      56% { background-position: 80% 0%; }
      57% { background-position: 60% 0%; }
      58% { background-position: 40% 0%; }
      59% { background-position: 20% 0%; }
      60% { background-position: 0% 0%; }
      61% { background-position: 100% 100%; }
      70% { background-position: 0% 0%; background-image: url('http://kristianrobinson.co.uk//Alien/Alien_2/build/img/monitor_setting2.jpg'); background-size: 600% 100%; }
      72% { background-position: 20% 0%; }
      74% { background-position: 40% 0%; }
      76% { background-position: 60% 0%; }
      85% { background-position: 80% 0%; }
      90% { background-position: 100% 0%; }
      100% { background-position: 100% 0%; }
      }	
    </style>
    <style type="text/css"> 
      /* TEXT SCROLL TEXT */  
      p{
      color: lime; 
      font-family: "Courier";
      font-size: 20px;
      line-height: 30px;
      margin: 10px 0 0 10px;
      white-space: nowrap;
      overflow: hidden;
      width: 15em;
      animation: type 2.4s steps(30, end);
      }
      .comptext{
      border: 2px solid lime;
      }
      p:nth-child(2){
      animation: type2 8s steps(60, end);
      }
      p a{
      color: lime;
      text-decoration: none;
      }
      p span{
      animation: blink 1s infinite; 
      }
      @keyframes type{ 
      from { width: 0; } 
      } 
      @keyframes type2{
      0%{width: 0;}
      50%{width: 0;}
      100%{ width: 100; } 
      } 
      @keyframes blink{
      to{opacity: .0;}
      }
      ::selection{
      background: black;
      }
    </style>
    <style type="text/css">
      #alien_run:checked ~ *.monitor{
      display: none;} 
      #alien_run:checked ~ * .strapline{
      animation-name: fadeIn;
      animation-duration: 6s;
      opacity: 1;
      transform: translateY(200px);
      }
      @keyframes fadeIn {
      0% {opacity: 0;transform: translateY(-90px);}
      80% {opacity: 0;transform: translateY(-90px);}
      85% {opacity: 0;transform: translateY(180px);}
      100% {opacity: 1;transform: translateY(200px);}
      }
      @-webkit-keyframes fadeIn {
      0% {opacity: 0;transform: translateY(-90px); }
      80% {opacity: 0;transform: translateY(-90px);}
      85% {opacity: 0;transform: translateY(180px);}
      100% {opacity: 1;transform: translateY(200px); }
      }
      #alien_run:checked ~ * .finalcta {
      animation-name: fadeIn;
      animation-duration: 8s;
      opacity: 1;
      transform: translateY(200px);
      }
      @keyframes fadeIn {
      0% {opacity: 0;transform: translateY(-90px);}
      80% {opacity: 0;transform: translateY(-90px);}
      85% {opacity: 0;transform: translateY(180px);}
      100% {opacity: 1;transform: translateY(200px);}
      }
      @-webkit-keyframes fadeIn {
      0% {opacity: 0;transform: translateY(-90px); }
      80% {opacity: 0;transform: translateY(-90px);}
      85% {opacity: 0;transform: translateY(180px);}
      100% {opacity: 1;transform: translateY(200px); }
      }
      #alien_run:checked ~ * .shudderalien {
      animation: shake 0.6s 6 cubic-bezier(.36,.07,.19,.97) both;
      transform: translate3d(0, 0, 0);
      animation-delay: 0s;
      backface-visibility: hidden;
      perspective: 1000px;
      }
      @keyframes shake {
      10%, 90% {
      transform: translate3d(-15px, -12px, -5px);
      }
      20%, 80% {
      transform: translate3d(15px, 10px, -10px);
      }
      30%, 50%, 70% {
      transform: translate3d(-20px, -20px, -20px);
      }
      40%, 60% {
      transform: translate3d(7px, 4px, -9px);
      }
      }  
      #alien_run:checked ~ * .alienattx{
      background-image: url("http://kristianrobinson.co.uk//Alien/Alien_2/build/img/alien_sprite960.jpg");
      width: 960px;
      height: 560px;
      overflow: hidden;
      animation: play1 2s 1s steps(7) 1;
      }
      @keyframes play1 {
      from { background-position-y: 0px; background-position-x: 0px; }
      33% { background-position-y:  0px; background-position-x: -6720px; }
      33.0001% { background-position-y: -560px; background-position-x: 0px; }
      66% { background-position-y: -560px; background-position-x: -6720px; }
      66.0001% { background-position-y: -1120px; background-position-x: 0px; transform:scale(1.0) }
      100% { background-position-y: -1120px; background-position-x: -6720px; transform:scale(1.4) }
      }  
    </style>
    <style type="text/css">	
      /*  MOBILE */ 
      @media screen and (max-width: 480px){
      .htxt {letter-spacing:33px !important;}
      .alienlogotxt { padding:0px 3% !important;}
      .message1 {padding-top: 91% !important;} 
      .message2 {padding-top:  96% !important;} 
      h1 { font-size:20px !important; padding-bottom: 20px !important; text-align:center !important;}
      .htxt {letter-spacing:31px !important;}
      .alienlogotxt { padding:0px 3% !important;}
      /* THE SETTING MOBILE */  
      .alien_setting { 
      background-color:black;
      background-image: url('http://kristianrobinson.co.uk//Alien/Alien_2/build/img/setting_mob.jpg');
      background-position: 600% 100%;
      width: 100%;
      height: auto;
      background-size: 600% 100%;
      background-repeat: no-repeat;
      animation-fill-mode: both;
      animation-duration: 20s;
      animation-iteration-count: infinite;
      animation-timing-function: steps(1), linear;
      animation-name: alienset;
      animation-delay: 0s;
      animation-fill-mode: both;
      opacity:.6;
      }
      @keyframes alienset {
      0% { background-position: 0% 0%;}
      9%  { background-position: 100% 0%; }
      12%  { background-position: 20% 0%; }
      14% { background-position: 60% 0%; }
      16% { background-position: 100% 0%; }
      18% { background-position: 60% 0%; }
      20% { background-position: 0% 0%; }
      27% { background-position: 60% 0%; }
      40% { background-position: 80% 0%; }
      54% { background-position: 60% 0%; }
      64% { background-position: 60% 0%; }
      70% { background-position: 60% 0%; }
      88% { background-position: 60% 0%; }
      90% { background-position: 60% 0%; }
      91% { background-position: 60% 0%; }
      100% { background-position: 60% 0%; }
      }	
      #monitor_check:checked ~ *.alien_setting{
      display: none;} 
      #monitor_check:checked ~ *.message1{
      display: none;} 	 
      #monitor_check:checked ~ *.monitor { 
      background-color:black !important;
      background-image: url('http://kristianrobinson.co.uk//Alien/Alien_2/build/img/monitor_mob.jpg');
      background-position: 1000% 1000%;
      width: 100%;
      height: auto;
      background-size: 600% 200%;
      background-repeat: no-repeat;
      animation-fill-mode: both;
      animation-duration: 7s;
      animation-iteration-count: 1;
      animation-timing-function: steps(1), linear;
      animation-name: monitors;
      animation-delay: 0s;
      animation-fill-mode: both;
      opacity:.6;
      }
      @keyframes monitors {
      0% { background-position: 0% 0%;}
      1%  { background-position: 20% 0%; }
      2%  { background-position: 40% 0%; }
      3% { background-position: 60% 0%; }
      4% { background-position: 80% 0%; }
      5% { background-position: 80% 100%; }
      10% { background-position: 0% 100%; }
      15% { background-position: 20% 100%; }
      20% { background-position: 60% 100%; }
      25% { background-position: 20% 100%; }
      30% { background-position: 60% 100%; }
      35% { background-position: 80% 100%; }
      40% { background-position: 40% 100%; }
      45% { background-position: 20% 100%; }
      50% { background-position: 40% 100%; }
      51% { background-position: 100% 0%; }
      56% { background-position: 80% 0%; }
      57% { background-position: 60% 0%; }
      58% { background-position: 40% 0%; }
      59% { background-position: 20% 0%; }
      60% { background-position: 0% 0%; }
      61% { background-position: 100% 100%; }
      70% { background-position: 0% 0%; background-image: url('http://kristianrobinson.co.uk//Alien/Alien_2/build/img/monitor_setting2_mob.jpg'); background-size: 600% 100%; }
      72% { background-position: 20% 0%; }
      74% { background-position: 40% 0%; }
      76% { background-position: 60% 0%; }
      85% { background-position: 80% 0%; }
      90% { background-position: 100% 0%; }
      100% { background-position: 100% 0%; }
      }	
      #alien_run:checked ~ *.monitor{
      display: none;} 
      #alien_run:checked ~ * .strapline{
      animation-name: fadeIn;
      animation-duration: 6s;
      opacity: 1;
      transform: translateY(200px);
      }
      @keyframes fadeIn {
      0% {opacity: 0;transform: translateY(-90px);}
      80% {opacity: 0;transform: translateY(-90px);}
      85% {opacity: 0;transform: translateY(180px);}
      100% {opacity: 1;transform: translateY(200px);}
      }
      @-webkit-keyframes fadeIn {
      0% {opacity: 0;transform: translateY(-90px); }
      80% {opacity: 0;transform: translateY(-90px);}
      85% {opacity: 0;transform: translateY(180px);}
      100% {opacity: 1;transform: translateY(200px); }
      }
      #alien_run:checked ~ * .shudderalien {
      animation: shake 0.6s 6 cubic-bezier(.36,.07,.19,.97) both;
      transform: translate3d(0, 0, 0);
      animation-delay: 0s;
      backface-visibility: hidden;
      perspective: 1000px;
      }
      @keyframes shake {
      10%, 90% {
      transform: translate3d(-15px, -12px, -5px);
      }
      20%, 80% {
      transform: translate3d(15px, 10px, -10px);
      }
      30%, 50%, 70% {
      transform: translate3d(-20px, -20px, -20px);
      }
      40%, 60% {
      transform: translate3d(7px, 4px, -9px);
      }
      }  
      #alien_run:checked ~ * .alienattx {
      background-image: url("http://kristianrobinson.co.uk//Alien/Alien_2/build/img/alien_sprite.jpg");
      width:400px; 
      height: 400px;
      animation: play2 2s 1s steps(7) 1; 
      background-size: 700% 300%;}
      }
      @keyframes play2 {
      from { background-position-y: 0%; background-position-x: 0px; }
      33% { background-position-y:  0%; background-position-x: -700%; }
      33.0001% { background-position-y: 50%; background-position-x: 0px; }
      66% { background-position-y: 50%; background-position-x: -700%; }
      66.0001% { background-position-y: 100%; background-position-x: 0px; transform:scale(1.0) }
      100% { background-position-y: 100%; background-position-x: -700%; transform:scale(1.8) }
      }
      }
    </style>
            
          
!
            
               /*
These have been made for email clients, and some of the creations may feature some fallback, or code for other clients
Also to note. I haven't created any targetting or fallbacks in this build - but best viewrd in webkit browsers
*/
            
          
!
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