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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                 <!-- navigation -->

<nav class="col-xs-12 row ">
  <div class="logo"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/270939/wixLogo2.svg" alt=""></div>
  <div class="userProf"></div>
</nav>
<!-- navigation - End -->

<!-- Header -->
<div class="header">
  <h1>Upgrade Your Site with a Premium Plan</h1>
  <h2>14 Days Money Back Guarntee on all Premim Plans</h2></div>
<!-- Header - End -->


<!-- bossWrapp -->
<div class="bossWrapp">
  <span class="line"></span>

  <!-- Summary -->
  <div class="details summaryWrapp">
    <div class="detHeader">
      <div>
        <h3>Unlimited</h3>
        <p>Yearly Subscription</p>
      </div><a>Show Features
<svg width="10px" height="7px" viewBox="0 0 10 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Sticky-Details-Flow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
        <g id="Quick-PP-/-Sticky-Details-/-Cycle-Selected" transform="translate(-1155.000000, -608.000000)" stroke-width="1.5">
            <g id="Group-18" transform="translate(84.000000, 450.000000)">
                <g id="Step-#2---Cycle-[collapsed]">
                    <g id="Group-21" transform="translate(690.000000, 102.000000)">
                        <g id="Plan-Details-Header">
                            <g id="Group-23" transform="translate(279.000000, 50.000000)">
                                <polyline id="Shape" transform="translate(107.000000, 9.500000) rotate(-90.000000) translate(-107.000000, -9.500000) " points="109 13.5 105 9.5 109 5.5"></polyline>
                            </g>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg></a></div>

    <!-- Plan List -->
    <div class="detDetails second viewed">
      <ul class="benefits">
        <h5 class="title">plan benefits</h5>
        <li>Free Domain for 1 Year</li>
        <li>$300 Ad Voucher</li>
        <li>Form Builder App - $48 Value</li>
        <li>Site Booster App - $60 Value</li>
      </ul>

      <ul class="features">
        <h5 class="title">plan features</h5>
     
      </ul>
    </div>
    <!-- Plan List - End -->

    <!-- Details Pruchase  -->
    <div class="detPurchase marg">
      <ul class="summary">
        <h5 class="title">PURCHASE SUMMARY</h5>
        <li><b>Unlimited - Yearly Plan</b>
          <c>$ 168.00</c>
        </li>
        <li><b><small>Enter Promo Code</small></b>
          <c></c>
        </li>
        <li><b>VAT (17.00%)</b>
          <c>$ 28.56</c>
        </li>
        <li><b>Total</b>
          <c>$ 196.56</c>
        </li>
      </ul>
    </div>
    <!-- Details Pruchase - End -->


    <!-- Details Plan Price -->
    <div class="detSubmit">
      <button>
<svg width="11px" height="14px" viewBox="0 0 11 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Submit-Purchase-/-Default" transform="translate(-177.000000, -50.000000)" fill-rule="nonzero" fill="#FFFFFF">
            <g id="Group-6">
                <g id="Group-10" transform="translate(51.000000, 36.000000)">
                    <g id="Group-14" transform="translate(126.000000, 12.000000)">
                        <g id="Lock" transform="translate(0.000000, 2.000000)">
                            <path d="M9,6 L7,6 L7,4.28571429 C7,3.32142857 7.2,2.14285714 5.5,2.14285714 C4,2.14285714 4,3.21428571 4,4.28571429 L4,6 L2,6 L2,4.28571429 C2,2.14285714 3.5,0 5.5,0 C7.5,0 9,2.14285714 9,4.28571429 L9,6 Z" id="Shape"></path>
                            <path d="M11,7 C11,5.9 10.1,5 9,5 L2,5 C0.9,5 0,5.9 0,7 L0,12 C0,13.1 0.9,14 2,14 L9,14 C10.1,14 11,13.1 11,12 L11,7 Z M7,8.4 L6,10.4 L6,11.9 C6,12.2 5.8,12.4 5.5,12.4 C5.2,12.4 5,12.1 5,11.9 L5,10.4 L4,8.4 L5.5,7.3 L7,8.4 Z" id="Shape"></path>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>Submit</button>
    </div>
    <!-- Details Plan Price - End -->


  </div>
  <!-- Summary - End -->


  <!-- Details -->
  <div class="details stuff">
    <div class="detHeader">
      <div>
        <h3 class="detTitle">Unlimited<span>Most Popular</span></h3>
        <p>Yearly Subscription</p>
      </div>
    </div>

    <!-- Plan List -->
    <div class="detDetails">
      <ul class="benefits">
        <h5 class="title">plan benefits</h5>
       
      </ul>

      <ul class="features">
        <h5 class="title">plan features</h5>
      
      </ul>
    </div>
    <!-- Plan List - End -->


    <!-- Details Plan Price -->
    <div class="detPrice">
      <div>
        <h5 class="title">plan price</h5>
        <p>$168.00 <small>($14.00 Γ— 12 months)</small><span class="priceSave">Save 45%</span></p>
      </div>
    </div>
    <!-- Details Plan Price - End -->


  </div>
  <!-- Details - End -->


  <!-- Step #1 -->
  <div class="step step1">
    <!-- Step Header -->
    <div class="stepHeader stepHeader1">
      <div class="stepCount active">1</div>
      <h3><p>Select a Premium Plan</p> <span><h5 class="title">premium plan</h5><h3>Unlimited<a class="step1Change" href="javascript:void(0)">Change</a></h3> </span>
      </h3>
    </div>
    <!-- Step Header - End -->

    <div class="stepDetails">

      <div class="plans">

        <!-- Single Plan -->
        <div class="plan product" id="VIP">
          <object><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/270939/arrow-right.png" alt=""></object>
          <div class="planDesc">
            <h3>VIP</h3>
            <p>Everything and more</p>
          </div>
          <div class="planPrice">
            <span><sup>$</sup>25<sub>/month</sub></span>
            <button class="">Select</button>
          </div>
        </div>
        <!-- Single Plan -->

        <!-- Single Plan -->
        <div class="plan product" id="eCom">
     <object><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/270939/arrow-right.png" alt=""></object>
          <div class="planDesc">
            <h3>eCommerce</h3>
            <p>Best for small businesses</p>
          </div>
          <div class="planPrice">
            <span><sup>$</sup>17<sub>/month</sub></span>
            <button class="">Select</button>
          </div>
        </div>
        <!-- Single Plan -->

        <!-- Single Plan -->
        <div class="plan product" id="Unlimited">
          <span class="badge">Most Popular</span>
           <object><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/270939/arrow-right.png" alt=""></object>
          <div class="planDesc">
            <h3>Unlimited</h3>
            <p>Enterpreneur & Freelancers</p>
          </div>
          <div class="planPrice">
            <span><sup>$</sup>14<sub>/month</sub></span>
            <button class="step1CTA active">Select</button>
          </div>
        </div>
        <!-- Single Plan -->

        <!-- Single Plan -->
        <div class="plan product" id="Combo">
           <object><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/270939/arrow-right.png" alt=""></object>
          <div class="planDesc">
            <h3>Combo</h3>
            <p>Personal use</p>
          </div>
          <div class="planPrice">
            <span><sup>$</sup>10<sub>/month</sub></span>
            <button class="">Select</button>
          </div>
        </div>
        <!-- Single Plan -->

        <!-- Single Plan -->
        <div class="plan product" id="Connect">
           <object><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/270939/arrow-right.png" alt=""></object>
          <div class="planDesc">
            <h3>Connect Domain</h3>
            <p>Most Basic</p>
          </div>
          <div class="planPrice">
            <span><sup>$</sup>5<sub>/month</sub></span>
            <button class="">Select</button>
          </div>
        </div>
        <!-- Single Plan -->


      </div>


    </div>
  </div>
  <!-- Step #1 - End -->

  <!-- Step #2 -->
  <div class="step step2">
    <!-- Step Header -->
    <div class="stepHeader stepHeader2">
      <div class="stepCount">2</div>
      <h3><p>Select a Subscription Period</p> <span><h5 class="title">Subscription Period</h5><h3>Yearly<a class="step2Change" href="javascript:void(0)">Change</a></h3> </span>
      </h3>

    </div>
    <!-- Step Header - End -->

    <div class="stepDetails">
      <div class="plans">
        <!-- Single Plan -->
        <div class="plan cycle" id="3Years">
            <object><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/270939/arrow-right.png" alt=""></object>
          <div class="planDesc">
            <h3>3 Years</h3>
            <p>$10.00 Γ— 36 months</p>
          </div>
          <div class="planPrice save">
            <span>Save 55%</span>
            <button class="">Select</button>
          </div>
        </div>
        <!-- Single Plan -->

        <!-- Single Plan -->
        <div class="plan cycle" id="2Years">
            <object><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/270939/arrow-right.png" alt=""></object>
          <div class="planDesc">
            <h3>2 Years</h3>
            <p>$11.00 Γ— 24 months</p>
          </div>
          <div class="planPrice save">
            <span>Save 50%</span>
            <button class="">Select</button>
          </div>
        </div>
        <!-- Single Plan -->

        <!-- Single Plan -->
        <div class="plan cycle" id="1Year">
            <object><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/270939/arrow-right.png" alt=""></object>
          <div class="planDesc">
            <h3>Yearly</h3>
            <p>$14.00 Γ— 12 months</p>
          </div> 
          <div class="planPrice save">
            <span>Save 45%</span>
            <button class="step2CTA active">Select</button>
          </div> 
        </div>
        <!-- Single Plan -->

        <!-- Single Plan -->
        <div class="plan cycle" id="Month">
            <object><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/270939/arrow-right.png" alt=""></object>
          <div class="planDesc">
            <h3>Monthly</h3>
            <p>$16.00 /month to month</p>
          </div>
          <div class="planPrice">

            <button class="">Select</button>
          </div>
        </div>
        <!-- Single Plan -->
      </div>


    </div>
  </div>
  <!-- Step #2 - End -->


  <!-- Step #2 -->
  <div class="step step3">
    <!-- Step Header -->
    <div class="stepHeader stepHeader3">
      <div class="stepCount">3</div>
      <h3>Complete Your Purchase</h3>
    </div>
    <!-- Step Header - End -->

    <div class="stepDetails">
      <div class="cards">
        <div class="card">
          <div class="radio">
            <input id="radio-1" name="radio" type="radio" checked>
            <label for="radio-1" class="radio-label"><div><h3>My Saved Card</h3><p>XXXX-8357 Wix Wix</p></div></label>
          </div>
          <span>
