123

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.

            
                <link href="https://fonts.googleapis.com/css?family=Eczar" rel="reload" as="font">
  <link async defer href="https://fonts.googleapis.com/css?family=Eczar" rel="stylesheet">

<body>
  <div class="loader">
    <p>Drinking a mana potion...</p>
  </div>
  <h1>
    <span class="level30">Level30</span><span class="wizards">Wizards</span>
  </h1>
  <div id="wizard">
      <svg id="Merlin" width="437px" height="568px" viewBox="0 0 437 568" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
          <pattern id="pattern-1" width="512" height="512" x="-512" y="-512" patternUnits="userSpaceOnUse">
              <use xlink:href="#image-2"></use>
          </pattern>
          <filter id="softGlow" height="300%" width="300%" x="-75%" y="-75%">
            <!-- Thicken out the original shape -->
            <feMorphology operator="dilate" radius="4" in="SourceAlpha" result="thicken" />
        
            <!-- Use a gaussian blur to create the soft blurriness of the glow -->
            <feGaussianBlur in="thicken" stdDeviation="10" result="blurred" />
        
            <!-- Change the colour -->
            <feFlood flood-color="#4527a0" result="glowColor" />
        
            <!-- Color in the glows -->
            <feComposite in="glowColor" in2="blurred" operator="in" result="softGlow_colored" />
        
            <!--	Layer the effects together -->
            <feMerge>
              <feMergeNode in="softGlow_colored"/>
              <feMergeNode in="SourceGraphic"/>
            </feMerge>
        
          </filter>
          <image id="image-2" width="512" height="512" xlink:href="https://www.filterforge.com/filters/9574.jpg"></image>      
          <linearGradient id="linearWhirl" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%"   stop-color="#06002C"/>
              <stop offset="15%" stop-color="#200B9F"/>
              <stop offset="33%"   stop-color="#06002C"/>
              <stop offset="38%" stop-color="#200B9F"/>
              <stop offset="53%"   stop-color="#06002C"/>
              <stop offset="66%" stop-color="#200B9F"/>
              <stop offset="81%"   stop-color="#06002C"/>
              <stop offset="96%"   stop-color="#200B9F"/>
            </linearGradient>
        </defs>
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="Merlin" transform="translate(0.000000, 2.000000)">
                <g id="merlin-holder" transform="translate(0.000000, 17.000000)">
                    <g id="shadow" transform="translate(0.000000, 410.000000)" fill="#333333" fill-rule="nonzero">
                        <ellipse id="Oval" cx="218.3" cy="69.9" rx="218.1" ry="69"></ellipse>
                    </g>
                    <g id="hair" transform="translate(139.000000, 71.000000)" fill="#D5D3D2" fill-rule="nonzero">
                        <path d="M166.1,169.5 L0.5,169.5 L23.4,54.9 C23.4,24.6 48,-2.84217094e-14 78.3,-2.84217094e-14 C108.6,-2.84217094e-14 133.2,24.6 133.2,54.9 L166.1,169.5 Z" ></path>
                    </g>
                    <g id="torso" transform="translate(124.000000, 219.000000)" fill-rule="nonzero">
                        <g id="Laag_2" transform="translate(91.000000, 0.000000)" fill="#082A23">
                            <path d="M0.2,0.8 L24,0.8 L91.1,24.3 C97.5,26.6 101.8,32.7 101.7,39.5 L99.8,160.4 L105.5,246.3 L5.2,246.3" ></path>
                        </g>
                        <g id="Laag_3" fill="#19483C">
                            <path d="M97,246.3 L0,246.3 L7.8,156.1 L0.6,32 C0.3,26.8 3.5,22.1 8.5,20.5 L71,0.8 L91.7,0.8" ></path>
                        </g>
                    </g>
                    <g id="hands" transform="translate(50.000000, 0.000000)">
                        <g id="Laag_6">
                            <g id="tap" transform="translate(44.000000, 459.000000)" stroke="#111" fill="#111">
                                <ellipse id="tap-circle" cx="14" cy="6.5" rx="14" ry="6.5"></ellipse>
                            </g>
                            <path d="M45.5954763,468.320562 C55.471866,436.485626 58.1913581,413.078699 53.7539525,398.099782 C49.3165469,383.120864 46.5970548,357.063616 45.5954763,319.928037 C48.6549049,306.909424 50.1846191,291.377011 50.1846191,273.330796 C50.1846191,255.284582 44.0477868,221.121645 31.774122,170.841987 C24.1075753,151.681763 24.1075753,138.486584 31.774122,131.256449 C43.273942,120.411245 38.9441884,56.7270755 31.774122,56.7270755 C24.6040556,56.7270755 -8.68514856,1.13444026e-14 2.1491331,0 C9.37198754,0 15.4691491,7.88680127 20.4406178,23.6604038 C37.2105234,38.3363751 45.5954763,45.6743608 45.5954763,45.6743608 C45.5954763,45.6743608 53.7539525,55.3782511 53.7539525,68.3750205 C53.7539525,81.3717898 53.7539525,139.509859 45.5954763,147.695639 C37.4370001,155.881419 45.4480339,172.642546 53.7539525,197.980785 C59.2912315,214.872945 65.8788097,239.989615 73.516687,273.330796 C73.516687,287.651303 71.1394068,303.183717 66.3848464,319.928037 C59.2530057,345.044517 66.5159062,338.396555 73.516687,398.099782 C78.1838742,437.901933 75.806594,461.308859 66.3848464,468.320562 L45.5954763,468.320562 Z" id="staff" fill="url(#pattern-1)"></path>
                            <circle id="left" fill="#FBD4B0" fill-rule="nonzero" cx="63.7" cy="280.7" r="17.7"></circle>
                        </g>
                        <g id="Laag_5" transform="translate(245.000000, 354.000000)" fill="#FBD4B0" fill-rule="nonzero">
                            <circle id="right" cx="18" cy="18.2" r="17.7"></circle>
                        </g>
                    </g>
                    <g id="face" transform="translate(169.000000, 85.000000)" fill-rule="nonzero">
                        <g id="Laag_7" fill="#FBD4B0">
                            <ellipse id="Oval" cx="47.5" cy="62.6" rx="46.8" ry="62.4"></ellipse>
                        </g>
                        <g id="Laag_8" transform="translate(47.000000, 0.000000)" fill="#F4B985">
                            <path d="M0.5,0.3 C26.3,0.3 47.3,28.2 47.3,62.7 C47.3,97.1 26.4,125.1 0.5,125.1" ></path>
                        </g>
                        <g id="Laag_20" transform="translate(15.000000, 42.000000)">
                            <g  fill="#F6F6F6">
                                <path d="M19.9,11.9 L4.2,7.9" ></path>
                                <path d="M20.6,9.4 C15.4,8.1 10.1,6.7 4.9,5.4 C1.8,4.6 0.4,9.4 3.6,10.2 C8.8,11.5 14.1,12.9 19.3,14.2 C22.4,15.1 23.7,10.2 20.6,9.4 Z"  transform="translate(12.078374, 9.810158) rotate(-30.000000) translate(-12.078374, -9.810158) "></path>
                            </g>
                            <g  transform="translate(39.000000, 0.000000)" fill="#F6F6F6">
                                <path d="M3.4,11.9 L19.1,7.9" ></path>
                                <path d="M4.1,14.3 C9.3,13 14.6,11.6 19.8,10.3 C22.9,9.5 21.6,4.7 18.5,5.5 C13.3,6.8 8,8.2 2.8,9.5 C-0.3,10.2 1,15.1 4.1,14.3 Z"  transform="translate(11.300000, 9.899204) rotate(-330.000000) translate(-11.300000, -9.899204) "></path>
                            </g>
                            <path d="M17.6,12.8 C13.7,11.8 9.8,10.8 5.9,9.8 C3.7,9.2 2.7,12.7 5,13.2 C8.9,14.2 12.8,15.2 16.7,16.2 C18.9,16.7 19.8,13.3 17.6,12.8 Z"  fill="#3C3C3B" transform="translate(11.278408, 12.990549) rotate(-30.000000) translate(-11.278408, -12.990549) "></path>
                            <path d="M44.6,16.5 C48.5,15.5 52.4,14.5 56.3,13.5 C58.5,12.9 57.6,9.5 55.4,10.1 C51.5,11.1 47.6,12.1 43.7,13.1 C41.4,13.7 42.4,17.1 44.6,16.5 Z"  fill="#3C3C3B" transform="translate(49.978408, 13.300000) rotate(-330.000000) translate(-49.978408, -13.300000) "></path>
                        </g>
                    </g>
                    <g id="beard" transform="translate(161.000000, 129.000000)" fill-rule="nonzero">
                        <g id="Laag_13" transform="translate(24.000000, 26.000000)">
                            <path d="M62.5,60.5 C62.5,98.3 31.6,128.9 31.6,128.9 C31.6,128.9 0.7,98.3 0.7,60.5 C0.7,7.4 1.7,0.7 31.6,0.7 C63,0.8 62.5,6.4 62.5,60.5 Z"  fill="#E4E4E2"></path>
                            <path d="M31.6,0.8 C63,0.8 62.5,6.5 62.5,60.6 C62.5,98.4 31.6,129 31.6,129"  fill="#D5D3D2"></path>
                        </g>
                        <g id="Laag_10" transform="translate(84.000000, 2.000000)" fill="#F6F6F6">
                            <path d="M17.2,0 C17.2,13.7 15.9,27 15.1,40.7 C11,43.8 6.9,47 2.8,50.1 C1.9,50.8 1,51.5 0.6,52.6 C0.3,53.4 0.4,54.3 0.5,55.2 C0.7,57.6 1,60.1 1.2,62.5 C1.3,63.4 1.3,67.2 1.6,68.1 C2.7,71.3 4.1,69.8 4.4,69.7 C11.7,66.2 15.3,60.6 22.6,57.1 C23.4,56.7 25.6,54.1 26,53.3 C26.4,52.6 26.8,51.2 26.9,50.4 C27.2,47.1 26.5,46 25.9,40.8 C25.3,35.6 25.8,33.3 25,27.7 C23.3,15.7 17.7,9 17.2,0" ></path>
                        </g>
                        <g id="Laag_11" fill="#F6F6F6">
                            <path d="M10.5,0.3 C10.5,14 11.8,27.3 12.6,41 C16.7,44.1 20.8,47.3 24.9,50.4 C25.8,51.1 26.7,51.8 27.1,52.9 C27.4,53.7 27.3,54.6 27.2,55.5 C27,57.9 26.7,60.4 26.5,62.8 C26.4,63.7 26.4,67.5 26.1,68.4 C25,71.6 23.6,70.1 23.3,70 C16,66.5 12.4,60.9 5.1,57.4 C4.3,57 2.1,54.4 1.7,53.6 C1.3,52.9 0.9,51.5 0.8,50.7 C0.5,47.4 1.2,46.3 1.8,41.1 C2.4,35.9 1.9,33.6 2.7,28 C4.4,15.9 10,9.2 10.5,0.3" ></path>
                        </g>
                        <g id="Laag_12" transform="translate(23.000000, 20.000000)" fill="#F6F6F6">
                            <path d="M13.9,103.6 C13.9,103.6 0.4,88.3 0.6,59.5 C1,6.4 2.7,0.7 32.6,0.7" ></path>
                            <path d="M27.3,0.8 C66.6,0.7 61.7,4.3 64.4,58.4 C65.4,78 52.2,101.4 52.2,101.4" ></path>
                        </g>
                        <g id="Laag_14" transform="translate(35.000000, 30.000000)">
                            <path d="M40.7,39.3 C40.7,64.1 20.5,84.1 20.5,84.1 C20.5,84.1 0.3,64 0.3,39.3 C0.3,4.5 1,0.2 20.5,0.2 C41.1,0.2 40.7,3.9 40.7,39.3 Z"  fill="#E4E4E2"></path>
                            <path d="M20.5,0.2 C41.1,0.2 40.7,3.9 40.7,39.3 C40.7,64.1 20.5,84.1 20.5,84.1"  fill="#D5D3D2"></path>
                        </g>
                    </g>
                    <g id="hat" transform="translate(157.000000, 23.000000)" fill-rule="nonzero">
                        <path d="M117.7,92.9 L4.9,92.1 L33.2,0.9 C99.7,9.4 117.7,92.9 117.7,92.9 Z" fill="#082A23"></path>
                        <polygon fill="#082A23" points="147.5 66.4 33.1 38.4 33.1 0.2 151.9 34.1"></polygon>
                        <polygon fill="#082A23" points="147.5 66.4 151.9 34.1 174.9 13.6 179.7 20.5"></polygon>
                        <polygon fill="#082A23" points="194.1 41.2 166.5 27.4 174.9 13.6"></polygon>
                        <path d="M114,101.2 L5,101.6 C2.3,101.6 0.1,99.4 0,96.7 C0,94 2.2,91.8 4.9,91.7 L114,91.3 C116.7,91.3 118.9,93.5 119,96.2 C119,98.9 116.8,101.2 114,101.2 Z" fill="#082A23"></path>
                        <path d="M0,96.7 C0,94 2.2,91.8 4.9,91.7 L114,91.3 C116.7,91.3 118.9,93.5 119,96.2" fill="#0F382E"></path>
                        <polygon fill="#19483C" points="148.7 58 151.9 34.1 174.9 13.6 178 18.1"></polygon>
                        <polygon fill="#19483C" points="148.7 58 26.4 22.5 33.1 0.2 151.9 34.1"></polygon>
                        <polygon fill="#19483C" points="65.3 91.3 4.9 92.1 33.1 0.2 90.5 16.6"></polygon>
                        <polygon fill="#19483C" points="194.1 41.2 167.7 21.3 174.9 13.6"></polygon>
                    </g>
                    <!-- <use  id="whirlwind" stroke="url(#linearWhirl)" stroke-width="5" xlink:href="#whirlWindPath"></use> -->
                    <g transform="translate(0, -16)" stroke="url(#linearWhirl)" filter="url(#softGlow)" stroke-width="5" id="whirlwind">
                        <path d="M97.7518981,482.897024 C303.741551,470.958959 377.219222,460.967019 318.184912,452.921205" id="Path"></path>
                        <path d="M104.338575,448.450597 C89.7274549,451.44031 89.7274549,452.522078 104.338575,451.6959 C313.665383,442.665691 384.530064,433.755954 316.932619,424.966688"></path>
                        <path d="M130.222462,417.669865 C125.968225,418.171829 123.841107,418.42281 123.841107,418.42281"></path>
                        <path d="M105.018048,420.063461 C88.4007223,423.914986 88.5529848,425.280321 105.474835,424.159466 C320.841709,418.523786 391.0194,412.935472 316.007906,407.394524"></path>
                        <path d="M131.87042,394.478316 C124.597176,393.799533 120.960554,393.460142 120.960554,393.460142"></path>
                        <path d="M99.4568771,390.725674 C83.0780362,394.582334 83.0473643,396.510663 99.3648614,396.510663 C306.548289,393.618169 383.308081,388.453286 329.644238,381.016014"></path>
                        <path d="M130.222462,369.476913 C121.239775,370.315476 116.748431,370.734758 116.748431,370.734758"></path>
                        <path d="M97.0350002,372.880099 C77.2703697,377.104281 77.5093357,378.456753 97.7518981,376.937514 C321.927425,368.95228 394.591182,363.541499 315.743169,360.705173"></path>
                        <path d="M129.641243,350.682097 C118.92994,350.429052 113.574289,350.30253 113.574289,350.30253"></path>
                        <path d="M96.2240371,349.935476 C67.3565397,353.719098 67.6268607,355.610909 97.0350002,355.610909 C141.147209,355.610909 455.316833,341.654516 315.743169,338.128573"></path>
                        <path d="M128.444146,330.818081 C121.707408,330.679046 118.339039,330.609528 118.339039,330.609528"></path>
                        <path d="M97.547656,329.551467 C60.3343152,330.090925 59.6256971,332.757165 95.4218017,337.550185 C149.115959,344.739716 467.629575,309.595688 316.007906,312.646129"></path>
                        <path d="M96.4673494,298.262897 C44.2168454,300.209395 45.3754754,303.803929 99.9432393,309.046497 C181.794885,316.910351 465.556806,282.507383 316.932619,287.49737"></path>
                        <path d="M125.689851,277.88723 C122.180593,277.549837 120.425963,277.38114 120.425963,277.38114"></path>
                        <path d="M99.6470935,276.008859 C34.187281,272.455109 34.360612,275.124593 100.167087,284.017309 C198.876798,297.356385 488.27963,243.900117 303.417205,259.312213"></path>
                        <path d="M142.016555,245.748268 C121.798121,243.223391 111.688904,241.960953 111.688904,241.960953"></path>
                        <path d="M94.2169346,239.940169 C16.2882977,234.683835 17.1464026,239.973716 96.7912493,255.809812 C216.258519,279.563957 516.68029,179.121425 292.3044,213.604529"></path>
                        <path d="M151.067588,201.793171 C126.97668,198.66417 109.136702,197.09967 97.547656,197.09967"></path>
                        <path d="M84.2907461,197.09967 C-4.26846855,192.557885 -3.25463076,197.165223 87.3322595,210.921683 C223.212595,231.556373 537.145059,127.946592 278.04413,164.779832"></path>
                        <path d="M159.994007,156.92556 C142.016555,152.11782 120.425963,147.310079 100.167087,147.310079"></path>
                        <path d="M82.6586342,147.310079 C-26.7443632,135.40219 12.5698577,144.341694 76.8024636,156.92556 C305.822979,201.793171 531.395409,63.4811115 271.097265,120.508405"></path>
                        <path d="M164.090168,127.946592 C141.522069,127.625715 121.047685,126.07556 102.8518,123.784464"></path>
                        <path d="M88.8471771,121.812543 C16.5474387,110.524367 -13.5203009,88.1441678 12.925639,92.4145748 C56.0203154,99.3733673 491.604469,71.2599649 417.849261,57.4958628 C368.228805,48.2357572 166.441527,39.1338163 63.6822299,25.2389288"></path>
                        <path d="M50.5317694,23.3485273 C9.26708526,17.017228 -10.4856141,9.70754163 12.925639,0.992702512"></path>              
                    </g>
                    <!-- <path stroke="url(#linearWhirl)" stroke-width="5" style="transform: translateY(-16px);" d="M97.7518981,482.897024 C303.741551,470.958959 377.219222,460.967019 318.184912,452.921205 M104.338575,448.450597 C89.7274549,451.44031 89.7274549,452.522078 104.338575,451.6959 C313.665383,442.665691 384.530064,433.755954 316.932619,424.966688 M130.222462,417.669865 C125.968225,418.171829 123.841107,418.42281 123.841107,418.42281 M105.018048,420.063461 C88.4007223,423.914986 88.5529848,425.280321 105.474835,424.159466 C320.841709,418.523786 391.0194,412.935472 316.007906,407.394524 M131.87042,394.478316 C124.597176,393.799533 120.960554,393.460142 120.960554,393.460142 M99.4568771,390.725674 C83.0780362,394.582334 83.0473643,396.510663 99.3648614,396.510663 C306.548289,393.618169 383.308081,388.453286 329.644238,381.016014 M130.222462,369.476913 C121.239775,370.315476 116.748431,370.734758 116.748431,370.734758 M97.0350002,372.880099 C77.2703697,377.104281 77.5093357,378.456753 97.7518981,376.937514 C321.927425,368.95228 394.591182,363.541499 315.743169,360.705173 M129.641243,350.682097 C118.92994,350.429052 113.574289,350.30253 113.574289,350.30253 M96.2240371,349.935476 C67.3565397,353.719098 67.6268607,355.610909 97.0350002,355.610909 C141.147209,355.610909 455.316833,341.654516 315.743169,338.128573 M128.444146,330.818081 C121.707408,330.679046 118.339039,330.609528 118.339039,330.609528 M97.547656,329.551467 C60.3343152,330.090925 59.6256971,332.757165 95.4218017,337.550185 C149.115959,344.739716 467.629575,309.595688 316.007906,312.646129 M96.4673494,298.262897 C44.2168454,300.209395 45.3754754,303.803929 99.9432393,309.046497 C181.794885,316.910351 465.556806,282.507383 316.932619,287.49737 M125.689851,277.88723 C122.180593,277.549837 120.425963,277.38114 120.425963,277.38114 M99.6470935,276.008859 C34.187281,272.455109 34.360612,275.124593 100.167087,284.017309 C198.876798,297.356385 488.27963,243.900117 303.417205,259.312213 M142.016555,245.748268 C121.798121,243.223391 111.688904,241.960953 111.688904,241.960953 M94.2169346,239.940169 C16.2882977,234.683835 17.1464026,239.973716 96.7912493,255.809812 C216.258519,279.563957 516.68029,179.121425 292.3044,213.604529 M151.067588,201.793171 C126.97668,198.66417 109.136702,197.09967 97.547656,197.09967 M84.2907461,197.09967 C-4.26846855,192.557885 -3.25463076,197.165223 87.3322595,210.921683 C223.212595,231.556373 537.145059,127.946592 278.04413,164.779832 M159.994007,156.92556 C142.016555,152.11782 120.425963,147.310079 100.167087,147.310079 M82.6586342,147.310079 C-26.7443632,135.40219 12.5698577,144.341694 76.8024636,156.92556 C305.822979,201.793171 531.395409,63.4811115 271.097265,120.508405 M164.090168,127.946592 C141.522069,127.625715 121.047685,126.07556 102.8518,123.784464 M88.8471771,121.812543 C16.5474387,110.524367 -13.5203009,88.1441678 12.925639,92.4145748 C56.0203154,99.3733673 491.604469,71.2599649 417.849261,57.4958628 C368.228805,48.2357572 166.441527,39.1338163 63.6822299,25.2389288 M50.5317694,23.3485273 C9.26708526,17.017228 -10.4856141,9.70754163 12.925639,0.992702512" id="whirlwind"></path> -->
                  </g>
            </g>
        </g>
      </svg>
    </div> 

  <section class="card-holder">
    <article class="card-container">
      <a href="https://verhalenvanger-hetscheepvaartmuseum.nl" class="card">
        <h2>Verhalenvanger</h2>
      </a>
