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.

            
              <div class="top__rect">
  <svg width="189px" height="19px" viewBox="0 0 189 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Home" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-70.000000, -14.000000)">
        <path d="M76.8027344,28.2197266 C75.0214755,28.2197266 73.6020561,27.6279356 72.5444336,26.4443359 C71.4868111,25.2607363 70.9580078,23.7226657 70.9580078,21.8300781 C70.9580078,19.8203025 71.5014594,18.2104553 72.5883789,17.0004883 C73.6752984,15.7905213 75.1591703,15.1855469 77.0400391,15.1855469 C78.7392663,15.1855469 80.1147408,15.767084 81.1665039,16.9301758 C82.218267,18.0932675 82.7441406,19.6181546 82.7441406,21.5048828 C82.7441406,23.5908307 82.2050835,25.2314393 81.1269531,26.4267578 C80.0488227,27.6220763 78.6074309,28.2197266 76.8027344,28.2197266 Z M76.890625,15.9765625 C75.4257739,15.9765625 74.2202196,16.5068306 73.2739258,17.5673828 C72.327632,18.627935 71.8544922,20.016593 71.8544922,21.7333984 C71.8544922,23.4677821 72.3027299,24.849116 73.1992188,25.8774414 C74.0957076,26.9057669 75.2910082,27.4199219 76.7851562,27.4199219 C78.3437578,27.4199219 79.5771439,26.9116262 80.4853516,25.8950195 C81.3935592,24.8784129 81.8476562,23.4619231 81.8476562,21.6455078 C81.8476562,19.8642489 81.403813,18.4741261 80.5161133,17.4750977 C79.6284135,16.4760692 78.4199295,15.9765625 76.890625,15.9765625 Z M89.0810547,15.5283203 C88.8642567,15.3583976 88.536135,15.2734375 88.0966797,15.2734375 C86.9892523,15.2734375 86.4355469,16.0175707 86.4355469,17.5058594 L86.4355469,19 L88.8173828,19 L88.8173828,19.7382812 L86.4355469,19.7382812 L86.4355469,28 L85.6269531,28 L85.6269531,19.7382812 L84.0097656,19.7382812 L84.0097656,19 L85.6269531,19 L85.6269531,17.4355469 C85.6269531,16.4863234 85.8657203,15.7656275 86.3432617,15.2734375 C86.8208032,14.7812475 87.4169886,14.5351562 88.1318359,14.5351562 C88.5126972,14.5351562 88.8291003,14.5908198 89.0810547,14.7021484 L89.0810547,15.5283203 Z M94.046875,15.5283203 C93.830077,15.3583976 93.5019553,15.2734375 93.0625,15.2734375 C91.9550726,15.2734375 91.4013672,16.0175707 91.4013672,17.5058594 L91.4013672,19 L93.7832031,19 L93.7832031,19.7382812 L91.4013672,19.7382812 L91.4013672,28 L90.5927734,28 L90.5927734,19.7382812 L88.9755859,19.7382812 L88.9755859,19 L90.5927734,19 L90.5927734,17.4355469 C90.5927734,16.4863234 90.8315406,15.7656275 91.309082,15.2734375 C91.7866235,14.7812475 92.3828089,14.5351562 93.0976562,14.5351562 C93.4785175,14.5351562 93.7949206,14.5908198 94.046875,14.7021484 L94.046875,15.5283203 Z M95.4707031,16.7324219 C95.294921,16.7324219 95.1396491,16.6679694 95.0048828,16.5390625 C94.8701165,16.4101556 94.8027344,16.2460947 94.8027344,16.046875 C94.8027344,15.8535147 94.8715813,15.6967779 95.0092773,15.5766602 C95.1469733,15.4565424 95.3007804,15.3964844 95.4707031,15.3964844 C95.6523447,15.3964844 95.812011,15.4550775 95.949707,15.5722656 C96.087403,15.6894537 96.15625,15.8476553 96.15625,16.046875 C96.15625,16.2343759 96.0888679,16.3955071 95.9541016,16.5302734 C95.8193353,16.6650397 95.6582041,16.7324219 95.4707031,16.7324219 Z M95.0751953,28 L95.0751953,19 L95.8837891,19 L95.8837891,28 L95.0751953,28 Z M104.59375,27.6044922 C103.925778,28.0146505 103.128911,28.2197266 102.203125,28.2197266 C100.97851,28.2197266 99.9912147,27.7993206 99.2412109,26.9584961 C98.4912072,26.1176716 98.1162109,25.0175849 98.1162109,23.6582031 C98.1162109,22.2285085 98.5380817,21.05811 99.3818359,20.1469727 C100.22559,19.2358353 101.309564,18.7802734 102.633789,18.7802734 C103.319339,18.7802734 103.984372,18.920897 104.628906,19.2021484 L104.628906,20.1162109 C103.984372,19.7177714 103.278324,19.5185547 102.510742,19.5185547 C101.456049,19.5185547 100.600589,19.8979454 99.9443359,20.6567383 C99.2880827,21.4155311 98.9599609,22.3984315 98.9599609,23.6054688 C98.9599609,24.7714902 99.2602509,25.7089808 99.8608398,26.4179688 C100.461429,27.1269567 101.253901,27.4814453 102.238281,27.4814453 C103.14063,27.4814453 103.925778,27.2412133 104.59375,26.7607422 L104.59375,27.6044922 Z M106.949219,23.5351562 C106.949219,24.7714906 107.23486,25.7382778 107.806152,26.4355469 C108.377444,27.132816 109.161128,27.4814453 110.157227,27.4814453 C111.165044,27.4814453 112.149409,27.1093787 113.110352,26.3652344 L113.110352,27.2265625 C112.178706,27.8886752 111.138678,28.2197266 109.990234,28.2197266 C108.830072,28.2197266 107.892582,27.8037151 107.177734,26.9716797 C106.462887,26.1396443 106.105469,24.9648513 106.105469,23.4472656 C106.105469,22.1347591 106.479,21.0288131 107.226074,20.1293945 C107.973148,19.229976 108.94433,18.7802734 110.139648,18.7802734 C111.258795,18.7802734 112.117185,19.1728476 112.714844,19.9580078 C113.312503,20.743168 113.611328,21.8154229 113.611328,23.1748047 L113.611328,23.5351562 L106.949219,23.5351562 Z M112.767578,22.796875 C112.732422,21.7597604 112.483401,20.9541044 112.020508,20.3798828 C111.557615,19.8056612 110.918949,19.5185547 110.104492,19.5185547 C109.260738,19.5185547 108.562014,19.8012667 108.008301,20.3666992 C107.454587,20.9321317 107.113282,21.7421822 106.984375,22.796875 L112.767578,22.796875 Z M120.34375,27.5517578 L120.34375,26.6289062 C121.304692,27.1972685 122.209957,27.4814453 123.05957,27.4814453 C124.073247,27.4814453 124.867185,27.2221706 125.441406,26.7036133 C126.015628,26.185056 126.302734,25.5068401 126.302734,24.6689453 C126.302734,23.7373 125.973148,23.0312524 125.313965,22.5507812 C124.654782,22.0703101 123.715826,21.8300781 122.49707,21.8300781 L121.530273,21.8300781 L121.530273,21.0917969 L122.391602,21.0917969 C123.516607,21.0917969 124.373532,20.8530297 124.962402,20.3754883 C125.551272,19.8979468 125.845703,19.2226606 125.845703,18.3496094 C125.845703,17.5937462 125.631838,17.0004904 125.204102,16.5698242 C124.776365,16.139158 124.152348,15.9238281 123.332031,15.9238281 C122.541012,15.9238281 121.711918,16.199216 120.844727,16.75 L120.844727,15.8886719 C121.79395,15.4199195 122.664059,15.1855469 123.455078,15.1855469 C124.451177,15.1855469 125.24072,15.4550754 125.82373,15.9941406 C126.406741,16.5332058 126.698242,17.2480424 126.698242,18.1386719 C126.698242,19.8437585 125.880868,20.9277321 124.246094,21.390625 L124.246094,21.4257812 C125.125004,21.5136723 125.828122,21.8403292 126.355469,22.4057617 C126.882815,22.9711942 127.146484,23.684566 127.146484,24.5458984 C127.146484,25.6474664 126.765629,26.5351529 126.003906,27.2089844 C125.242184,27.8828159 124.254889,28.2197266 123.041992,28.2197266 C122.104488,28.2197266 121.205082,27.9970725 120.34375,27.5517578 Z M136.418945,15.4931641 L136.418945,16.3544922 C135.821286,16.0673814 135.203128,15.9238281 134.564453,15.9238281 C133.937497,15.9238281 133.375002,16.0776352 132.876953,16.3852539 C132.378904,16.6928726 131.954103,17.1249972 131.602539,17.6816406 C131.250975,18.238284 130.981446,18.9018516 130.793945,19.6723633 C130.606444,20.4428749 130.512695,21.2939407 130.512695,22.2255859 L130.547852,22.2255859 C131.163089,20.8193289 132.214836,20.1162109 133.703125,20.1162109 C134.218753,20.1162109 134.687498,20.2158193 135.109375,20.4150391 C135.531252,20.6142588 135.893065,20.8896467 136.194824,21.2412109 C136.496584,21.5927752 136.729491,22.0043922 136.893555,22.4760742 C137.057618,22.9477563 137.139648,23.456052 137.139648,24.0009766 C137.139648,24.6103546 137.047364,25.172849 136.862793,25.6884766 C136.678222,26.2041041 136.418947,26.6494122 136.084961,27.0244141 C135.750975,27.3994159 135.354006,27.6923818 134.894043,27.9033203 C134.43408,28.1142589 133.928714,28.2197266 133.37793,28.2197266 C132.797849,28.2197266 132.279299,28.0952161 131.822266,27.8461914 C131.365232,27.5971667 130.978517,27.2309594 130.662109,26.7475586 C130.345702,26.2641577 130.104005,25.6635778 129.937012,24.9458008 C129.770019,24.2280238 129.686523,23.403325 129.686523,22.4716797 C129.686523,21.3701117 129.794921,20.3710982 130.011719,19.4746094 C130.228517,18.5781205 130.546385,17.8120149 130.965332,17.1762695 C131.384279,16.5405242 131.89697,16.0498064 132.503418,15.7041016 C133.109866,15.3583967 133.80273,15.1855469 134.582031,15.1855469 C135.273441,15.1855469 135.88574,15.2880849 136.418945,15.4931641 Z M133.518555,20.8544922 C133.102537,20.8544922 132.717287,20.9409171 132.362793,21.1137695 C132.008299,21.286622 131.70215,21.5151353 131.444336,21.7993164 C131.186522,22.0834975 130.984376,22.4072247 130.837891,22.7705078 C130.691406,23.1337909 130.618164,23.5029278 130.618164,23.8779297 C130.618164,24.3584008 130.685546,24.8168923 130.820312,25.253418 C130.955079,25.6899436 131.145507,26.072264 131.391602,26.4003906 C131.637697,26.7285173 131.935057,26.9907217 132.283691,27.1870117 C132.632326,27.3833018 133.020506,27.4814453 133.448242,27.4814453 C133.852541,27.4814453 134.229002,27.3979501 134.577637,27.230957 C134.926271,27.063964 135.226561,26.832521 135.478516,26.5366211 C135.73047,26.2407212 135.928222,25.890627 136.071777,25.4863281 C136.215333,25.0820292 136.287109,24.6425805 136.287109,24.1679688 C136.287109,23.6757788 136.224122,23.2260763 136.098145,22.8188477 C135.972167,22.4116191 135.789064,22.0629897 135.548828,21.7729492 C135.308593,21.4829087 135.017092,21.257325 134.674316,21.0961914 C134.331541,20.9350578 133.946291,20.8544922 133.518555,20.8544922 Z M139.28418,27.7451172 L139.28418,26.8134766 C140.092777,27.2587913 140.895504,27.4814453 141.692383,27.4814453 C142.723638,27.4814453 143.529294,27.1972685 144.109375,26.6289062 C144.689456,26.060544 144.979492,25.3046922 144.979492,24.3613281 C144.979492,22.3105366 143.810559,21.2851562 141.472656,21.2851562 C140.94531,21.2851562 140.3418,21.3203121 139.662109,21.390625 L140.040039,15.3964844 L145.287109,15.3964844 L145.287109,16.1347656 L140.760742,16.1347656 L140.470703,20.6171875 C141.074222,20.5703123 141.507811,20.546875 141.771484,20.546875 C143.101569,20.546875 144.109372,20.8735319 144.794922,21.5268555 C145.480472,22.180179 145.823242,23.0898379 145.823242,24.2558594 C145.823242,25.4335996 145.459965,26.3886682 144.733398,27.1210938 C144.006832,27.8535193 142.969733,28.2197266 141.62207,28.2197266 C140.7373,28.2197266 139.958011,28.061525 139.28418,27.7451172 Z M158.628906,32.2275391 L158.628906,14.2275391 L159.463867,14.2275391 L159.463867,32.2275391 L158.628906,32.2275391 Z M183.484375,28 L183.484375,19.0527344 C183.484375,18.8359364 183.516601,18.2177785 183.581055,17.1982422 L183.545898,17.1982422 C183.364257,17.6728539 183.211915,18.0390612 183.088867,18.296875 L178.606445,28 L178.325195,28 L173.825195,18.3496094 C173.67871,18.0390609 173.541016,17.6435571 173.412109,17.1630859 L173.368164,17.1630859 C173.40918,17.7255888 173.429688,18.2851535 173.429688,18.8417969 L173.429688,28 L172.55957,28 L172.55957,15.3964844 L173.368164,15.3964844 L178.070312,25.5478516 C178.09961,25.6064456 178.131836,25.6855464 178.166992,25.7851562 C178.202149,25.8847661 178.240234,25.9843745 178.28125,26.0839844 C178.339844,26.2363289 178.401367,26.4062491 178.46582,26.59375 L178.518555,26.59375 L178.615234,26.3125 C178.621094,26.2890624 178.720702,26.0107449 178.914062,25.4775391 L183.545898,15.3964844 L184.319336,15.3964844 L184.319336,28 L183.484375,28 Z M189.575195,29.8369141 C189.247069,30.6455119 188.883791,31.2460918 188.485352,31.6386719 C188.086912,32.031252 187.574222,32.2275391 186.947266,32.2275391 C186.683592,32.2275391 186.44922,32.1865238 186.244141,32.1044922 L186.244141,31.2958984 C186.455079,31.3779301 186.70117,31.4189453 186.982422,31.4189453 C187.703129,31.4189453 188.271482,30.9209034 188.6875,29.9248047 L189.522461,27.9296875 L186.112305,19 L187.017578,19 L189.733398,26.3300781 C189.791992,26.488282 189.833008,26.608398 189.856445,26.6904297 C189.879883,26.8017584 189.90625,26.9013667 189.935547,26.9892578 L189.970703,26.9892578 L190.181641,26.3828125 L193.082031,19 L193.960938,19 L189.575195,29.8369141 Z M203.918945,28 L202.477539,24.0800781 L197.010742,24.0800781 L195.569336,28 L194.611328,28 L199.366211,15.3964844 L200.192383,15.3964844 L204.894531,28 L203.918945,28 Z M200.051758,17.453125 C199.987304,17.2773429 199.934571,17.104493 199.893555,16.9345703 C199.852539,16.7880852 199.808594,16.6416023 199.761719,16.4951172 L199.726562,16.4951172 C199.626953,16.8818379 199.530274,17.1953113 199.436523,17.4355469 L197.318359,23.2802734 L202.178711,23.2802734 L200.051758,17.453125 Z M212.97168,28 L212.97168,22.7617188 C212.97168,20.5995986 212.192391,19.5185547 210.633789,19.5185547 C209.766597,19.5185547 209.05469,19.8364226 208.498047,20.472168 C207.941403,21.1079133 207.663086,21.8945266 207.663086,22.8320312 L207.663086,28 L206.854492,28 L206.854492,19 L207.663086,19 L207.663086,20.6347656 L207.698242,20.6347656 C208.354495,19.3984313 209.379876,18.7802734 210.774414,18.7802734 C211.747075,18.7802734 212.491208,19.1040007 213.006836,19.7514648 C213.522464,20.398929 213.780273,21.3232362 213.780273,22.5244141 L213.780273,28 L212.97168,28 Z M221.866211,28 L221.866211,26.1982422 L221.831055,26.1982422 C221.543944,26.8134796 221.126468,27.3041974 220.578613,27.6704102 C220.030759,28.0366229 219.422855,28.2197266 218.754883,28.2197266 C217.89941,28.2197266 217.222659,27.9794946 216.724609,27.4990234 C216.22656,27.0185523 215.977539,26.412113 215.977539,25.6796875 C215.977539,24.1093671 217.017568,23.1601579 219.097656,22.8320312 L221.866211,22.4189453 C221.866211,20.4853419 221.139656,19.5185547 219.686523,19.5185547 C218.696284,19.5185547 217.732427,19.9169882 216.794922,20.7138672 L216.794922,19.7382812 C217.128908,19.4746081 217.58154,19.2490244 218.152832,19.0615234 C218.724124,18.8740225 219.261716,18.7802734 219.765625,18.7802734 C220.691411,18.7802734 221.407712,19.0673799 221.914551,19.6416016 C222.421389,20.2158232 222.674805,21.0507758 222.674805,22.1464844 L222.674805,28 L221.866211,28 Z M219.387695,23.5175781 C218.444331,23.6523444 217.782228,23.870604 217.401367,24.1723633 C217.020506,24.4741226 216.830078,24.9648404 216.830078,25.6445312 C216.830078,26.177737 217.007322,26.6171858 217.361816,26.9628906 C217.71631,27.3085955 218.209958,27.4814453 218.842773,27.4814453 C219.709965,27.4814453 220.430661,27.1606477 221.004883,26.519043 C221.579104,25.8774382 221.866211,25.0498098 221.866211,24.0361328 L221.866211,23.1572266 L219.387695,23.5175781 Z M225.381836,28 L225.381836,14.6757812 L226.19043,14.6757812 L226.19043,28 L225.381836,28 Z M231.270508,29.8369141 C230.942381,30.6455119 230.579104,31.2460918 230.180664,31.6386719 C229.782225,32.031252 229.269534,32.2275391 228.642578,32.2275391 C228.378905,32.2275391 228.144532,32.1865238 227.939453,32.1044922 L227.939453,31.2958984 C228.150392,31.3779301 228.396483,31.4189453 228.677734,31.4189453 C229.398441,31.4189453 229.966795,30.9209034 230.382812,29.9248047 L231.217773,27.9296875 L227.807617,19 L228.712891,19 L231.428711,26.3300781 C231.487305,26.488282 231.52832,26.608398 231.551758,26.6904297 C231.575195,26.8017584 231.601562,26.9013667 231.630859,26.9892578 L231.666016,26.9892578 L231.876953,26.3828125 L234.777344,19 L235.65625,19 L231.270508,29.8369141 Z M240.789062,27.8769531 C240.367185,28.0761729 239.971682,28.1757812 239.602539,28.1757812 C238.272454,28.1757812 237.607422,27.3789142 237.607422,25.7851562 L237.607422,19.7382812 L235.990234,19.7382812 L235.990234,19 L237.607422,19 L237.607422,16.6621094 C237.736329,16.6152341 237.871093,16.5683596 238.011719,16.5214844 C238.152344,16.4804685 238.287109,16.4365237 238.416016,16.3896484 L238.416016,19 L240.789062,19 L240.789062,19.7382812 L238.416016,19.7382812 L238.416016,25.6796875 C238.416016,26.3007844 238.514159,26.7504869 238.710449,27.0288086 C238.906739,27.3071303 239.239255,27.4462891 239.708008,27.4462891 C240.041994,27.4462891 240.402342,27.3378917 240.789062,27.1210938 L240.789062,27.8769531 Z M242.96875,16.7324219 C242.792968,16.7324219 242.637696,16.6679694 242.50293,16.5390625 C242.368163,16.4101556 242.300781,16.2460947 242.300781,16.046875 C242.300781,15.8535147 242.369628,15.6967779 242.507324,15.5766602 C242.64502,15.4565424 242.798827,15.3964844 242.96875,15.3964844 C243.150392,15.3964844 243.310058,15.4550775 243.447754,15.5722656 C243.58545,15.6894537 243.654297,15.8476553 243.654297,16.046875 C243.654297,16.2343759 243.586915,16.3955071 243.452148,16.5302734 C243.317382,16.6650397 243.156251,16.7324219 242.96875,16.7324219 Z M242.573242,28 L242.573242,19 L243.381836,19 L243.381836,28 L242.573242,28 Z M252.091797,27.6044922 C251.423825,28.0146505 250.626958,28.2197266 249.701172,28.2197266 C248.476556,28.2197266 247.489262,27.7993206 246.739258,26.9584961 C245.989254,26.1176716 245.614258,25.0175849 245.614258,23.6582031 C245.614258,22.2285085 246.036129,21.05811 246.879883,20.1469727 C247.723637,19.2358353 248.807611,18.7802734 250.131836,18.7802734 C250.817386,18.7802734 251.482419,18.920897 252.126953,19.2021484 L252.126953,20.1162109 C251.482419,19.7177714 250.776371,19.5185547 250.008789,19.5185547 C248.954096,19.5185547 248.098636,19.8979454 247.442383,20.6567383 C246.78613,21.4155311 246.458008,22.3984315 246.458008,23.6054688 C246.458008,24.7714902 246.758298,25.7089808 247.358887,26.4179688 C247.959476,27.1269567 248.751948,27.4814453 249.736328,27.4814453 C250.638676,27.4814453 251.423825,27.2412133 252.091797,26.7607422 L252.091797,27.6044922 Z M253.788086,27.6044922 L253.788086,26.6289062 C254.092775,26.8925794 254.461912,27.1005852 254.895508,27.2529297 C255.329104,27.4052742 255.7041,27.4814453 256.020508,27.4814453 C257.432624,27.4814453 258.138672,26.9043026 258.138672,25.75 C258.138672,25.3515605 257.9834,25.0117202 257.672852,24.7304688 C257.362303,24.4492173 256.858402,24.1591812 256.161133,23.8603516 C255.2998,23.4853497 254.694826,23.09717 254.346191,22.6958008 C253.997557,22.2944316 253.823242,21.8066435 253.823242,21.2324219 C253.823242,20.4999963 254.103025,19.9082054 254.662598,19.4570312 C255.222171,19.0058571 255.912105,18.7802734 256.732422,18.7802734 C257.505863,18.7802734 258.167966,18.938475 258.71875,19.2548828 L258.71875,20.1689453 C258.050778,19.7353494 257.359379,19.5185547 256.644531,19.5185547 C256.052731,19.5185547 255.575197,19.6723617 255.211914,19.9799805 C254.848631,20.2875992 254.666992,20.6874975 254.666992,21.1796875 C254.666992,21.607424 254.781249,21.9545885 255.009766,22.2211914 C255.238282,22.4877943 255.742184,22.7939436 256.521484,23.1396484 C257.458989,23.5615255 258.103514,23.9526349 258.455078,24.3129883 C258.806642,24.6733416 258.982422,25.1523408 258.982422,25.75 C258.982422,26.4648473 258.714358,27.0551735 258.178223,27.5209961 C257.642087,27.9868187 256.902348,28.2197266 255.958984,28.2197266 C255.091793,28.2197266 254.368167,28.0146505 253.788086,27.6044922 Z" id="Office-365-|-MyAnaly" fill="#FFFFFF"></path>
    </g>