<svg width="54px" height="36px" viewBox="0 0 54 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs>
        <rect id="path-1" x="0" y="0" width="54" height="36" rx="4"></rect>
    </defs>
    <g id="Sketches-&amp;-Archive" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Quick-PP-/-Sticky-Details-/-Cycle-Selected" transform="translate(-648.000000, -582.000000)">
            <g id="Group-18" transform="translate(84.000000, 450.000000)">
                <g id="Step-#2---Cycle-[collapsed]">
                    <g id="Saved-card-" transform="translate(66.000000, 102.000000)">
                        <g id="Payment-Frame" transform="translate(36.000000, 27.000000)">
                            <g id="Group-9">
                                <g id="payment-cc-icon-mastercard" transform="translate(462.000000, 3.000000)">
                                    <g id="Layer_1">
                                        <g id="Rectangle-6">
                                            <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
                                            <rect stroke="#E3EBF1" stroke-width="1" x="0.5" y="0.5" width="53" height="35" rx="4"></rect>
                                        </g>
                                        <g id="Group" transform="translate(12.000000, 6.000000)" fill-rule="nonzero">
                                            <path d="M5.71325978,23.7661172 L5.71325978,22.2008405 C5.71325978,21.6008178 5.34802856,21.2094986 4.7219179,21.2094986 C4.40886257,21.2094986 4.0697193,21.3138504 3.8349278,21.6529937 C3.65231219,21.3660263 3.39143275,21.2094986 3.00011358,21.2094986 C2.73923414,21.2094986 2.4783547,21.2877625 2.26965115,21.5747299 L2.26965115,21.2616745 L1.72180432,21.2616745 L1.72180432,23.7661172 L2.26965115,23.7661172 L2.26965115,22.3834561 C2.26965115,21.9399611 2.50444264,21.7312575 2.86967386,21.7312575 C3.23490508,21.7312575 3.41752069,21.966049 3.41752069,22.3834561 L3.41752069,23.7661172 L3.96536752,23.7661172 L3.96536752,22.3834561 C3.96536752,21.9399611 4.22624696,21.7312575 4.56539024,21.7312575 C4.93062146,21.7312575 5.11323707,21.966049 5.11323707,22.3834561 L5.11323707,23.7661172 L5.71325978,23.7661172 Z M13.8266104,21.2616745 L12.9396203,21.2616745 L12.9396203,20.5051242 L12.3917735,20.5051242 L12.3917735,21.2616745 L11.8961026,21.2616745 L11.8961026,21.7573455 L12.3917735,21.7573455 L12.3917735,22.905215 C12.3917735,23.4791498 12.626565,23.8182931 13.2526757,23.8182931 C13.4874672,23.8182931 13.7483466,23.7400292 13.9309622,23.6356775 L13.7744345,23.1660945 C13.6179069,23.2704462 13.4352913,23.2965342 13.3048515,23.2965342 C13.0439721,23.2965342 12.9396203,23.1400065 12.9396203,22.8791271 L12.9396203,21.7573455 L13.8266104,21.7573455 L13.8266104,21.2616745 Z M18.4702645,21.2094986 C18.1572092,21.2094986 17.9485056,21.3660263 17.8180659,21.5747299 L17.8180659,21.2616745 L17.2702191,21.2616745 L17.2702191,23.7661172 L17.8180659,23.7661172 L17.8180659,22.3573682 C17.8180659,21.9399611 18.0006815,21.7051696 18.3398248,21.7051696 C18.4441766,21.7051696 18.5746163,21.7312575 18.6789681,21.7573455 L18.8354957,21.2355866 C18.7311439,21.2094986 18.5746163,21.2094986 18.4702645,21.2094986 L18.4702645,21.2094986 Z M11.4526075,21.4703781 C11.1917281,21.2877625 10.8264968,21.2094986 10.4351777,21.2094986 C9.80906703,21.2094986 9.39165992,21.522554 9.39165992,22.0182249 C9.39165992,22.435632 9.70471525,22.6704235 10.2525621,22.7486874 L10.5134415,22.7747753 C10.8004089,22.8269512 10.9569366,22.905215 10.9569366,23.0356547 C10.9569366,23.2182704 10.748233,23.3487101 10.3830018,23.3487101 C10.0177706,23.3487101 9.73080319,23.2182704 9.54818758,23.0878306 L9.28730814,23.5052377 C9.57427553,23.7139413 9.96559469,23.8182931 10.3569139,23.8182931 C11.0873763,23.8182931 11.5047834,23.4791498 11.5047834,23.0095668 C11.5047834,22.5660717 11.1656401,22.3312802 10.6438812,22.2530164 L10.3830018,22.2269285 C10.1482103,22.2008405 9.96559469,22.1486646 9.96559469,21.992137 C9.96559469,21.8095214 10.1482103,21.7051696 10.4351777,21.7051696 C10.748233,21.7051696 11.0612883,21.8356093 11.217816,21.9138731 L11.4526075,21.4703781 Z M26.0096804,21.2094986 C25.6966251,21.2094986 25.4879215,21.3660263 25.3574818,21.5747299 L25.3574818,21.2616745 L24.8096349,21.2616745 L24.8096349,23.7661172 L25.3574818,23.7661172 L25.3574818,22.3573682 C25.3574818,21.9399611 25.5400974,21.7051696 25.8792407,21.7051696 C25.9835924,21.7051696 26.1140322,21.7312575 26.2183839,21.7573455 L26.3749116,21.2355866 C26.2705598,21.2094986 26.1140322,21.2094986 26.0096804,21.2094986 L26.0096804,21.2094986 Z M19.0181113,22.5138959 C19.0181113,23.2704462 19.5398702,23.8182931 20.3485965,23.8182931 C20.7138277,23.8182931 20.9747071,23.7400292 21.2355866,23.5313257 L20.9747071,23.0878306 C20.7660036,23.2443583 20.5573,23.3226221 20.3225085,23.3226221 C19.8790135,23.3226221 19.5659582,23.0095668 19.5659582,22.5138959 C19.5659582,22.0443129 19.8790135,21.7312575 20.3225085,21.7051696 C20.5573,21.7051696 20.7660036,21.7834334 20.9747071,21.9399611 L21.2355866,21.496466 C20.9747071,21.2877625 20.7138277,21.2094986 20.3485965,21.2094986 C19.5398702,21.2094986 19.0181113,21.7573455 19.0181113,22.5138959 L19.0181113,22.5138959 Z M24.0791725,22.5138959 L24.0791725,21.2616745 L23.5313257,21.2616745 L23.5313257,21.5747299 C23.3487101,21.3399384 23.0878306,21.2094986 22.7486874,21.2094986 C22.0443129,21.2094986 21.496466,21.7573455 21.496466,22.5138959 C21.496466,23.2704462 22.0443129,23.8182931 22.7486874,23.8182931 C23.1139186,23.8182931 23.374798,23.6878533 23.5313257,23.4530618 L23.5313257,23.7661172 L24.0791725,23.7661172 L24.0791725,22.5138959 Z M22.0704008,22.5138959 C22.0704008,22.0704008 22.3573682,21.7051696 22.8269512,21.7051696 C23.2704462,21.7051696 23.5835016,22.0443129 23.5835016,22.5138959 C23.5835016,22.9573909 23.2704462,23.3226221 22.8269512,23.3226221 C22.3573682,23.2965342 22.0704008,22.9573909 22.0704008,22.5138959 L22.0704008,22.5138959 Z M15.5223268,21.2094986 C14.7918644,21.2094986 14.2701055,21.7312575 14.2701055,22.5138959 C14.2701055,23.2965342 14.7918644,23.8182931 15.5484148,23.8182931 C15.913646,23.8182931 16.2788772,23.7139413 16.5658446,23.4791498 L16.3049651,23.0878306 C16.0962616,23.2443583 15.8353821,23.3487101 15.5745027,23.3487101 C15.2353594,23.3487101 14.8962161,23.1921824 14.8179523,22.7486874 L16.6701964,22.7486874 L16.6701964,22.5399838 C16.6962843,21.7312575 16.2267013,21.2094986 15.5223268,21.2094986 L15.5223268,21.2094986 Z M15.5223268,21.6790816 C15.8614701,21.6790816 16.0962616,21.8877852 16.1484375,22.2791044 L14.8440403,22.2791044 C14.8962161,21.9399611 15.1310076,21.6790816 15.5223268,21.6790816 L15.5223268,21.6790816 Z M29.1141457,22.5138959 L29.1141457,20.2703327 L28.5662989,20.2703327 L28.5662989,21.5747299 C28.3836833,21.3399384 28.1228039,21.2094986 27.7836606,21.2094986 C27.0792861,21.2094986 26.5314393,21.7573455 26.5314393,22.5138959 C26.5314393,23.2704462 27.0792861,23.8182931 27.7836606,23.8182931 C28.1488918,23.8182931 28.4097713,23.6878533 28.5662989,23.4530618 L28.5662989,23.7661172 L29.1141457,23.7661172 L29.1141457,22.5138959 Z M27.105374,22.5138959 C27.105374,22.0704008 27.3923414,21.7051696 27.8619244,21.7051696 C28.3054195,21.7051696 28.6184748,22.0443129 28.6184748,22.5138959 C28.6184748,22.9573909 28.3054195,23.3226221 27.8619244,23.3226221 C27.3923414,23.2965342 27.105374,22.9573909 27.105374,22.5138959 L27.105374,22.5138959 Z M8.7916372,22.5138959 L8.7916372,21.2616745 L8.24379037,21.2616745 L8.24379037,21.5747299 C8.06117476,21.3399384 7.80029532,21.2094986 7.46115205,21.2094986 C6.75677755,21.2094986 6.20893072,21.7573455 6.20893072,22.5138959 C6.20893072,23.2704462 6.75677755,23.8182931 7.46115205,23.8182931 C7.82638326,23.8182931 8.08726271,23.6878533 8.24379037,23.4530618 L8.24379037,23.7661172 L8.7916372,23.7661172 L8.7916372,22.5138959 Z M6.75677755,22.5138959 C6.75677755,22.0704008 7.04374494,21.7051696 7.51332793,21.7051696 C7.95682299,21.7051696 8.26987832,22.0443129 8.26987832,22.5138959 C8.26987832,22.9573909 7.95682299,23.3226221 7.51332793,23.3226221 C7.04374494,23.2965342 6.75677755,22.9573909 6.75677755,22.5138959 Z" id="XMLID_1775_" fill="#000000"></path>
                                            <g id="XMLID_328_">
                                                <rect id="Rectangle-path" fill="#FF5F00" x="11.2699919" y="2.2435632" width="8.21770243" height="14.7657764"></rect>
                                                <path d="M11.7917508,9.62645142 C11.7917508,6.62633783 13.2004998,3.96536752 15.3657991,2.2435632 C13.7744345,0.99134188 11.7656628,0.234791498 9.57427553,0.234791498 C4.38277463,0.234791498 0.18261561,4.43495052 0.18261561,9.62645142 C0.18261561,14.8179523 4.38277463,19.0181113 9.57427553,19.0181113 C11.7656628,19.0181113 13.7744345,18.261561 15.3657991,17.0093396 C13.2004998,15.3136233 11.7917508,12.626565 11.7917508,9.62645142 Z" id="XMLID_330_" fill="#EB001B"></path>
                                                <path d="M30.5750706,9.62645142 C30.5750706,14.8179523 26.3749116,19.0181113 21.1834107,19.0181113 C18.9920234,19.0181113 16.9832517,18.261561 15.3918871,17.0093396 C17.5832744,15.2875353 18.9659354,12.626565 18.9659354,9.62645142 C18.9659354,6.62633783 17.5571865,3.96536752 15.3918871,2.2435632 C16.9832517,0.99134188 18.9920234,0.234791498 21.1834107,0.234791498 C26.3749116,0.234791498 30.5750706,4.46103846 30.5750706,9.62645142 Z" id="Shape" fill="#F79E1B"></path>
                                            </g>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg></span>
        </div>
        <div class="card">
          <div class="radio">
            <input id="radio-2" name="radio" type="radio">
            <label for="radio-2" class="radio-label">Use another card</label>
          </div>
        </div>
         <div class="disclaimer">To ensure uninterrupted service, your subscription will automatically renew for US$ 119.34 on a monthly basis. You may disable auto-renewal or cancel your subscription at any time through your account.<br><br>By clicking Submit Purchase, you agree to our Terms of Use and Privacy Policy</div>
      </div>
      
     


    </div>
  </div>
  <!-- Step #2 - End -->