<!--       <p>On the 14th of September <a href="https://www.hetscheepvaartmuseum.nl/" target="_blank" class="link">Het Scheepvaartmuseum</a> announced their newest exhibition about the MS Oranje. During this announcement our first project "The Story Catcher", or "Verhalenvanger" in Dutch, got shown to the public.</p>
      <p>On the Verhalenvanger we want to gather every story people still have about the MS Oranje.</p>
      <ul>
          Having this as our first project and the product being: 
          <li>Magically performant </li>
          <li>Filled with animation </li>
          <li>Full of technical wizardry</li>
          <li>A progressive web app </li>
      </ul>
      <p>Next to all that, it also has a great purpose and tells a beautiful story about trying to preserve stories and memories.</p> -->
      <a href="https://github.com/level30wizards" class="card">
        <h2>Level30Wizards</h2>
      </a>
      <a href="https://github.com/level30wizards" class="card">
        <h2>Level30Wizards</h2>
      </a>
    </article>
  </section>


            
          
!
            
              /* Document
   ========================================================================== */

.card-holder {
    height: 100vh;
}

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
	line-height: 1.15;
	/* 1 */
	-webkit-text-size-adjust: 100%;
	/* 2 */
}

/* Sections
	 ========================================================================== */

/**
   * Remove the margin in all browsers.
   */

