css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <body>
<div id="container">
  <div id="new">
    <h2> Fresh Install</h2>
    
      <div class="graphic">
  <svg width="100%" height="100%" viewBox="0 0 221 227" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
              <linearGradient x1="80.6376537%" y1="74.1215657%" x2="41.2782257%" y2="15.457556%" id="active-gradient">
            <stop stop-color="#EAF4FB" offset="0%"></stop>
            <stop stop-color="#8FC9ED" offset="100%"></stop>
        </linearGradient>
        <linearGradient id="inactive" x1="80.6376537%" y1="74.1215657%" x2="41.2782257%" y2="15.457556%" id="linearGradient-1">
            <stop stop-color="#2C95DD" offset="0%"></stop>
            <stop stop-color="#1F83D5" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g id="help-text" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="--">
          <g id="Line-group">
            <path d="M109.5,110.5 L19.4944446,200.505554" class="Line" stroke="#2C95DD" stroke-wclassth="5.75999989" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="15.27999973297119,20,2" fill="none"></path>

            <path d="M112.5,111.5 L112.5,2.33498728" class="Line" stroke="#2C95DD" stroke-wclassth="5.75999989" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="13.27999973297119,2,2" fill="none"></path>
            <path d="M114.27832,111.654297 L66,14" class="Line" stroke="#2C95DD" stroke-wclassth="5.75999989" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="15.27999973297119,20,2" fill="none"></path>
            <path d="M111.5,112.5 L158.5,14.5" class="Line" stroke="#2C95DD" stroke-wclassth="5.75999989" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="17.28000022888182" fill="none"></path>
            <path d="M113.5,111.5 L4.5,111.5" class="Line" stroke="#2C95DD" stroke-wclassth="5.75999989" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="17.28000022888182" fill="none"></path>
            <path d="M111.5,110.5 L218.5,112.5" class="Line" stroke="#2C95DD" stroke-wclassth="5.75999989" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="17.28000022888182" fill="none"></path>
            <path d="M111.5,112.5 L195.5,31.5" class="Line" stroke="#2C95DD" stroke-wclassth="5.75999989" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="15.27999973297119,1,2" fill="none"></path>
            <path d="M111.5,111.5 L213.5,71.5" class="Line" stroke="#2C95DD" stroke-wclassth="5.75999989" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="17.28000022888182" fill="none"></path>
            <path d="M111.5,110.5 L212.5,154.5" class="Line" stroke="#2C95DD" stroke-wclassth="5.75999989" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="15.27999973297119,20,2" fill="none"></path>
            <path d="M111.5,111.5 L195.5,196.5" class="Line" stroke="#2C95DD" stroke-wclassth="5.75999989" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="13.27999973297119,2,2" fill="none"></path>
            <path d="M111.5,111.5 L159.5,212.5" class="Line" stroke="#2C95DD" stroke-wclassth="5.75999989" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="17.28000022888182" fill="none"></path>
            <path d="M113.5,111.5 L9.5,70.5" class="Line" stroke="#2C95DD" stroke-wclassth="5.75999989" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="15.27999973297119,20,2" fill="none"></path>
            <path d="M113.5,112.5 L21.5,30.5" class="Line" stroke="#2C95DD" stroke-width="5.75999989" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="13.27999973297119,2,2" fill="none"></path>

            <path d="M112.5,109.5 L112.5,223.5" class="Line" stroke="#2C95DD" stroke-wclassth="5.75999989" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="13.27999973297119,2,2" fill="none"></path>
            <path d="M113.5,111.5 L65.5,210.5" class="Line" stroke="#2C95DD" stroke-wclassth="5.75999989" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="17.28000022888182" fill="none"></path>
            <path d="M113.5,111.5 L8.5,154.5" class="Line" stroke="#2C95DD" stroke-wclassth="5.75999989" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="17.28000022888182" fill="none"></path>
          </g>
            <rect id="mask" fill="#F5F5F5" x="29" y="32" width="163" height="163" rx="14.3999997"></rect>
            <rect id="tile" fill="#2C95DD" x="37" y="39" width="149" height="149" rx="14.3999997"></rect>
            <path d="M143.736662,91 L141.54847,92.3377836 L104.192247,118.038728 L76,110.369355 C76,110.369355 77.3625519,115.983425 79.0000618,118.401862 C80.6375717,120.820299 84.0178212,123.680379 84.0178212,123.680379 L121.913998,162.904844 C144.794784,157.747607 161.93351,137.295252 162.174639,112.773025 L143.736662,91 Z" id="shadow" fill="url(#linearGradient-1)"></path>
            <path d="M142.266963,97.2589283 L110.268749,129.257142 L104.258035,135.267856 C103.433031,136.09286 102.431255,136.505356 101.252678,136.505356 C100.074101,136.505356 99.0723251,136.09286 98.247321,135.267856 L92.2366068,129.257142 L76.2375,113.258035 C75.4124959,112.433031 75,111.431255 75,110.252678 C75,109.074101 75.4124959,108.072325 76.2375,107.247321 L82.2482141,101.236607 C83.0732183,100.411603 84.0749939,99.9991068 85.2535712,99.9991068 C86.4321485,99.9991068 87.4339242,100.411603 88.2589283,101.236607 L101.252678,114.274553 L130.245535,85.2375 C131.070539,84.4124959 132.072314,84 133.250892,84 C134.429469,84 135.431245,84.4124959 136.256249,85.2375 L142.266963,91.2482141 C143.091967,92.0732183 143.504463,93.0749939 143.504463,94.2535712 C143.504463,95.4321485 143.091967,96.4339242 142.266963,97.2589283 Z" id="check" fill="#DFF3FF"></path>
            <path d="M110.588608,164.821918 C139.080209,164.821918 162.177215,141.58059 162.177215,112.910959 C162.177215,84.241328 139.080209,61 110.588608,61 C82.0970064,61 59,84.241328 59,112.910959 C59,141.58059 82.0970064,164.821918 110.588608,164.821918 Z" class="oval" stroke="#65B2E6" stroke-width="1.43999997"></path>
          
          <path d="M108,2.87999994 L108,20.1600006 C108,21.7505807 109.28942,23.0400006 110.88,23.0400006 C112.47058,23.0400006 113.76,21.7505807 113.76,20.1600006 L113.76,2.87999994 C113.76,1.28941989 112.47058,0 110.88,0 C109.28942,0 108,1.28941989 108,2.87999994 L108,2.87999994 Z M108,37.4400013 L108,54.720002 C108,56.3105821 109.28942,57.6000019 110.88,57.6000019 C112.47058,57.6000019 113.76,56.3105821 113.76,54.720002 L113.76,37.4400013 C113.76,35.8494213 112.47058,34.5600014 110.88,34.5600014 C109.28942,34.5600014 108,35.8494213 108,37.4400013 L108,37.4400013 Z M108,179.680007 L108,196.960007 C108,198.550588 109.28942,199.840007 110.88,199.840007 C112.47058,199.840007 113.76,198.550588 113.76,196.960007 L113.76,179.680007 C113.76,178.089427 112.47058,176.800007 110.88,176.800007 C109.28942,176.800007 108,178.089427 108,179.680007 L108,179.680007 Z M108,210.240008 L108,223.841152 C108,225.431732 109.28942,226.721152 110.88,226.721152 C112.47058,226.721152 113.76,225.431732 113.76,223.841152 L113.76,210.240008 C113.76,208.649428 112.47058,207.360008 110.88,207.360008 C109.28942,207.360008 108,208.649428 108,210.240008 Z M3.87999994,114.260772 L21.1600006,114.260772 C22.7505807,114.260772 24.0400006,112.971352 24.0400006,111.380772 C24.0400006,109.790192 22.7505807,108.500772 21.1600006,108.500772 L3.87999994,108.500772 C2.28941989,108.500772 1,109.790192 1,111.380772 C1,112.971352 2.28941989,114.260772 3.87999994,114.260772 Z M38.4400013,114.260772 L55.720002,114.260772 C57.3105821,114.260772 58.6000019,112.971352 58.6000019,111.380772 C58.6000019,109.790192 57.3105821,108.500772 55.720002,108.500772 L38.4400013,108.500772 C36.8494213,108.500772 35.5600014,109.790192 35.5600014,111.380772 C35.5600014,112.971352 36.8494213,114.260772 38.4400013,114.260772 Z M176.680007,114.260772 L193.960007,114.260772 C195.550588,114.260772 196.840007,112.971352 196.840007,111.380772 C196.840007,109.790192 195.550588,108.500772 193.960007,108.500772 L176.680007,108.500772 C175.089427,108.500772 173.800007,109.790192 173.800007,111.380772 C173.800007,112.971352 175.089427,114.260772 176.680007,114.260772 Z M211.240008,114.260772 L218.222871,114.260772 C219.813451,114.260772 221.102871,112.971352 221.102871,111.380772 C221.102871,109.790192 219.813451,108.500772 218.222871,108.500772 L211.240008,108.500772 C209.649428,108.500772 208.360008,109.790192 208.360008,111.380772 C208.360008,112.971352 209.649428,114.260772 211.240008,114.260772 Z M9.931452,155.561974 L26.0186695,149.253262 C27.4994569,148.672561 28.2291211,147.001394 27.6484202,145.520607 C27.0677193,144.039819 25.3965528,143.310155 23.9157654,143.890856 L7.82854788,150.199569 C6.34776049,150.78027 5.61809625,152.451436 6.19879718,153.932224 C6.77949812,155.413011 8.45066461,156.142675 9.931452,155.561974 Z M42.105887,142.944549 L58.1931045,136.635836 C59.6738919,136.055135 60.4035562,134.383969 59.8228552,132.903181 C59.2421543,131.422394 57.5709878,130.69273 56.0902004,131.273431 L40.0029829,137.582143 C38.5221955,138.162844 37.7925313,139.834011 38.3732322,141.314798 C38.9539331,142.795586 40.6250996,143.52525 42.105887,142.944549 Z M170.803627,92.4748469 L186.890845,86.1661342 C188.371632,85.5854332 189.101296,83.9142667 188.520595,82.4334793 C187.939894,80.9526919 186.268728,80.2230277 184.78794,80.8037286 L168.700723,87.1124414 C167.219936,87.6931423 166.490271,89.3643088 167.070972,90.8450962 C167.651673,92.3258836 169.32284,93.0555478 170.803627,92.4748469 Z M202.978062,79.8574214 L213.931452,75.5619744 C215.412239,74.9812734 216.141904,73.310107 215.561203,71.8293196 C214.980502,70.3485322 213.309335,69.6188679 211.828548,70.1995689 L200.875158,74.4950159 C199.394371,75.0757168 198.664706,76.7468833 199.245407,78.2276707 C199.826108,79.7084581 201.497275,80.4381223 202.978062,79.8574214 Z M28.8916365,197.848562 L41.2576405,185.778749 C42.3958997,184.667754 42.4180013,182.844373 41.3070058,181.706113 C40.1960103,180.567854 38.3726292,180.545753 37.23437,181.656748 L24.868366,193.726561 C23.7301068,194.837556 23.7080052,196.660937 24.8190007,197.799196 C25.9299962,198.937455 27.7533774,198.959557 28.8916365,197.848562 Z M53.6236445,173.708937 L65.9896485,161.639125 C67.1279077,160.528129 67.1500093,158.704748 66.0390138,157.566489 C64.9280183,156.42823 63.1046372,156.406128 61.966378,157.517124 L49.600374,169.586936 C48.4621148,170.697931 48.4400133,172.521313 49.5510087,173.659572 C50.6620042,174.797831 52.4853854,174.819932 53.6236445,173.708937 Z M152.551677,77.1504387 L164.917681,65.0806264 C166.05594,63.9696309 166.078041,62.1462498 164.967046,61.0079906 C163.85605,59.8697314 162.032669,59.8476298 160.89441,60.9586253 L148.528406,73.0284376 C147.390147,74.1394331 147.368045,75.9628142 148.479041,77.1010734 C149.590036,78.2393326 151.413417,78.2614342 152.551677,77.1504387 Z M185.283685,46.0108141 L197.649689,33.9410018 C198.787948,32.8300063 198.810049,31.0066252 197.699054,29.868366 C196.588058,28.7301068 194.764677,28.7080052 193.626418,29.8190007 L181.260414,41.888813 C180.122155,42.9998085 180.100053,44.8231897 181.211049,45.9614488 C182.322044,47.099708 184.145425,47.1218096 185.283685,46.0108141 Z M23.868366,32.9410018 L36.23437,45.0108141 C37.3726292,46.1218096 39.1960103,46.099708 40.3070058,44.9614488 C41.4180013,43.8231897 41.3958997,41.9998085 40.2576405,40.888813 L27.8916365,28.8190007 C26.7533774,27.7080052 24.9299962,27.7301068 23.8190007,28.868366 C22.7080052,30.0066252 22.7301068,31.8300063 23.868366,32.9410018 Z M47.600374,56.0806264 L59.966378,68.1504387 C61.1046372,69.2614342 62.9280183,69.2393326 64.0390138,68.1010734 C65.1500093,66.9628142 65.1279077,65.1394331 63.9896485,64.0284376 L51.6236445,51.9586253 C50.4853854,50.8476298 48.6620042,50.8697314 47.5510087,52.0079906 C46.4400133,53.1462498 46.4621148,54.9696309 47.600374,56.0806264 Z M146.528406,152.639125 L158.89441,164.708937 C160.032669,165.819932 161.85605,165.797831 162.967046,164.659572 C164.078041,163.521313 164.05594,161.697931 162.917681,160.586936 L150.551677,148.517124 C149.413417,147.406128 147.590036,147.42823 146.479041,148.566489 C145.368045,149.704748 145.390147,151.528129 146.528406,152.639125 Z M181.260414,185.778749 L193.626418,197.848562 C194.764677,198.959557 196.588058,198.937455 197.699054,197.799196 C198.810049,196.660937 198.787948,194.837556 197.649689,193.726561 L185.283685,181.656748 C184.145425,180.545753 182.322044,180.567854 181.211049,181.706113 C180.100053,182.844373 180.122155,184.667754 181.260414,185.778749 Z M160.47244,208.624846 L152.937567,193.074151 C152.244001,191.642749 150.521375,191.044615 149.089973,191.73818 C147.658571,192.431746 147.060437,194.154373 147.754003,195.585775 L155.288875,211.13647 C155.982441,212.567872 157.705068,213.166006 159.13647,212.47244 C160.567872,211.778874 161.166006,210.056248 160.47244,208.624846 Z M145.402694,177.523456 L137.867822,161.972761 C137.174256,160.541359 135.451629,159.943225 134.020227,160.63679 C132.588825,161.330356 131.990691,163.052983 132.684257,164.484385 L140.21913,180.03508 C140.912696,181.466482 142.635322,182.064616 144.066724,181.37105 C145.498126,180.677484 146.09626,178.954858 145.402694,177.523456 Z M85.1237117,53.1178956 L77.5888389,37.5672006 C76.895273,36.1357988 75.1726463,35.5376645 73.7412445,36.2312304 C72.3098426,36.9247962 71.7117083,38.6474229 72.4052742,40.0788248 L79.940147,55.6295198 C80.6337129,57.0609216 82.3563396,57.6590559 83.7877414,56.9654901 C85.2191433,56.2719242 85.8172776,54.5492975 85.1237117,53.1178956 Z M70.053966,22.0165056 L66.4724401,14.6248457 C65.7788742,13.1934438 64.0562475,12.5953095 62.6248457,13.2888754 C61.1934438,13.9824412 60.5953095,15.7050679 61.2888754,17.1364698 L64.8704014,24.5281298 C65.5639672,25.9595316 67.2865939,26.5576659 68.7179958,25.8641 C70.1493976,25.1705342 70.7475319,23.4479075 70.053966,22.0165056 Z M66.4724401,211.13647 L74.0073129,195.585775 C74.7008788,194.154373 74.1027445,192.431746 72.6713426,191.73818 C71.2399408,191.044615 69.5173141,191.642749 68.8237482,193.074151 L61.2888754,208.624846 C60.5953095,210.056248 61.1934438,211.778874 62.6248457,212.47244 C64.0562475,213.166006 65.7788742,212.567872 66.4724401,211.13647 Z M81.5421858,180.03508 L89.0770586,164.484385 C89.7706244,163.052983 89.1724902,161.330356 87.7410883,160.63679 C86.3096864,159.943225 84.5870598,160.541359 83.8934939,161.972761 L76.3586211,177.523456 C75.6650552,178.954858 76.2631895,180.677484 77.6945913,181.37105 C79.1259932,182.064616 80.8486199,181.466482 81.5421858,180.03508 Z M141.821168,55.6295198 L149.356041,40.0788248 C150.049607,38.6474229 149.451473,36.9247962 148.020071,36.2312304 C146.588669,35.5376645 144.866042,36.1357988 144.172477,37.5672006 L136.637604,53.1178956 C135.944038,54.5492975 136.542172,56.2719242 137.973574,56.9654901 C139.404976,57.6590559 141.127603,57.0609216 141.821168,55.6295198 Z M156.890914,24.5281298 L160.47244,17.1364698 C161.166006,15.7050679 160.567872,13.9824412 159.13647,13.2888754 C157.705068,12.5953095 155.982441,13.1934438 155.288875,14.6248457 L151.707349,22.0165056 C151.013784,23.4479075 151.611918,25.1705342 153.04332,25.8641 C154.474722,26.5576659 156.197348,25.9595316 156.890914,24.5281298 Z M213.932224,150.199569 L197.845006,143.890856 C196.364219,143.310155 194.693052,144.039819 194.112351,145.520607 C193.53165,147.001394 194.261315,148.672561 195.742102,149.253262 L211.82932,155.561974 C213.310107,156.142675 214.981273,155.413011 215.561974,153.932224 C216.142675,152.451436 215.413011,150.78027 213.932224,150.199569 Z M181.757789,137.582143 L165.670571,131.273431 C164.189784,130.69273 162.518617,131.422394 161.937916,132.903181 C161.357215,134.383969 162.08688,136.055135 163.567667,136.635836 L179.654885,142.944549 C181.135672,143.52525 182.806838,142.795586 183.387539,141.314798 C183.96824,139.834011 183.238576,138.162844 181.757789,137.582143 Z M53.0600486,87.1124414 L36.9728311,80.8037286 C35.4920437,80.2230277 33.8208772,80.9526919 33.2401763,82.4334793 C32.6594753,83.9142667 33.3891396,85.5854332 34.869927,86.1661342 L50.9571445,92.4748469 C52.4379319,93.0555478 54.1090984,92.3258836 54.6897993,90.8450962 C55.2705002,89.3643088 54.540836,87.6931423 53.0600486,87.1124414 Z M20.8856136,74.4950159 L9.93222369,70.1995689 C8.4514363,69.6188679 6.78026981,70.3485322 6.19956887,71.8293196 C5.61886793,73.310107 6.34853217,74.9812734 7.82931957,75.5619744 L18.7827095,79.8574214 C20.2634969,80.4381223 21.9346633,79.7084581 22.5153643,78.2276707 C23.0960652,76.7468833 22.366401,75.0757168 20.8856136,74.4950159 Z" id="splash" fill="#2C95DD"></path>
        </g>
    </g>