</div>
<!-- bossWrapp - End -->
              
            
!

CSS

              
                @import url('https://rsms.me/interface/interface.css');
// Vars -------------------------
$border: #DFE5EB;
$lightBorder: #FAFBFC;
$text: #162D3D;
$textLight: #20455E;
$textLightest: #7A92A5;
$wixBlue: #3899EC;
$wixDark: #308DDD;
$wixSky: #4EB7F5;
$wixPremium: #CD68ED;
// -------------------------

html {
  padding: 0;
  margin: 0;
  background: white;
  overflow-x: hidden;
}
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
*, *:before, *:after {
  box-sizing: border-box;
}
body {
  padding: 0;
  margin: 0;
  width: 100vw;
  display: flex;
  height: 1600px;
  background: white;
  color: $text;
  align-items: center;
  flex-direction: column;
  font-family: 'Roboto', sans-serif;
}

.ease {
  -webkit-transition: all 680ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 680ms cubic-bezier(0.19, 1, 0.22, 1);
}

.easeFast {
  -webkit-transition: all 230ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 230ms cubic-bezier(0.19, 1, 0.22, 1);
}

.title {
  text-transform: uppercase;
  font-size: 12px;
  margin: 0 0 12px 0;
  padding: 0;
  color: $textLightest;
  letter-spacing: 2px;
}
a {
  font-size: 14px;
  color: $wixBlue;
  &:hover {
    color: $wixSky;
    @extend .easeFast;
    cursor: pointer;
  }
}