body {
	margin: 0;
}

/**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */

hr {
	box-sizing: content-box;
	/* 1 */
	height: 0;
	/* 1 */
	overflow: visible;
	/* 2 */
}

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */

pre {
	font-family: monospace, monospace;
	/* 1 */
	font-size: 1em;
	/* 2 */
}

/* Text-level semantics
	 ========================================================================== */

/**
   * Remove the gray background on active links in IE 10.
   */

a {
	background-color: transparent;
}

/**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */

abbr[title] {
	border-bottom: none;
	/* 1 */
	text-decoration: underline;
	/* 2 */
	text-decoration: underline dotted;
	/* 2 */
}

/**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */

b,
strong {
	font-weight: bolder;
}

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */

code,
kbd,
samp {
	font-family: monospace, monospace;
	/* 1 */
	font-size: 1em;
	/* 2 */
}

/**
   * Add the correct font size in all browsers.
   */

small {
	font-size: 80%;
}

/**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
   * Remove the border on images inside links in IE 10.
   */

img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */

button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	/* 1 */
	font-size: 100%;
	/* 1 */
	line-height: 1.15;
	/* 1 */
	margin: 0;
	/* 2 */
}

/**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */

button,
input {
	/* 1 */
	overflow: visible;
}

/**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */

button,
select {
	/* 1 */
	text-transform: none;
}

/**
   * Correct the inability to style clickable types in iOS and Safari.
   */

button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
}

/**
   * Remove the inner border and padding in Firefox.
   */

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
   * Restore the focus styles unset by the previous rule.
   */

button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
   * Correct the padding in Firefox.
   */

fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */

legend {
	box-sizing: border-box;
	/* 1 */
	color: inherit;
	/* 2 */
	display: table;
	/* 1 */
	max-width: 100%;
	/* 1 */
	padding: 0;
	/* 3 */
	white-space: normal;
	/* 1 */
}

/**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */

progress {
	vertical-align: baseline;
}

/**
   * Remove the default vertical scrollbar in IE 10+.
   */

textarea {
	overflow: auto;
}

/**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */

[type='checkbox'],
[type='radio'] {
	box-sizing: border-box;
	/* 1 */
	padding: 0;
	/* 2 */
}

/**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
	height: auto;
}

/**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */

[type='search'] {
	-webkit-appearance: textfield;
	/* 1 */
	outline-offset: -2px;
	/* 2 */
}

/**
   * Remove the inner padding in Chrome and Safari on macOS.
   */

[type='search']::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */

::-webkit-file-upload-button {
	-webkit-appearance: button;
	/* 1 */
	font: inherit;
	/* 2 */
}