</svg>

      

      <g id="help-text" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="--" fill="#2C95DD">
            <path d="M108,2.87999994 L108,20.1600006 C108,21.7505807 109.28942,23.0400006 110.88,23.0400006 C112.47058,23.0400006 113.76,21.7505807 113.76,20.1600006 L113.76,2.87999994 C113.76,1.28941989 112.47058,0 110.88,0 C109.28942,0 108,1.28941989 108,2.87999994 L108,2.87999994 Z M108,37.4400013 L108,54.720002 C108,56.3105821 109.28942,57.6000019 110.88,57.6000019 C112.47058,57.6000019 113.76,56.3105821 113.76,54.720002 L113.76,37.4400013 C113.76,35.8494213 112.47058,34.5600014 110.88,34.5600014 C109.28942,34.5600014 108,35.8494213 108,37.4400013 L108,37.4400013 Z M108,179.680007 L108,196.960007 C108,198.550588 109.28942,199.840007 110.88,199.840007 C112.47058,199.840007 113.76,198.550588 113.76,196.960007 L113.76,179.680007 C113.76,178.089427 112.47058,176.800007 110.88,176.800007 C109.28942,176.800007 108,178.089427 108,179.680007 L108,179.680007 Z M108,210.240008 L108,223.841152 C108,225.431732 109.28942,226.721152 110.88,226.721152 C112.47058,226.721152 113.76,225.431732 113.76,223.841152 L113.76,210.240008 C113.76,208.649428 112.47058,207.360008 110.88,207.360008 C109.28942,207.360008 108,208.649428 108,210.240008 Z M3.87999994,114.260772 L21.1600006,114.260772 C22.7505807,114.260772 24.0400006,112.971352 24.0400006,111.380772 C24.0400006,109.790192 22.7505807,108.500772 21.1600006,108.500772 L3.87999994,108.500772 C2.28941989,108.500772 1,109.790192 1,111.380772 C1,112.971352 2.28941989,114.260772 3.87999994,114.260772 Z M38.4400013,114.260772 L55.720002,114.260772 C57.3105821,114.260772 58.6000019,112.971352 58.6000019,111.380772 C58.6000019,109.790192 57.3105821,108.500772 55.720002,108.500772 L38.4400013,108.500772 C36.8494213,108.500772 35.5600014,109.790192 35.5600014,111.380772 C35.5600014,112.971352 36.8494213,114.260772 38.4400013,114.260772 Z M176.680007,114.260772 L193.960007,114.260772 C195.550588,114.260772 196.840007,112.971352 196.840007,111.380772 C196.840007,109.790192 195.550588,108.500772 193.960007,108.500772 L176.680007,108.500772 C175.089427,108.500772 173.800007,109.790192 173.800007,111.380772 C173.800007,112.971352 175.089427,114.260772 176.680007,114.260772 Z M211.240008,114.260772 L218.222871,114.260772 C219.813451,114.260772 221.102871,112.971352 221.102871,111.380772 C221.102871,109.790192 219.813451,108.500772 218.222871,108.500772 L211.240008,108.500772 C209.649428,108.500772 208.360008,109.790192 208.360008,111.380772 C208.360008,112.971352 209.649428,114.260772 211.240008,114.260772 Z M9.931452,155.561974 L26.0186695,149.253262 C27.4994569,148.672561 28.2291211,147.001394 27.6484202,145.520607 C27.0677193,144.039819 25.3965528,143.310155 23.9157654,143.890856 L7.82854788,150.199569 C6.34776049,150.78027 5.61809625,152.451436 6.19879718,153.932224 C6.77949812,155.413011 8.45066461,156.142675 9.931452,155.561974 Z M42.105887,142.944549 L58.1931045,136.635836 C59.6738919,136.055135 60.4035562,134.383969 59.8228552,132.903181 C59.2421543,131.422394 57.5709878,130.69273 56.0902004,131.273431 L40.0029829,137.582143 C38.5221955,138.162844 37.7925313,139.834011 38.3732322,141.314798 C38.9539331,142.795586 40.6250996,143.52525 42.105887,142.944549 Z M170.803627,92.4748469 L186.890845,86.1661342 C188.371632,85.5854332 189.101296,83.9142667 188.520595,82.4334793 C187.939894,80.9526919 186.268728,80.2230277 184.78794,80.8037286 L168.700723,87.1124414 C167.219936,87.6931423 166.490271,89.3643088 167.070972,90.8450962 C167.651673,92.3258836 169.32284,93.0555478 170.803627,92.4748469 Z M202.978062,79.8574214 L213.931452,75.5619744 C215.412239,74.9812734 216.141904,73.310107 215.561203,71.8293196 C214.980502,70.3485322 213.309335,69.6188679 211.828548,70.1995689 L200.875158,74.4950159 C199.394371,75.0757168 198.664706,76.7468833 199.245407,78.2276707 C199.826108,79.7084581 201.497275,80.4381223 202.978062,79.8574214 Z M28.8916365,197.848562 L41.2576405,185.778749 C42.3958997,184.667754 42.4180013,182.844373 41.3070058,181.706113 C40.1960103,180.567854 38.3726292,180.545753 37.23437,181.656748 L24.868366,193.726561 C23.7301068,194.837556 23.7080052,196.660937 24.8190007,197.799196 C25.9299962,198.937455 27.7533774,198.959557 28.8916365,197.848562 Z M53.6236445,173.708937 L65.9896485,161.639125 C67.1279077,160.528129 67.1500093,158.704748 66.0390138,157.566489 C64.9280183,156.42823 63.1046372,156.406128 61.966378,157.517124 L49.600374,169.586936 C48.4621148,170.697931 48.4400133,172.521313 49.5510087,173.659572 C50.6620042,174.797831 52.4853854,174.819932 53.6236445,173.708937 Z M152.551677,77.1504387 L164.917681,65.0806264 C166.05594,63.9696309 166.078041,62.1462498 164.967046,61.0079906 C163.85605,59.8697314 162.032669,59.8476298 160.89441,60.9586253 L148.528406,73.0284376 C147.390147,74.1394331 147.368045,75.9628142 148.479041,77.1010734 C149.590036,78.2393326 151.413417,78.2614342 152.551677,77.1504387 Z M185.283685,46.0108141 L197.649689,33.9410018 C198.787948,32.8300063 198.810049,31.0066252 197.699054,29.868366 C196.588058,28.7301068 194.764677,28.7080052 193.626418,29.8190007 L181.260414,41.888813 C180.122155,42.9998085 180.100053,44.8231897 181.211049,45.9614488 C182.322044,47.099708 184.145425,47.1218096 185.283685,46.0108141 Z M23.868366,32.9410018 L36.23437,45.0108141 C37.3726292,46.1218096 39.1960103,46.099708 40.3070058,44.9614488 C41.4180013,43.8231897 41.3958997,41.9998085 40.2576405,40.888813 L27.8916365,28.8190007 C26.7533774,27.7080052 24.9299962,27.7301068 23.8190007,28.868366 C22.7080052,30.0066252 22.7301068,31.8300063 23.868366,32.9410018 Z M47.600374,56.0806264 L59.966378,68.1504387 C61.1046372,69.2614342 62.9280183,69.2393326 64.0390138,68.1010734 C65.1500093,66.9628142 65.1279077,65.1394331 63.9896485,64.0284376 L51.6236445,51.9586253 C50.4853854,50.8476298 48.6620042,50.8697314 47.5510087,52.0079906 C46.4400133,53.1462498 46.4621148,54.9696309 47.600374,56.0806264 Z M146.528406,152.639125 L158.89441,164.708937 C160.032669,165.819932 161.85605,165.797831 162.967046,164.659572 C164.078041,163.521313 164.05594,161.697931 162.917681,160.586936 L150.551677,148.517124 C149.413417,147.406128 147.590036,147.42823 146.479041,148.566489 C145.368045,149.704748 145.390147,151.528129 146.528406,152.639125 Z M181.260414,185.778749 L193.626418,197.848562 C194.764677,198.959557 196.588058,198.937455 197.699054,197.799196 C198.810049,196.660937 198.787948,194.837556 197.649689,193.726561 L185.283685,181.656748 C184.145425,180.545753 182.322044,180.567854 181.211049,181.706113 C180.100053,182.844373 180.122155,184.667754 181.260414,185.778749 Z M160.47244,208.624846 L152.937567,193.074151 C152.244001,191.642749 150.521375,191.044615 149.089973,191.73818 C147.658571,192.431746 147.060437,194.154373 147.754003,195.585775 L155.288875,211.13647 C155.982441,212.567872 157.705068,213.166006 159.13647,212.47244 C160.567872,211.778874 161.166006,210.056248 160.47244,208.624846 Z M145.402694,177.523456 L137.867822,161.972761 C137.174256,160.541359 135.451629,159.943225 134.020227,160.63679 C132.588825,161.330356 131.990691,163.052983 132.684257,164.484385 L140.21913,180.03508 C140.912696,181.466482 142.635322,182.064616 144.066724,181.37105 C145.498126,180.677484 146.09626,178.954858 145.402694,177.523456 Z M85.1237117,53.1178956 L77.5888389,37.5672006 C76.895273,36.1357988 75.1726463,35.5376645 73.7412445,36.2312304 C72.3098426,36.9247962 71.7117083,38.6474229 72.4052742,40.0788248 L79.940147,55.6295198 C80.6337129,57.0609216 82.3563396,57.6590559 83.7877414,56.9654901 C85.2191433,56.2719242 85.8172776,54.5492975 85.1237117,53.1178956 Z M70.053966,22.0165056 L66.4724401,14.6248457 C65.7788742,13.1934438 64.0562475,12.5953095 62.6248457,13.2888754 C61.1934438,13.9824412 60.5953095,15.7050679 61.2888754,17.1364698 L64.8704014,24.5281298 C65.5639672,25.9595316 67.2865939,26.5576659 68.7179958,25.8641 C70.1493976,25.1705342 70.7475319,23.4479075 70.053966,22.0165056 Z M66.4724401,211.13647 L74.0073129,195.585775 C74.7008788,194.154373 74.1027445,192.431746 72.6713426,191.73818 C71.2399408,191.044615 69.5173141,191.642749 68.8237482,193.074151 L61.2888754,208.624846 C60.5953095,210.056248 61.1934438,211.778874 62.6248457,212.47244 C64.0562475,213.166006 65.7788742,212.567872 66.4724401,211.13647 Z M81.5421858,180.03508 L89.0770586,164.484385 C89.7706244,163.052983 89.1724902,161.330356 87.7410883,160.63679 C86.3096864,159.943225 84.5870598,160.541359 83.8934939,161.972761 L76.3586211,177.523456 C75.6650552,178.954858 76.2631895,180.677484 77.6945913,181.37105 C79.1259932,182.064616 80.8486199,181.466482 81.5421858,180.03508 Z M141.821168,55.6295198 L149.356041,40.0788248 C150.049607,38.6474229 149.451473,36.9247962 148.020071,36.2312304 C146.588669,35.5376645 144.866042,36.1357988 144.172477,37.5672006 L136.637604,53.1178956 C135.944038,54.5492975 136.542172,56.2719242 137.973574,56.9654901 C139.404976,57.6590559 141.127603,57.0609216 141.821168,55.6295198 Z M156.890914,24.5281298 L160.47244,17.1364698 C161.166006,15.7050679 160.567872,13.9824412 159.13647,13.2888754 C157.705068,12.5953095 155.982441,13.1934438 155.288875,14.6248457 L151.707349,22.0165056 C151.013784,23.4479075 151.611918,25.1705342 153.04332,25.8641 C154.474722,26.5576659 156.197348,25.9595316 156.890914,24.5281298 Z M213.932224,150.199569 L197.845006,143.890856 C196.364219,143.310155 194.693052,144.039819 194.112351,145.520607 C193.53165,147.001394 194.261315,148.672561 195.742102,149.253262 L211.82932,155.561974 C213.310107,156.142675 214.981273,155.413011 215.561974,153.932224 C216.142675,152.451436 215.413011,150.78027 213.932224,150.199569 Z M181.757789,137.582143 L165.670571,131.273431 C164.189784,130.69273 162.518617,131.422394 161.937916,132.903181 C161.357215,134.383969 162.08688,136.055135 163.567667,136.635836 L179.654885,142.944549 C181.135672,143.52525 182.806838,142.795586 183.387539,141.314798 C183.96824,139.834011 183.238576,138.162844 181.757789,137.582143 Z M53.0600486,87.1124414 L36.9728311,80.8037286 C35.4920437,80.2230277 33.8208772,80.9526919 33.2401763,82.4334793 C32.6594753,83.9142667 33.3891396,85.5854332 34.869927,86.1661342 L50.9571445,92.4748469 C52.4379319,93.0555478 54.1090984,92.3258836 54.6897993,90.8450962 C55.2705002,89.3643088 54.540836,87.6931423 53.0600486,87.1124414 Z M20.8856136,74.4950159 L9.93222369,70.1995689 C8.4514363,69.6188679 6.78026981,70.3485322 6.19956887,71.8293196 C5.61886793,73.310107 6.34853217,74.9812734 7.82931957,75.5619744 L18.7827095,79.8574214 C20.2634969,80.4381223 21.9346633,79.7084581 22.5153643,78.2276707 C23.0960652,76.7468833 22.366401,75.0757168 20.8856136,74.4950159 Z" id="Combined-Shape"></path>
        </g>
    </g>