// Vars ------------------------- End

.Boss {
  width: 60vw;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
}

nav {
  background: #FFFFFF;
  box-shadow: 0 2px 4px 0 rgba(16, 31, 43, 0.10);
  height: 48px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0 !important;
  display: flex;
  z-index: 9999991;
  align-items: center;
  justify-content: space-between;
  padding: 0 !important;
}
.logo {
  display: flex;
  flex-direction: row;
  width: 84px;
  justify-content: center;
  align-items: center;
  height: 100%;
  border-right: 1px solid $border;
  & svg {
    width: auto;
    display: block;
    align-self: center;
  }
}

.userProf {
  margin: 0 30px 0 0;
  height: 30px;
  width: 30px;
  border-radius: 40em;
  background: url('https://source.unsplash.com/random/100x100');
  background-size: cover;
  border: 1px solid $border;
}
//// ----------------

.header {
  height: 210px;
  padding: 54px 0 0 0 !important;
  margin: 0 0 48px 0 !important;
  width: 100%;
  background-image: linear-gradient(-1deg, #F6FCFF 0%, #EAF7FF 98%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  & h1 {
    margin: 0;
    font-size: 36px;
    font-weight: 300;
    color: $textLight;
  }

  & h2 {
    font-size: 16px;
    font-weight: 300;
    color: $textLight;
  }
}

//// ----------------

.bossWrapp {
  width: 1096px;
  height: auto;
  margin: 0 0 120px 0;
  position: relative;
  & .line {
    content: '';
    position: absolute;
    left: 0;
    border: 0px solid transparent;
    top: 0;
    height: 90%;
    width: 1px;
    background: $border;
  }
}

//// ----------------

.step {
  position: relative;
  margin: 36px 0;
}
.stepHeader {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0 0 36px 0;
  position: relative;
  background: white;
  & h3 {
    margin: 0;
    padding: 0;
    font-size: 24px;
    font-weight: 300;
    color: $text;
    & p {
      margin: 0;
      padding: 0;
    }
  }
}

// Step Header Switcher
.stepHeader h3 span {
  position: absolute;
  top: 0;
  transform: translatey(25px);
  opacity: 0;
  & h5 {
  }
  & h3 {
    margin: 0;
    & a {
      display: inline;
      font-size: 16px;
      text-decoration: none;
      color: $wixBlue;
      font-weight: 400;
      margin: 0 0 0 12px;
      @extend .easeFast;
      &:hover {
        color: $wixSky;
        @extend .easeFast;
      }
    }
  }
}
.stepCount {
  position: relative;
  z-index: 9;
  margin: 0 24px 0 -20px;
  display: flex;
  justify-content: center;
  font-size: 20px;
  font-weight: 500;
  align-items: center;
  height: 42px;
  width: 42px;
  background: white;
  border: 1px solid $border;
  border-radius: 30em;
  box-shadow: 0 0 0 6px $lightBorder;
  @extend .ease;
}

.stepCount.active {
  @extend .ease;
  color: white;
  background: #3899EC;
  box-shadow: 0 0 0 6px $lightBorder;
}
.stepCount.done {
  @extend .ease;
  &:after {
    position: absolute;
    content: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/270939/Checkmark-big.svg);
    top: 0;
    left: 0;
    right: 0;
    width: 40px;
    background: white;
    border-radius: 36em;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    height: 40px;
    bottom: 0;
    margin: auto;
  }
}