/* Interactive
	 ========================================================================== */

/*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */

details {
	display: block;
}

/*
   * Add the correct display in all browsers.
   */

summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
   * Add the correct display in IE 10+.
   */

template {
	display: none;
}

/**
   * Add the correct display in IE 10.
   */

[hidden] {
	display: none;
}

body {
	background: #222;
	color: #7A468D;
	font-family: 'Eczar', sans-serif;
	padding: 0;
	margin: 0;
	overflow-y: hidden;
	line-height: 1.5;
	height: 100vh;
	width: 100vw;
	text-align: center;
}

#wizard {
	max-width: 100vw;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2
}

#wizard #shadow ellipse {
	fill: #000;
}

h1 {
	font-size: 3em;
	margin: .5em auto 1em auto
}

h1 .level30 {
	font-weight: 900;
}

h1 .wizards {
	font-weight: 300;
}

@media (min-width: 48rem) {

	h1 {
		font-size: 5em;
	}
}

ul {
	padding: 0;
	list-style: none;
}

.magic {
	font-size: 2em;
}

.contact {
	margin: 2em 0
}

.contact a {
	color: cyan;
}

.card-holder {
	display: flex;
	// justify-content: space-around;
	// align-items: center;
	flex-flow: column wrap;
	width: 100%;
	// position: absolute;
	// top: 15%;
	// z-index: 1;
  &::-webkit-scrollbar { 
    // display: none; 
  }
}