</svg>
    </div>
    <p>
      Install a clean OVA onto your system.
    </p>
    
    <div class="button">
      <span>Fresh Install</span>
    </div>

  </div>
  <div id="backup">
        <h2> Recover from Backup</h2>
    <div class="graphic">
      
       <svg width="100%" height="100%" viewBox="0 0 166 251" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <linearGradient x1="100%" y1="100%" x2="41.2782257%" y2="15.457556%" id="linearGradient-1">
            <stop stop-color="#2C95DD" offset="0%"></stop>
            <stop stop-color="#1F83D5" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="80.6376537%" y1="74.1215657%" x2="41.2782257%" y2="15.457556%" id="linearGradient-2">
            <stop stop-color="#2C95DD" offset="0%"></stop>
            <stop stop-color="#1F83D5" offset="100%"></stop>
        </linearGradient>
        <rect id="path-3" x="21" y="108.776529" width="134.375907" height="134.223471" rx="12.9599997"></rect>
        <mask id="mask-4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="134.375907" height="134.223471" fill="white">
            <use xlink:href="#path-3"></use>
        </mask>
        <rect id="path-5" x="31" y="116.776529" width="134.375907" height="134.223471" rx="12.9599997"></rect>
        <mask id="mask-6" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="134.375907" height="134.223471" fill="white">
            <use xlink:href="#path-5"></use>
        </mask>
    </defs>
    <g id="help-text" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="---copy">
            <rect id="copy-4" fill="#EFEFEF" x="0" y="81.7765289" width="134.375907" height="134.223471" rx="12.9599997"></rect>
            <rect id="copy-3" fill="#2C95DD" x="10" y="-0.223471074" width="135.29629" height="135.14281" rx="12.9599997"></rect>
            <path d="M67,70.2676279 L75.0868536,78.47125 L92.2380255,77.8609375 L97.5207955,69.1900781 L82.6405645,48 L82.6272297,48.1064075 C82.8891253,48.3708496 83.0200712,48.7080355 83.0200712,49.1179752 L83.0200712,68.9179748 C83.0200712,69.3304768 82.8874832,69.6693127 82.6223033,69.9344926 C82.3571234,70.1996725 82.0182876,70.3322605 81.6057855,70.3322605 L67.4629286,70.3322605 C67.2966494,70.3322605 67.14234,70.3107164 67,70.2676279 Z" id="small-shadow" fill="url(#linearGradient-1)"></path>
            <path d="M52.0200823,85.6990894 C52.0076872,85.9721136 52,86.1241607 52,86.1241607 L76.5491036,112.24873 C77.4785955,112.303141 78.4152884,112.330728 79.3584205,112.330728 C103.324168,112.330728 123.132115,94.5176194 126.280592,71.4011102 L109.30066,50 C111.439213,54.4945586 112.508476,59.3264703 112.508476,64.495836 C112.508476,70.6539024 110.99108,76.3330866 107.956244,81.5335589 C104.921407,86.7340312 100.803815,90.8516239 95.6033423,93.8864604 C90.40287,96.921297 84.7236858,98.4386925 78.5656194,98.4386925 C72.407553,98.4386925 66.7283689,96.921297 61.5278965,93.8864604 C57.8031288,91.7127999 54.6338725,88.9836914 52.0200823,85.6990894 Z" id="big-shadow" fill="url(#linearGradient-2)"></path>
            <path d="M83.5999992,49.3857139 L83.5999992,69.1857135 C83.5999992,69.5982156 83.4674113,69.9370515 83.2022314,70.2022314 C82.9370515,70.4674113 82.5982156,70.5999992 82.1857135,70.5999992 L68.0428567,70.5999992 C67.6303546,70.5999992 67.2915187,70.4674113 67.0263388,70.2022314 C66.7611589,69.9370515 66.628571,69.5982156 66.628571,69.1857135 L66.628571,66.3571422 C66.628571,65.9446401 66.7611589,65.6058042 67.0263388,65.3406243 C67.2915187,65.0754444 67.6303546,64.9428565 68.0428567,64.9428565 L77.9428565,64.9428565 L77.9428565,49.3857139 C77.9428565,48.9732119 78.0754444,48.634376 78.3406243,48.3691961 C78.6058042,48.1040162 78.9446401,47.9714282 79.3571422,47.9714282 L82.1857135,47.9714282 C82.5982156,47.9714282 82.9370515,48.1040162 83.2022314,48.3691961 C83.4674113,48.634376 83.5999992,48.9732119 83.5999992,49.3857139 L83.5999992,49.3857139 Z M101.985713,64.9428565 C101.985713,60.5821205 100.910277,56.5602858 98.7593739,52.8772317 C96.6084703,49.1941777 93.6915353,46.2772426 90.0084812,44.126339 C86.3254272,41.9754355 82.3035925,40.8999998 77.9428565,40.8999998 C73.5821205,40.8999998 69.5602858,41.9754355 65.8772317,44.126339 C62.1941777,46.2772426 59.2772426,49.1941777 57.126339,52.8772317 C54.9754355,56.5602858 53.8999998,60.5821205 53.8999998,64.9428565 C53.8999998,69.3035925 54.9754355,73.3254272 57.126339,77.0084812 C59.2772426,80.6915353 62.1941777,83.6084703 65.8772317,85.7593739 C69.5602858,87.9102775 73.5821205,88.9857131 77.9428565,88.9857131 C82.3035925,88.9857131 86.3254272,87.9102775 90.0084812,85.7593739 C93.6915353,83.6084703 96.6084703,80.6915353 98.7593739,77.0084812 C100.910277,73.3254272 101.985713,69.3035925 101.985713,64.9428565 L101.985713,64.9428565 Z M107.333481,81.9805793 C104.298644,87.1810517 100.181052,91.2986443 94.9805793,94.3334809 C89.780107,97.3683174 84.1009229,98.8857129 77.9428565,98.8857129 C71.7847901,98.8857129 66.1056059,97.3683174 60.9051336,94.3334809 C55.7046613,91.2986443 51.5870686,87.1810517 48.5522321,81.9805793 C45.5173955,76.780107 44,71.1009229 44,64.9428565 C44,58.7847901 45.5173955,53.1056059 48.5522321,47.9051336 C51.5870686,42.7046613 55.7046613,38.5870686 60.9051336,35.5522321 C66.1056059,32.5173955 71.7847901,31 77.9428565,31 C84.1009229,31 89.780107,32.5173955 94.9805793,35.5522321 C100.181052,38.5870686 104.298644,42.7046613 107.333481,47.9051336 C110.368317,53.1056059 111.885713,58.7847901 111.885713,64.9428565 C111.885713,71.1009229 110.368317,76.780107 107.333481,81.9805793 Z" id="clock" fill="#DFF3FF"></path>
            <ellipse id="container" class="oval" stroke="#65B2E6" stroke-width="1.3248" cx="79.3584205" cy="65.3888742" rx="47.3584205" ry="47.3888742"></ellipse>
            <use id="copy-2" stroke="#F5F5F5" mask="url(#mask-4)" stroke-width="4.31999991" fill="#E8E8E8" xlink:href="#path-3"></use>
            <use id="copy-1" stroke="#F5F5F5" mask="url(#mask-6)" stroke-width="4.31999991" fill="#D9D9D9" xlink:href="#path-5"></use>
        </g>
    </g>