.stepDetails {
  width: 100%;
  height: 100%;
  padding: 0 0 0 46px;
  display: flex;
  align-items: stretch;
  will-change: opacity;
  flex-direction: row;
}
.plans {
  border-radius: 6px;
  border: 1px solid $border;
  width: 586px;
  display: flex;
  background: white;
  flex-direction: column;
}
.plan {
  border-bottom: 1px solid $border;
  min-height: 114px;
  max-height: 114px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 36px;
  align-content: center;
  position: relative;
  &:last-child {
    border-bottom: 0px solid $border;
  }

  & object {
    content: '';
    position: absolute;
    width: 586px;
    height: 115px;
    top: -1px;
    display: flex;
    justify-content: center;
    opacity: 0;
    backface-visibility: none;
    will-change: opacity;
    transform: translatez();
    @extend .ease;
    left: -1px;
    border: 1px solid rgba(#B6C1CD, 1);
    box-shadow: 0 4px 28px -4px rgba(22, 45, 61, 0.2);
  }
  & .badge {
      position: absolute;
      left: 0;
      top: 0;
      white-space:nowrap;
      padding: 4px 8px;
      margin: 0 0 0 0px;
      border-bottom-right-radius: 6px;
      letter-spacing: 1px;
      background: $wixPremium;
      font-size: 13px;
      font-weight: 500;
      color: white;
  }

  &:first-child  object {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }

  &:last-child object {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
  }
}

.plan button {
  height: 36px;
  text-align: center;
  width: 96px;
  border: 1px solid $wixBlue;
  color: $wixBlue;
  border-radius: 30em;
  background: transparent;
  justify-content: center;
  display: flex;
  margin: 0px 0 0 0;
  padding: 2px 0 0 0;
  z-index: 991;
  @extend .easeFast;
  outline: none;
  &:hover {
    background: $wixBlue;
    @extend .easeFast;
    cursor: pointer;
    color: white;
  }
      &:active {
    background: $wixDark;
  }
}
.plan button.active {
  background: $wixBlue;
  color: white;

  &:hover {
    background: $wixSky;
    border: 1px solid $wixSky;
  }
      &:active {
    background: $wixDark;
        border: 1px solid $wixDark;
  }
}

.fixed {
  position: fixed;
  top: 178px;
}

.step1 .stepHeader {
  height: auto;
  margin: 0 0 36px 0;
}

.plan object img {
  position: absolute;
  right: -22px;
  vertical-align: middle;
  display: flex;
  align-self: center;
  width: 43px;
  opacity: 1;
  z-index: 9991;
  @extend .ease;
}

// Step 1 ---------------------

.step1 {
  margin: 0 0 36px 0;

  & .stepDetails {
    overflow: hidden;
    transform-origin: center top;
    will-change: height;
  }
}

/// Step 2 ----------------------

.step2 {
  & .stepDetails {
    overflow: hidden;

    height: 0;
    transform-origin: center top;
    will-change: height;
  }
}

/// Step 3 ----------------------

.step3 {
  & .stepDetails {
    height: 0;
    overflow: hidden;
    transform-origin: center top;
    will-change: opacity;
  }
}

/// PLan Description

.planDesc {
  & h3 {
    font-size: 20px;
    margin: 0 0 6px 0;
    font-weight: 500;
    color: $text;
  }
  & p {
    margin: 0;
    color: $textLight;
    font-size: 14px;
  }
}
.planPrice {
  display: flex;
  flex-direction: row;

  align-items: center;
  & span {
    color: $text;
    font-size: 42px;
    margin: 0 36px 0 0;
    font-weight: 700;
    & sup {
      font-size: 14px;
      top: -18px;
      font-weight: 400;
      margin: 0 3px 0 0;
    }
    & sub {
      font-size: 14px;
      bottom: 0;
      font-weight: 400;
      margin: 0 0px 0 3px;
    }
  }
}

.details {
  position: absolute;
  width: 426px;
  height: auto;
  top: 78px;
  right: 0;
  z-index: 999991;
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  border: 1px solid $border;
  margin: 0 0 0 36px;
  background: #FAFBFC;
}
.detHeader {
  height: 114px;
  width: 100%;
  margin: 0 0 0px 0;
  padding: 0 36px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid $border;

  & a {
    font-size: 14px;
    color: $wixBlue;

    & svg {
      margin: 0 0 0 6px;
      transform-origin: center center;
      backface-visibility: hidden;
    }
    & svg g {
      stroke: currentcolor;
    }
  }
  & div {
    display: flex;
    flex-direction: column;
  }

  & h3 {
    margin: 0 0 6px 0;
    font-size: 24px;
    font-weight: 300;
    width: 100%;
    display: inline-block;
    position: relative;
    & span {
      position: absolute;
      left: 100px;
      top: 6px;
      white-space:nowrap;
      padding: 4px 8px;
      margin: 0 0 0 9px;
      border-radius: 2px;
      letter-spacing: 1px;
      transform: translatey(-4px);
      display: inline-flex;
      background: $wixPremium;
      font-size: 13px;
      font-weight: 500;
      color: white;
    }
  }
  & p {
    margin: 0;
    font-size: 14px;
  }
}
.detDetails {
  margin: 36px 0 0 0;
  padding: 0 36px;
  & .benefits {
    margin: 0 0 30px 0;
    padding: 0;
    list-style: none;
    & p {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.4;
      & img {
        display: inline-block;
        align-self: center;
      }
    }
    & h5 {
    }
    & li {
      font-size: 14px;
      position: relative;
      color: $textLight;
      line-height: 2.25;
      padding: 0 0 0 21px;
        & p {
      margin: 0;
           line-height: 2.25;
    }
      &:after {
        content: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/270939/check.svg);
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }
}

.features {
  margin: 0px 0 0 0;
  padding: 0;
  list-style: none;
  position: relative;
  & h5 {
  }
  & li {
    font-size: 14px;
    position: relative;
    color: $textLight;
    line-height: 2.25;
    padding: 0 0 0 21px;
    & p {
      margin: 0;
    }
    &:after {
      content: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/270939/bullet.svg);
      position: absolute;
      top: -3px;
      left: 4px;
    }
    &:hover {
      cursor: help;
    }
    & span {
      display: none;
      position: absolute;
      z-index: 99999991;
      left: 36px;
      right: 0;
      top: 36px;
      width: 366px;
      line-height: 18px;
      background: #FFFFFF;
      border: 1px solid #E3EBF1;
      box-shadow: 0 4px 18px 0 rgba(22, 45, 61, 0.10);
      border-radius: 2px;
      padding: 18px;
    }
  }
}
.features li:hover .tooltip {
  display: block;
}
.save span {
  padding: 4px 8px;
  margin: 0 36px 0 0px;
  border-radius: 2px;
  display: inline-flex;
  letter-spacing: 1px;
  background: #E4F6DC;
  font-size: 13px;
  font-weight: 500;
  color: #45AB3D;
}

.detPrice {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transform-origin: center top;
  padding: 0 36px;
  margin: 30px 0 0 0;
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  border-top: 1px solid $border;
  & button {
    position: absolute;
    left: 0px;
    right: 0px;
    border: 0 solid transparent;
    background: $wixBlue;
    border-radius: 30em;
    height: 42px;
    width: 352px;
    color: white;
    z-index: 9991;
    opacity: 0;
    margin: auto;
    @extend .easeFast;
    &:hover {
      background: $wixSky;
      @extend .easeFast;
      cursor: pointer;
    }
  }
  & p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    & small {
      font-weight: 400;
      font-size: 14px;
    }
  }
}

.priceSave {
  padding: 4px 8px;
  margin: 0 0px 0 9px;
  border-radius: 2px;
  display: inline-flex;
  letter-spacing: 1px;
  background: #E4F6DC;
  font-size: 13px;
  font-weight: 500;
  color: #45AB3D;
}

.detPurchase {
  margin: 36px 0 0 0;
  padding: 0 36px;
  overflow: hidden;
  transform-origin: top center;
  @extend .ease;
}

.marg {
  margin: 0px 0 0 0;
  @extend .ease;
}

.summary {
  margin: 0px 0 0 0;
  padding: 0;
  list-style: none;
  & h5 {
  }
  & li {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    position: relative;
    color: $textLight;
    line-height: 2.75;
    padding: 0 0 0 0;

    & b {
      font-weight: 300;
      & small {
        font-size: 14px;
        text-decoration: underline;
        font-weight: 400;
      }
    }
    &:last-child {
      margin: 6px 0 0 0;
      padding: 6px 0 0 0;
      border-top: 1px solid $border;
      font-weight: 600;
      & b {
        font-weight: 600;
      }
    }
  }
}