@media (min-width: 30rem) {
	.card-holder {
		flex-flow: row wrap;
		// left: 50%;
		// transform: translate(-50%, -50%);
    overflow-x: scroll;
	}
}

.card-container {
	// width: 90%;
	// min-width: 20rem;
	color: #ececec;
	text-align: left;
	font-size: 1.2rem;
  display: flex;
  width: auto;
}

// @media (min-width: 30rem) {

// 	.card-container {
// 		width: 40vw;
// 		height: 20vh;
// 	}
// }

.card-container .link {
	color: #6e3ffe;
}

.card-container li {
	padding-left: 1rem;
}

.card-container li::before {
	content: '- ';
}

.card-container .shadow {
	width: 100%;
	height: 10%;
	background-color: black;
	opacity: .1;
	position: absolute;
	bottom: -50%;
}

.card-container h2 {
	font-size: 2.5rem;
}

.card-container .card {
  min-width: 70vw;
  min-height: 30vh;
  margin: 5vw;
  padding: 15vh 5vh;
	background-color: white;
	background-image: url('https://potterversecon.com/wp-content/uploads/2018/02/magic-101.jpg');
	text-decoration: none;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
}

@media (max-width: 30rem) {

	.card-container .card {
		z-index: 2;
	}

	.card-container .card:nth-of-type(2) {
		z-index: 1;
		position: absolute;
		top: 4rem;
		transform: scale(.8) !important;
	}
}