</svg>
      
    </div>
    <p>
     This is the Disaster Recovery case where user can pick from a previous backup to seed the new system with data.
    </p>
    
    <div class="button">
      <span>Recover from Backup</span>
    </div>
  </div>
</div>
</body>
            
          
!
            
              $blue: #2C95DD;
$gray: #F5F5F5;

h2 { font-weight: 100; color: darken(#BABABA, 25); }
body {
  font-family: helvetica, arial, san-serif;
}

#container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  
  > div { 
    width: 22em;
    height: 35em;
    /* Rectangle 10: */
    background: #F5F5F5;
    border: 1px solid rgba(150,150,150,0.25);
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.13);
    border-radius: 7.92px;
    margin: 1em;
    padding: 1em;
    text-align: center;

    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    
    cursor: pointer;
    
   
 
  }
}

#new .graphic {
  width: 70%;
}

#backup .graphic {
  width: 55%;
}

#shadow, #big-shadow, #little-shadow {
  background-image: linear-gradient(33deg, #2C95DD 13%, #1F83D5 84%);
  }

.graphic { position: relative; }

#splash {
    position: absolute;
    left: -22%;
    top: -24%;
    margin: 0;
    z-index: -2;
  }

.button {
  background: #E8E8E8;
  border: 1px solid #D8D8D8;
  border-radius: 9.35px;
  width: 60%;
  padding: 1.5em;
  text-align: center;
  text-transform: uppercase;
  font-size: .9em;
  font-weight: bold;
  color: $blue;
  

}

 #new:hover .button, #backup:hover .button {
    color: #FFF;
    background: $blue;
  }