.detSubmit {
  transform-origin: center top;
  padding: 0 36px;
  height: 114px;
  margin: 30px 0 0 0;
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  border-top: 1px solid $border;
  & button {
    left: 0px;
    outline: none;
    right: 0px;
    border: 0 solid transparent;
    background: $wixBlue;
    border-radius: 30em;
    height: 42px;
    width: 352px;
        display: flex;
    justify-content: center;
    padding: 2px 0 0 0;
    color: white;
    z-index: 9991;
    margin: auto;
    @extend .easeFast;
  
    & svg {
      margin: 0 9px 0 0;
      vertical-align:middle;
    }
    &:hover {
      background: $wixSky;
      @extend .easeFast;
      cursor: pointer;
    }
       &:active {
    background: $wixDark;
        border: 1px solid $wixDark;
  }
  }
}

// Summary Panel
.summaryWrapp {
  opacity: 0;
  display: none;
}

.second {
    height: 352px;
  opacity: 1;
  overflow: hidden;
  position: relative;
  will-change: height;
  backface-visibility: hidden;
  border-bottom: 1px solid $border;
   @extend .ease;
  & .features {
    margin: 30px 0 30px 0;
  }
}
.viewed {
opacity: 0;
height: 0;
  @extend .ease;
}
.cards {
  border-radius: 6px;

  width: 586px;
  display: flex;
  background: white;
  flex-direction: column;
}
.card {
  border-bottom: 1px solid $border;
  border-top: 1px solid $border;
  border-left: 1px solid $border;
  border-right: 1px solid $border;
  min-height: 96px;
  max-height: 96px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 36px;
  align-content: center;
  position: relative;
  @extend .ease;
  &:first-child {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }
  &:nth-child(2) {
    border-bottom: 1px solid $border;
    border-top: 0px solid $border;
    border-left: 1px solid $border;
    border-right: 1px solid $border;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
  }

  &:after {
    content: '';
    position: absolute;
    width: 586px;
    height: 97px;
    top: -1px;
    left: -1px;
    border: 1px solid rgba(#B6C1CD, 0);
    @extend .ease;
  }

  &:first-child:after {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    height: 96px;
  }

  &:nth-child(2):after {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
  }
}

.card:hover:after {
  background: transparent;
  border: 1px solid #C1E4FE;
  @extend .ease;
}
.card:hover {
  background-color: rgba(234, 247, 255, 0.5);
  @extend .ease;
  cursor: pointer;
}
.card span {
  margin: 6px 0 0 0;
}
.card:before {
  position: absolute;
  content: '';
}

$color1: #f4f4f4;
$color2: #3197EE;

.radio {
  z-index: 999991;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 100%;
  width: 100%;

  input[type="radio"] {
    position: absolute;
    opacity: 0;
    + .radio-label {
      font-size: 16px;
      display: flex;
      flex-direction: row;
      align-items: center;
       @extend .easeFast;
      height: 96px;
      width: 100%;
      &:hover {
        cursor: pointer;
      }
      & div {
        display: flex;
        flex-direction: column;
      }
      & h3 {
        margin: 0 0 6px 0;
        padding: 0;
        font-size: 16px;
        font-weight: 400;
      }

      & p {
        margin: 0;
        padding: 0;
        font-size: 14px;
        font-weight: 300;
      }

      &:before {
        content: '';
        background: white;
        border-radius: 100%;
        border: 1px solid $wixBlue;
        display: inline-flex;
        width: 16px;
        height: 16px;
        position: relative;
        margin-right: 18px;
        vertical-align: top;
        cursor: pointer;
        text-align: center;
        transition: all 250ms ease;
      }
    }
  
    &:focus {
      + .radio-label {
        &:before {
          outline: none;
          border-color: $color2;
        }
      }
    }
    
     
    
     &:hover {
      + .radio-label {
        &:before {
          background-color: #DAEFFE;
          box-shadow: inset 0 0 0 0px white;
        }
      }
    }
     &:active {
      + .radio-label {
        &:before {
          background-color: lighten($wixBlue,20%);
          box-shadow: inset 0 0 0 2px white;
        }
      }
    }
      &:checked {
      + .radio-label {
        &:before {
          background-color: $wixBlue;
          box-shadow: inset 0 0 0 2px white;
          @extend .easeFast;
        }
      }
    }
    &:disabled {
      + .radio-label {
        &:before {
          box-shadow: inset 0 0 0 4px $color1;
          border-color: darken($color1, 25%);
          background: darken($color1, 25%);
        }
      }
    }
    + .radio-label {
      &:empty {
        &:before {
          margin-right: 0;
        }
      }
    }
  }
}

.disclaimer {
  margin: 42px 0 0 0;
  padding: 24px 0 0 0;
  display: flex;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 300;
  border-top: 1px solid $border;
}
              
            
!

JS

              
                var cta1 = $(".step1CTA");
var cta2 = $(".step2CTA");
var step1 = $(".step1 .stepDetails");
var step2 = $(".step2 .stepDetails");
var step3 = $(".step3 .stepDetails");

// First Cta click ----------------

cta1.click(function() {
  
  

  
  
  // Details Scroll

  var step2DetPrice = anime({
    targets: ".details",
    translateY: "112px",
    easing: "easeOutExpo",
    duration: "680",
    delay: "380"
  });

  // Details Plan Price Show

  var step2Details = anime({
    targets: ".detPrice",
    height: "114px",
    opacity: "1",
    easing: "easeOutExpo",
    duration: "680",
    delay: "480"
  });

  // Step 2 Container Animation

  var step2Show = anime({
    targets: ".step2 .stepDetails",
    opacity: 1,
    height: "458px",
    easing: "easeOutExpo",
    duration: "680",
    delay: "480"
  });

  $(".step2 .stepCount").addClass("active");

  // Step 1 Container Animation

  var step1Hide = anime({
    targets: ".step1 .stepDetails",
    height: "0",
    easing: "easeOutExpo",
    duration: "680"
  });

  $(".step1 .stepCount").removeClass("active");
  $(".step1 .stepCount").addClass("done");

  // Header Work

  var step1Hide = anime({
    targets: ".stepHeader1 h3 p",
    opacity: 0,
    translateY: ["0", "-20px"],
    easing: "easeOutExpo",
    duration: "320",
    delay: "0"
  });

  var step1Hide = anime({
    targets: ".step1 .stepHeader h3 span",
    opacity: 1,
    translateY: ["20px", "0"],
    easing: "easeOutExpo",
    duration: "320",
    delay: "0"
  });

  var step1HeaderShow = anime({
    targets: ".step2 .stepDetails",
    opacity: 1,
    easing: "easeOutExpo",
    duration: "1200",
    delay: "880"
  });

  // Scrolling

  $("html").scrollTo({ top: "166px", left: "0" }, 680);
});

// Change click -----------------------

$(".step1Change").click(function() {
  // Switch Panels

  var hr = anime({
    targets: ".stuff",
    opacity: 1,
    easing: "easeOutExpo",
    duration: "340",
    delay: 480
  });

  var hr = anime({
    targets: ".summaryWrapp",
    opacity: 0,
    easing: "easeOutExpo",
    duration: "340",
    delay: 480
  });

  $(".stuff").delay(0).queue(function(next) {
    $(".stuff").css("display", "flex");
    next();
  });

  $(".summaryWrapp").delay(680).queue(function(next) {
    $(".summaryWrapp").css("display", "none");
    next();
  });

  var step2DetPrice = anime({
    targets: ".detPrice",
    height: "0",
    opacity: "0",
    easing: "easeOutExpo",
    duration: "680",
    delay: "380"
  });

  var hr = anime({
    targets: ".line",
    height: ["90%", "90%"],
    easing: "easeOutExpo",
    duration: "680",
    delay: 330
  });

  // Details Scroll

  var step2Details = anime({
    targets: ".details",
    translateY: "0px",
    easing: "easeOutExpo",
    duration: "680",
    delay: "480"
  });

  // Step 3 Container Animation

  var step2Hide = anime({
    targets: ".step3 .stepDetails",
    height: "0",
    easing: "easeOutExpo",
    duration: "680"
  });

  // Step 2 Animation

  var step2Hide = anime({
    targets: ".step2 .stepDetails",
    height: "0",
    easing: "easeOutExpo",
    duration: "680"
  });

  $(".step2 .stepCount").removeClass("active");
  $(".step3 .stepCount").removeClass("active");
  $(".step1 .stepCount").removeClass("done");
  $(".step2 .stepCount").removeClass("done");

  // Step 1 Animation

  var step1Hide = anime({
    targets: ".step1 .stepDetails",
    opacity: 1,
    height: "572px",
    easing: "easeOutExpo",
    duration: "680",
    delay: "480"
  });

  // Header Work

  var step1Show = anime({
    targets: ".stepHeader1 h3 p",
    opacity: 1,
    translateY: ["-20px", "0"],
    easing: "easeOutExpo",
    duration: "320",
    delay: "0"
  });

  var step1Hide = anime({
    targets: ".step1 .stepHeader h3 span",
    opacity: 0,
    translateY: ["0", "20px"],
    easing: "easeOutExpo",
    duration: "320",
    delay: "0"
  });

  /// Step 2 - Header Work

  // Header Work

  var step1Show = anime({
    targets: ".stepHeader2 h3 p",
    opacity: 1,
    translateY: ["-20px", "0"],
    easing: "easeOutExpo",
    duration: "320",
    delay: "0"
  });

  var step1Hide = anime({
    targets: ".step2 .stepHeader h3 span",
    opacity: 0,
    translateY: ["0", "20px"],
    easing: "easeOutExpo",
    duration: "320",
    delay: "0"
  });

  $(".step1 .stepCount").addClass("active");

  // Scrolling

  $("html").scrollTo({ top: "166px", left: "0" }, 680);
});

// --------------------------------

// Step #2 Cta click

cta2.click(function() {
  // Switch Panels

  var hr = anime({
    targets: ".stuff",
    opacity: 0,
    easing: "easeOutExpo",
    duration: "340",
    delay: 480
  });

  var hr = anime({
    targets: ".summaryWrapp",
    opacity: 1,
    easing: "easeOutExpo",
    duration: "340",
    delay: 480
  });

  $(".stuff").delay(680).queue(function(next) {
    $(".stuff").css("display", "none");
    next();
  });

  $(".summaryWrapp").delay(0).queue(function(next) {
    $(".summaryWrapp").css("display", "flex");
    next();
  });

  // Line Animation

  var hr = anime({
    targets: ".line",
    height: ["90%", "32%"],
    easing: "easeOutExpo",
    duration: "680",
    delay: 270
  });

  // Details Scroll

  var step2Details = anime({
    targets: ".details",
    translateY: "230px",
    easing: "easeOutExpo",
    duration: "680",
    delay: "480"
  });

  // Step 3 Animation

  var step2Show = anime({
    targets: ".step3 .stepDetails",
    opacity: 1,
    height: ["0", "386px"],
    easing: "easeOutExpo",
    duration: "680",
    delay: "480"
  });

  $(".step3 .stepCount").addClass("active");
  $(".step2 .stepCount").addClass("done");

  // Step 2 Animation

  var step1Hide = anime({
    targets: ".step2 .stepDetails",
    height: "0",
    easing: "easeOutExpo",
    duration: "680"
  });

  // Header Work

  var step1Hide = anime({
    targets: ".stepHeader2 h3 p",
    opacity: 0,
    translateY: ["0", "-20px"],
    easing: "easeOutExpo",
    duration: "320",
    delay: "0"
  });

  var step1Hide = anime({
    targets: ".step2 .stepHeader h3 span",
    opacity: 1,
    translateY: ["20px", "0"],
    easing: "easeOutExpo",
    duration: "320",
    delay: "0"
  });

  var step1HeaderShow = anime({
    targets: ".step3 .stepDetails",
    opacity: 1,
    easing: "easeOutExpo",
    duration: "1200",
    delay: "880"
  });

  $(".step2 .stepCount").removeClass("active");

  // Scrolling

  $("html").scrollTo({ top: "280px", left: "0" }, 680);
});

// ---------------------

// Step #2 Change click

$(".step2Change").click(function() {
  // Switch Panels

  var hr = anime({
    targets: ".stuff",
    opacity: 1,
    easing: "easeOutExpo",
    duration: "680",
    delay: 480
  });

  var hr = anime({
    targets: ".summaryWrapp",
    opacity: 0,
    easing: "easeOutExpo",
    duration: "680",
    delay: 480
  });

  $(".stuff").delay(0).queue(function(next) {
    $(".stuff").css("display", "flex");
    next();
  });

  $(".summaryWrapp").delay(680).queue(function(next) {
    $(".summaryWrapp").css("display", "none");
    next();
  });

  //-------------------------

  var hr = anime({
    targets: ".line",
    height: ["85%", "85%"],
    easing: "easeOutExpo",
    duration: "680",
    delay: 330
  });

  // Details Scroll

  var step2Details = anime({
    targets: ".details",
    translateY: "112px",
    easing: "easeOutExpo",
    duration: "680",
    delay: "480"
  });

  // Step 2 Animation

  var step2Hide = anime({
    targets: ".step3 .stepDetails",
    height: ["230px", "0"],
    easing: "easeOutExpo",
    duration: "680"
  });

  $(".step3 .stepCount").removeClass("active");
  $(".step2 .stepCount").removeClass("done");

  // Step 1 Animation

  var step1Hide = anime({
    targets: ".step2 .stepDetails",
    opacity: 1,
    height: ["0", "458px"],
    easing: "easeOutExpo",
    duration: "680",
    delay: "480"
  });

  // Header Work

  var step1Show = anime({
    targets: ".stepHeader2 h3 p",
    opacity: 1,
    translateY: ["-20px", "0"],
    easing: "easeOutExpo",
    duration: "320",
    delay: "0"
  });

  var step1Hide = anime({
    targets: ".step2 .stepHeader h3 span",
    opacity: 0,
    translateY: ["0", "20px"],
    easing: "easeOutExpo",
    duration: "320",
    delay: "0"
  });

  $(".step2 .stepCount").addClass("active");

  // Scrolling

  $("html").scrollTo({ top: "166px", left: "0" }, 680);
});

/*
$(window).scroll(function(){
    if ($(window).scrollTop() >= $('.header').height()) {
         $(".details").addClass('fixed');

    }

  else {
     $(".details").removeClass('fixed');
  }
});

*/

// Step #2 Change click

$(".detHeader a").click(function() {
  $(".detPurchase").toggleClass("marg");
   $(".second").toggleClass("viewed");



  var detListHide = anime({
    targets: ".detHeader a svg",
    rotate: "+=180deg",
    opacity: 1,
    easing: "easeOutExpo",
    duration: "230"
  });
});



// Product Mapping




// Features Arrays -------------------

var f_Unlimited = ['UNLIMITED Bandwidth', '10GB Storage', 'Connect Your Domain', 'Remove Wix Ads' ];


var f_eCom = ['UNLIMITED Bandwidth', '10GB Storage', 'Connect Your Domain', 'Remove Wix Ads' , 'Online Store' ];

var f_VIP = ['UNLIMITED Bandwidth', '10GB Storage', 'Connect Your Domain', 'Remove Wix Ads' , 'Online Store' , 'VIP Support', 'Priority Response' , 'Professional Site Review'];

var f_Connect = ['UNLIMITED Bandwidth', '10GB Storage', 'Connect Your Domain'];

// Benefits Arrays -------------------

var b_Unlimited = ['Free Domain for 1 Year', '$300 Ad Voucher', 'Form Builder App - $48 Value', 'Site Booster App - $60 Value' ];

var b_Combo = ['Free Domain for 1 Year' ];

var b_Connect = [];


/// Initial Unlimited Load -----

var featureList = $('.features')

$.each(f_Unlimited, function(i) {
    var li = $('<li/>').appendTo(featureList);  
    var p = $('<p>').text(f_Unlimited[i]).appendTo(li);

});


var benefitsList = $('.benefits')

$.each(b_Unlimited, function(i) {
    var li = $('<li/>').appendTo(benefitsList);  
    var p = $('<p>').text(b_Unlimited[i]).appendTo(li);

});

/// -----------


/// eCom Hover -----

$("#eCom").hover(function() {
  
   $(".detTitle").html('eCommerce');
  
    $(".features li").empty();
  
   $(".benefits").show('Fast');
$.each(f_eCom, function(i) {
    var li = $('<li/>').appendTo(featureList);  
    var p = $('<p>').text(f_eCom[i]).appendTo(li);

  
});
  
}); 

/// -----------


/// VIP Hover -----

$("#VIP").hover(function() {
  
   $(".detTitle").html('VIP');
   $(".benefits").show();
    $(".features li").empty();
  
$.each(f_VIP, function(i) {
    var li = $('<li/>').appendTo(featureList);  
    var p = $('<p>').text(f_VIP[i]).appendTo(li);

});
  
}); 

/// -----------

/// Unlimited Hover -----

$("#Unlimited").hover(function() {
  
   $(".detTitle").html("Unlimited" + "<span>Most Popular</span>");
  
  $(".features li").empty();
   $(".benefits li").empty();
   $(".benefits").show();
$.each(f_Unlimited, function(i) {
  
    var li = $('<li/>').appendTo(featureList);  
    var p = $('<p>').text(f_Unlimited[i]).appendTo(li);

});
  
  $.each(b_Unlimited, function(i) {
  
    var li = $('<li/>').appendTo(benefitsList);  
    var p = $('<p>').text(b_Unlimited[i]).appendTo(li);

});
  
}); 

/// -----------

/// Combo Hover -----

$("#Combo").hover(function() {
  
   $(".detTitle").html("Combo");
  $(".features li").empty();
  $(".benefits li").empty();
   $(".benefits").show();
$.each(f_Unlimited, function(i) {
  
    var li = $('<li/>').appendTo(featureList);  
    var p = $('<p>').text(f_Unlimited[i]).appendTo(li);

});
  
  
$.each(b_Combo, function(i) {
  
    var li = $('<li/>').appendTo(benefitsList);  
    var p = $('<p>').text(b_Combo[i]).appendTo(li);

});
  
}); 

/// -----------

/// Connect Hover -----

$("#Connect").hover(function() {
  
   $(".detTitle").html("Connect Domain");
  
  $(".features li").empty();
  $(".benefits").hide();
  
$.each(f_Connect, function(i) {
  
    var li = $('<li/>').appendTo(featureList);  
    var p = $('<p>').text(f_Connect[i]).appendTo(li);

});
  
  
$.each(b_Connect, function(i) {
  
    var li = $('<li/>').appendTo(benefitsList);  
    var p = $('<p>').text(b_Connect[i]).appendTo(li);

});
  
}); 

/// -----------


// Cycle Switcher -------------------------------



$("#3Years").hover(function() {
     $(".detHeader div p ").html("3 Years Subscription");
  $(".detPrice div p ").html("$360.00 <small>($10.00 Γ— 36 months)</small><span class='priceSave'>Save 55%</span>");
  
   $(".benefits p").empty();
  
  $.each(b_Unlimited, function(i) {
  
    var li = $('<li/>').appendTo(benefitsList);  
    var p = $('<p>').text(b_Unlimited[i]).appendTo(li);

});
  
  
});

$("#2Years").hover(function() {
     $(".detHeader div p ").html("2 Years Subscription");
  $(".detPrice div p ").html("$264.00 <small>($11.00 Γ— 24 months)</small><span class='priceSave'>Save 50%</span>");
  
   $(".benefits p").empty();
  
  $.each(b_Unlimited, function(i) {
  
    var li = $('<li/>').appendTo(benefitsList);  
    var p = $('<p>').text(b_Unlimited[i]).appendTo(li);

});
  
  
});

$("#1Year").hover(function() {
     $(".detHeader div p ").html("Yearly Subscription");
  $(".detPrice div p ").html("$168.00 <small>($14.00 Γ— 12 months)</small><span class='priceSave'>Save 45%</span>");
  
  $(".benefits p").empty();
  
  $.each(b_Unlimited, function(i) {
  
    var li = $('<li/>').appendTo(benefitsList);  
    var p = $('<p>').text(b_Unlimited[i]).appendTo(li);

});
  
  
});

$("#Month").mouseenter(function() {
  

    
     $(".detHeader div p ").html("Monthly Subscription");
  $(".detPrice div p ").html("$16.00 <small>/month to month</small><span style='opacity:0;' class='priceSave'>Save 45%</span>");
  
  $(".benefits li").remove();
  
  
    var p = $('</p>').text(" Monthly subscriptions do not include a free domain, premium apps and ad vouchers.").appendTo(".benefits");


  


  
});


/// Plans & Cycles Hover Logic -----
   
  $('#1year.planPrice button').addClass('active');

 var PlanBd = anime({ 
    targets: ['#Unlimited object' , '#1Year object'],  
    opacity: 1,
    easing: "easeOutExpo",
    duration: "230"
  });
 

$(".product").mouseenter(function() { 
   

  $('.product .planPrice button').removeClass('active');
  $(this).find('.planPrice button').addClass('active');
  
  var PlanBd = anime({
    targets: '.product object',
    opacity: 0, 
   
    easing: "easeOutExpo",
    duration: "230",
    
  });
  
  var PlanBd = anime({
    targets: this.querySelectorAll('object'),
    opacity: 1,
    easing: "easeOutExpo",
    duration: "230",

  });
  
});
 

$(".cycle").mouseenter(function() { 
   

  $('.cycle .planPrice button').removeClass('active');
  $(this).find('.planPrice button').addClass('active');
  
  var PlanBd = anime({
    targets: '.cycle object',
    opacity: 0, 
   
    
  });
  
  var PlanBd = anime({
    targets: this.querySelectorAll('object'),
    opacity: 1,

  });
  
});



              
            
!
999px

Console