:root {
	--red: blue;
}

.loader {
  width: 100vw;
  height: 100%;
  background-color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99999;
  pointer-events: none;
  p {
    font-size: 4rem;
  }
}
            
          
!
            
              const shadow = document.querySelector('#shadow')
const hair = document.querySelector('#hair')
const torso = document.querySelector('#torso')
const hands = document.querySelector('#hands')
const face = document.querySelector('#face')
const beard = document.querySelector('#beard')
const hat = document.querySelector('#hat')
const staff = document.querySelector('#staff')
const leftHand = document.querySelector('#left')
const content = document.querySelectorAll('.card-holder')
const title = document.querySelector('h1')
const merlinSvg = document.querySelectorAll('#Merlin path, #Merlin circle, #Merlin polygon')

const wizardComponents = []
wizardComponents.push( torso, hands, face, hair, beard, staff)

wizardComponents.forEach( comp => {
    comp.setAttribute('data-animate', '')
})

const setTl = new TimelineMax({paused: true})
setTl
  .set('#Merlin', { 
    autoAlpha: 0,
    width: window.innerWidth, 
    height: window.innerHeight 
  }, 0)
  .set(title, {
    transformOrigin: '50% bottom',
    y: '-200%',
    autoAlpha: 0,
    ease:Power2.easeOut,                     
  })
  .set(content, {
    autoAlpha: 0,
    y: '200%',
    transformOrigin: '50% bottom'
  }, 0)
  .set('#merlin-holder', {
    scale: 0.5, 
    transformOrigin: 'bottom' 
  }, 0)
  .set('#tap #tap-circle', {
    autoAlpha: 0,
    scale: 0,
    transformOrigin: '50% 50%',
    stroke: '#111',
    fill: '#111'
  }, 0)
  .set(hat, {
    y: -500,
    autoAlpha:0,
  }, 0)
  .play()
  .eventCallback( 'onComplete', () => {
    TweenMax.to('.loader', .2, {
      autoAlpha: 0,
      onComplete: () => {
        animateWizard()
      }
    })
  })

