HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<main>
<div>
<svg width="636px" viewBox="-100 0 536 190" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="stroke-glow">
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feMorphology radius="1" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
<feOffset dx="0" dy="0" in="shadowInner" result="shadowInner"></feOffset>
<feComposite in="shadowOffsetOuter1" in2="shadowInner" operator="out" result="shadowOffsetOuter1"></feComposite>
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.793633078 0 0 0 0 0.184316773 0 0 0 0 0.184316773 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter2"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter2" result="shadowOffsetOuter2"></feOffset>
<feMorphology radius="1" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
<feOffset dx="0" dy="0" in="shadowInner" result="shadowInner"></feOffset>
<feComposite in="shadowOffsetOuter2" in2="shadowInner" operator="out" result="shadowOffsetOuter2"></feComposite>
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="shadowMatrixOuter2"></feMergeNode>
</feMerge>
</filter>
<path d="M213.248,144.368 L193.952,144.368 C196.544,138.992 201.248,133.712 205.472,126.8 C211.136,117.584 213.92,109.904 213.92,103.856 C213.92,102.8 213.824,101.552 213.632,100.112 L200.48,110.096 C200.96,110.48 201.344,110.864 201.536,111.344 C201.824,111.92 201.92,112.592 201.92,113.264 C201.92,117.872 199.136,123.728 194.528,131.312 C189.92,139.088 185.792,144.944 185.792,151.472 L185.792,152.144 C186.464,150.992 187.712,150.608 189.632,150.608 L213.248,150.608 L213.248,158.096 C213.248,162.704 212.096,164.816 208.064,165.776 L208.064,167.696 L233.312,167.696 L233.312,165.776 C229.28,164.816 228.128,162.704 228.128,158.096 L228.128,150.608 L232.352,150.608 C234.08,150.608 234.944,151.376 235.424,153.008 L238.016,140.528 C236,143.12 234.08,144.368 231.584,144.368 L228.128,144.368 L228.128,115.184 C228.128,110.96 228.704,105.392 229.856,98.384 L227.84,98 C225.92,109.04 220.832,115.856 213.248,118.064 L213.248,144.368 Z" id="error-3-4"></path>
<path d="M159.816,103.088 C173.544,103.088 183.816,115.664 183.816,135.92 C183.816,156.176 173.544,168.848 159.816,168.848 C146.088,168.848 135.816,156.272 135.816,135.92 C135.816,115.568 146.088,103.088 159.816,103.088 Z M159.816,109.04 C154.056,109.04 152.04,117.776 152.04,135.92 C152.04,154.064 154.056,162.8 159.816,162.8 C165.576,162.8 167.592,154.064 167.592,135.92 C167.592,117.776 165.576,109.04 159.816,109.04 Z" id="error-2-0"></path>
<path d="M107.456,144.368 L88.16,144.368 C90.752,138.992 95.456,133.712 99.68,126.8 C105.344,117.584 108.128,109.904 108.128,103.856 C108.128,102.8 108.032,101.552 107.84,100.112 L94.688,110.096 C95.168,110.48 95.552,110.864 95.744,111.344 C96.032,111.92 96.128,112.592 96.128,113.264 C96.128,117.872 93.344,123.728 88.736,131.312 C84.128,139.088 80,144.944 80,151.472 L80,152.144 C80.672,150.992 81.92,150.608 83.84,150.608 L107.456,150.608 L107.456,158.096 C107.456,162.704 106.304,164.816 102.272,165.776 L102.272,167.696 L127.52,167.696 L127.52,165.776 C123.488,164.816 122.336,162.704 122.336,158.096 L122.336,150.608 L126.56,150.608 C128.288,150.608 129.152,151.376 129.632,153.008 L132.224,140.528 C130.208,143.12 128.288,144.368 125.792,144.368 L122.336,144.368 L122.336,115.184 C122.336,110.96 122.912,105.392 124.064,98.384 L122.048,98 C120.128,109.04 115.04,115.856 107.456,118.064 L107.456,144.368 Z" id="error-1-4"></path>
<path d="M37.4817931,46.5 L37.4817931,39.6206897 C37.4817931,33.5862069 37.9645517,30.8103448 44.9645517,30.8103448 C55.705931,30.8103448 63.5507586,37.3275862 66.6886897,48.9137931 L68.2576552,48.6724138 L64.2748966,22 C62.8266207,23.5689655 60.7748966,24.0517241 57.7576552,24.0517241 L10.568,24.0517241 L10.568,27.4310345 C14.3093793,27.6724138 16.2404138,30.2068966 16.2404138,34.9137931 L16.2404138,92.9655172 C16.2404138,97.6724138 14.3093793,100.327586 10.568,100.568966 L10.568,103.948276 L55.3438621,103.948276 C60.6542069,103.948276 63.9128276,104.068966 65.4817931,106 L73.568,76.0689655 L72.3611034,75.7068966 C65.6024828,90.0689655 56.6714483,97.3103448 45.8093793,97.3103448 C37.6024828,97.3103448 37.4817931,93.5689655 37.4817931,85.6034483 L37.4817931,53.5 L40.6197241,53.5 C49.1886897,53.5 53.6542069,57.1206897 55.3438621,65.8103448 L56.7921379,65.8103448 L54.0162759,37.6896552 L52.568,37.6896552 C51.9645517,43.9655172 49.068,46.5 42.6714483,46.5 L37.4817931,46.5 Z" id="error-1-e"></path>
<path d="M77.384,24 L114.248,24 C124.232,24 129.224,27.072 129.224,33.792 C129.224,40.032 125.384,44.64 117.512,48.672 C124.616,58.176 127.976,69.12 131.912,80.256 C132.488,81.792 133.064,82.848 133.448,83.424 C134.216,84.384 135.176,84.768 136.52,84.864 L136.52,87.552 L111.848,87.552 L111.848,84.864 C113.672,84.768 114.536,83.712 114.536,81.696 C114.536,78.528 111.848,68.352 103.688,54.816 C102.152,55.488 100.616,55.872 98.792,56.256 L98.792,78.816 C98.792,82.656 100.232,84.672 103.208,84.864 L103.208,87.552 L77.384,87.552 L77.384,84.864 C80.36,84.672 81.896,82.56 81.896,78.816 L81.896,32.64 C81.896,28.896 80.36,26.88 77.384,26.688 L77.384,24 Z M98.792,49.92 C107.432,47.616 112.136,42.624 112.136,36.576 C112.136,32.256 109.64,29.856 105.128,29.856 C100.424,29.856 98.792,31.584 98.792,36 L98.792,49.92 Z" id="error-2-r"></path>
<path d="M140.072,24 L176.936,24 C186.92,24 191.912,27.072 191.912,33.792 C191.912,40.032 188.072,44.64 180.2,48.672 C187.304,58.176 190.664,69.12 194.6,80.256 C195.176,81.792 195.752,82.848 196.136,83.424 C196.904,84.384 197.864,84.768 199.208,84.864 L199.208,87.552 L174.536,87.552 L174.536,84.864 C176.36,84.768 177.224,83.712 177.224,81.696 C177.224,78.528 174.536,68.352 166.376,54.816 C164.84,55.488 163.304,55.872 161.48,56.256 L161.48,78.816 C161.48,82.656 162.92,84.672 165.896,84.864 L165.896,87.552 L140.072,87.552 L140.072,84.864 C143.048,84.672 144.584,82.56 144.584,78.816 L144.584,32.64 C144.584,28.896 143.048,26.88 140.072,26.688 L140.072,24 Z M161.48,49.92 C170.12,47.616 174.824,42.624 174.824,36.576 C174.824,32.256 172.328,29.856 167.816,29.856 C163.112,29.856 161.48,31.584 161.48,36 L161.48,49.92 Z" id="error-3-r"></path>
<path d="M192.744,56.6360024 C192.744,36.1880024 205.416,22.9400024 223.08,22.9400024 C240.456,22.9400024 251.976,35.1320024 251.976,55.7720024 C251.976,65.1800024 248.808,73.5320024 243.336,79.4840024 C237.96,85.3400024 230.28,88.7000024 222.408,88.7000024 C204.264,88.7000024 192.744,76.4120024 192.744,56.6360024 Z M221.544,28.8920024 C213.96,28.8920024 210.408,35.7080024 210.408,49.4360024 C210.408,71.5160024 214.44,82.4600024 222.984,82.4600024 C230.568,82.4600024 234.12,75.6440024 234.12,61.7240024 C234.12,39.7400024 230.088,28.8920024 221.544,28.8920024 Z" id="error-4-o"></path>
<path d="M252,24 L298.12987,24 C310.623377,24 316.87013,27.8187311 316.87013,36.1722054 C316.87013,43.929003 312.064935,49.6570997 302.214286,54.6691843 C311.103896,66.4833837 315.308442,80.0876133 320.233766,93.9305136 C320.954545,95.8398792 321.675325,97.152568 322.155844,97.8685801 C323.116883,99.0619335 324.318182,99.5392749 326,99.6586103 L326,103 L295.126623,103 L295.126623,99.6586103 C297.409091,99.5392749 298.49026,98.2265861 298.49026,95.7205438 C298.49026,91.7824773 295.126623,79.1329305 284.915584,62.3066465 C282.993506,63.141994 281.071429,63.6193353 278.788961,64.0966767 L278.788961,92.1404834 C278.788961,96.9138973 280.590909,99.4199396 284.314935,99.6586103 L284.314935,103 L252,103 L252,99.6586103 C255.724026,99.4199396 257.646104,96.7945619 257.646104,92.1404834 L257.646104,34.7401813 C257.646104,30.0861027 255.724026,27.5800604 252,27.3413897 L252,24 Z M278.788961,56.2205438 C289.600649,53.3564955 295.487013,47.1510574 295.487013,39.6329305 C295.487013,34.2628399 292.363636,31.2794562 286.717532,31.2794562 C280.831169,31.2794562 278.788961,33.4274924 278.788961,38.9169184 L278.788961,56.2205438 Z" id="error-5-r"></path>
<rect id="error-right" x="252" y="113" width="74" height="4"></rect>
<rect id="error-left" x="10" y="113" width="63" height="4"></rect>
<rect id="error-top" x="10" y="10" width="307" height="4"></rect>
</defs>
<g fill-rule="evenodd">
<g class="glow" fill="black" fill-opacity="1">
<use class="error-3-4" filter="url(#stroke-glow)" xlink:href="#error-3-4"></use>
<use class="error-2-0" filter="url(#stroke-glow)" xlink:href="#error-2-0"></use>
<use class="error-1-4" filter="url(#stroke-glow)" xlink:href="#error-1-4"></use>
<use class="error-1-e" filter="url(#stroke-glow)" xlink:href="#error-1-e"></use>
<use class="error-2-r" filter="url(#stroke-glow)" xlink:href="#error-2-r"></use>
<use class="error-3-r" filter="url(#stroke-glow)" xlink:href="#error-3-r"></use>
<use class="error-4-o" filter="url(#stroke-glow)" xlink:href="#error-4-o"></use>
<use class="error-5-r" filter="url(#stroke-glow)" xlink:href="#error-5-r"></use>
<use class="error-right" filter="url(#stroke-glow)" xlink:href="#error-right"></use>
<use class="error-left" filter="url(#stroke-glow)" xlink:href="#error-left"></use>
<use class="error-top" filter="url(#stroke-glow)" xlink:href="#error-top"></use>
</g>
<g class="top" fill="none" stroke="#FF0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<use class="error-3-4" xlink:href="#error-3-4"></use>
<use class="error-2-0" xlink:href="#error-2-0"></use>
<use class="error-1-4" xlink:href="#error-1-4"></use>
<use class="error-1-e" xlink:href="#error-1-e"></use>
<use class="error-2-r" xlink:href="#error-2-r"></use>
<use class="error-3-r" xlink:href="#error-3-r"></use>
<use class="error-4-o" xlink:href="#error-4-o"></use>
<use class="error-5-r" xlink:href="#error-5-r"></use>
<use class="error-right" xlink:href="#error-right"></use>
<use class="error-left" xlink:href="#error-left"></use>
<use class="error-top" xlink:href="#error-top"></use>
</g>
</g>
</svg>
</div>
<div>
<svg width="293px" viewBox="0 0 293 63" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="fill-glow">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.961017219 0 0 0 0 0.478442028 0 0 0 0 0.478442028 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="shadowMatrixOuter2"></feMergeNode>
</feMerge>
</filter>
<path d="M11.8,10 C11.24,10 10.78,10.6 10.78,11.4 C10.78,12.2 11.24,12.8 11.8,12.8 C12.36,12.8 12.82,12.2 12.82,11.4 C12.82,10.62 12.36,10 11.8,10 Z M12.64,14.2 L10.06,14.4 L10.06,14.58 C10.12,14.58 10.18,14.56 10.24,14.56 C10.78,14.56 11.02,14.9 11.02,15.54 L11.02,22.54 C11.02,23.64 10.74,24.12 10,24.12 L10,24.3 L13.66,24.3 L13.66,24.12 C12.92,24.12 12.64,23.64 12.64,22.54 L12.64,14.2 Z M17.54,22.54 L17.54,15.22 L18.64,15.22 C18.86,15.22 19.04,15.22 19.26,15.36 L19.66,14.14 C19.42,14.3 19.12,14.4 18.8,14.4 L17.54,14.4 L17.54,13.1 C17.54,11.6 17.9,10.82 18.98,10.82 C19.74,10.82 20.16,11.28 20.2,12.2 L20.26,12.22 L20.8,10.32 C20.3,10.08 19.68,10 18.96,10 C17.26,10 16.04,11.02 15.88,12.7 C15.74,14.1 15.96,14.88 14.64,15.04 L14.64,15.22 L15.92,15.22 L15.92,22.54 C15.92,23.64 15.64,24.12 14.9,24.12 L14.9,24.3 L18.56,24.3 L18.56,24.12 C17.82,24.12 17.54,23.64 17.54,22.54 Z M31.18,18.6 C28.6,19.08 27.18,20.38 27.18,21.94 C27.18,22.86 27.76,23.48 28.68,23.48 C30.28,23.48 31.2,22 31.2,19.14 C31.2,18.96 31.18,18.78 31.18,18.6 Z M31.14,17.84 C31.14,17.66 31.16,17.48 31.16,17.26 C31.16,15.84 30.72,15.12 29.48,15.12 C27.88,15.12 26.62,16.1 26.3,17.7 L26.16,17.7 L26.5,14.5 C26.66,14.7 26.84,14.8 27.06,14.8 C27.58,14.8 28.68,14.2 30.26,14.2 C32.24,14.2 32.8,15.12 32.8,16.98 L32.8,21.98 C32.8,23.4 33.12,24.08 33.96,24.12 L33.96,24.3 L31.7,24.3 C31.44,23.8 31.26,23.28 31.14,22.7 C30.46,23.88 29.44,24.48 28.1,24.48 C26.54,24.48 25.54,23.5 25.54,22.06 C25.54,20.02 27.46,18.48 31.14,17.84 Z M37.26,22.54 L37.26,18.8 C37.26,18.04 37.32,17.32 37.74,16.64 C38.26,15.82 39.08,15.36 39.68,15.36 C40.5,15.36 40.96,15.9 40.96,16.68 L40.96,22.54 C40.96,23.64 40.68,24.12 39.94,24.12 L39.94,24.3 L43.6,24.3 L43.6,24.12 C42.86,24.12 42.58,23.64 42.58,22.54 L42.58,16.9 C42.58,15.08 42.06,14.2 40.64,14.2 C39.48,14.2 38.28,14.88 37.2,16.26 C37.14,15.46 37.04,14.82 36.8,14.3 L34.48,14.48 L34.48,14.68 C34.54,14.68 34.58,14.66 34.64,14.66 C35.3,14.66 35.64,15.42 35.64,16.92 L35.64,22.54 C35.64,23.64 35.36,24.12 34.62,24.12 L34.62,24.3 L38.28,24.3 L38.28,24.12 C37.54,24.12 37.26,23.64 37.26,22.54 Z M44.84,15.96 L46.88,22.02 C47.24,23.08 47.4,23.94 47.4,24.56 C47.4,26.24 46.7,27.22 45.76,27.22 C45.16,27.22 44.78,26.78 44.78,25.96 C44.78,25.78 44.8,25.56 44.86,25.3 L44.78,25.28 L43.8,27.86 C44.32,28.4 44.9,28.66 45.52,28.66 C46.58,28.66 47.5,27.92 48.1,26.52 C48.58,25.36 48.8,24.14 49.14,22.98 L51.1,16.4 C51.42,15.3 51.64,14.66 52.42,14.58 L52.42,14.4 L49.64,14.4 L49.64,14.58 C50.06,14.58 50.28,14.82 50.28,15.3 C50.28,15.48 50.22,15.86 50.06,16.42 L48.5,22.12 L46.6,16.06 C46.5,15.76 46.44,15.6 46.44,15.56 C46.44,15.38 46.4,15.28 46.4,15.24 C46.4,14.9 46.62,14.62 47.02,14.58 L47.02,14.4 L43.78,14.4 L43.78,14.58 C44.46,14.68 44.56,15.14 44.84,15.96 Z M55.48,15.24 L55.48,21.94 C55.48,22.94 55.62,23.46 56.86,23.46 C58.72,23.46 59.94,21.98 59.94,19.38 C59.94,16.8 58.62,15.22 56.28,15.22 C56.04,15.22 55.78,15.22 55.48,15.24 Z M53.86,12.42 C53.86,11.78 53.62,11.46 53.1,11.46 C53.04,11.46 52.96,11.48 52.9,11.48 L52.9,11.28 L55.48,10.68 L55.48,14.42 C55.98,14.4 56.32,14.38 56.5,14.38 C59.74,14.38 61.7,16.5 61.7,19.58 C61.7,21.34 61.04,22.74 59.84,23.54 C58.8,24.24 57.52,24.3 55.86,24.3 L52.86,24.3 L52.86,24.12 C53.6,24.12 53.86,23.64 53.86,22.54 L53.86,12.42 Z M62.84,19.38 C62.84,16.22 64.66,14.2 67.22,14.2 C69.64,14.2 71.4,16.26 71.4,19.14 C71.4,22.5 69.62,24.5 67.02,24.5 C64.58,24.5 62.84,22.48 62.84,19.38 Z M66.96,15.04 C65.58,15.04 64.62,16.34 64.62,18.7 C64.62,21.96 65.64,23.66 67.24,23.66 C68.64,23.66 69.6,22.32 69.6,19.88 C69.6,16.74 68.52,15.04 66.96,15.04 Z M80.38,22.54 C80.38,23.64 80.66,24.12 81.4,24.12 L81.4,24.3 L78.4,24.3 C76.98,24.3 75.82,24.26 74.8,23.76 C73.4,23.06 72.56,21.54 72.56,19.58 C72.56,16.5 74.52,14.38 77.76,14.38 C77.94,14.38 78.28,14.4 78.78,14.42 L78.78,13.06 C78.78,12.78 78.76,12.6 78.76,12.48 C78.76,11.76 78.54,11.48 77.98,11.48 L77.8,11.48 L77.8,11.28 L80.38,10.68 L80.38,22.54 Z M78.78,15.24 C78.48,15.22 78.2,15.22 77.96,15.22 C75.62,15.22 74.3,16.8 74.3,19.5 C74.3,21.98 75.54,23.46 77.4,23.46 C78.64,23.46 78.78,22.94 78.78,21.94 L78.78,15.24 Z M82.7,15.96 L84.74,22.02 C85.1,23.08 85.26,23.94 85.26,24.56 C85.26,26.24 84.56,27.22 83.62,27.22 C83.02,27.22 82.64,26.78 82.64,25.96 C82.64,25.78 82.66,25.56 82.72,25.3 L82.64,25.28 L81.66,27.86 C82.18,28.4 82.76,28.66 83.38,28.66 C84.44,28.66 85.36,27.92 85.96,26.52 C86.44,25.36 86.66,24.14 87,22.98 L88.96,16.4 C89.28,15.3 89.5,14.66 90.28,14.58 L90.28,14.4 L87.5,14.4 L87.5,14.58 C87.92,14.58 88.14,14.82 88.14,15.3 C88.14,15.48 88.08,15.86 87.92,16.42 L86.36,22.12 L84.46,16.06 C84.36,15.76 84.3,15.6 84.3,15.56 C84.3,15.38 84.26,15.28 84.26,15.24 C84.26,14.9 84.48,14.62 84.88,14.58 L84.88,14.4 L81.64,14.4 L81.64,14.58 C82.32,14.68 82.42,15.14 82.7,15.96 Z M101.24,18.6 C98.66,19.08 97.24,20.38 97.24,21.94 C97.24,22.86 97.82,23.48 98.74,23.48 C100.34,23.48 101.26,22 101.26,19.14 C101.26,18.96 101.24,18.78 101.24,18.6 Z M101.2,17.84 C101.2,17.66 101.22,17.48 101.22,17.26 C101.22,15.84 100.78,15.12 99.54,15.12 C97.94,15.12 96.68,16.1 96.36,17.7 L96.22,17.7 L96.56,14.5 C96.72,14.7 96.9,14.8 97.12,14.8 C97.64,14.8 98.74,14.2 100.32,14.2 C102.3,14.2 102.86,15.12 102.86,16.98 L102.86,21.98 C102.86,23.4 103.18,24.08 104.02,24.12 L104.02,24.3 L101.76,24.3 C101.5,23.8 101.32,23.28 101.2,22.7 C100.52,23.88 99.5,24.48 98.16,24.48 C96.6,24.48 95.6,23.5 95.6,22.06 C95.6,20.02 97.52,18.48 101.2,17.84 Z M105.12,24.5 C105.28,24.26 105.48,24.14 105.76,24.14 C106.18,24.14 106.92,24.5 108.1,24.5 C110.24,24.5 111.74,23.06 111.74,21.22 C111.74,19.28 110.56,18.68 108.52,17.9 C107.36,17.46 106.74,17.14 106.74,16.32 C106.74,15.56 107.42,14.96 108.4,14.96 C109.64,14.96 110.66,15.86 110.88,17.3 L111.02,17.3 L110.8,14.28 C110.6,14.46 110.4,14.52 110.16,14.52 C109.68,14.52 109,14.18 108.18,14.18 C106.42,14.18 105.2,15.34 105.2,16.76 C105.2,18.5 106.56,18.86 108.68,19.78 C109.74,20.24 110.22,20.74 110.22,21.64 C110.22,22.78 109.28,23.66 107.9,23.66 C106.22,23.66 105.34,22.62 105.08,20.42 L104.94,20.44 L105.12,24.5 Z M117.18,18.28 C118.82,20.54 119.48,22.5 119.48,23.48 C119.48,23.94 119.32,24.1 118.92,24.12 L118.92,24.3 L122.3,24.3 L122.3,24.12 C121.54,24.04 121.36,23.64 121.14,22.92 C120.48,20.84 119.6,19 118.26,17.04 L118.88,16.34 C119.94,15.18 120.8,14.6 121.44,14.58 L121.44,14.4 L118.18,14.4 L118.18,14.58 C118.52,14.6 118.66,14.74 118.66,15.06 C118.66,15.3 118.46,15.62 118.1,16.06 L115.82,18.84 L115.82,10.68 L113.24,11.28 L113.24,11.48 C113.3,11.48 113.38,11.46 113.44,11.46 C113.96,11.46 114.2,11.78 114.2,12.42 L114.2,22.54 C114.2,23.64 113.92,24.12 113.18,24.12 L113.18,24.3 L116.84,24.3 L116.84,24.12 C116.1,24.12 115.82,23.64 115.82,22.54 L115.82,19.76 L117.18,18.28 Z M123.14,24.5 C123.3,24.26 123.5,24.14 123.78,24.14 C124.2,24.14 124.94,24.5 126.12,24.5 C128.26,24.5 129.76,23.06 129.76,21.22 C129.76,19.28 128.58,18.68 126.54,17.9 C125.38,17.46 124.76,17.14 124.76,16.32 C124.76,15.56 125.44,14.96 126.42,14.96 C127.66,14.96 128.68,15.86 128.9,17.3 L129.04,17.3 L128.82,14.28 C128.62,14.46 128.42,14.52 128.18,14.52 C127.7,14.52 127.02,14.18 126.2,14.18 C124.44,14.18 123.22,15.34 123.22,16.76 C123.22,18.5 124.58,18.86 126.7,19.78 C127.76,20.24 128.24,20.74 128.24,21.64 C128.24,22.78 127.3,23.66 125.92,23.66 C124.24,23.66 123.36,22.62 123.1,20.42 L122.96,20.44 L123.14,24.5 Z M135.94,14.4 L135.94,14.58 C136.52,14.62 136.62,15.02 136.8,15.86 L138.24,22.88 C138.3,23.22 138.36,23.5 138.36,23.74 C138.36,24 138.32,24.12 138.16,24.12 L138.12,24.12 L138.12,24.3 L140.44,24.3 L140.44,24.12 C140.26,24.08 140.24,24.04 140.24,23.9 C140.24,23.74 140.28,23.38 140.42,22.84 L141.76,17.26 L143.18,22.98 C143.28,23.42 143.32,23.68 143.32,23.74 C143.32,24 143.24,24.12 143.04,24.12 L143.04,24.3 L145.46,24.3 L145.46,24.12 C145.24,24.1 145.22,24 145.22,23.78 C145.22,23.5 145.28,23.18 145.38,22.8 L146.96,16.3 C147.24,15.14 147.48,14.58 148.04,14.58 L148.08,14.58 L148.08,14.4 L145.6,14.4 L145.6,14.58 C145.94,14.58 146.04,14.74 146.04,15.14 C146.04,15.4 145.96,15.68 145.9,15.98 L144.48,22.56 L142.44,14.4 L141.6,14.4 L139.68,22.52 L138.4,15.92 C138.32,15.5 138.3,15.22 138.3,15.1 C138.3,14.82 138.52,14.6 138.92,14.58 L138.92,14.4 L135.94,14.4 Z M151.2,22.54 L151.2,18.8 C151.2,18.04 151.26,17.32 151.68,16.64 C152.2,15.82 153.02,15.36 153.62,15.36 C154.44,15.36 154.9,15.9 154.9,16.68 C154.9,16.86 154.92,17.06 154.92,17.32 L154.92,22.54 C154.92,23.64 154.64,24.12 153.9,24.12 L153.9,24.3 L157.56,24.3 L157.56,24.12 C156.82,24.12 156.54,23.64 156.54,22.54 L156.54,16.9 C156.54,15.08 156,14.2 154.58,14.2 C153.42,14.2 152.24,14.88 151.2,16.26 L151.2,10.68 L148.62,11.28 L148.62,11.48 C148.68,11.48 148.76,11.46 148.82,11.46 C149.34,11.46 149.58,11.78 149.58,12.42 L149.58,22.54 C149.58,23.64 149.3,24.12 148.56,24.12 L148.56,24.3 L152.22,24.3 L152.22,24.12 C151.48,24.12 151.2,23.64 151.2,22.54 Z M160.28,18.8 L164.6,17.32 C164.34,15.84 163.64,15.06 162.62,15.06 C161.26,15.06 160.28,16.38 160.28,18.32 L160.28,18.8 Z M160.26,19.64 C160.46,22.1 161.86,23.58 163.58,23.58 C164.82,23.58 165.72,22.88 166.34,21.42 L166.42,21.44 L165.78,24.38 C165.6,24.28 165.46,24.26 165.38,24.26 C165.1,24.26 164.46,24.48 163.42,24.48 C160.32,24.48 158.58,22.48 158.58,19.2 C158.58,16.2 160.46,14.2 162.9,14.2 C164.76,14.2 166.1,15.5 166.28,17.62 L160.26,19.64 Z M170.02,16.42 C169.94,15.52 169.82,14.84 169.5,14.3 L167.18,14.48 L167.18,14.68 L167.26,14.68 C168.02,14.68 168.46,15.46 168.46,16.92 L168.46,22.54 C168.46,23.64 168.2,24.12 167.46,24.12 L167.46,24.3 L171.1,24.3 L171.1,24.12 C170.36,24.12 170.08,23.64 170.08,22.54 L170.08,18.94 C170.08,16.72 170.88,15.66 172.14,15.66 C172.38,15.66 172.68,15.74 173.02,15.92 L173.34,14.18 C173.18,14.14 173.02,14.12 172.82,14.12 C171.86,14.12 170.82,14.88 170.02,16.42 Z M175.84,18.8 L180.16,17.32 C179.9,15.84 179.2,15.06 178.18,15.06 C176.82,15.06 175.84,16.38 175.84,18.32 L175.84,18.8 Z M175.82,19.64 C176.02,22.1 177.42,23.58 179.14,23.58 C180.38,23.58 181.28,22.88 181.9,21.42 L181.98,21.44 L181.34,24.38 C181.16,24.28 181.02,24.26 180.94,24.26 C180.66,24.26 180.02,24.48 178.98,24.48 C175.88,24.48 174.14,22.48 174.14,19.2 C174.14,16.2 176.02,14.2 178.46,14.2 C180.32,14.2 181.66,15.5 181.84,17.62 L175.82,19.64 Z M189.26,15.22 L189.26,21.26 C189.26,23.42 189.7,24.5 191.54,24.5 C192.3,24.5 192.96,24.38 193.6,24.08 L194.16,21.98 L194.02,21.98 C193.72,22.92 193,23.48 192.24,23.48 C191.4,23.48 190.92,22.84 190.92,21.7 L190.92,15.22 L192.52,15.22 C192.74,15.22 192.92,15.22 193.14,15.36 L193.54,14.14 C193.3,14.3 193,14.4 192.68,14.4 L190.92,14.4 L190.92,10.82 L189.56,11.54 C189.62,11.82 189.66,12.12 189.66,12.42 C189.66,13.94 188.86,14.94 187.62,15.04 L187.62,15.22 L189.26,15.22 Z M197.44,22.54 L197.44,18.8 C197.44,18.04 197.5,17.32 197.92,16.64 C198.44,15.82 199.26,15.36 199.86,15.36 C200.68,15.36 201.14,15.9 201.14,16.68 C201.14,16.86 201.16,17.06 201.16,17.32 L201.16,22.54 C201.16,23.64 200.88,24.12 200.14,24.12 L200.14,24.3 L203.8,24.3 L203.8,24.12 C203.06,24.12 202.78,23.64 202.78,22.54 L202.78,16.9 C202.78,15.08 202.24,14.2 200.82,14.2 C199.66,14.2 198.48,14.88 197.44,16.26 L197.44,10.68 L194.86,11.28 L194.86,11.48 C194.92,11.48 195,11.46 195.06,11.46 C195.58,11.46 195.82,11.78 195.82,12.42 L195.82,22.54 C195.82,23.64 195.54,24.12 194.8,24.12 L194.8,24.3 L198.46,24.3 L198.46,24.12 C197.72,24.12 197.44,23.64 197.44,22.54 Z M206.7,10 C206.14,10 205.68,10.6 205.68,11.4 C205.68,12.2 206.14,12.8 206.7,12.8 C207.26,12.8 207.72,12.2 207.72,11.4 C207.72,10.62 207.26,10 206.7,10 Z M207.54,14.2 L204.96,14.4 L204.96,14.58 C205.02,14.58 205.08,14.56 205.14,14.56 C205.68,14.56 205.92,14.9 205.92,15.54 L205.92,22.54 C205.92,23.64 205.64,24.12 204.9,24.12 L204.9,24.3 L208.56,24.3 L208.56,24.12 C207.82,24.12 207.54,23.64 207.54,22.54 L207.54,14.2 Z M210.24,24.5 C210.4,24.26 210.6,24.14 210.88,24.14 C211.3,24.14 212.04,24.5 213.22,24.5 C215.36,24.5 216.86,23.06 216.86,21.22 C216.86,19.28 215.68,18.68 213.64,17.9 C212.48,17.46 211.86,17.14 211.86,16.32 C211.86,15.56 212.54,14.96 213.52,14.96 C214.76,14.96 215.78,15.86 216,17.3 L216.14,17.3 L215.92,14.28 C215.72,14.46 215.52,14.52 215.28,14.52 C214.8,14.52 214.12,14.18 213.3,14.18 C211.54,14.18 210.32,15.34 210.32,16.76 C210.32,18.5 211.68,18.86 213.8,19.78 C214.86,20.24 215.34,20.74 215.34,21.64 C215.34,22.78 214.4,23.66 213.02,23.66 C211.34,23.66 210.46,22.62 210.2,20.42 L210.06,20.44 L210.24,24.5 Z M226.1,23.54 C226.38,23.56 226.66,23.58 226.9,23.58 C229.26,23.58 230.56,22.02 230.56,19.24 C230.56,16.72 229.26,15.22 227.56,15.22 C226.24,15.22 226.1,15.68 226.1,16.76 L226.1,23.54 Z M226.1,24.38 L226.1,26.9 C226.1,27.98 226.42,28.46 227.24,28.46 L227.3,28.46 L227.3,28.66 L223.46,28.66 L223.46,28.46 C224.2,28.46 224.48,28 224.48,26.9 L224.48,16.14 C224.48,15.04 224.2,14.58 223.46,14.58 L223.46,14.4 L226.46,14.4 C227.86,14.4 229.02,14.44 230.04,14.94 C231.44,15.64 232.3,17.14 232.3,19.14 C232.3,22.3 230.32,24.4 227.1,24.4 C226.94,24.4 226.6,24.4 226.1,24.38 Z M238.88,18.6 C236.3,19.08 234.88,20.38 234.88,21.94 C234.88,22.86 235.46,23.48 236.38,23.48 C237.98,23.48 238.9,22 238.9,19.14 C238.9,18.96 238.88,18.78 238.88,18.6 Z M238.84,17.84 C238.84,17.66 238.86,17.48 238.86,17.26 C238.86,15.84 238.42,15.12 237.18,15.12 C235.58,15.12 234.32,16.1 234,17.7 L233.86,17.7 L234.2,14.5 C234.36,14.7 234.54,14.8 234.76,14.8 C235.28,14.8 236.38,14.2 237.96,14.2 C239.94,14.2 240.5,15.12 240.5,16.98 L240.5,21.98 C240.5,23.4 240.82,24.08 241.66,24.12 L241.66,24.3 L239.4,24.3 C239.14,23.8 238.96,23.28 238.84,22.7 C238.16,23.88 237.14,24.48 235.8,24.48 C234.24,24.48 233.24,23.5 233.24,22.06 C233.24,20.02 235.16,18.48 238.84,17.84 Z M248.52,23.54 L248.52,16.76 C248.52,15.68 248.36,15.22 247.04,15.22 C245.34,15.22 244.06,16.72 244.06,19.24 C244.06,22.02 245.36,23.58 247.72,23.58 C247.98,23.58 248.24,23.56 248.52,23.54 Z M251.16,14.58 C250.4,14.58 250.14,15.04 250.14,16.14 L250.14,21.82 C250.14,21.88 250.12,22.1 250.12,22.46 C250.12,22.94 250.22,23.16 250.44,23.46 C250.88,24.04 251.4,24.54 251.4,25.5 C251.4,27.34 249.44,28.72 246.74,28.72 C244.94,28.72 243.2,28.06 241.82,26.8 L243.66,24.54 L243.78,24.62 C243.6,24.92 243.5,25.2 243.5,25.54 C243.5,26.82 244.66,27.8 246.48,27.8 C248.44,27.8 249.7,26.76 249.7,25.62 C249.7,24.86 249.22,24.36 248.32,24.36 C248.08,24.36 247.72,24.4 247.24,24.4 C244.38,24.4 242.3,22.3 242.3,19.14 C242.3,17.34 242.98,15.96 244.18,15.16 C245.2,14.48 246.46,14.4 248.14,14.4 L251.16,14.4 L251.16,14.58 Z M253.94,18.8 L258.26,17.32 C258,15.84 257.3,15.06 256.28,15.06 C254.92,15.06 253.94,16.38 253.94,18.32 L253.94,18.8 Z M253.92,19.64 C254.12,22.1 255.52,23.58 257.24,23.58 C258.48,23.58 259.38,22.88 260,21.42 L260.08,21.44 L259.44,24.38 C259.26,24.28 259.12,24.26 259.04,24.26 C258.76,24.26 258.12,24.48 257.08,24.48 C253.98,24.48 252.24,22.48 252.24,19.2 C252.24,16.2 254.12,14.2 256.56,14.2 C258.42,14.2 259.76,15.5 259.94,17.62 L253.92,19.64 Z M268.02,10 C267.46,10 267,10.6 267,11.4 C267,12.2 267.46,12.8 268.02,12.8 C268.58,12.8 269.04,12.2 269.04,11.4 C269.04,10.62 268.58,10 268.02,10 Z M268.86,14.2 L266.28,14.4 L266.28,14.58 C266.34,14.58 266.4,14.56 266.46,14.56 C267,14.56 267.24,14.9 267.24,15.54 L267.24,22.54 C267.24,23.64 266.96,24.12 266.22,24.12 L266.22,24.3 L269.88,24.3 L269.88,24.12 C269.14,24.12 268.86,23.64 268.86,22.54 L268.86,14.2 Z M271.56,24.5 C271.72,24.26 271.92,24.14 272.2,24.14 C272.62,24.14 273.36,24.5 274.54,24.5 C276.68,24.5 278.18,23.06 278.18,21.22 C278.18,19.28 277,18.68 274.96,17.9 C273.8,17.46 273.18,17.14 273.18,16.32 C273.18,15.56 273.86,14.96 274.84,14.96 C276.08,14.96 277.1,15.86 277.32,17.3 L277.46,17.3 L277.24,14.28 C277.04,14.46 276.84,14.52 276.6,14.52 C276.12,14.52 275.44,14.18 274.62,14.18 C272.86,14.18 271.64,15.34 271.64,16.76 C271.64,18.5 273,18.86 275.12,19.78 C276.18,20.24 276.66,20.74 276.66,21.64 C276.66,22.78 275.72,23.66 274.34,23.66 C272.66,23.66 271.78,22.62 271.52,20.42 L271.38,20.44 L271.56,24.5 Z M279.68,25.98 L280.94,25.98 L282.5,21.92 L280.66,21.92 C280.74,22.12 280.8,22.3 280.8,22.5 C280.8,22.78 280.74,23.18 280.56,23.64 L279.68,25.98 Z" id="quote-top"></path>
<path d="M72.66,34 C72.1,34 71.64,34.6 71.64,35.4 C71.64,36.2 72.1,36.8 72.66,36.8 C73.22,36.8 73.68,36.2 73.68,35.4 C73.68,34.62 73.22,34 72.66,34 Z M73.5,38.2 L70.92,38.4 L70.92,38.58 C70.98,38.58 71.04,38.56 71.1,38.56 C71.64,38.56 71.88,38.9 71.88,39.54 L71.88,46.54 C71.88,47.64 71.6,48.12 70.86,48.12 L70.86,48.3 L74.52,48.3 L74.52,48.12 C73.78,48.12 73.5,47.64 73.5,46.54 L73.5,38.2 Z M76.9,39.22 L76.9,45.26 C76.9,47.42 77.34,48.5 79.18,48.5 C79.94,48.5 80.6,48.38 81.24,48.08 L81.8,45.98 L81.66,45.98 C81.36,46.92 80.64,47.48 79.88,47.48 C79.04,47.48 78.56,46.84 78.56,45.7 L78.56,39.22 L80.16,39.22 C80.38,39.22 80.56,39.22 80.78,39.36 L81.18,38.14 C80.94,38.3 80.64,38.4 80.32,38.4 L78.56,38.4 L78.56,34.82 L77.2,35.54 C77.26,35.82 77.3,36.12 77.3,36.42 C77.3,37.94 76.5,38.94 75.26,39.04 L75.26,39.22 L76.9,39.22 Z M82.78,38.48 L84.06,38.48 L85.68,35.06 L83.88,35.06 L83.88,35.16 C83.88,35.48 83.8,35.82 83.62,36.28 L82.78,38.48 Z M88.1,48.5 C88.26,48.26 88.46,48.14 88.74,48.14 C89.16,48.14 89.9,48.5 91.08,48.5 C93.22,48.5 94.72,47.06 94.72,45.22 C94.72,43.28 93.54,42.68 91.5,41.9 C90.34,41.46 89.72,41.14 89.72,40.32 C89.72,39.56 90.4,38.96 91.38,38.96 C92.62,38.96 93.64,39.86 93.86,41.3 L94,41.3 L93.78,38.28 C93.58,38.46 93.38,38.52 93.14,38.52 C92.66,38.52 91.98,38.18 91.16,38.18 C89.4,38.18 88.18,39.34 88.18,40.76 C88.18,42.5 89.54,42.86 91.66,43.78 C92.72,44.24 93.2,44.74 93.2,45.64 C93.2,46.78 92.26,47.66 90.88,47.66 C89.2,47.66 88.32,46.62 88.06,44.42 L87.92,44.44 L88.1,48.5 Z M103.9,46.54 L103.9,34.68 L101.32,35.28 L101.32,35.48 C101.38,35.48 101.46,35.46 101.52,35.46 C102.04,35.46 102.28,35.78 102.28,36.42 L102.28,46.54 C102.28,47.64 102,48.12 101.26,48.12 L101.26,48.3 L104.92,48.3 L104.92,48.12 C104.18,48.12 103.9,47.64 103.9,46.54 Z M107.8,42.8 L112.12,41.32 C111.86,39.84 111.16,39.06 110.14,39.06 C108.78,39.06 107.8,40.38 107.8,42.32 L107.8,42.8 Z M107.78,43.64 C107.98,46.1 109.38,47.58 111.1,47.58 C112.34,47.58 113.24,46.88 113.86,45.42 L113.94,45.44 L113.3,48.38 C113.12,48.28 112.98,48.26 112.9,48.26 C112.62,48.26 111.98,48.48 110.94,48.48 C107.84,48.48 106.1,46.48 106.1,43.2 C106.1,40.2 107.98,38.2 110.42,38.2 C112.28,38.2 113.62,39.5 113.8,41.62 L107.78,43.64 Z M117.62,46.54 C117.62,47.64 117.9,48.12 118.64,48.12 L118.64,48.3 L114.98,48.3 L114.98,48.12 C115.72,48.12 116,47.64 116,46.54 L116,39.22 L114.72,39.22 L114.72,39.04 C116.04,38.88 115.82,38.1 115.96,36.7 C116.12,35.02 117.34,34 119.04,34 C119.76,34 120.38,34.08 120.88,34.32 L120.34,36.22 L120.28,36.2 C120.24,35.28 119.82,34.82 119.06,34.82 C117.98,34.82 117.62,35.6 117.62,37.1 L117.62,38.4 L118.88,38.4 C119.2,38.4 119.5,38.3 119.74,38.14 L119.34,39.36 C119.12,39.22 118.94,39.22 118.72,39.22 L117.62,39.22 L117.62,46.54 Z M121.94,39.22 L120.3,39.22 L120.3,39.04 C121.54,38.94 122.34,37.94 122.34,36.42 C122.34,36.12 122.3,35.82 122.24,35.54 L123.6,34.82 L123.6,38.4 L125.36,38.4 C125.68,38.4 125.98,38.3 126.22,38.14 L125.82,39.36 C125.6,39.22 125.42,39.22 125.2,39.22 L123.6,39.22 L123.6,45.7 C123.6,46.84 124.08,47.48 124.92,47.48 C125.68,47.48 126.4,46.92 126.7,45.98 L126.84,45.98 L126.28,48.08 C125.64,48.38 124.98,48.5 124.22,48.5 C122.38,48.5 121.94,47.42 121.94,45.26 L121.94,39.22 Z M133.84,39.22 L133.84,45.26 C133.84,47.42 134.28,48.5 136.12,48.5 C136.88,48.5 137.54,48.38 138.18,48.08 L138.74,45.98 L138.6,45.98 C138.3,46.92 137.58,47.48 136.82,47.48 C135.98,47.48 135.5,46.84 135.5,45.7 L135.5,39.22 L137.1,39.22 C137.32,39.22 137.5,39.22 137.72,39.36 L138.12,38.14 C137.88,38.3 137.58,38.4 137.26,38.4 L135.5,38.4 L135.5,34.82 L134.14,35.54 C134.2,35.82 134.24,36.12 134.24,36.42 C134.24,37.94 133.44,38.94 132.2,39.04 L132.2,39.22 L133.84,39.22 Z M142.02,46.54 L142.02,42.8 C142.02,42.04 142.08,41.32 142.5,40.64 C143.02,39.82 143.84,39.36 144.44,39.36 C145.26,39.36 145.72,39.9 145.72,40.68 C145.72,40.86 145.74,41.06 145.74,41.32 L145.74,46.54 C145.74,47.64 145.46,48.12 144.72,48.12 L144.72,48.3 L148.38,48.3 L148.38,48.12 C147.64,48.12 147.36,47.64 147.36,46.54 L147.36,40.9 C147.36,39.08 146.82,38.2 145.4,38.2 C144.24,38.2 143.06,38.88 142.02,40.26 L142.02,34.68 L139.44,35.28 L139.44,35.48 C139.5,35.48 139.58,35.46 139.64,35.46 C140.16,35.46 140.4,35.78 140.4,36.42 L140.4,46.54 C140.4,47.64 140.12,48.12 139.38,48.12 L139.38,48.3 L143.04,48.3 L143.04,48.12 C142.3,48.12 142.02,47.64 142.02,46.54 Z M151.1,42.8 L155.42,41.32 C155.16,39.84 154.46,39.06 153.44,39.06 C152.08,39.06 151.1,40.38 151.1,42.32 L151.1,42.8 Z M151.08,43.64 C151.28,46.1 152.68,47.58 154.4,47.58 C155.64,47.58 156.54,46.88 157.16,45.42 L157.24,45.44 L156.6,48.38 C156.42,48.28 156.28,48.26 156.2,48.26 C155.92,48.26 155.28,48.48 154.24,48.48 C151.14,48.48 149.4,46.48 149.4,43.2 C149.4,40.2 151.28,38.2 153.72,38.2 C155.58,38.2 156.92,39.5 157.1,41.62 L151.08,43.64 Z M170.28,38.22 C170.08,38.34 169.9,38.38 169.66,38.38 C169.18,38.38 168.56,38.2 167.82,38.2 C165.16,38.2 163.3,40.2 163.3,43.22 C163.3,46.44 165.16,48.48 168,48.48 C169,48.48 169.62,48.34 169.88,48.34 C170.08,48.34 170.2,48.38 170.3,48.5 L171.16,45.74 L171.02,45.74 C170.62,46.88 169.58,47.62 168.38,47.62 C166.5,47.62 165.12,46.08 165.12,43.42 C165.12,40.6 166.44,39 168.26,39 C169.42,39 170.24,39.78 170.44,41.18 L170.58,41.18 L170.28,38.22 Z M171.96,43.38 C171.96,40.22 173.78,38.2 176.34,38.2 C178.76,38.2 180.52,40.26 180.52,43.14 C180.52,46.5 178.74,48.5 176.14,48.5 C173.7,48.5 171.96,46.48 171.96,43.38 Z M176.08,39.04 C174.7,39.04 173.74,40.34 173.74,42.7 C173.74,45.96 174.76,47.66 176.36,47.66 C177.76,47.66 178.72,46.32 178.72,43.88 C178.72,40.74 177.64,39.04 176.08,39.04 Z M182.72,40.58 L182.72,45.8 C182.72,47.62 183.24,48.48 184.68,48.48 C185.94,48.48 187.3,47.7 188.14,46.34 C188.2,47.16 188.3,47.8 188.54,48.3 L190.82,48.3 L190.82,48.12 C189.98,48.06 189.74,47.28 189.74,45.62 L189.74,38.2 L187.06,38.4 L187.06,38.68 L187.16,38.68 C187.88,38.68 188.12,39.28 188.12,40.58 L188.12,42.86 C188.12,45.82 187.18,47.28 185.58,47.28 C184.78,47.28 184.34,46.78 184.34,45.8 L184.34,38.2 L181.68,38.4 L181.68,38.68 L181.78,38.68 C182.5,38.68 182.72,39.28 182.72,40.58 Z M194.76,46.54 L194.76,42.8 C194.76,42.04 194.82,41.32 195.24,40.64 C195.76,39.82 196.58,39.36 197.18,39.36 C198,39.36 198.46,39.9 198.46,40.68 L198.46,46.54 C198.46,47.64 198.18,48.12 197.44,48.12 L197.44,48.3 L201.1,48.3 L201.1,48.12 C200.36,48.12 200.08,47.64 200.08,46.54 L200.08,40.9 C200.08,39.08 199.56,38.2 198.14,38.2 C196.98,38.2 195.78,38.88 194.7,40.26 C194.64,39.46 194.54,38.82 194.3,38.3 L191.98,38.48 L191.98,38.68 C192.04,38.68 192.08,38.66 192.14,38.66 C192.8,38.66 193.14,39.42 193.14,40.92 L193.14,46.54 C193.14,47.64 192.86,48.12 192.12,48.12 L192.12,48.3 L195.78,48.3 L195.78,48.12 C195.04,48.12 194.76,47.64 194.76,46.54 Z M203.36,39.22 L203.36,45.26 C203.36,47.42 203.8,48.5 205.64,48.5 C206.4,48.5 207.06,48.38 207.7,48.08 L208.26,45.98 L208.12,45.98 C207.82,46.92 207.1,47.48 206.34,47.48 C205.5,47.48 205.02,46.84 205.02,45.7 L205.02,39.22 L206.62,39.22 C206.84,39.22 207.02,39.22 207.24,39.36 L207.64,38.14 C207.4,38.3 207.1,38.4 206.78,38.4 L205.02,38.4 L205.02,34.82 L203.66,35.54 C203.72,35.82 203.76,36.12 203.76,36.42 C203.76,37.94 202.96,38.94 201.72,39.04 L201.72,39.22 L203.36,39.22 Z M211.58,40.42 C212.38,38.88 213.42,38.12 214.38,38.12 C214.58,38.12 214.74,38.14 214.9,38.18 L214.58,39.92 C214.24,39.74 213.94,39.66 213.7,39.66 C212.44,39.66 211.64,40.72 211.64,42.94 L211.64,46.54 C211.64,47.64 211.92,48.12 212.66,48.12 L212.66,48.3 L209.02,48.3 L209.02,48.12 C209.76,48.12 210.02,47.64 210.02,46.54 L210.02,40.92 C210.02,39.46 209.58,38.68 208.82,38.68 L208.74,38.68 L208.74,38.48 L211.06,38.3 C211.38,38.84 211.5,39.52 211.58,40.42 Z M215.9,39.96 C215.62,39.14 215.52,38.68 214.84,38.58 L214.84,38.4 L218.08,38.4 L218.08,38.58 C217.68,38.62 217.46,38.9 217.46,39.24 C217.46,39.28 217.5,39.38 217.5,39.56 C217.5,39.6 217.56,39.76 217.66,40.06 L219.56,46.12 L221.12,40.42 C221.28,39.86 221.34,39.48 221.34,39.3 C221.34,38.82 221.12,38.58 220.7,38.58 L220.7,38.4 L223.48,38.4 L223.48,38.58 C222.7,38.66 222.48,39.3 222.16,40.4 L220.2,46.98 C219.86,48.14 219.64,49.36 219.16,50.52 C218.56,51.92 217.64,52.66 216.58,52.66 C215.96,52.66 215.38,52.4 214.86,51.86 L215.84,49.28 L215.92,49.3 C215.86,49.56 215.84,49.78 215.84,49.96 C215.84,50.78 216.22,51.22 216.82,51.22 C217.76,51.22 218.46,50.24 218.46,48.56 C218.46,47.94 218.3,47.08 217.94,46.02 L215.9,39.96 Z" id="quote-bottom"></path>
</defs>
<g fill-rule="evenodd">
<g class="glow" fill="black" fill-opacity="1">
<use class="quote-top" filter="url(#fill-glow)" xlink:href="#quote-top"></use>
<use class="quote-bottom" filter="url(#fill-glow)" xlink:href="#quote-bottom"></use>
</g>
<g class="top" fill="#FF0000">
<use class="quote-top" xlink:href="#quote-top"></use>
<use class="quote-bottom" xlink:href="#quote-bottom"></use>
</g>
</g>
</svg>
</div>
<div>
<a>
<svg width="107px" viewBox="0 0 107 34" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="fill-glow">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.961017219 0 0 0 0 0.478442028 0 0 0 0 0.478442028 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="shadowMatrixOuter2"></feMergeNode>
</feMerge>
</filter>
<path d="M17.16,14.52 L17.16,14.7 C18.06,14.82 18.22,15.42 18.22,16.66 L18.22,20.28 C18.22,21.76 18.1,22.62 16.48,22.62 C13.94,22.62 11.96,19.98 11.96,15.9 C11.96,12.72 13.4,10.88 15.66,10.88 C17.18,10.88 18.28,11.74 19.08,13.54 L19.18,13.52 L18.62,10.02 C18.44,10.26 18.18,10.36 17.8,10.36 C17.22,10.36 16.4,10.02 15.28,10.02 C12.32,10.02 10,12.54 10,16.3 C10,18.8 10.94,20.94 12.56,22.26 C13.66,23.16 15.04,23.52 16.84,23.52 C17.18,23.52 17.52,23.5 17.88,23.5 L20.74,23.5 L20.74,23.32 C20.06,23.22 19.92,22.58 19.92,21.36 L19.92,16.66 C19.92,15.42 20.1,14.82 20.98,14.7 L20.98,14.52 L17.16,14.52 Z M32.98,16.88 C32.98,21.02 30.32,23.74 27.26,23.74 C24.3,23.74 22.18,20.9 22.18,16.88 C22.18,12.72 24.82,10.02 27.9,10.02 C30.84,10.02 32.98,12.88 32.98,16.88 Z M27.88,22.76 C29.76,22.76 31.02,21 31.02,17.74 C31.02,13.42 29.54,11.02 27.26,11.02 C25.4,11.02 24.14,12.78 24.14,16.04 C24.14,20.36 25.62,22.76 27.88,22.76 Z M49.04,21.36 L49.04,12.4 C49.04,11.16 49.22,10.56 50.16,10.44 L50.16,10.26 L46.12,10.26 L46.12,10.44 C47.06,10.56 47.24,11.16 47.24,12.4 L47.24,13.96 L42.46,13.96 L42.46,12.4 C42.46,11.16 42.64,10.56 43.58,10.44 L43.58,10.26 L39.54,10.26 L39.54,10.44 C40.48,10.56 40.66,11.16 40.66,12.4 L40.66,21.36 C40.66,22.6 40.46,23.2 39.54,23.32 L39.54,23.5 L43.58,23.5 L43.58,23.32 C42.64,23.2 42.46,22.6 42.46,21.36 L42.46,14.84 L47.24,14.84 L47.24,21.36 C47.24,22.6 47.04,23.2 46.12,23.32 L46.12,23.5 L50.16,23.5 L50.16,23.32 C49.22,23.2 49.04,22.6 49.04,21.36 Z M62.42,16.88 C62.42,21.02 59.76,23.74 56.7,23.74 C53.74,23.74 51.62,20.9 51.62,16.88 C51.62,12.72 54.26,10.02 57.34,10.02 C60.28,10.02 62.42,12.88 62.42,16.88 Z M57.32,22.76 C59.2,22.76 60.46,21 60.46,17.74 C60.46,13.42 58.98,11.02 56.7,11.02 C54.84,11.02 53.58,12.78 53.58,16.04 C53.58,20.36 55.06,22.76 57.32,22.76 Z M68.18,10.26 L63.88,10.26 L63.88,10.44 C64.82,10.56 65,11.16 65,12.4 L65,21.36 C65,22.6 64.8,23.2 63.88,23.32 L63.88,23.5 L67.24,23.5 L67.24,23.32 C66.3,23.2 66.14,22.6 66.14,21.36 L66.14,11.42 L69.46,18.76 L72.94,11.52 L72.94,21.36 C72.94,22.6 72.74,23.2 71.82,23.32 L71.82,23.5 L75.78,23.5 L75.78,23.32 C74.84,23.2 74.68,22.6 74.68,21.36 L74.68,12.4 C74.68,11.16 74.84,10.56 75.78,10.44 L75.78,10.26 L71.58,10.26 L71.58,10.44 C71.9,10.48 72.06,10.64 72.06,10.92 C72.06,11.1 71.94,11.42 71.72,11.88 L69.78,15.76 L67.94,11.68 C67.8,11.38 67.72,11.14 67.72,10.94 C67.72,10.7 67.88,10.5 68.18,10.44 L68.18,10.26 Z M80.36,14.06 L80.36,12.74 C80.36,11.62 80.58,11.08 82.04,11.08 C83.96,11.08 85.32,12.06 85.88,13.84 L86.02,13.82 L85.32,10 C84.98,10.22 84.66,10.26 84.28,10.26 L77.44,10.26 L77.44,10.44 C78.38,10.56 78.56,11.16 78.56,12.4 L78.56,21.36 C78.56,22.6 78.36,23.2 77.44,23.32 L77.44,23.5 L85.06,23.5 C85.38,23.5 85.6,23.52 85.78,23.68 L87,18.82 L86.86,18.82 C86,21.28 84.22,22.66 82.12,22.66 C80.82,22.66 80.36,22 80.36,20.46 L80.36,14.94 L81.36,14.94 C83,14.94 83.64,15.08 84.12,17.14 L84.24,17.14 L83.6,12.86 L83.52,12.88 C83.3,13.9 82.78,14.06 81.64,14.06 L80.36,14.06 Z" id="link-phrase"></path>
<path d="M90.76,20.2 C91.46,19.76 92.12,19.58 92.6,19.58 L92.94,19.58 L92.96,19.44 C92.3,19.38 91.96,19.04 91.96,18.46 C91.96,17.82 92.44,17.38 93.4,16.8 C94.4,16.18 95.26,15.76 95.74,15.18 C96.28,14.52 96.56,13.86 96.56,13.24 C96.56,11.4 95.04,10.02 92.7,10.02 C90.54,10.02 89.3,11.04 88.86,11.04 C88.72,11.04 88.58,10.98 88.42,10.86 L89.14,14.68 L89.28,14.66 C89.26,14.44 89.26,14.24 89.26,14.08 C89.26,12.32 90.74,10.92 92.46,10.92 C93.68,10.92 94.42,11.68 94.42,12.86 C94.42,14.4 93.46,15.16 92.18,16.36 C91.08,17.4 90.4,17.96 90.4,19.02 C90.4,19.44 90.5,19.82 90.76,20.2 Z M91.66,20.88 C91.1,20.88 90.64,21.48 90.64,22.28 C90.64,23.08 91.1,23.68 91.66,23.68 C92.22,23.68 92.68,23.08 92.68,22.28 C92.68,21.5 92.22,20.88 91.66,20.88 Z" id="link-mark"></path>
</defs>
<g fill-rule="evenodd">
<g class="glow" fill="black" fill-opacity="1">
<use class="link-phrase" filter="url(#fill-glow)" xlink:href="#link-phrase"></use>
<use class="link-mark" filter="url(#fill-glow)" xlink:href="#link-mark"></use>
</g>
<g class="top" fill="#FF0000">
<use class="link-phrase" xlink:href="#link-phrase"></use>
<use class="link-mark" xlink:href="#link-mark"></use>
</g>
</g>
</svg>
</a>
</div>
</main>
$p: 12px;
$easeOutCubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
$easeOutExpo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
*, *:before, *:after { box-sizing: border-box; }
* { -webkit-tap-highlight-color: rgba(0,0,0,0); transform-style: preserve-3d; }
*:focus { outline: none!important; }
body, html { height: 100%; }
body { background: #121214; }
main {
display: flex;
flex-flow: row wrap;
align-items: center;
align-content: center;
width: 100%;
height: 100%;
padding: $p;
perspective: 1000px;
> div {
display: flex;
justify-content: center;
width: 100%;
svg {
height: 100%;
}
&:nth-child(1) {
opacity: 0;
transform: translateZ(1000px);
animation: zoomFadeIn 5000ms $easeOutCubic forwards;
transform-origin: center center;
.error-1-e {
transform: translateX(-50%);
animation: slideRight 3000ms $easeOutCubic -500ms forwards;
}
.error-2-r {
transform: translateY(-20%);
animation: slideDown 5000ms $easeOutCubic -500ms forwards;
}
.error-4-o {
transform: translateX(10%);
animation: slideLeftSmall 3000ms $easeOutCubic -300ms forwards;
}
.error-5-r {
transform: translateX(50%);
animation: slideLeft 3000ms $easeOutCubic -500ms forwards;
}
.error-2-0 {
transform: translateY(20%);
animation: slideUp 5000ms $easeOutCubic -500ms forwards;
}
.error-top {
transform: scaleX(0);
// transform-origin: center center;
transform-origin: 163px 3px;
animation: scaleXIn 750ms $easeOutExpo 3000ms forwards;
}
.error-left {
transform: scaleX(0);
// transform-origin: right center;
transform-origin: 75px 3px;
animation: scaleXIn 750ms $easeOutExpo 3500ms forwards;
}
.error-right {
transform: scaleX(0);
// transform-origin: left center;
transform-origin: 250px 3px;
animation: scaleXIn 750ms $easeOutExpo 3500ms forwards;
}
}
&:nth-child(2) {
.quote-top, .quote-bottom {
opacity: 0;
animation: slideUpFadeIn 1000ms $easeOutCubic 5500ms forwards;
}
.quote-bottom {
animation-delay: 5750ms;
}
}
&:nth-child(3) {
.link-phrase, .link-mark {
opacity: 0;
animation: slideUpFadeIn 1000ms $easeOutCubic 6250ms forwards;
}
.link-mark {
opacity: 0;
animation: fadeIn 1000ms $easeOutCubic 6750ms forwards;
}
a {
cursor: pointer;
transition: all 500ms ease-out;
.top use {
transition: all 150ms ease-out;
}
&:hover, &:focus {
animation: jitter 225ms ease-in-out 2 forwards;
.top use {
fill: white;
}
}
&:active {
.top use {
fill: darken(#FF0000, 15%);
}
}
}
}
}
}
@-moz-document url-prefix() {
main {
> div {
&:nth-child(3) {
a {
&:hover, &:focus {
animation: none;
}
}
}
}
}
}
@keyframes slideDown {
0% { transform: translateY(-20%); }
100% { transform: none; }
}
@keyframes slideUp {
0% { transform: translateY(20%); }
100% { transform: none; }
}
@keyframes slideRight {
0% { transform: translateX(-50%); }
100% { transform: none; }
}
@keyframes slideLeft {
0% { transform: translateX(50%); }
100% { transform: none; }
}
@keyframes slideLeftSmall {
0% { transform: translateX(10%); }
100% { transform: none; }
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes slideUpFadeIn {
0% {
transform: translateY(50%);
opacity: 0;
}
100% {
transform: none;
opacity: 1;
}
}
@keyframes scaleXIn {
0% { transform: scaleX(0); }
100% { transform: none; }
}
@keyframes zoomFadeIn {
0% {
opacity: 0;
transform: translateZ(1000px);
}
100% {
opacity: 1;
transform: none;
}
}
@keyframes jitter {
0% {
transform: translateX(0px) translateY(0px);
opacity: 1;
}
10% {
transform: translateX(2px) translateY(2px);
opacity: 0.8;
}
20% {
transform: translateX(0px) translateY(0px);
opacity: 0.47;
}
30% {
transform: translateX(0px) translateY(2px);
opacity: 0.3;
}
70% {
transform: translateX(-1px) translateY(1px);
opacity: 0.96;
}
80% {
transform: translateX(0px) translateY(-2px);
opacity: 0.9;
}
90% {
transform: translateX(1px) translateY(-2px);
opacity: 0.81;
}
100% {
transform: translateX(0) translateY(0);
opacity: 1;
}
}
// ⟁ \\
Also see: Tab Triggers