#splash { 
  transform-origin: center center;
  }

 #copy-1, #copy-2, #copy-3, #copy-4, #clock, #small-shadow, #big-shadow, #container, .button, #splash, #check, .oval, #shadow { 
    transition: all, ease-in-out, .2s;
  }

#copy-3, #clock, #container, #small-shadow, #big-shadow {
    transform: translate(0, 1.5em);
  }
.Line { 
  stroke-width: 5; 
  stroke: $blue;
  display: none;
  } 

#container .active {
  background: $blue;
  color: #fff;
  
  h2 { color: #fff; }
  #splash { fill: #fff; }
  #mask, #check, #clock { fill: $blue; }
  #tile { fill: #EAF4FB; }
  #shadow, #small-shadow, #big-shadow {fill: url(#active-gradient);}
  #copy-3 { fill: #EAF4FB; }
  
   .button span:before {
      content: "";
      font-family: FontAwesome;
      padding-right: .2em;
      display: inline-block;
      }
  
  #Line-group { 
    // animation: turn 60s infinite linear;
    // transform-origin: center center;
    }
  .Line {
    animation: radiate 400s infinite linear;
    stroke: #FFF;
    transform-origin: center center;
    display:inherit;
  }
    
  #splash { display: none; }
  #copy-3, #clock, #small-shadow, #big-shadow, #container { 
    transform: translate(0, .5em);
  }
  
  #copy-1, #copy-2 { stroke: transparent; }
  #copy-1 { fill: lighten($blue, 20)}
  #copy-2 { fill: lighten($blue, 10)}
  #copy-4 { fill: lighten($blue, 5)}
  .oval { stroke: #BCD9F2; }
  .button { 
    background: #fff;
    color: $blue;
    border: 0 transparent none;
    
  }
}

// @keyframes radiate {
//     0% {transform: rotate(0deg); }
//     50% {transform: rotate(18deg); }
//     100% {transform: rotate(0deg); }
// }

@keyframes radiate {
  0% { stroke-dashoffset: 1px; transform: rotate(0deg); }
  100% { stroke-dashoffset: -10000px; transform: rotate(18deg); }
}

// @keyframes turn {
//     0% {transform: rotate(0deg); }
//     100% {transform: rotate(180deg); }
// }

            
          
!
            
              $("#container > div").click(function(e) {
  e.preventDefault;
  if($(this).hasClass("active")) {
    $(this).removeClass("active");
  } else { 
    $("#container > div").removeClass("active");
  $(this).addClass("active");
  }
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console