</svg>
</div>
<div class="top__square">
</div>
<div class="nav__container">
  <div class="nav">
    <div class="nav__title">Nav</div>
    <div class="nav__button">
      <?xml version="1.0" encoding="UTF-8"?>
              <svg width="14px" height="8px" viewBox="0 0 14 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g id="Scroll-to-content-page" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-1288.000000, -306.000000)">
                  <polygon id="Page-1" fill="#000000" transform="translate(1295.137327, 310.263794) rotate(-90.000000) translate(-1295.137327, -310.263794) " points="1292.20862 303.598879 1291.40112 304.406375 1297.25922 310.263794 1291.40112 316.121214 1292.20862 316.92871 1298.87353 310.263794"></polygon>
                </g>
              </svg>
    </div>
  </div>
</div>
<main class="main">
<div class="box"></div>
<div class="box box__bigger"></div>
<div class="box box__bigger"></div>
<div class="box"></div>
<div class="box box__bigger"></div>
<div class="box box__bigger"></div>
  <div class="box"></div>
<div class="box box__bigger"></div>
<div class="box box__bigger"></div>
  <div class="box"></div>
<div class="box box__bigger"></div>
<div class="box box__bigger"></div>
  <div class="box"></div>
<div class="box box__bigger"></div>
<div class="box box__bigger"></div>
</main>
            
          
!
            
              html,body{
  background:#EDF4F5;
}