function animateWizard() {
	const animatable = document.querySelectorAll('[data-animate]')
	const whirlWindPaths = document.querySelectorAll('#whirlwind path')

	TweenMax.globalTimeScale(.75)

	const summonTl = new TimelineMax({paused: true});
	const merlinFlyIn = new TimelineMax({delay: 1.5, paused: true})
	const merlinFlyOut = new TimelineMax({paused: true})
	const whirlWind = new TimelineMax({paused: true});
	
	merlinFlyIn.set('#Merlin', {
		autoAlpha: 1,
	}, 0)
  merlinFlyIn.to(title, 1,{
		y: '0%',
		autoAlpha: 1,
	}, 0)
	merlinFlyIn.from(animatable, 1, {   
		transformOrigin: '50% top',
		y: -(window.innerHeight + 300),
		scale: 0.2, 
		ease: Quad.easeOut,
	}, 1);
	merlinFlyIn.fromTo(shadow, 1, {
		transformOrigin: '50% 50%',
		scale: 0,
		opacity: 0,
	},{
		transformOrigin: '50% 50%',
		opacity: 0.3,
		scale: 0.8,
	}, .1)

	summonTl.to([staff, leftHand], 1, {
		y: '-50rem'
	}, .1)
	summonTl.to('#tap #tap-circle', 1, {
		autoAlpha: .5,
		transformOrigin: '50% 50%',
		scale: 1.5
	}, .1)
	summonTl.to([staff, leftHand], .2, {
		y: 0,
		ease: Quad.easeIn
	})
	summonTl.to('#tap #tap-circle', .2, {
		delay: -.1,
		autoAlpha: 0,
		scale: 0
	})
	summonTl.to(title, .2, {
		autoAlpha: 0,
    display: 'none'
	})
	summonTl.to(content, .6, {
		y: '0%',
		autoAlpha: 1,
		ease: Cubic.easeOut
	})
	summonTl.to([staff, leftHand], 0.2, {
		y: '-40rem',
    transformOrigin: '50% 50%',
    rotation: '-3deg',
    rotateX: '10deg',
    ease: Quad.easeInOut
	})
	summonTl.to([staff, leftHand], 0.2, {
    rotation: '3deg',
    rotateX: '0deg',
    ease: Quad.easeInOut
	})
	summonTl.to([staff, leftHand], 0.2, {
    rotation: '-3deg',
    rotateX: '10deg',
    ease: Quad.easeInOut
	})
	summonTl.to([staff, leftHand], 0.2, {
    rotation: '3deg',
    rotateX: '0deg',
    ease: Quad.easeInOut
	})
	summonTl.to([staff, leftHand], 0.2, {
    rotation: '0deg',
    ease: Quad.easeInOut
	})

	const wwDur = .05
	whirlWindPaths.forEach( wwPath => {
		whirlWind.fromTo(wwPath, wwDur, {
			ease: Power1.easeInOut,
			drawSVG: '0% 0%',
		}, {
			drawSVG: '100% 0%',
		})
	})
	
	whirlWind.to(whirlWindPaths, .3, {
		ease: Power1.easeInOut,
		autoAlpha: 0,
	})

	merlinFlyOut.to(animatable, .75, {   
		transformOrigin: '50% top',
		y: -(window.innerHeight + 300),
		scale: 0.2, 
		ease: Quad.easeIn,
	}, 0);
	merlinFlyOut.to(hat, .75, {   
		transformOrigin: '50% top',
		y: -(window.innerHeight + 400),
		scale: 0.2, 
		ease: Quad.easeIn,
	}, 0);
	merlinFlyOut.to(shadow, .75, {
		transformOrigin: '50% 50%',
		scale: 0,
		opacity: 0,
		ease: Quad.easeIn,
	}, 0)


// Start animation
  merlinFlyIn
    .play()
    .eventCallback( 'onComplete', () => {
      TweenMax.to(hat, 0.2, {
        autoAlpha:1,
      })
      TweenMax.to(hat, 0.75, {
        y: 15,
        ease: Power4.easeOut,
        transformOrigin: 'right bottom',
        force3D:true,
      })
      summonTl.play().eventCallback( 'onComplete', () => {
			  whirlWind.play()
        TweenMax.delayedCall((wwDur * whirlWindPaths.length), () => {  
          whirlWind.reverse().timeScale(3.5)
          merlinFlyOut
            .play()
            .eventCallback( 'onComplete', () => {
              document.querySelector('#wizard').style.zIndex = "-1"
              addHoverPerspectiveAnimation()
            })
         });
        })
    })
}

let mouseOutTween;// set on mouse-out

function addHoverPerspectiveAnimation() {
  const cards = document.querySelectorAll('.card')
  TweenMax.set(cards, { transformStyle: "preserve-3d", transformPerspective: 800 });

  cards.forEach( card => {
    card.addEventListener('click', function (e) {
      let rect = card.getBoundingClientRect(),
        x = e.clientX - rect.left,
        y = e.clientY - rect.top,
        hit = { x: x, y: y, radius: 1, alpha: 1 };

      TweenMax.to(hit, 0.5, { radius: 200, alpha: 0, ease: Power1.easeOut });

    });

    card.addEventListener('mousemove', function (e) {
      let rect = card.getBoundingClientRect(),
        x = e.clientX - rect.left,
        y = e.clientY - rect.top,
        rx = -(y / rect.height) + 0.5,
        ry = (x / rect.width) - 0.5,
        rMax = 30;

      TweenMax.to(card, 0.1, { rotationX: rx * rMax, rotationY: ry * rMax });
    });

    card.addEventListener('mouseout', function (e) {
      if (mouseOutTween) mouseOutTween.kill();
      mouseOutTween = TweenMax.to(card, 0.25, { delay: 0.25, rotationX: 0, rotationY: 0 });
    });
  } ) 
}
ScrollToPlugin
let scrollValue = 0;
let contentWidth = document.querySelector('.card-container').getBoundingClientRect().width - window.innerWidth
function replaceVerticalScrollByHorizontal(event) {
  console.log(event)
  if (event.deltaY !== 0) {
    // manually scroll horizonally instead
    // TweenMax.to('.card-holder', 1, {
    //   scrollTo: {
    //     x: `+=${event.deltaY}`,
    //     y: 0,
    //   }
    // })
    console.log(scrollValue, contentWidth)
    if((scrollValue <= 0 && event.deltaY < 0) || (scrollValue >= contentWidth && event.deltaY > 0)){
      return
    }
    else {
      scrollValue += event.deltaY
      content[0].scrollTo({
        top: 0,
        left: scrollValue,
        behavior: 'auto'
      });
    }
    
    // prevent vertical scroll
    event.preventDefault();
  }
  return;
}

window.addEventListener('wheel', replaceVerticalScrollByHorizontal);
            
          
!
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.

Console