.top__square{
  width:50px;
  height:50px;
  background:#4A90E2;
  position:fixed;
  top:0px;
  left:0px;
}
.top__rect{
  width:100vw;
  height:50px;
  background:#000000;
  position:fixed;
  top:0px;
  left:0px;
  svg{
    position:relative;
    top:17px;
    left:65px;
    transform:rotate(0deg);
    transition:height 0.4s cubic-bezier(0.17,0.67,0.32,0.98);
    transform-origin: 50% 50%;
  }
}

.nav__container{
  width:100vw;
  height:300px;
  display: flex;
  justify-content: center;
  position:fixed;
  top:50px;
  z-index:1000;
}
.nav{
  margin-top:110px;
  width:90vw;
  height:150px;
  background:white;
  border-radius:0px 0px 6px 6px;
  box-shadow:1px 1px 3px 0px rgba(0,0,0,0.2);
  position:relative;
  transition:height 0.2s cubic-bezier(0.17,0.67,0.32,0.98);
  &:before{
    content:"";
    width:90vw;
    height:2px;
    background:#EDF4F5;
    position:absolute;
    top:54px;
    left:0px;
  }
}
.nav__height{
  height:50px;
  transition:height 0.2s cubic-bezier(0.17,0.67,0.32,0.98);
  &:before{
    height:0px;
  }
  & svg{
    transform:rotate(180deg);
    transition:transform 0.4s cubic-bezier(0.17,0.67,0.32,0.98);
    transform-origin: 50% 50%;
  }
}
  .nav__title{
    font-size:12px;
    font-family:"Roboto","Helvetica",sans-serif;
    position:relative;
    top:25px;
    font-weight:400;
    left:34px;
  }

  .nav__button{
    width:50px;
    height:50px;
    border-radius:100%;
    background:white;
    position:absolute;
    right:15px;
    bottom:-25px;
    box-shadow:0px 1px 2px 0px rgba(0,0,0,0.2);
    border:1px solid rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}
  


main{
  width:90vw;
  height:calc(100vh - 350px);
  //background:blue;
  position:absolute;
  top:340px;
  left:5vw;
  //box-shadow:0px 1px 2px 0px rgba(0,0,0,0.2);
  overflow:scroll;
  display: flex;
  flex-wrap:wrap;
  justify-content:space-between;
  transition:all 0.2s ease-in-out;
}

.box{
  margin-top:15px;
  min-width:280px;
  height:240px;
  background:white;
  box-shadow:0px 1px 2px 0px rgba(0,0,0,0.2);
  border-radius:6px;
  margin-bottom:0px;
  transition:all 0.2s ease-in-out;
}

.box__bigger{
  width:490px;
  height:312px;
}

.main__height{
  height:calc(100vh - 150px);
  top:240px;
}
            
          
!
            
              $('.nav__button').click(function() {
    $('.nav').toggleClass('nav__height');
    $('.main').toggleClass('main__height');
});
            
          
!
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