Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                	<body ontouchstart="">
				<svg xmlns=http://www.w3.org/2000/svg style=display:none>
						<symbol id=codepen viewBox="0 0 24 24">
								<path d="M19.4 13.3l-2-1.3 2-1.3m-6.6 8v-3.5L16 13l2.8 1.7m-6.8-1L9.3 12l2.7-1.8 2.7 1.8m-3.5 6.8l-6-4 2.7-2 3.2 2.4m-6.6-4.5l2 1.3-2 1.3m6.6-8v3.5L8 11 5 9.4m7.6-4l6 4L16 11 13 9m8.2.4V9v-.2h-.2v-.2L12.3 3h-.8L3.3 8.7V9H3V15.2h.2v.2l8.4 5.5h.8l8.3-5.6V15h.2V15 9.2z"
								/>
						</symbol>
				</svg>
		
				<aside id=popUp class=popup>
						<div class=popUpContainer>
								<article></article>
						</div>
						<a href=#! class=closePopUpOutSide></a>
				</aside>
		
				<input type=checkbox id=navigation>
<header>
				<button class="button left">
						<label for=navigation>
								<svg width=24 height=24 viewBox="0 0 24 24">
										<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
								</svg>
						</label>
				</button><a href="https://www.mdgrid.ml/" class=logo target="_blank">mdgrid.ml</a>
				<a href=#popUp id=openPopUp>
						<button class="button right">
								<svg style="width:24px;height:24px" viewBox="0 0 24 24">
										<path d="M12 2A10 10 0 0 0 2 12c0 4.4 3 8.2 6.8 9.5.5 0 .7-.2.7-.5v-1.7C6.7 20 6 18 6 18c-.3-1.2-1-1.5-1-1.5-1-.6 0-.6 0-.6 1 0 1.6 1 1.6 1 1 1.4 2.4 1 3 .8 0-.7.3-1 .6-1.4-2.2-.2-4.6-1-4.6-5 0-1 .4-2 1-2.6 0-.3-.4-1.3.2-2.7 0 .2.8 0 2.7 1.2.8-.3 1.7-.4 2.5-.4s1.7.2 2.5.4c2-1.3 2.8-1 2.8-1 .5 1.3 0 2.3 0 2.6.7.7 1 1.6 1 2.7 0 3.8-2.3 4.7-4.5 5 .4.2.7.8.7 1.8V21c0 .3.2.6.7.5 4-1.3 6.8-5 6.8-9.5A10 10 0 0 0 12 2z"
										/>
								</svg>
						</button>
				</a>
		</header>
				<nav class=drawer>
						<a href=# class=ripple>
								<div class=icon-drawer>
										<svg viewBox="0 0 24 24" fill=#FBC02D>
												<path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" />
										</svg>
								</div>Get started</a>
						<a href=# class=ripple style=background:#f0f0f0>
								<div class=icon-drawer style=fill:#03A9F4>
										<svg viewBox="0 0 48 48">
												<circle fill=#F44336 cx=24 cy=24 r="21" />
												<polygon fill=#fff points="24,11 27.9,18.9 36.6,20.2 30.3,26.3 31.8,35 24,30.9 16.2,35 17.7,26.3 11.4,20.2 20.1,18.9 " />
										</svg>
								</div>Collection</a>
						<a href=# class=ripple>
								<div class=icon-drawer>
										<svg viewBox="0 0 48 48">
												<circle fill=#2196F3 cx=24 cy=24 r=21></circle>
												<rect x=22 y=22 fill=#FFFFFF width=4 height=11></rect>
												<circle fill=#FFFFFF cx=24 cy=16.5 r=2.5></circle>
										</svg>
								</div>About</a>
						<a href=# class=ripple>
								<div class=icon-drawer>
										<svg viewBox="0 0 24 24" fill=#4CAF50>
												<path d="M6,22A3,3 0 0,1 3,19C3,18.4 3.18,17.84 3.5,17.37L9,7.81V6A1,1 0 0,1 8,5V4A2,2 0 0,1 10,2H14A2,2 0 0,1 16,4V5A1,1 0 0,1 15,6V7.81L20.5,17.37C20.82,17.84 21,18.4 21,19A3,3 0 0,1 18,22H6Z" />
										</svg>
								</div>Labs</a>
				</nav>
				<main>
						<div class=grid style=width:1230px>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><g fill=#455A64><path d="M27 6h6v22h-6zM19 33c-3.3 0-6-2.7-6-6v-3c0-3.3 2.7-6 6-6h6v-4h-6c-5.5 0-10 4.5-10 10v3c0 5.5 4.5 10 10 10h17v-4h-17zM9 44h30v-2c0-1.1-.9-2-2-2h-26c-1.1 0-2 .9-2 2v2zM25 20h-5c-2.2 0-4-1.8-4-4s1.8-4 4-4h5v8z"/></g><g fill=#03A9F4><path d="M33 26h-6c-1.1 0-2-.9-2-2v-16h10v16c0 1.1-.9 2-2 2zM26 4h8v2h-8z"/><circle cx=21 cy=16 r="2"/><path d="M21.6 31.9c-.4-.6-1-.9-1.7-.9h-1.9c-.7 0-1.3.3-1.7.9l-5.3 8.1h16l-5.4-8.1zm-2.6 5.1c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></g></svg>
</code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Research</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#42A5F5 d="M32.7 8.3l-1.4 1.4 4.7 4.7v4.6c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2.6c0-.5-.2-1-.6-1.4l-6.7-6.7z"/><path fill=#FFC107 d="M33 43h-24v-34c0-2.2 1.8-4 4-4h16c2.2 0 4 1.8 4 4v34z"/><g fill=#607D8B><path d="M41.1 27c-1-1.8-2.1-3.6-2.1-7h-2c0 4 1.2 6.1 2.4 8 .9 1.5 1.6 2.9 1.6 5 0 1.1-.9 2-2 2s-2-.9-2-2v-5c0-1.1-.9-2-2-2h-2v2h2v5c0 2.2 1.8 4 4 4s4-1.8 4-4c0-2.6-1-4.3-1.9-6zM5 39h38v4h-38z"/></g><path fill=#B2EBF2 d="M29 8h-16c-.6 0-1 .4-1 1v10c0 .6.4 1 1 1h16c.6 0 1-.4 1-1v-10c0-.6-.4-1-1-1zM29 8h-16c-.6 0-1 .4-1 1v10c0 .6.4 1 1 1h16c.6 0 1-.4 1-1v-10c0-.6-.4-1-1-1z"/><path fill=#F44336 d="M22 20l4.7-5.7-7 5.7z"/><path fill=#455A64 d="M14 13.8l-1.4-1.4c.3-.3.5-.5.8-.7l1.3 1.6c-.3.1-.5.3-.7.5zm14 0c-.2-.2-.4-.4-.7-.6l1.2-1.6c.3.2.6.5.8.7l-1.3 1.5zm-11-2l-.8-1.8 1-.4.6 1.9-.8.3zm7.9 0l-.9-.3.6-1.9c.3.1.7.2 1 .4l-.7 1.8zm-4.4-.8l-.1-2h1.1l-.1 2h-.9zM23 20h-4c0-1.1.9-2 2-2s2 .9 2 2z"/></svg>
</code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Gas station</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><g fill=#009688><path d="M18 32c-1.1 0-2-.9-2-2v-10h-4v10c0 3.3 2.7 6 6 6h19v-4h-19zM12.8 10l-.4-1.3c-.6-1.6-2.1-2.7-3.8-2.7h-3.6v4h3.6l5.5 16.6c.3.8 1 1.4 1.9 1.4h19c.8 0 1.5-.5 1.8-1.2l7.6-16.8h-31.6z"/></g><circle fill=#00695C cx=5 cy=8 r="2"/><g fill=#37474F><circle cx=34 cy=39 r="3"/><circle cx=19 cy=39 r="3"/></g><g fill=#607D8B><circle cx=34 cy=39 r="1"/><circle cx=19 cy=39 r="1"/></g></svg>
</code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Shopping cart</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#FF8A65 d="M10 26c0 3.2 1 6.2 3 8.6 2 2.6 3 6 3 9.4h16s1-6.8 3-9.6c1.8-2.4 3-5.4 3-8.6 0-5.4-3.2-10.6-8-12.8v-7h-12v7s-8 3.2-8 13z"/><g fill=#FFAB91><path d="M36 26c0-2.2.6-3.9 1.3-4.6-.2-.7-.5-1.3-.8-1.9-1.5 1-2.5 3.4-2.5 6.5 0 2.9.9 5.3 2.3 6.4l.9-1.9c-.6-.9-1.2-2.4-1.2-4.5zM24 19c-3.9 0-7 3.1-7 7s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 12c-2.8 0-5-2.2-5-5s2.2-5 5-5 5 2.2 5 5-2.2 5-5 5zM11.4 19.4c-.3.6-.6 1.2-.8 1.9.7.7 1.3 2.4 1.3 4.6 0 2.2-.6 3.8-1.3 4.5.2.7.5 1.3.8 1.9 1.6-.9 2.6-3.3 2.6-6.3 0-3.1-1-5.6-2.6-6.6zM18 11h12v2h-12z"/></g><path fill=#FF7043 d="M16 6c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2s-.9-2-2-2h-12c-1.1 0-2 .9-2 2z"/><path fill=#8C2A0B d="M22.7 29.9l1.5 7.3-.2-8-3-2.4 3.6-6h-8.8l-2.6-3.9c-.7.8-1.3 1.7-1.9 2.9l2.6 2.9 8.7-.7-4.2 5.6 4.3 2.3z"/></svg>
</code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Archeology</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#FFCDD2 d="M38 43h-28c-2.2 0-4-1.8-4-4v-18c0-2.2 1.8-4 4-4h28c2.2 0 4 1.8 4 4v18c0 2.2-1.8 4-4 4z"/><path fill=#FF1744 d="M38 17h-28c-2.2 0-4 1.8-4 4v18c0 2.2 1.8 4 4 4h28c2.2 0 4-1.8 4-4v-18c0-2.2-1.8-4-4-4zm-1 22h-26c-.6 0-1-.4-1-1v-16c0-.6.4-1 1-1h26c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1z"/><g fill=#607D8B><path d="M16 7h4v10h-4zM22 7h2v10h-2zM12 7h2v10h-2zM26 7h6v10h-6zM34 7v10h2v-10h-2z"/></g><g fill=#263238><path d="M16 21h4v8h-4zM22 21h2v8h-2zM12 21h2v8h-2zM26 21h6v8h-6zM34 21v8h2v-8h-2z"/></g></svg>
</code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Barcode scanner</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><g fill=#9C1818><path d="M28 12.1h1v10h-1zM31 14.4h1v7.6h-1zM34 15.8h1v6.2h-1zM37 17.1h1v5h-1zM40 17.6h1v4.4h-1zM19 12.1h1v10h-1zM16 14.4h1v7.6h-1zM13 15.8h1v6.2h-1zM10 17.1h1v5h-1zM7 17.6h1v4.4h-1zM44 23h-40v2c2.2 0 4 1.8 4 4v6h6v-6c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4v6h6v-6c0-2.2 1.8-4 4-4v-2z"/></g><path fill=#81D4FA d="M4 35.3h40v6.7h-40z"/><g fill=#03A9F4><path d="M42 40h-2c0 1.1-.9 2-2 2s-2-.9-2-2h-2c0 1.1-.9 2-2 2s-2-.9-2-2h-2c0 1.1-.9 2-2 2s-2-.9-2-2h-2c0 1.1-.9 2-2 2s-2-.9-2-2h-2c0 1.1-.9 2-2 2s-2-.9-2-2h-2c0 1.1-.9 2-2 2s-2-.9-2-2h-2v3.4c.4-.2.7-.5 1-.8.7.9 1.8 1.4 3 1.4s2.3-.5 3-1.4c.7.8 1.8 1.4 3 1.4s2.3-.5 3-1.4c.7.8 1.8 1.4 3 1.4s2.3-.5 3-1.4c.7.8 1.8 1.4 3 1.4s2.3-.5 3-1.4c.7.8 1.8 1.4 3 1.4s2.3-.5 3-1.4c.7.8 1.8 1.4 3 1.4s2.3-.5 3-1.4c.7.8 1.8 1.4 3 1.4v-2c-1.1 0-2-.9-2-2zM42 33h-2c0 1.1-.9 2-2 2s-2-.9-2-2h-2c0 1.1-.9 2-2 2s-2-.9-2-2h-2c0 1.1-.9 2-2 2s-2-.9-2-2h-2c0 1.1-.9 2-2 2s-2-.9-2-2h-2c0 1.1-.9 2-2 2s-2-.9-2-2h-2c0 1.1-.9 2-2 2s-2-.9-2-2h-2v3.4c.4-.2.7-.5 1-.8.7.9 1.8 1.4 3 1.4s2.3-.5 3-1.4c.7.8 1.8 1.4 3 1.4s2.3-.5 3-1.4c.7.8 1.8 1.4 3 1.4s2.3-.5 3-1.4c.7.8 1.8 1.4 3 1.4s2.3-.5 3-1.4c.7.8 1.8 1.4 3 1.4s2.3-.5 3-1.4c.7.8 1.8 1.4 3 1.4s2.3-.5 3-1.4c.7.8 1.8 1.4 3 1.4v-2c-1.1 0-2-.9-2-2z"/></g><path fill=#C62828 d="M4 22h40v3h-40zM26 7.6c-.2-.9-1-1.6-2-1.6s-1.8.7-2 1.7c-.6 1.1-5.7 9.3-18 9.3v2c9.8 0 15.4-4.7 18-7.8v10.8h1v-2h2v2h1v-11.1c2.8 3.1 8.6 8.1 18 8.1v-2c-11.3 0-17.2-8.1-18-9.4zm-1 10.4h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2v-2h2v2z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Bridge</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#FF5722 d="M32 14l-6 6-6-6h4v-8h4v8z"/><g fill=#009688><path d="M18 32c-1.1 0-2-.9-2-2v-10h-4v10c0 3.3 2.7 6 6 6h19v-4h-19zM40 10l-6 13.4c-.2.4-.5.6-.9.6h-14.9c-.4 0-.8-.3-.9-.7l-4.9-14.6c-.6-1.6-2.1-2.7-3.8-2.7h-3.6v4h3.6l5.5 16.6c.3.8 1 1.4 1.9 1.4h19c.8 0 1.5-.5 1.8-1.2l7.6-16.8h-4.4z"/></g><circle fill=#00695C cx=5 cy=8 r="2"/><g fill=#37474F><circle cx=34 cy=39 r="3"/><circle cx=19 cy=39 r="3"/></g><g fill=#607D8B><circle cx=34 cy=39 r="1"/><circle cx=19 cy=39 r="1"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Buy</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#546E7A d="M12.7 30.7l2 8.2c.3 1-.5 2.1-1.6 2.1-.8 0-1.4-.5-1.6-1.3l-1.4-5.8 2.6-3.2z"/><path fill=#607D8B d="M8.6 31.9l-3.1-1.9c-1.7-1.1-1.9-3.2-.9-4.6l4-7.7c.4-1.1 1.4-1.7 2.6-1.7.9 0 1.8.3 2.6.8l3.1 2.2h5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5h-4.9c-.7 0-1.3-.2-1.8-.6l-1.2-.8-4.1 7.2 1.6 1.3c1.7 1.3 1.7 2.5.6 4.2l-4.5 6.9c-.3.5-.8.8-1.4.8-1.3 0-2.1-1.4-1.5-2.5l3.9-6.6z"/><path fill=#37474F d="M25 41h4c.6 0 1-.4 1-1v-10h-6v10c0 .6.4 1 1 1z"/><circle fill=#FFB74D cx=14.5 cy=12.5 r="3.5"/><path fill=#263238 d="M24 38h6v-11h-6v11z"/><path fill=#F44336 d="M30.9 9h13.1v28h-18c-1.1 0-2-.9-2-2v-14l3.1-9.3c.5-1.6 2.1-2.7 3.8-2.7z"/><path fill=#607D8B d="M27.4 21h16.6v-10h-13.3c-.9 0-1.6.6-1.9 1.4l-2.3 7.3c-.3.6.2 1.3.9 1.3z"/><path fill=#F44336 d="M21.8 22h3.2l1-4h-3.9c-.7 0-1.2.4-1.4 1.1l-.3 1.1c-.2.9.5 1.8 1.4 1.8z"/><circle fill=#FFF9C4 cx=28.5 cy=27.5 r="2.5"/><circle fill=#FFEB3B cx=28.5 cy=27.5 r="1.2"/><g fill=#C62828><path d="M44 33v2h-17c-.6 0-1-.4-1-1v-1h18zM44 30h-8c-.6 0-1-.4-1-1v-3c0-.6.4-1 1-1h8v5z"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Car theft</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#B0BEC5 d="M23 12h2v26h-2z"/><path fill=#FF9800 d="M33 36h-2l-2-3c-1.4-2-3.8-2.3-5-2.3-3.2 0-4.7 2.3-4.7 2.3l-2 3h-2.3l2.3-4.3.7-3.3c.5-2 1.5-3.4 3.4-3.4h7.6l.5 2.7 1.5 4.1 2 4.2z"/><g fill=#FFC107><path d="M24 6s-12 4.1-12 8c0 1.1 1.8 2 4 2s4-.9 4-2c0-3.2 1.8-3.7 4-3.7s4 4.8 4 3.7c0 1.1 1.8 2 4 2s4-.9 4-2c0-4.2-12-8-12-8zM28 38h8v4h-8zM12 38h8v4h-8z"/></g><path fill=#FF9800 d="M24.1 25.6c4 0 1.8-6.6 8.6-6.6l-.5 1.1 2.8 3.9-1.5 1-1.8-1.3c-1.1.6-1.8-.1-1.8-.1v5.7c.1.1-7.2-3.7-5.8-3.7z"/><g fill=#EF6C00><path d="M25 25c.7-1.7 1.8-6 7.7-6l-.5 1.1s-4.5 0-4.5 4.9c0 0-1.2 1.5-2.7 0zM18.6 26.8c.2-.4.5-.7.8-1-1-1-2.1-1.8-3.3-1.8-1.3 0-3.2.8-3.9 3.2l2.4 1.3c1.2-3.3 3-2.4 4-1.7z"/></g><g fill=#FF5722><path d="M24 6s12 5 12 8c0 1.1 1.3 2 3 2s3-.9 3-2v-1.5c0-.9-.6-1.7-1.5-1.9l-16.5-4.6zM24 6s-12 5-12 8c0 1.1-1.3 2-3 2s-3-.9-3-2v-1.5c0-.9.6-1.7 1.5-1.9l16.5-4.6zM24 6s-4 4-4 8c0 1.1 1.8 2 4 2s4-.9 4-2c0-4-4-8-4-8zM8 38c-1.1 0-2 .9-2 2v2h6v-4h-4zM20 38h8v4h-8zM40 38h-4v4h6v-2c0-1.1-.9-2-2-2z"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Carousel</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#9575CD d="M9 15h30c2.2 0 4 1.8 4 4v18h-38v-18c0-2.2 1.8-4 4-4z"/><g fill=#673AB7><path d="M5 37h38v2c0 2.2-1.8 4-4 4h-30c-2.2 0-4-1.8-4-4v-2zM37 17h-9c-1.1 0-2-.9-2-2v-5c0-1.1.9-2 2-2h9c1.1 0 2 .9 2 2v5c0 1.1-.9 2-2 2zM11 17h12v4h-12z"/></g><path fill=#90CAF9 d="M23 5l-2 1-2-1-2 1-2-1-2 1-2-1v14h12z"/><path fill=#2196F3 d="M28 10h9v5h-9z"/><g fill=#B39DDB><path d="M10 23h4v4h-4zM16 23h4v4h-4zM22 23h4v4h-4zM28 23h4v4h-4zM34 23h4v4h-4zM10 29h4v4h-4zM16 29h4v4h-4zM22 29h4v4h-4zM28 29h4v4h-4zM34 29h4v4h-4z"/><circle cx=24 cy=40 r="1.5"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Cash register</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#E89419 d="M24 13.5l-11 9.5-7 4v15h36v-15l-6.8-3.8-11.2-9.7z"/><g fill=#C62828><path d="M35.2 22.2l-11.2-9.7-11 9.5-7 4v2l7-4 11-9.5 11.2 9.7 6.8 3.8v-2zM35 4l-3 12h6zM13 4l-3 12h6z"/></g><g fill=#FFB74D><path d="M32 16h6v26h-6zM10 16h6v26h-6z"/></g><g fill=#805A26><path d="M28 42h-8v-9c0-2.2 1.8-4 4-4s4 1.8 4 4v9zM36 40h-2v-10c0-.6.4-1 1-1s1 .4 1 1v10zM14 40h-2v-10c0-.6.4-1 1-1s1 .4 1 1v10zM36 25h-2v-6c0-.6.4-1 1-1s1 .4 1 1v6zM14 25h-2v-6c0-.6.4-1 1-1s1 .4 1 1v6zM24 19c-1.7 0-3 1.3-3 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3zm0 4c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Cathedral</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#FF8A65 d="M34.3 42h-20.6c-1 0-1.8-.7-2-1.6l-3.7-19.4h32l-3.7 19.4c-.2.9-1 1.6-2 1.6z"/><g fill=#F0744D><path d="M23 19h2v21h-2zM38.1 19h-1l-4 21h1zM31.9 19h-1.5l-2 21h1.5zM9.9 19h1l4 21h-1zM16.1 19h1.5l2 21h-1.5zM8.4 23l1.7 8.9c1.1 1.2 3.8 3.6 8.8 3.6 11.7 0 13.6-8.1 17.3-8.1.9 0 1.8 1 2.1 2.2l1.3-6.6h-31.2z"/></g><path fill=#F8BBD0 d="M12.5 16.9c-2.2-.8-6.5 2.3-6.5 6.7 0 5.4 4.6 9.4 13.2 9.4 8.8 0 11.2-4.2 13.8-5.4 1.6-.8 5.6-1 5.5 1.3 1.5-.6 3.5-2.3 3.5-6.4 0-3.7-3.9-8-9.3-9.3-1-5.4-5.5-8.5-8.7-9.3 0 3.5-5 2.6-5 6.2-7 .1-6.5 6.8-6.5 6.8z"/><g fill=#F48FB1><path d="M10 17.2c4 7.7 15.9 6 15.9 6s-11.1.2-13.4-6.4c-.7-.2-1.6 0-2.5.4zM34.5 13.9l-1.8-.6v-.1c-2.4 3.7-5.4 4.2-5.4 4.2s4.8.3 7.2-3.5zM19 10.2c-.9 0-1.7.1-2.4.3 2 4.1 7.5 2.9 7.5 2.9s-4.3.3-5.1-3.2z"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Confectionery</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#4CAF50 d="M6 10v28c0 2.2 1.8 4 4 4h28c2.2 0 4-1.8 4-4v-28c0-2.2-1.8-4-4-4h-28c-2.2 0-4 1.8-4 4z"/><g fill=#FFC107><path d="M6.6 8l6 6c-.4.6-.6 1.3-.6 2 0 2.2 1.8 4 4 4s4-1.8 4-4-1.8-4-4-4c-.7 0-1.4.2-2 .6l-6-6c-.6.3-1.1.8-1.4 1.4zm9.4 6.5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5-1.5-.7-1.5-1.5.7-1.5 1.5-1.5zM41.4 40l-6-6c.4-.6.6-1.3.6-2 0-2.2-1.8-4-4-4s-4 1.8-4 4 1.8 4 4 4c.7 0 1.4-.2 2-.6l6 6c.6-.3 1.1-.8 1.4-1.4zm-9.4-6.5c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5-.7 1.5-1.5 1.5zM16 36c2.2 0 4-1.8 4-4 0-.7-.2-1.4-.6-2l10.6-10.6c.6.4 1.3.6 2 .6 2.2 0 4-1.8 4-4s-1.8-4-4-4-4 1.8-4 4c0 .7.2 1.4.6 2l-10.6 10.6c-.6-.4-1.3-.6-2-.6-2.2 0-4 1.8-4 4s1.8 4 4 4zm16-21.5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5-1.5-.7-1.5-1.5.7-1.5 1.5-1.5zm-16 16c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5-1.5-.7-1.5-1.5.7-1.5 1.5-1.5z"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Circuit</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#9575CD d="M19.7 31.2l-13.8 11.7c-.4.4-1.2-.3-.7-.7l11.6-13.8c0-.1 2.9.2 2.9 2.8z"/><path fill=#F8BBD0 d="M40.7 16.4c1.4-1.2 2.3-3 2.3-4.9 0-3.6-2.9-6.5-6.5-6.5-1.8 0-3.4.7-4.6 1.9-.9-1.1-2.3-1.9-3.9-1.9-2.6 0-4.7 2-4.9 4.5-.8-.3-1.7-.5-2.6-.5-4.1 0-7.5 3.4-7.5 7.5 0 .5.1 1.1.2 1.6-1.8.4-3.2 2-3.2 3.9 0 1.2.5 2.2 1.3 2.9-.8 1.2-1.3 2.6-1.3 4.1 0 3.9 3.1 7 7 7 1.6 0 3.1-.5 4.2-1.4 1.5 1.5 3.5 2.4 5.8 2.4 3.8 0 7-2.7 7.8-6.3 2.4-.8 4.2-3 4.2-5.7 0-.3 0-.7-.1-1h.1c2.2 0 4-1.8 4-4 0-1.6-.9-2.9-2.3-3.6z"/><g fill=#F48FB1><path d="M24 29h2c0-2.8 2.2-5 5-5v-2c-3.9 0-7 3.1-7 7zM30.8 14.1c1.3-.9 2.2-2.4 2.2-4.1h-2c0 1.7-1.3 3-3 3v2c1.1 0 2 .9 2 2h2c0-1.1-.5-2.1-1.2-2.9zM18 18v2c1.1 0 2 .9 2 2h2c0-2.2-1.8-4-4-4z"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Cotton candy</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#FFC107 d="M42 36h-14v-20c0-1.1.9-2 2-2h8c.6 0 1.2.3 1.6.8l6 7.7c.3.4.4.8.4 1.2v8.3c0 2.2-1.8 4-4 4z"/><path fill=#9575CD d="M6 36h22v-24c0-2.2-1.8-4-4-4h-17c-2.8 0-5 2.2-5 5v19c0 2.2 1.8 4 4 4z"/><g fill=#37474F><circle cx=37 cy=36 r="5"/><circle cx=14 cy=36 r="5"/></g><g fill=#78909C><circle cx=37 cy=36 r="2.5"/><circle cx=14 cy=36 r="2.5"/></g><path fill=#455A64 d="M42 26h-3.6c-.3 0-.5-.1-.7-.3l-1.4-1.4c-.2-.2-.4-.3-.7-.3h-3.6c-.6 0-1-.4-1-1v-6c0-.6.4-1 1-1h5.5c.3 0 .6.1.8.4l4.5 5.4c.1.2.2.4.2.6v2.6c0 .6-.4 1-1 1z"/><path fill=#fff d="M15 11c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm0 10c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"/><path fill=#37474F d="M16.9 20.5l.1-.5c0-.7-.4-1.4-1-1.7v-5.3h-2v5.3c-.6.3-1 1-1 1.7 0 1.1.9 2 2 2 .2 0 .3 0 .5-.1l2.3 2.3 1.4-1.4-2.3-2.3zm-1.9.5c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Delivery</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#F44336 d="M24 3l4.3 4.8 6.2-2 1.4 6.3 6.3 1.4-2 6.2 4.8 4.3-4.8 4.3 2 6.2-6.3 1.4-1.4 6.3-6.2-2-4.3 4.8-4.3-4.8-6.2 2-1.4-6.3-6.3-1.4 2-6.2-4.8-4.3 4.8-4.3-2-6.2 6.3-1.4 1.4-6.3 6.2 2z"/><g fill=#fff><path d="M20 32.3l-1.7-1 9.7-15.6 1.7 1zM19 14c-1.8 0-4 1.1-4 4v1c0 1.8 1.1 4 4 4 2.1 0 4-1.4 4-4v-1c0-2.5-1.7-4-4-4zm1.8 5c0 1.3-.7 2-1.8 2-.9 0-1.8-.6-1.8-2v-1c0-1.4.9-2.1 1.8-2.1 1.4 0 1.8 1.3 1.8 2.1v1zM29 34c1.8 0 4-1.1 4-4v-1c0-1.8-1.1-4-4-4-2.1 0-4 1.4-4 4v1c0 2.5 1.7 4 4 4zm-1.8-5c0-1.3.7-2 1.8-2 .9 0 1.8.6 1.8 2v1c0 1.4-.9 2.1-1.8 2.1-1.4 0-1.8-1.3-1.8-2.1v-1z"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Discount</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#BF360C d="M41.2 5h-7.3l-1.9 38h11l-1.8-38z"/><path fill=#E64A19 d="M33 23h-4v-6l-12 6v-6l-12 6v20h28v-20z"/><path fill=#FFC107 d="M9 27h4v4h-4zM17 27h4v4h-4zM25 27h4v4h-4zM9 35h4v4h-4zM17 35h4v4h-4zM25 35h4v4h-4z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Factory</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#FF9800 d="M24 37l-5-4v-8h10v8z"/><g fill=#FFA726><circle cx=33 cy=19 r="2"/><circle cx=15 cy=19 r="2"/></g><path fill=#FFB74D d="M33 13c0-7.6-18-5-18 0v7c0 5 4 9 9 9s9-4 9-9v-7z"/><path fill=#FF5722 d="M24 4c-6.1 0-10 4.9-10 11v2.3l2 1.7v-5l12-4 4 4v5l2-1.7v-2.3c0-4-1-8-6-9l-1-2h-3z"/><g fill=#784719><circle cx=28 cy=19 r="1"/><circle cx=20 cy=19 r="1"/></g><path fill=#546E7A d="M29 31s-1.5 3-5 3l-5-3s-11 2-11 13h32c0-11-11-13-11-13z"/><path fill=#37474F d="M24 17c-4 0-10-1-10-1v1.3s3 5.7 5.5 5.7h.5c1.2 0 2.2-.6 2.9-1.5.5-.7 1.6-.7 2.2 0 .7.9 1.8 1.5 2.9 1.5h.5c2.5 0 5.5-5.7 5.5-5.7v-1.3s-6 1-10 1zm-2.3 2c0 1.5-.5 2-1.8 2h-.3c-1 0-1.9-.7-2.3-1.6-.2-.7.3-1.4 1-1.4l3.4 1zm8.8.4c-.3 1-1.2 1.6-2.3 1.6h-.2c-1.3 0-1.8-.5-1.8-2l3.3-1c.8 0 1.3.7 1 1.4z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Fraud</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#0277BD d="M5 21h38v4h-38z"/><path fill=#03A9F4 d="M31 39h-14c-4.4 0-8-3.6-8-8v-13c0-8.3 6.7-15 15-15s15 6.7 15 15v13c0 4.4-3.6 8-8 8z"/><g fill=#B3E5FC><circle cx=31 cy=23 r="4"/><circle cx=17 cy=23 r="4"/></g><path fill=#607D8B d="M24 31c-4 0-7 3-7 7s3 7 7 7 7-3 7-7-3-7-7-7z"/><g fill=#263238><path d="M24 33c-.6 0-1 .4-1 1s.4 1 1 1 1-.4 1-1-.4-1-1-1zM24 41c-.6 0-1 .4-1 1s.4 1 1 1 1-.4 1-1-.4-1-1-1zM19.7 35.5c-.3.5-.1 1.1.4 1.4.5.3 1.1.1 1.4-.4s.1-1.1-.4-1.4c-.6-.2-1.1-.1-1.4.4zM26.6 39.5c-.3.5-.1 1.1.4 1.4.5.3 1.1.1 1.4-.4.3-.5.1-1.1-.4-1.4-.5-.2-1.1-.1-1.4.4zM19.7 40.5c.3.5.9.6 1.4.4.5-.3.6-.9.4-1.4s-.9-.6-1.4-.4c-.6.3-.7.9-.4 1.4zM26.6 36.5c.3.5.9.6 1.4.4.5-.3.6-.9.4-1.4-.4-.5-.9-.6-1.4-.4-.5.3-.7.9-.4 1.4z"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Gas mask</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#D32F2F d="M38 42h-28c-1.1 0-2-.9-2-2v-20h32v20c0 1.1-.9 2-2 2z"/><path fill=#F44336 d="M42 20h-36v-6c0-1.1.9-2 2-2h32c1.1 0 2 .9 2 2v6z"/><path fill=#FF8F00 d="M22 20h4v22h-4zM32 6h-4l-6 6h4z"/><path fill=#FFC107 d="M20 6h-4l6 6v8h4v-8z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Gift</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#CDDC39 d="M38 17c0-7.8-6.2-14-14-14s-14 6.2-14 14c0 8.2 8 10.8 8 16.6v1.4h12v-1.4c0-5.8 8-8.4 8-16.6z"/><path fill=#388E3C d="M19.3 8.9s-3.4 7.7-1.9 12.8c1.1 3.6 4.9 4.5 6.6 3.2.2 1.5-.4 2.8-.9 4.1l3 1.1c1.9-5.6-1.3-12-3.2-15 4.5 3.2 5.8 8.6 5.8 8.6.4-.2.6-.6 1.1-1.1 2.8-3.4 1.3-11.3-10.5-13.7zM18 34v5c0 1.9 1.4 3.5 3.2 3.9.4 1.2 1.5 2.1 2.8 2.1s2.5-.9 2.8-2.1c1.8-.4 3.2-2 3.2-3.9v-5h-12z"/><g fill=#4CAF50><path d="M30 39l-11.6 1.6c.3.7.9 1.4 1.6 1.8l9.4-1.3c.4-.6.6-1.3.6-2.1zM18 36.7v2l12-1.7v-2z"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Greentech</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#455A64 d="M7 35h34c1.1 0 2-.9 2-2v-24c0-1.1-.9-2-2-2h-34c-1.1 0-2 .9-2 2v24c0 1.1.9 2 2 2z"/><path fill=#EA80FC d="M8 31h32c.6 0 1-.4 1-1v-20c0-.6-.4-1-1-1h-32c-.6 0-1 .4-1 1v20c0 .6.4 1 1 1z"/><path fill=#F4BAFD d="M15 28v3h18v-3h-18zm2.2 2.2h-1.5v-1.5h1.5v1.5zm3 0h-1.5v-1.5h1.5v1.5zm3 0h-1.5v-1.5h1.5v1.5zm3 0h-1.5v-1.5h1.5v1.5zm3 0h-1.5v-1.5h1.5v1.5zm3 0h-1.5v-1.5h1.5v1.5z"/><path fill=#607D8B d="M30 39h-12l1-4h10z"/><path fill=#90A4AE d="M15 39h18v2h-18z"/><g fill=#4A148C><circle cx=29.5 cy=18.5 r="1.5"/><circle cx=18.5 cy=18.5 r="1.5"/></g><path fill=#263238 d="M24 16.2c-5.2 0-13-1.3-13-1.3v1.6s3.9 7.5 7.1 7.5h.6c1.5 0 2.9-.7 3.8-1.9.7-1 2.1-1 2.8 0 .9 1.2 2.3 1.9 3.8 1.9h.6c3.2 0 7.1-7.5 7.1-7.5v-1.6c.2 0-7.6 1.3-12.8 1.3zm-3 2.6c0 1.9-.6 2.6-2.3 2.6h-.3c-1.3 0-2.5-.9-2.9-2.1-.3-.9.4-1.8 1.3-1.8l4.2 1.3zm11.5.5c-.4 1.3-1.6 2.1-2.9 2.1h-.3c-1.7 0-2.3-.7-2.3-2.6l4.2-1.3c.9 0 1.6.9 1.3 1.8z"/><circle fill=#263238 cx=24 cy=33 r="1"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Hacking</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><g fill=#3949AB><path d="M35.1 8.1l-2.1-2.1c-1.4-1.4-3.6-1.4-4.9 0-1.4 1.4-1.4 3.6 0 4.9l2.1 2.1c1.4 1.4 3.6 1.4 4.9 0 1.4-1.3 1.4-3.5 0-4.9zm-5.7-.7c.6-.6 1.5-.6 2.1 0l2.1 2.1c.6.6.6 1.5 0 2.1-.6.6-1.5.6-2.1 0l-2.1-2.1c-.5-.5-.5-1.5 0-2.1zM34.6 15.7c-.6-.2-1.2.2-1.3.7l-2.1 6.6c-.2.6.2 1.2.7 1.3h.1c.5.1 1.1-.2 1.2-.8l2.1-6.6c.2-.4-.1-1-.7-1.2z"/></g><g fill=#5C6BC0><path d="M30.8 8.4c-.1-.6-.6-1-1.2-.9l-5.8.8c-.6.1-1 .6-.9 1.2.1.4.3.7.6.8.2.1.4.1.7.1l5.8-.8c.5 0 .9-.6.8-1.2zM32.6 18.4l.6-2c-.2-.2-.3-.6-.3-.9v-1.4c-.7.1-1.4-.1-2-.4v1.8c.1 1.2.8 2.3 1.7 2.9zM34.5 9c-1.5 0-2.8 1-3.3 2.3l.3.3c.4.4 1 .5 1.5.3.2-.6.8-1 1.4-1 .8 0 1.5.7 1.5 1.5v3c0 .5-.2.9-.6 1.2v.3l-.6 2.1c1.8-.1 3.3-1.6 3.3-3.5v-3c0-1.9-1.6-3.5-3.5-3.5z"/></g><g fill=#7986CB><path d="M37 29h-10v-6c0-1.1.9-2 2-2h6c1.1 0 2 .9 2 2v6zM32 25c-6.1 0-11 4-11 9s4.9 9 11 9 11-4 11-9-4.9-9-11-9zm0 14c-3.8 0-7-2.3-7-5s3.2-5 7-5 7 2.3 7 5-3.2 5-7 5zM22.1 16.9l-7.1-7.1 4.2-4.2c.8-.8 2-.8 2.8 0l4.2 4.2c.8.8.8 2 0 2.8l-4.1 4.3zM21.4 10.5c-4.3-4.3-10.6-4.9-14.1-1.4-3.5 3.5-2.9 9.9 1.4 14.2s10.6 4.9 14.1 1.4c3.5-3.5 2.9-9.9-1.4-14.2zm-9.9 9.9c-2.7-2.7-3.3-6.6-1.4-8.5s5.8-1.3 8.5 1.4 3.3 6.6 1.4 8.5-5.8 1.3-8.5-1.4z"/></g><g fill=#3949AB><circle cx=32 cy=25 r="1.5"/><circle cx=22.4 cy=9.9 r="1.5"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Handcuffs</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#FFB74D d="M36.8 28.2l-11.3-11.3 2.5-1.9-2-2h-13.5l-8.5-2v16l5.9 1 12 12.2c.8.8 2 .8 2.8 0 .8-.8.8-2 0-2.8l-.1-.1c-.2-.2-.2-.5 0-.7.2-.2.5-.2.7 0l.8.8c.8.8 2 .8 2.8 0 .8-.8.8-2 0-2.8l-.3-.3c-.2-.2-.2-.5 0-.7.2-.2.5-.2.7 0l1 1c.8.8 2 .8 2.8 0 .8-.8.8-2 0-2.8l-.3-.3c-.2-.2-.2-.5 0-.7.2-.2.5-.2.7 0l.3.3c.8.8 2 .8 2.8 0 1-.8 1-2.1.2-2.9z"/><g fill=#C77600><path d="M27.4 18.9l-4.7 1.8c-2.8 1.1-5.9.4-7.9-1.8-.4-.4-.3-1.1.3-1.4l13.3-6.5c1.6-.8 3.5-.6 4.9.4l.4.3c1.1.8 2.6 1 3.9.7l6.4-1.4v16l-5.9 1-.8.8-9.9-9.9zM18 39c.8.8 2 .8 2.8 0l.7-.7c.8-.8.8-2 0-2.8-.8-.8-2-.8-2.8 0l-.7.7c-.8.8-.8 2 0 2.8zM15.1 36.2c.8.8 2 .8 2.8 0l.7-.7c.8-.8.8-2 0-2.8-.8-.8-2-.8-2.8 0l-.7.7c-.7.7-.7 2 0 2.8zM12.3 33.4c.8.8 2 .8 2.8 0l.7-.7c.8-.8.8-2 0-2.8-.8-.8-2-.8-2.8 0l-.7.7c-.8.7-.8 2 0 2.8zM9.5 30.5c.8.8 2 .8 2.8 0l.7-.7c.8-.8.8-2 0-2.8-.8-.8-2-.8-2.8 0l-.7.7c-.8.8-.8 2 0 2.8z"/></g><g fill=#EBAE55><path d="M20.5 37.9l-1.5-1.4.4-.4c.4-.4.9-.4 1.3 0l.1.1c.4.4.4.9 0 1.3l-.3.4zM17.6 35.1l-1.4-1.4.4-.4c.4-.4.9-.4 1.3 0l.1.1c.4.4.4.9 0 1.3l-.4.4zM14.8 32.3l-1.4-1.4.4-.4c.4-.4.9-.4 1.3 0l.1.1c.4.4.4.9 0 1.3l-.4.4zM12 29.5l-1.4-1.5.4-.4c.4-.4.9-.4 1.3 0l.1.1c.4.4.4.9 0 1.3l-.4.5z"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Handshake</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path stroke=#B0BEC5 stroke-width=1.5 stroke-linejoin=round stroke-miterlimit=10 fill=none d="M10 10l14-7 14 7"/><path fill=#607D8B d="M40.6 40.1h-1.9l-3.1-.4c-2.4-.3-4.9-.2-7.3.4l-3.6.9c-.5.1-1.1.1-1.6 0l-3.5-1c-2.4-.6-4.8-.7-7.3-.4l-3.1.4h-1.8c-1.9 0-3.4-1.5-3.4-3.4 0-.4.1-.9.2-1.3l.2-.6c1-2.5 1.1-5.3.4-7.9l-.6-2c-.2-.7-.2-1.3 0-2l.3-.8c.9-2.7.8-5.7-.2-8.4l-.1-.3c-.1-.2-.2-.6-.2-1v-1c0-1.9 1.5-3.4 3.4-3.4h1.9l3.1.4c2.4.3 4.9.2 7.3-.4l3.6-.9c.5-.1 1.1-.1 1.6 0l3.5 1c2.4.6 4.8.7 7.3.4l3.1-.4h1.9c1.9 0 3.4 1.5 3.4 3.4v1c0 .4-.1.9-.2 1.3l-.1.3c-1.1 2.7-1.2 5.6-.2 8.4l.3.8c.2.6.2 1.3 0 2l-.6 2c-.7 2.6-.6 5.4.4 7.9l.2.6c.2.4.2.8.2 1.3-.1 1.6-1.6 3.1-3.5 3.1z"/><path fill=#8BC34A d="M38 36h-28c-.6 0-1-.4-1-1v-22c0-.6.4-1 1-1h28c.6 0 1 .4 1 1v22c0 .6-.4 1-1 1z"/><path fill=#fff d="M27 18c0 1.7-3 5.2-3 5.2s-3-3.6-3-5.2 1.3-3 3-3 3 1.3 3 3zM21 30c0-1.7 3-5.2 3-5.2s3 3.6 3 5.2-1.3 3-3 3-3-1.3-3-3zM20.3 18.4c1.4.8 3 5.2 3 5.2s-4.6.8-6 0c-1.4-.8-1.9-2.7-1.1-4.1.8-1.4 2.7-1.9 4.1-1.1zM27.7 29.6c-1.4-.8-3-5.2-3-5.2s4.6-.8 6 0c1.4.8 1.9 2.7 1.1 4.1-.8 1.4-2.7 1.9-4.1 1.1zM17.3 24.4c1.4-.8 6 0 6 0s-1.6 4.4-3 5.2c-1.4.8-3.3.3-4.1-1.1-.8-1.4-.3-3.3 1.1-4.1zM30.7 23.6c-1.4.8-6 0-6 0s1.6-4.4 3-5.2c1.4-.8 3.3-.3 4.1 1.1.8 1.4.3 3.3-1.1 4.1z"/><circle fill=#FFC107 cx=24 cy=24 r="3"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Home decoration</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#F44336 d="M10 42h28c2.2 0 4-1.8 4-4v-22.3c0-1.6-1-3.1-2.6-3.7l-15.4-6-15.4 6c-1.6.6-2.6 2.1-2.6 3.7v22.3c0 2.2 1.8 4 4 4z"/><path fill=#fff d="M32 24h-6v-6h-4v6h-6v4h6v6h4v-6h6z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Hospital</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#607D8B d="M29 6v-1h-10v1c0 2.4-1.6 4.4-4 4.9l-10 2.1c0 15 7 30 7 30h24s7-15 7-30l-10-2.2c-2.4-.4-4-2.5-4-4.8z"/><g fill=#FFB300><path d="M32 9.4c-.5 0-1 .4-1.1.9-.2 3.7-3.3 6.6-7 6.6s-6.8-2.9-7-6.6c0-.6-.5-1-1.1-.9-.6 0-1 .5-.9 1.1.3 4.7 4.2 8.5 9 8.5s8.7-3.7 9-8.5c.1-.6-.3-1-.9-1.1zM24 29.3l-4-5.3 4-4 4 4z"/></g><path fill=#FFC107 d="M24 20c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1z"/><path fill=#F44336 d="M24 21l3 3-3 4-3-4z"/><path fill=#B71C1C d="M27 24l-3 4v-4z"/><path fill=#E57373 d="M24 21l-3 3h3z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Jewelry</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#607D8B d="M23 7v32.5c0 .8-.7 1.5-1.5 1.5s-1.5-.7-1.5-1.5v-.5c0-.6-.4-1-1-1s-1 .4-1 1v.5c0 1.9 1.6 3.5 3.5 3.5s3.5-1.6 3.5-3.5v-32.5h-2z"/><path fill=#F50057 d="M43 26s-4.2-15-19-15l-19 15s2-2 4.5-2l4.5 2s2.2-2 5-2l5 2s2.2-2 5-2l5 2s2-2 4.5-2l4.5 2z"/><path fill=#D9004D d="M43 26s-4.2-15-19-15c8 0 10 15 10 15s2-2 4.5-2l4.5 2z"/><path fill=#FF4081 d="M24 11c-14.8 0-19 15-19 15s2-2 4.5-2l4.5 2s0-15 10-15z"/><path fill=#03A9F4 d="M41 11c0 1.1-.9 2-2 2s-2-.9-2-2l2-4s2 2.9 2 4zM33 8c0 1.1-.9 2-2 2s-2-.9-2-2l2-4s2 2.9 2 4zM7 11c0 1.1.9 2 2 2s2-.9 2-2l-2-4s-2 2.9-2 4zM15 8c0 1.1.9 2 2 2s2-.9 2-2l-2-4s-2 2.9-2 4z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Keep dry</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#E0F2F1 d="M42 16h-36v1.9h1.8c.4 0 .6.4.7.6l1.1 8.8c.2 2.1 2.1 3.8 4.2 3.8h20.3c2.1 0 4-1.7 4.2-3.8l1.1-8.8c.1-.4.3-.7.7-.7h1.8l.1-1.8z"/><g fill=#F44336><path d="M24 8.7c-9.8 0-16.4 7.3-16.4 7.3h32.7c.1 0-6.5-7.3-16.3-7.3zM25.8 10.6h-3.6l-1.1-2.9c0-.4.2-.7.7-.7h4.5c.4 0 .7.4.5.7l-1 2.9zM39 42h-30c-1.3 0-2.3-1.3-1.9-2.6l1.8-6c.3-.8 1-1.4 1.9-1.4h26.4c.9 0 1.7.6 1.9 1.4l1.8 6c.4 1.3-.6 2.6-1.9 2.6z"/></g><path fill=#fff d="M24 34c-1.7 0-3 1.3-3 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3zm1.8 2.1l-2.8 2.8c-.2.2-.6.2-.9 0-.2-.2-.2-.6 0-.9l2.8-2.8c.2-.2.6-.2.9 0 .3.2.3.6 0 .9z"/><path fill=#80CBC4 d="M36 22c-.7 0-1.3.2-1.8.6-.7-1-1.9-1.6-3.2-1.6-1.1 0-2.1.5-2.9 1.2-.9-1.3-2.4-2.2-4.1-2.2s-3.2.9-4.1 2.2c-.8-.7-1.8-1.2-2.9-1.2-1.3 0-2.5.6-3.2 1.6-.5-.4-1.1-.6-1.8-.6-1.7 0-3 1.3-3 3l1.2 3.5c.5 1.5 1.9 2.5 3.5 2.5h20.7c1.6 0 3-1 3.5-2.5l1.1-3.5c0-1.7-1.3-3-3-3z"/><path fill=#009688 d="M43 16h-1.9c-1.3 0-2.4 1-2.7 2.4l-1.2 9.4c-.2 1.2-1.3 2.2-2.5 2.2h-21.4c-1.2 0-2.3-1-2.5-2.2l-1.2-9.4c-.3-1.4-1.4-2.4-2.7-2.4h-1.9v2h1.9c.4 0 .7.4.7.7l1.2 9.3c.2 2.2 2.2 4 4.5 4h21.4c2.2 0 4.2-1.8 4.4-4l1.2-9.3c.1-.4.4-.8.8-.8h1.9v-1.9z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Kitchenwares</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#4CAF50 d="M42 11h-36c-2.2 0-4 1.8-4 4v16h44v-16c0-2.2-1.8-4-4-4z"/><path fill=#37474F d="M2 31v4c0 2.2 1.8 4 4 4h17v-5c0-.6.4-1 1-1s1 .4 1 1v5h17c2.2 0 4-1.8 4-4v-4h-44z"/><path fill=#FF9800 d="M7 33h2v6h-2zM11 33h2v6h-2zM15 33h2v6h-2zM19 33h2v6h-2zM27 33h2v6h-2zM31 33h2v6h-2zM35 33h2v6h-2zM39 33h2v6h-2z"/><g fill=#37474F><path d="M20 17h8v10h-8zM32 17h8v10h-8zM8 17h8v10h-8z"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Memory slot</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><g fill=#3F51B5><path d="M18 12c-2.8 0-5-2.2-5-5s2.2-5 5-5 5 2.2 5 5-2.2 5-5 5zM10 22v8l3 2 1 14h8l1-14 3-2v-8c0-4.4-3.6-8-8-8s-8 3.6-8 8z"/></g><path fill=#1E88E5 d="M30 33.7v-11.7c0-4.5-1.4-7.4-4-10.2.7-1.5 1-3.2 1-4.8 0-1.8-.4-3.5-1.1-5h-2.7c1.1 1.4 1.8 3.1 1.8 5 0 3-2.1 5.6-2.1 5.6s5.1 2.2 5.1 9.4v9.6l-3.1 2.1-.9 12.3h2l.7-10.1 3.3-2.2z"/><path fill=#64B5F6 d="M29 7c0 2.3-.7 4.3-.7 4.3s3.7 4.3 3.7 10.7v13.1l-3.4 2.2-.6 8.7h2l.5-7.6 3.4-2.3v-14.1c0-4-1.2-7.8-3.5-11.1.4-1.3.6-2.6.6-3.9 0-1.7-.3-3.4-.8-5h-2.1c.6 1.6.9 3.2.9 5z"/><path fill=#BBDEFB d="M33 7c0 1.2-.1 2.4-.3 3.5 2.1 3.5 3.3 7.4 3.3 11.5v15.2l-3.5 2.3-.5 6.5h2l.4-5.3 3.6-2.4v-16.3c0-4.2-1.1-8.3-3.2-11.9.1-1 .2-2.1.2-3.1 0-1.7-.2-3.4-.6-5h-2.1c.5 1.6.7 3.3.7 5z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Motion detector</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#607D8B d="M13.1 33c-.7 0-1.2-.5-1.3-1.2l-2.6-22.1c-.2-1.6-1.5-2.7-3-2.7h-1.2v2h1.2c.5 0 .9.4 1 .9l2.6 22.2c.2 1.7 1.6 2.9 3.3 2.9h10.9v-2h-10.9z"/><path fill=#FFC107 d="M14 31h29v4h-29z"/><g fill=#37474F><circle cx=38 cy=38 r="3"/><circle cx=19 cy=38 r="3"/></g><g fill=#607D8B><circle cx=38 cy=38 r="1"/><circle cx=19 cy=38 r="1"/></g><path fill=#FF9800 d="M38 31h-20c-1.1 0-2-.9-2-2v-20c0-1.1.9-2 2-2h20c1.1 0 2 .9 2 2v20c0 1.1-.9 2-2 2z"/><path fill=#8A5100 d="M30 11h-4c-.6 0-1-.4-1-1s.4-1 1-1h4c.6 0 1 .4 1 1s-.4 1-1 1zM30 24h-4c-.6 0-1-.4-1-1s.4-1 1-1h4c.6 0 1 .4 1 1s-.4 1-1 1z"/><path fill=#C77600 d="M16 18h24v2h-24z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Move by trolley</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><g fill=#673AB7><path d="M39 12h-30c-1.7 0-3-1.3-3-3s1.3-3 3-3h30c1.7 0 3 1.3 3 3s-1.3 3-3 3zM39 42h-30c-1.7 0-3-1.3-3-3s1.3-3 3-3h30c1.7 0 3 1.3 3 3s-1.3 3-3 3zM39 27h-30c-1.7 0-3-1.3-3-3s1.3-3 3-3h30c1.7 0 3 1.3 3 3s-1.3 3-3 3zM8 11h32v26h-32z"/></g><path fill=#FFEB3B d="M30 26c0 3.3-2.7 6-6 6s-6-2.7-6-6l6-10.5s6 7.2 6 10.5z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Oil indaustry</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#F8BBD0 d="M34.7 5.4c-.3-.5-1-.6-1.4-.1-1.7 1.9-5.9 5.2-9.2 5.2-3.4 0-8.2-3.4-10.2-5.3-.4-.4-1.2-.3-1.4.2-1.6 3-5.5 11.7-5.5 26.4v3.2c0 4.4 3.5 8 7.9 8h18.2c4.4 0 7.9-3.6 7.9-8v-3.1c0-15.1-4.5-23.7-6.3-26.5z"/><ellipse fill=#F9E3EA cx=24 cy=25 rx=7 ry="6"/><g fill=#37474F><circle cx=32 cy=17 r="3"/><circle cx=16 cy=17 r="3"/></g><path fill=#9E3157 d="M24 24l-3-3h6z"/><g fill=#F48FB1><path d="M7.8 21c-2.1.7-3.4 1.3-3.5 1.4-1.9.9-2.8 3.3-1.9 5.3.8 1.8 2.8 2.7 4.7 2.1 0-3.3.3-6.2.7-8.8zM43.7 22.4c-.1-.1-1.5-.7-3.6-1.4.4 2.6.7 5.6.8 8.9.4.1.8.2 1.2.2 1.5 0 2.9-.9 3.5-2.3.9-2.1.1-4.5-1.9-5.4z"/><ellipse transform="matrix(.816 .579 -.579 .816 27.93 -13.631)" cx=35.3 cy=37 rx=5.3 ry="6.3"/><ellipse transform="matrix(-.816 .579 -.579 -.816 44.381 59.854)" cx=12.7 cy=37 rx=5.3 ry="6.3"/><path d="M30.2 10.9s1.7-.7 3.4-2.5c.2-.2.6-.1.7.2.8 1.5 1.5 3.4 1.5 3.4-2.2-1.2-5.6-1.1-5.6-1.1zM17.8 10.9s-1.7-.7-3.4-2.5c-.2-.2-.6-.1-.7.2-.8 1.5-1.5 3.4-1.5 3.4 2.2-1.2 5.6-1.1 5.6-1.1z"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Plush</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><g fill=#469C10><path d="M10.699 41.098l-2.828-2.828 31.108-31.108 2.828 2.828z"/><circle cx=39 cy=7 r="3"/><circle cx=42 cy=10 r="3"/><circle cx=8 cy=38 r="3"/><circle cx=10 cy=41 r="3"/><path d="M6.116 9.985l2.828-2.828 31.108 31.108-2.828 2.828zM28 43h-8c-2.2 0-4-1.8-4-4v-6h16v6c0 2.2-1.8 4-4 4z"/><circle cx=9 cy=7 r="3"/><circle cx=6 cy=10 r="3"/><circle cx=40 cy=38 r="3"/><circle cx=38 cy=41 r="3"/></g><g fill=#64DD17><ellipse cx=24 cy=19 rx=15 ry="14"/><path d="M34 33h-20c-1.7 0-3-1.3-3-3v-8h26v8c0 1.7-1.3 3-3 3zM28 38h-8c-1.1 0-2-.9-2-2v-6h12v6c0 1.1-.9 2-2 2zM20 39h2v2h-2zM26 39h2v2h-2zM23 39h2v2h-2z"/></g><g fill=#33691E><path d="M24 29c-1 .2-2.5 2.7-2.5 4 0 .6.6 1 1 1 .8 0 1.3-.8 1.5-1.3.2.6.6 1.3 1.5 1.3.6 0 1-.4 1-1 0-1.3-1.5-3.8-2.5-4z"/><circle cx=30 cy=26 r="4"/><circle cx=18 cy=26 r="4"/></g><g fill=#CCFF90><path d="M20 36h2v2h-2zM26 36h2v2h-2zM23 36h2v2h-2z"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Poison</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#1976D2 d="M12 35h19v4h-19z"/><path fill=#2196F3 d="M29 44h-15c-1.1 0-2-.9-2-2v-3h19v3c0 1.1-.9 2-2 2z"/><path fill=#607D8B d="M35 15h-26v18c0 2.2 1.8 4 4 4h18c2.2 0 4-1.8 4-4v-18z"/><path fill=#546E7A d="M31 4h-18c-2.2 0-4 1.8-4 4v8h26v-8c0-2.2-1.8-4-4-4z"/><path fill=#9CCC65 d="M31 13h-18c-.6 0-1-.4-1-1v-4c0-.6.4-1 1-1h18c.6 0 1 .4 1 1v4c0 .6-.4 1-1 1z"/><g fill=#33691E><path d="M28 9h2v2h-2zM24 9h2v2h-2z"/></g><path fill=#FF5252 d="M32 22h-2c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1h2c.6 0 1 .4 1 1v2c0 .6-.4 1-1 1z"/><g fill=#E0E0E0><path d="M14 22h-2c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1h2c.6 0 1 .4 1 1v2c0 .6-.4 1-1 1zM20 22h-2c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1h2c.6 0 1 .4 1 1v2c0 .6-.4 1-1 1zM14 28h-2c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1h2c.6 0 1 .4 1 1v2c0 .6-.4 1-1 1zM20 28h-2c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1h2c.6 0 1 .4 1 1v2c0 .6-.4 1-1 1zM14 34h-2c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1h2c.6 0 1 .4 1 1v2c0 .6-.4 1-1 1zM20 34h-2c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1h2c.6 0 1 .4 1 1v2c0 .6-.4 1-1 1zM26 22h-2c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1h2c.6 0 1 .4 1 1v2c0 .6-.4 1-1 1zM26 28h-2c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1h2c.6 0 1 .4 1 1v2c0 .6-.4 1-1 1zM26 34h-2c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1h2c.6 0 1 .4 1 1v2c0 .6-.4 1-1 1z"/></g><path fill=#81C784 d="M32 28h-2c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1h2c.6 0 1 .4 1 1v2c0 .6-.4 1-1 1z"/><path fill=#FFC107 d="M32 34h-2c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1h2c.6 0 1 .4 1 1v2c0 .6-.4 1-1 1z"/><path fill=#455A64 d="M37 32h-2v-23h2c1.1 0 2 .9 2 2v19c0 1.1-.9 2-2 2z"/><path fill=#263238 d="M24 37h3v7h-3z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Pos terminal</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#3F51B5 d="M25 5l-18.8 18.8c-1.6 1.6-1.6 4.1 0 5.7l12.3 12.3c1.6 1.6 4.1 1.6 5.7 0l18.8-18.8v-14c0-2.2-1.8-4-4-4h-14zm12 8c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/><path fill=#FFF59D d="M28.2 23.3l-1.2 1.2-2.7-2.7-1 1 2.7 2.7-1.2 1.2-2.6-2.7c-.5.6-2.4 2.3.1 4.8.7.7 1.4 1.1 1.8 1.3l-1.6 2.2c-.4-.2-1.7-1.2-2.3-1.8-1.8-1.8-3.7-5.5-.3-8.8l-1.3-1.3 1.2-1.2 1.3 1.3 1-1-1.3-1.3 1.2-1.2 1.4 1.4c.9-.9 4.7-3.7 8.9.5.7.7 1.4 1.7 1.6 2.1l-2.2 1.6c-.1-.3-.5-1-1.2-1.7-2.3-2.3-4.3-.5-4.8-.2l2.5 2.6z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Price tag euro</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#4CAF50 d="M25 5l-18.8 18.8c-1.6 1.6-1.6 4.1 0 5.7l12.3 12.3c1.6 1.6 4.1 1.6 5.7 0l18.8-18.8v-14c0-2.2-1.8-4-4-4h-14zm12 8c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/><path fill=#fff d="M26.2 30c-2.8 2.8-5.8.5-6.4 0l-1.6 1.6-1.2-1.2 1.6-1.6c-.4-.5-3.1-3.8.4-7.2l2.3 2.3c-.4.4-2 2-.2 3.7 1.5 1.5 2.7.3 2.9.1 2.5-2.5-3.6-6.6.4-10.6 2.4-2.4 5.4-1 6.4-.1l1.7-1.7 1.3 1.3-1.7 1.7c.7.9 2.3 3.7-.7 6.7l-2.3-2.3c.6-.6 1.7-2.1.5-3.4-1.4-1.4-2.6-.2-2.8 0-2.7 2.6 3.4 6.7-.6 10.7z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Price tag dollar</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#FF9800 d="M39 42h-30c-1.1 0-2-.9-2-2v-26h34v26c0 1.1-.9 2-2 2z"/><g fill=#754600><path d="M28 37h9v1h-9zM34 32h2v4h-2zM35 30l-2 3h4zM29 32h2v4h-2zM30 30l-2 3h4z"/></g><path fill=#FFAA2E d="M43 14h-38v-6c0-1.1.9-2 2-2h34c1.1 0 2 .9 2 2v6z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Product</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#3F51B5 d="M11 11h4v4h-4zM11 33h4v4h-4zM33 11h4v4h-4zM9 25h4v4h-4zM13 21h4v4h-4zM31 31h4v4h-4zM31 39h4v4h-4zM35 35h4v4h-4z"/><g fill=#3F51B5><path d="M39 25h4v4h-4zM21 39h4v4h-4zM29 25v-4h-8v4h-4v4h8v3h-4v4h4v3h4v-10h6v-4zM39 31h4v4h-4zM39 39h4v4h-4z"/></g><path fill=#3F51B5 d="M35 21h4v4h-4zM27 5v16h16v-16h-16zm12 12h-8v-8h8v8zM5 21h16v-16h-16v16zm4-12h8v8h-8v-8zM5 43h16v-16h-16v16zm4-12h8v8h-8v-8z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>QR Code</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><circle fill=#33691E cx=24 cy=24 r="19"/><path fill=#689F38 d="M43 23.5h-4.5c-.3-7.6-6.4-13.7-14-14v-4.5h-1v4.5c-7.6.3-13.7 6.4-14 14h-4.5v1h4.5c.3 7.6 6.4 13.7 14 14v4.5h1v-4.5c7.6-.3 13.7-6.4 14-14h4.5v-1zm-5.5 0h-6c-.2-3.7-3.2-6.7-7-7v-6c7 .3 12.7 6 13 13zm-14 0h-6c.2-3.2 2.8-5.7 6-6v6zm0 1v6c-3.2-.2-5.7-2.8-6-6h6zm1 0h6c-.2 3.2-2.8 5.7-6 6v-6zm0-1v-6c3.2.2 5.7 2.8 6 6h-6zm-1-13v6c-3.7.2-6.7 3.2-7 7h-6c.3-7 6-12.7 13-13zm-13 14h6c.2 3.7 3.2 6.7 7 7v6c-7-.3-12.7-6-13-13zm14 13v-6c3.7-.2 6.7-3.2 7-7h6c-.3 7-6 12.7-13 13z"/><circle fill=#C6FF00 cx=24 cy=24 r="2"/><circle fill=#C6FF00 cx=13.8 cy=34 r="2"/><circle fill=#C6FF00 cx=13.8 cy=14.5 r="2"/><circle fill=#C6FF00 cx=33 cy=35 r="1"/><path stroke=#C6FF00 stroke-width=2 stroke-linecap=round stroke-linejoin=round stroke-miterlimit=10 fill=none d="M24 24l12.7-12.7"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Radar</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><g fill=#009688><path d="M18 32c-1.1 0-2-.9-2-2v-10h-4v10c0 3.3 2.7 6 6 6h19v-4h-19zM40 10l-6 13.4c-.2.4-.5.6-.9.6h-14.9c-.4 0-.8-.3-.9-.7l-4.9-14.6c-.6-1.6-2.1-2.7-3.8-2.7h-3.6v4h3.6l5.5 16.6c.3.8 1 1.4 1.9 1.4h19c.8 0 1.5-.5 1.8-1.2l7.6-16.8h-4.4z"/></g><circle fill=#00695C cx=5 cy=8 r="2"/><g fill=#37474F><circle cx=34 cy=39 r="3"/><circle cx=19 cy=39 r="3"/></g><g fill=#607D8B><circle cx=34 cy=39 r="1"/><circle cx=19 cy=39 r="1"/></g><path fill=#a0f d="M23 10v-4l-6 6 6 6v-4h4c.6 0 1 .4 1 1v6h4v-7c0-2.2-1.8-4-4-4h-5z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Return purshase</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><g fill=#455A64><path d="M10 10h19v6h-19zM9 43h30v-2c0-1.1-.9-2-2-2h-26c-1.1 0-2 .9-2 2v2zM34.8 16.4l-5-3.4 5-3.4 4.2 2.6 2-3.2-6.3-4-11.6 8 11.6 8 6.3-4-2-3.2zM16 11h-7l9 28h7z"/></g><path fill=#FFC107 d="M22.6 30.9c-.4-.6-1-.9-1.7-.9h-1.9c-.7 0-1.3.3-1.7.9l-5.3 8.1h16l-5.4-8.1zm-2.6 5.1c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM13 7c-3.3 0-6 2.7-6 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zm0 8c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM30 18h-3c-1.1 0-2-.9-2-2v-6c0-1.1.9-2 2-2h3v10z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Robot</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#E39D36 d="M32.4 28.1l-13.2 7.8 3.1 4 12.7-7.6c1.1-.7 1.5-2.2.8-3.3-.7-1.2-2.2-1.6-3.4-.9z"/><path fill=#EDA740 d="M36 28.5l-13.2 7.8 3.1 4 12.6-7.6c1.1-.7 1.5-2.2.8-3.3-.7-1.1-2.2-1.5-3.3-.9z"/><path fill=#FFB74D d="M38.9 29.4l-12.4 7.3-5.9-3.4 2.9 1.6c1.3.7 2.9.5 3.9-.6 1.3-1.5.9-3.8-.8-4.7l-12.4-6.8c-1.1-.6-2.5-.6-3.7 0l-5.5 3.3v10.799999999999999l4-2.5 15.1 8.2c1.2.6 2.6.6 3.8-.1l13.8-8.3c1.3-.8 1.7-2.4.9-3.7-.7-1.4-2.4-1.8-3.7-1.1z"/><path fill=#7986CB d="M39 21h-22c-1.1 0-2-.9-2-2v-10h26v10c0 1.1-.9 2-2 2z"/><path fill=#9FA8DA d="M42 9h-28v-2c0-1.1.9-2 2-2h24c1.1 0 2 .9 2 2v2z"/><path fill=#EDA740 d="M26.5 36.8l-1.3-.9-10.7-6 8 6.6c1.2.9 2.7 1 4 .3z"/><path fill=#FFCC80 d="M24.4 34.2c-.9-.5-.6-1.3-.1-2.2.5-.9.9-1.6 1.8-1.1s1.3 1.6.8 2.5c-.4.9-1.5 1.2-2.5.8z"/><path fill=#3E4778 d="M31 12h-6c-.6 0-1-.4-1-1s.4-1 1-1h6c.6 0 1 .4 1 1s-.4 1-1 1z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Sell</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#8BC34A d="M9 5h30v38h-30z"/><circle fill=#33691E cx=30 cy=11 r="2"/><circle fill=#33691E cx=18 cy=11 r="2"/><path stroke=#fff stroke-width=2 stroke-linecap=round stroke-miterlimit=10 d="M30 11v3c0 3.3-2.7 6-6 6s-6-2.7-6-6v-3" fill="none"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Shopping bag</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#F57C00 d="M31.998 4.945l8.979 8.979-8.979 8.979-8.979-8.979z"/><path fill=#FF9800 d="M22.999 1.957l9.969 9.969-9.969 9.969-9.969-9.969z"/><g fill=#009688><path d="M18 32c-1.1 0-2-.9-2-2v-10h-4v10c0 3.3 2.7 6 6 6h19v-4h-19zM12.8 10l-.4-1.3c-.6-1.6-2.1-2.7-3.8-2.7h-3.6v4h3.6l5.5 16.6c.3.8 1 1.4 1.9 1.4h19c.8 0 1.5-.5 1.8-1.2l7.6-16.8h-31.6z"/></g><circle fill=#00695C cx=5 cy=8 r="2"/><g fill=#37474F><circle cx=34 cy=39 r="3"/><circle cx=19 cy=39 r="3"/></g><g fill=#607D8B><circle cx=34 cy=39 r="1"/><circle cx=19 cy=39 r="1"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Shopping cart loaded</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><g fill=#FF9800><path d="M23.999 4.936l7.989 7.989-7.989 7.989-7.989-7.989zM18 7h12v12h-12z"/></g><circle fill=#FFEB3B cx=24 cy=13 r="4"/><path fill=#BF360C d="M8.6 24.5l-3.6 14.5h38l-3.6-14.5c-.2-.9-1-1.5-1.9-1.5h-26.9c-1 0-1.8.6-2 1.5z"/><path fill=#9E2D0A d="M5 41v-2h38v2c0 1.1-.9 2-2 2h-34c-1.1 0-2-.9-2-2z"/><g fill=#F57C00><path d="M17.6 29l.4-4h-7l-1 4zM28.3 29l-.3-4h-8l-.3 4zM38 29l-1-4h-7l.4 4zM9.5 31l-1.5 6h8.7l.6-6zM30.7 31l.6 6h8.7l-1.5-6zM19.5 31l-.4 6h9.8l-.4-6z"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Solar panel</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><circle fill=#80DEEA cx=24 cy=22 r="18"/><path fill=#1976D2 d="M18 9l-5 4.2v19.8h10v-20l-5-4zm-1 8h-2v-2h2v2zm4 0h-2v-2h2v2zm-4 4h-2v-2h2v2zm4 0h-2v-2h2v2zm-4 4h-2v-2h2v2zm4 0h-2v-2h2v2zm-4 4h-2v-2h2v2zm4 0h-2v-2h2v2z"/><g fill=#E0F7FA><circle cx=31 cy=13 r="1"/><circle cx=33 cy=11 r="1"/><circle cx=35 cy=17 r="1"/><circle cx=33 cy=19 r="1"/><circle cx=37 cy=19 r="1"/><circle cx=39 cy=21 r="1"/><circle cx=27 cy=9 r="1"/><circle cx=31 cy=9 r="1"/><circle cx=29 cy=11 r="1"/><circle cx=29 cy=15 r="1"/><circle cx=35 cy=21 r="1"/><circle cx=31 cy=17 r="1"/><circle cx=33 cy=15 r="1"/><circle cx=35 cy=13 r="1"/><circle cx=37 cy=15 r="1"/><circle cx=39 cy=17 r="1"/></g><g fill=#2196F3><circle cx=14 cy=33 r="3"/><circle cx=18 cy=35 r="3"/><circle cx=22 cy=33 r="3"/><path d="M33 30c-.6-1.2-1.6-2-3-2-.4 0-1 .2-1.4.4-.6-1.4-2-2.4-3.6-2.4-2.2 0-4 1.8-4 4v4c0 2.2 1.8 4 4 4h8s4-1.8 4-4-1.8-4-4-4z"/></g><path fill=#5C6BC0 d="M8 34h32v4h-32z"/><path fill=#3F51B5 d="M6 38h36v4h-36z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Souvenirs</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#FF9800 d="M9 13h10v22h-10z"/><path fill=#90A4AE d="M9 35h10v4h-10z"/><path fill=#E57373 d="M19 39h-10v2c0 1.1.9 2 2 2h6c1.1 0 2-.9 2-2v-2z"/><path fill=#FFA726 d="M12 13h4v22h-4z"/><path fill=#FFC107 d="M19 13l-2.5-4h-5l-2.5 4z"/><path fill=#37474F d="M14 5l-2.5 4h5z"/><path fill=#9EB0B9 d="M12 35h4v4h-4z"/><path fill=#E78080 d="M12 39h4v4h-4z"/><path fill=#FFD54F d="M15 9h-2l-1 4h4z"/><path fill=#2196F3 d="M37 5h-10c-1.1 0-2 .9-2 2v34c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2v-34c0-1.1-.9-2-2-2zm-5 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/><g fill=#1565C0><path d="M25 15h5v2h-5zM25 19h3v2h-3zM25 23h5v2h-5zM25 27h3v2h-3zM25 31h5v2h-5zM25 35h3v2h-3zM25 39h5v2h-5z"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Stationery</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><g fill=#03A9F4><path d="M5.7 33.3l2 3.4 18.3-8.2-4-7zM40.3 36.7l2-3.4-16.3-11.8-4 7zM18 41c-1.1 0-2 .9-2 2v2h16v-2c0-1.1-.9-2-2-2h-12zM26 5h-4l-2 20h8z"/></g><g fill=#4FC3F7><path d="M24 5h-2l-1.8 17.8 3.8 2.2zM6.7 35l1 1.7 16.3-7.3v-4.4zM41.3 35l1-1.7-14.5-10.5-3.8 2.2z"/></g><g fill=#455A64><circle cx=24 cy=25 r="2"/><path d="M24 29.4l-2 .9v10.7h4v-10.7z"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Wind turbine</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#6D4C41 d="M24 6h18v12h-18z"/><path fill=#F4511E d="M33 7l-9 10v25h18v-25l-9-10z"/><circle fill=#BF360C cx=33 cy=14 r="3"/><path fill=#4E342E d="M6 6h18v12h-18z"/><path fill=#BF360C d="M15 7l-9 10v25h18v-25l-9-10z"/><circle fill=#6D4C41 cx=15 cy=14 r="3"/><g fill=#FFC107><path d="M35 35h4v4h-4zM35 19h4v4h-4zM35 27h4v4h-4zM27 19h4v4h-4zM27 27h4v4h-4zM27 35h4v4h-4z"/><circle cx=33 cy=14 r="2"/><path d="M17 35h4v4h-4zM17 19h4v4h-4zM17 27h4v4h-4zM9 19h4v4h-4zM9 27h4v4h-4zM9 35h4v4h-4z"/><circle cx=15 cy=14 r="2"/></g></svg>
</code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Apartment</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#F44336 d="M24 8l-11 5.945v2.055l-11 4v20h44v-20l-11-4v-2.055l-11-5.945z"/><g fill=#FF8A80><path d="M6 25h10v15h-10zM32 25h10v15h-10z"/></g><path fill=#4E342E d="M16 25h16v15h-16z"/><g fill=#fff><path d="M16 25h-2.183l-2.817 5.354-2.817-5.354h-2.183v.146l3.87 7.354-3.87 7.354v.146h2.183l2.817-5.354 2.817 5.354h2.183v-.146l-3.87-7.354 3.87-7.354zM42 25h-2.183l-2.817 5.354-2.817-5.354h-2.183v.146l3.87 7.354-3.87 7.354v.146h2.183l2.817-5.354 2.817 5.354h2.183v-.146l-3.87-7.354 3.87-7.354zM19.496 17.501l4.499-4.499 4.499 4.499-4.499 4.499z"/></g><g fill=#B71C1C><path d="M22.067 17.493l1.928-1.928 1.928 1.928-1.928 1.928zM13 18l-12 4v-2l12-4zM24 9l-12 6v-2l12-6zM36 13l-12-6v2l12 6zM35 18l12 4v-2l-12-4z"/></g></svg>
</code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Barn</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#9C27B0 d="M44 23c0 1.657-1.343 3-3 3h-34c-1.657 0-3-1.343-3-3v-14c0-1.657 1.343-3 3-3h34c1.657 0 3 1.343 3 3v14z"/><g fill=#F3E5F5><path d="M40 21v-7.353c0-.256-.11-.497-.303-.664-.232-.203-2.134-1.983-7.166-1.983s-6.996 1.78-7.229 1.983c-.192.167-.302.409-.302.664v5.353l15 2zM8 21v-7.353c0-.256.11-.497.303-.664.232-.203 2.135-1.983 7.166-1.983s6.996 1.78 7.229 1.983c.192.167.302.409.302.664v5.353l-15 2z"/></g><path fill=#FF9800 d="M46 42h-6v-2.237c0-1.243-.44-1.763-1.685-1.763h-28.63c-1.245 0-1.685.52-1.685 1.763v2.237h-6v-11h44v11z"/><path fill=#E1BEE7 d="M46 33h-44v-1c0-10.992 3.252-14.895 21.526-14.895 17.433 0 22.474 3.341 22.474 14.895v1z"/><path fill=#EF6C00 d="M2 32h44v2h-44z"/></svg>
</code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Bed</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><g stroke=#455A64 stroke-width=2 stroke-linejoin=round fill=none><path d="M27 32l4 3 1 7 3 2M28 26l5 1 1 4 2 2M29 22l5-2-3-5 2-3M21 32l-4 3-1 7-3 2M20 26l-5 1-1 4-2 2M19 22l-5-2 3-5-2-3"/></g><g stroke=#4DB6AC stroke-width=2 fill=none><path d="M39 4s-14 1-14 10M9 4s14 1 14 10"/></g><path fill=#00695C d="M27.021 20.812c0 1.67-1.354 3.021-3.021 3.021-1.669 0-3.021-1.352-3.021-3.021v-5.79c0-1.67 1.352-3.022 3.021-3.022 1.668 0 3.021 1.352 3.021 3.021v5.791z"/><path fill=#26A69A d="M24 42c-6 0-7-22-7-22 0-1.104 4-2 7-2s7 .896 7 2c0 0-1 22-7 22z"/><path fill=#00897B d="M23 41.773c.313.145.646.227 1 .227s.687-.082 1-.227v-23.739c-.331-.021-.665-.034-1-.034s-.669.013-1 .034v23.739z"/></svg>
</code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Bug</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#FFA000 d="M44 36h-40v-26h40v26z"/><g fill=#5D4037><path d="M27 30h-6c-.553 0-1-.447-1-1s.447-1 1-1h6c.553 0 1 .447 1 1s-.447 1-1 1zM27 18h-6c-.553 0-1-.447-1-1s.447-1 1-1h6c.553 0 1 .447 1 1s-.447 1-1 1z"/></g><g fill=#EF6C00><path d="M4 22h40v2h-40zM46 12h-44v-5h44v5zM4 34v7h6v-3.375c0-1.2.425-1.625 1.625-1.625h24.75c1.2 0 1.625.425 1.625 1.625v3.375h6v-7h-40z"/></g></svg>
</code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Bureau</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#F44336 d="M33.126 8c2.048 3 1.022 7-1.024 7l-3.072-2s-3.07-7-8.19-11c2.319 7.93-1.024 13-5.12 11.999-4.096-.999-.001-6.999-.001-6.999-12.286 6-13.311 38 8.192 38 21.501 0 20.478-30 9.215-37zm-9.126 26.841c-2.485 0-4.5-2.016-4.5-4.5s2.015-4.5 4.5-4.5 4.5 2.016 4.5 4.5-2.015 4.5-4.5 4.5z"/><path fill=#FFC107 d="M24 16c-7.731 0-14 6.271-14 14s6.269 14 14 14c7.73 0 14-6.271 14-14s-6.27-14-14-14zm0 17.841c-1.933 0-3.5-1.568-3.5-3.5s1.567-3.5 3.5-3.5 3.5 1.568 3.5 3.5-1.567 3.5-3.5 3.5z"/><g fill=#FFECB3><path d="M20.563 32.091l-7.781 6.213c1.036 1.44 2.31 2.699 3.779 3.696l6.231-7.909c-.982-.514-1.659-1.052-2.229-2zM28.063 28.924l7.937-6.32c-1.002-1.473-2.267-2.749-3.715-3.784l-6.264 7.854c.956.571 1.527 1.26 2.042 2.25z"/></g><path fill=#C62828 d="M24 16c7.73 0 14 6.271 14 14s-6.27 14-14 14c-7.731 0-14-6.271-14-14s6.269-14 14-14m0-2c-8.822 0-16 7.178-16 16s7.178 16 16 16 16-7.178 16-16-7.178-16-16-16z"/><path fill=#EF6C00 d="M24 25.841c-2.485 0-4.5 2.016-4.5 4.5s2.015 4.5 4.5 4.5 4.5-2.016 4.5-4.5-2.015-4.5-4.5-4.5zm0 6.5c-1.104 0-2-.896-2-2s.896-2 2-2 2 .896 2 2-.896 2-2 2z"/></svg>
</code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Burn CD</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#3F51B5 d="M24 43c-10.478 0-19-8.522-19-19s8.522-19 19-19 19 8.522 19 19-8.522 19-19 19z"/><g fill=#1A237E><circle cx=18 cy=18 r="3"/><circle cx=30 cy=18 r="3"/><circle cx=18 cy=30 r="3"/><circle cx=30 cy=30 r="3"/></g><g fill=#fff><path d="M19 30.017c-.256 0-.512-.098-.707-.292-.391-.391-.391-1.023-.001-1.415l10-10.017c.391-.391 1.024-.39 1.415-.001.391.391.391 1.023.001 1.415l-10 10.017c-.195.195-.452.293-.708.293zM29 30.017c.256 0 .512-.098.707-.292.391-.391.391-1.023.001-1.415l-10-10.017c-.391-.391-1.024-.39-1.415-.001-.391.391-.391 1.023-.001 1.415l10 10.017c.195.195.452.293.708.293z"/></g></svg>
</code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Button</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#546E7A d="M33.719 3.483l-.608 2.368-2.138-.705v2.822l-2.137-.706v2.823l-2.138-.706v2.823l-2.137-.706v2.823l-2.138-.706v2.824l6.294 7.674 2.256.793v-2.822l2.138.706v-2.823l2.137.706v-2.823l2.138.705v-2.823l2.137.707-.327-2.765 2.747.074-1.366-2.117 2.435-1.058-2.241-1.397 1.499-2.25-2.717.191.593-2.646-2.405 1.146-.653-2.44-1.662 2z"/><path fill=#CFD8DC d="M37.386 8.674c.786.779.786 2.043 0 2.822l-9.263 9.175c-.787.778-2.063.778-2.85 0-.787-.779-.787-2.044 0-2.823l9.262-9.174c.787-.78 2.064-.78 2.851 0z"/><path fill=#F57C00 d="M17.435 32.668l-5.7 5.645-.662-.654c-.366-1.072.919-4.548 3.178-8.145l-2.904-2.876c-2.327 3.548-6.322 10.675-3.175 13.793l2.138 2.116c1.425 1.412 2.85 0 2.85 0l7.125-7.057-2.85-2.822z"/><path fill=#FFC107 d="M30.26 22.788c1.182 1.169 1.182 3.065 0 4.233l-9.974 9.88s-.712.706-1.425 0l-5.7-5.646c-4.987-4.939 0-9.879 0-9.879l7.125-7.058s.712-.706 1.425 0l8.549 8.47z"/><path fill=#6D4C41 d="M22.765 23.154s-5.775-8.555-5.837-8.648c-.962-1.472-2.954-1.898-4.442-.944l-.005.004c-.718.463-1.213 1.171-1.393 2.001-.181.829-.024 1.679.442 2.394.098.15 1.25 1.765 2.062 2.989.406-.399.876-.876 1.425-1.412-.73-1.102-1.727-2.514-1.813-2.647-.177-.272-.237-.595-.168-.91.068-.316.257-.586.531-.762l.001-.002c.567-.359 1.324-.197 1.69.364l5.834 8.646 1.673-1.073z"/></svg>
</code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Chainsaw</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#90A4AE d="M35 40h-22l-2-28h26z"/><path fill=#6D4C41 d="M21 20l-13-1v3l13-.812z"/><path fill=#ECEFF1 d="M28 22h-8l-1-6h10z"/><path fill=#FF3D00 d="M40 17h-32v-5c0-4.143 3.858-8 8-8h16c4.143 0 8 3.857 8 8v5zM39 43h-30v-2l1-1h28s1 0 1 1v2z"/><circle fill=#B71C1C cx=13 cy=11 r="2"/><circle fill=#FFCDD2 cx=34 cy=11 r="3"/><g fill=#F5F5F5><path d="M27 40h-6s-3-6-3-8h12c0 2-1 8-3 8z"/><circle cx=30 cy=36 r="2"/></g><g fill=#5D4037><circle cx=24 cy=24 r="1"/><circle cx=24 cy=27 r="1"/><circle cx=24 cy=30 r="1"/></g></svg>
</code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Cofee maker</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path stroke=#546E7A stroke-width=2 stroke-linejoin=round stroke-miterlimit=10 d="M24 16c-.238-9.155 13-1 13-11" fill="none"/><path fill=#CFD8DC d="M45 38c0 3.313-2 5-5 5s-6-8-10-8h-11s-8 8-11 8-5-1.687-5-5c0 0 0-24 9-24 4 0 5.116 2 7 2h9c1.885 0 4-2 8-2 9 0 9 24 9 24z"/><path fill=#fff d="M41.071 23.586c.78.781.78 2.047 0 2.828l-5.657 5.657c-.781.78-2.047.78-2.828 0l-5.657-5.657c-.78-.781-.78-2.047 0-2.828l5.657-5.657c.781-.78 2.047-.78 2.828 0l5.657 5.657z"/><circle fill=#FFC107 cx=34 cy=21 r="2"/><circle fill=#8BC34A cx=34 cy=28.999 r="2"/><path fill=#F44336 d="M36 25c0-1.102.895-2 2-2 1.104 0 2 .898 2 2s-.896 2-2 2-2-.898-2-2z"/><circle fill=#2196F3 cx=30 cy=25 r="2"/><g fill=#78909C><path d="M12 20h4v4h-4zM16 24h4v4h-4zM8 24h4v4h-4zM12 28h4v4h-4z"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Controller</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><g fill=#37474F><path d="M37.75 9.417h-9.792v-1.709c0-.941.767-1.708 1.709-1.708h6.375c.941 0 1.708.767 1.708 1.708v1.709zM22.167 9.417h-11.917v-1.709c0-.941.766-1.708 1.708-1.708h8.5c.942 0 1.709.767 1.709 1.708v1.709z"/></g><g fill=#546E7A><path d="M37.292 42h-2.584c-.941 0-1.708-.767-1.708-1.708v-2.417h6v2.417c0 .941-.767 1.708-1.708 1.708zM13.375 42h-2.667c-.941 0-1.708-.767-1.708-1.708v-2.417h6.083v2.417c0 .941-.766 1.708-1.708 1.708z"/></g><path fill=#CFD8DC d="M39.583 40h-31.166c-1.333 0-2.417-1.001-2.417-2.334v-27.25c0-1.332 1.084-2.416 2.417-2.416h31.167c1.332 0 2.416 1.084 2.416 2.416v27.25c0 1.333-1.084 2.334-2.417 2.334z"/><path fill=#90A4AE d="M6 15h36v2h-36z"/><path fill=#37474F d="M38 36h-28v-16h28v16z"/><circle fill=#FF1744 cx=36.5 cy=11.5 r="1.5"/><g fill=#37474F><circle cx=11.5 cy=11.5 r="1.5"/><circle cx=15.5 cy=11.5 r="1.5"/><circle cx=19.5 cy=11.5 r="1.5"/><circle cx=23.5 cy=11.5 r="1.5"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Cooker</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#E8EAF6 d="M41 42h-34v-29h34v29z"/><path fill=#C5CAE9 d="M7 37h34v5h-34z"/><path fill=#D84315 d="M28 42v-10.082c0-2.164-1.818-3.918-4.014-3.918-2.194 0-3.975 1.754-3.975 3.918v10.082h7.989z"/><g fill=#01579B><path d="M32 27h5v8h-5zM11 27h5v8h-5z"/></g><path fill=#D32F2F d="M43 25h-12.792l-6.208-9.518-6.208 9.518h-12.792v-19h38v19z"/><path fill=#FF8A65 d="M25.5 34c-.275 0-.5.225-.5.5v2c0 .275.225.5.5.5s.5-.225.5-.5v-2c0-.275-.225-.5-.5-.5"/><path fill=#B71C1C d="M14.37 25h3.422l6.208-9.518 6.208 9.518h3.792l-9.814-15z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Cottage</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><g fill=#3F51B5><path d="M22.345 20.133c-.232-.141-5.718-3.48-7.03-4.187-.246-.134-.397-.232-.49-.303 1.045-.923 1.591-2.633 1.591-3.871 0-1.861-1.584-5.772-6.29-5.772-4.495 0-6.126 3.281-6.126 5.601 0 1.821.689 4.3 3.97 5.761.556.248 1.137.479 1.73.714 2.797 1.106 5.69 2.252 8.18 6.048.125.192.328.321.556.354l.116.009c.188 0 .373-.066.519-.19l3.375-2.863c.197-.167.302-.419.282-.676-.021-.258-.163-.489-.383-.625zm-9.889-6.048c-.523.591-1.237.916-2.01.916-1.673 0-3.197-1.346-3.396-2.998-.099-.822.14-1.604.672-2.205.539-.609 1.332-.957 2.176-.957 1.721 0 3.109 1.175 3.305 2.795.108.9-.165 1.793-.747 2.449zM43.853 35.973l-13.736-10.113-5.354 3.949 9.237 6.591c.095.072 2.336 1.662 5.087 1.662h.001c1.502 0 2.864-.409 4.051-1.38.191-.157.714-.709.714-.709z"/></g><path fill=#283593 d="M23.741 21.28l-6.07 3.548 7.092 4.982 5.354-3.95z"/><path fill=#03A9F4 d="M22.403 27.659l21.597-15.659-.684-.771c-1.187-.971-2.549-1.213-4.052-1.213-2.752 0-4.992 1.423-5.069 1.48l-15.351 10.734c-.098.069-.178.16-.237.266-2.627 4.776-5.817 6.04-8.904 7.262-.596.235-1.176.466-1.732.714-3.282 1.461-3.971 3.94-3.971 5.76 0 2.319 1.631 5.768 6.125 5.768 4.706 0 6.29-4.078 6.29-5.939 0-1.239-.546-2.947-1.591-3.871.093-.07.244-.169.49-.303 1.313-.707 6.798-4.046 7.089-4.228zm.082-5.173c.55 0 .999.447.999.998 0 .553-.449 1.002-.999 1.002-.553 0-1.001-.449-1.001-1.002 0-.55.449-.998 1.001-.998zm-9.283 13.711c-.195 1.62-1.586 2.795-3.305 2.795-.844 0-1.637-.349-2.176-.956-.532-.601-.771-1.384-.672-2.205.199-1.653 1.724-2.997 3.398-2.997.772 0 1.485.324 2.008.915.583.655.856 1.548.747 2.448z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Cut</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><circle fill=#eee cx=24 cy=24 r="15"/><g fill=#263238><path d="M22.485 21.415c-1.438.837-1.912 2.678-1.058 4.111.853 1.437 2.707 1.919 4.146 1.082 1.438-.836 1.911-2.677 1.056-4.112-.853-1.434-2.708-1.92-4.144-1.081"/><path d="M35.299 17.444l-9.374 7.794-2.059-3.462z"/></g><g fill=#FF1744><path d="M5 23h7.004v2.02h-7.004zM7.72 33.831l-.949-1.783 6.185-3.292.949 1.783z"/></g><g fill=#90A4AE><path d="M22.98 5h2.02v7.004h-2.02zM35.996 22.98h7.004v2.02h-7.004zM32.758 7.105l1.741 1.024-3.551 6.037-1.741-1.024zM13.71 7.998l1.755-1 3.467 6.086-1.755 1zM7.034 15.383l1.01-1.749 6.065 3.502-1.01 1.749zM41.345 31.76l-.923 1.798-6.234-3.201.923-1.798z"/></g><path fill=#4DD0E1 d="M23.512 23.146c-.477.277-.634.894-.35 1.371.283.478.904.639 1.382.359.479-.277.637-.893.353-1.372-.285-.476-.906-.637-1.385-.358"/><path fill=#00ACC1 d="M24 5c-10.493 0-19 8.507-19 19s8.507 19 19 19 19-8.507 19-19-8.507-19-19-19zm0 34c-8.284 0-15-6.716-15-15s6.716-15 15-15 15 6.716 15 15-6.716 15-15 15z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Dashboard</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#3F51B5 d="M27 6h18v36h-18z"/><path fill=#FFC107 d="M3 27h31v15h-31z"/><path fill=#283593 d="M35 25h-1v17h3v-15c0-1.104-.896-2-2-2z"/><g fill=#9FA8DA><path d="M29 8h14v4h-14zM29 14h14v2h-14zM29 18h14v2h-14z"/></g><circle fill=#CDDC39 cx=36 cy=35 r="2"/><g fill=#455A64><path d="M15 24v-4h7v4h2v-4c0-1.104-.896-2-2-2h-7c-1.104 0-2 .896-2 2v4h2zM34 29v-4c0-1.104-.896-2-2-2h-27c-1.104 0-2 .896-2 2v4h31z"/></g><g fill=#78909C><path d="M25 27h4v5h-4zM8 27h3.875v5h-3.875z"/></g><path fill=#ABB21D d="M37 33.277c-.295-.172-.634-.277-1-.277-1.104 0-2 .896-2 2s.896 2 2 2c.366 0 .705-.105 1-.277v-3.446z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Device manager</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><g fill=#455A64><path d="M40 30h-32.02c-.541 0-.98-.446-.98-1 0-.552.439-1 .98-1h32.02c.543 0 .981.448.981 1 0 .554-.438 1-.981 1zM34.399 39.354l1.822-.824 1.648 3.644-1.822.824zM22 4h4v7h-4zM11.949 43.006l-1.822-.824 1.648-3.644 1.822.824z"/></g><g fill=#E91E63><circle cx=40 cy=29 r="2"/><circle cx=8 cy=29 r="2"/></g><g fill=#B0BEC5><path d="M28.875 17.735c-.918.98-2.16 1.65-3.557 1.841l9.223 20.081 1.825-.831.253-4.306-7.744-16.785zM19.135 17.735c.918.98 2.16 1.65 3.557 1.841l-9.223 20.081-1.825-.831-.253-4.306 7.744-16.785z"/></g><g fill=#78909C><path d="M24 9c-3.313 0-6 2.687-6 6s2.687 6 6 6 6-2.687 6-6-2.687-6-6-6zm0 9c-1.656 0-3-1.344-3-3s1.344-3 3-3 3 1.344 3 3-1.344 3-3 3zM22 26h4v6h-4z"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Drafting compass</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><g fill=#37474F><path d="M22.483 27h-3.65c-.553 0-1-.447-1-1v-5c0-.54.429-.982.968-.999l5.167-.167c.428-.039.787.226.95.602.163.377.079.815-.211 1.105-.04.042-1.224 1.335-1.224 4.459 0 .553-.447 1-1 1zM42.569 16h-5.402v-4h5.402l2.431 1.199v1.585l-2.431 1.216zM26 8h10v12h-10zM20 40c0 1.104-.896 2-2 2h-11c-1.104 0-2-.896-2-2v-3c0-1.104.896-2 2-2h11c1.104 0 2 .896 2 2v3z"/></g><g fill=#FF9800><path d="M7 6c-1.104 0-4 3.582-4 8s2.896 8 4 8v-16zM9.124 22.216c.223.268.295.866.179 1.488-.138.743-1.688 7.443-2.619 11.296h10.636c-.372-.396-.446-.619-.313-1.025.883-2.692 2.576-9.728 2.576-9.738.024-.06.931-2.237 2.417-2.237l-.717-1.167h-13.503l.717 1.167c.448 0 .578.157.627.216z"/></g><path fill=#78909C d="M36 20v-12l3 4v4l-3 4z"/><path fill=#FFC107 d="M29 20c0 1.104-.896 2-2 2h-20v-16h20c1.104 0 2 .896 2 2v12z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Drill</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#CFD8DC d="M42 38c0 2.209-1.791 4-4 4h-28c-2.209 0-4-1.791-4-4v-28c0-2.209 1.791-4 4-4h28c2.209 0 4 1.791 4 4v28z"/><g fill=#455A64><path d="M11 13h26v16h-26zM15 25h18v7h-18zM19 29h10v6h-10z"/></g><g fill=#FDD835><path d="M14 15h2v7h-2zM17 15h2v7h-2zM20 15h2v7h-2zM23 15h2v7h-2zM26 15h2v7h-2zM29 15h2v7h-2zM32 15h2v7h-2z"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Ethernet off</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#BBDEFB d="M24.002 36c-8.824-.001-16.002-7.179-16.002-16 0-8.822 7.178-16 16-16s16 7.178 16 16c0 8.821-7.177 15.999-15.998 16z"/><g fill=#2196F3><path d="M35.313 25.657c.392.391.392 1.023 0 1.414 0 0-5.656 7.071-8.485 2.828l-3.535-7.778-.707-.707c-1.414-2.828-9.899-7.071-9.899-7.071-.392-.391-.392-1.023 0-1.414 0 0 5.656-7.071 8.485-2.828l3.535 7.778.707.707c1.414 2.828 9.899 7.071 9.899 7.071zM29.657 8.687c.391-.391 1.022-.391 1.414 0 0 0 7.071 5.656 2.828 8.485l-7.778 3.535-.707.707c-2.828 1.414-7.071 9.899-7.071 9.899-.391.391-1.023.391-1.414 0 0 0-7.071-5.656-2.828-8.485l7.778-3.535.707-.707c2.828-1.414 7.071-9.899 7.071-9.899zM24.002 36c-.679 0-1.345-.057-2.002-.14v5.14h4v-5.139c-.656.082-1.32.139-1.998.139zM35 44h-22v-2l9-3h4l9 3z"/></g><path fill=#3F51B5 d="M24 23c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Fan</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#607D8B d="M24 6l-22 11.89v24.11h44v-24.11l-22-11.89z"/><g fill=#3E2723><path d="M13 36c0-.553-.447-1-1-1h-3c-.553 0-1 .447-1 1v5c0 .553.447 1 1 1h3c.553 0 1-.447 1-1v-5zM40 36c0-.553-.447-1-1-1h-3c-.553 0-1 .447-1 1v5c0 .553.447 1 1 1h3c.553 0 1-.447 1-1v-5z"/></g><g fill=#FFEB3B><path d="M40 30c0-.553-.447-1-1-1h-30c-.553 0-1 .447-1 1v8c0 .553.447 1 1 1h30c.553 0 1-.447 1-1v-8zM39 39h-30c-1-2-1-9-1-9 0-1.104.896-2 2-2l14-1 14 1c1.104 0 2 .896 2 2 0 0 0 7-1 9zM41 26h-3.889c-1.296-2.061-2.829-4.51-3.111-5-.56-.973-1.652-1-1.954-1h-16.046c-.328 0-1.359 0-2 1-.356.557-1.863 2.968-3.13 5h-3.87c-.553 0-1 .447-1 1v2c0 .553.447 1 1 1h34c.553 0 1-.447 1-1v-2c0-.553-.447-1-1-1zm-25.316-3.921c.031-.048.05-.079.316-.079h16.046l.239.029c.395.677 2.352 3.796 3.715 5.961v.01h-24v-.033c1.338-2.146 3.279-5.257 3.684-5.888z"/></g><path fill=#37474F d="M38 34c0 .553-.447 1-1 1h-26c-.553 0-1-.447-1-1v-3c0-.553.447-1 1-1h26c.553 0 1 .447 1 1v3z"/><g fill=#4DD0E1><circle cx=12.5 cy=32.5 r="1.5"/><circle cx=35.5 cy=32.5 r="1.5"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Garage</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#FFC107 d="M22.034 17.85l-18.034 18.657 6.333 6.503 18.004-18.799-6.303-6.361z"/><path fill=#78909C d="M44 23l-5-5.003c-.844.781-2.145.374-2.451.054l-1.163-1.206c.265-.393.413-.856.411-1.345.002-.631-.231-1.221-.658-1.661l-3.053-3.175-.084-.077-.642-.669-2.881-2.992c-2.69-2.799-12.506-2.912-13.616-2.916h-.863v1.98s.583.168.553.168c.156.063 3.127.943 6.743 4.883 1.622 1.766 3.319 4.109 2.174 5.276-.026.029-.162.18-.661.7l-.109.143-1.406 1.46 6.465 6.222 1.721-1.787.026-.039.911-.949 1.137 1.18c.328.342.697 1.598-.303 2.505l5 5.232 7.749-7.984z"/><path fill=#546E7A d="M39 17.997c-.844.781-2.145.374-2.451.054l-1.158-1.201-4.973 5.22 1.135 1.177c.328.342.697 1.598-.303 2.505l7.75-7.755z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Hammer</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#78909C d="M45 14h-42c-1.104 0-2 .896-2 2v9s0 2 2 2l7 6h28l7-6c2 0 2-2 2-2v-9c0-1.104-.896-2-2-2z"/><path fill=#37474F d="M45 23l-4 3h-34l-4-3v-2h42z"/><g fill=#FDD835><path d="M10 24h3v2h-3zM15 24h3v2h-3zM20 24h3v2h-3zM25 24h3v2h-3zM30 24h3v2h-3zM35 24h3v2h-3z"/></g><g fill=#546E7A><path d="M5 16h3v3h-3zM10 16h3v3h-3zM15 16h3v3h-3zM20 16h3v3h-3zM25 16h3v3h-3zM30 16h3v3h-3zM35 16h3v3h-3zM40 16h3v3h-3zM10 28h3v3h-3zM15 28h3v3h-3zM20 28h3v3h-3zM25 28h3v3h-3zM30 28h3v3h-3zM35 28h3v3h-3z"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>HDMI</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><g fill=#455A64><path d="M21 31h6v5h-6zM35 37h-22s0-2 2-2h18l2 2z"/></g><path fill=#546E7A d="M6 11h36v21h-36z"/><path fill=#BBDEFB d="M8 13h32v17h-32z"/><path fill-rule=evenodd clip-rule=evenodd fill=#1E88E5 d="M21.619 17l-.504 3h-3.457l.531-3h-2.65l-1.539 9h2.649l.588-3.726 3.456.005-.586 3.721h2.623l1.541-9z"/><path fill=#1E88E5 d="M31.041 17h-4.771l-1.452 9h4.565c2.849 0 5.113-1.802 5.282-5.37.169-3.561-3.624-3.63-3.624-3.63zm-1.919 7h-1.359l.895-5h1.222c1.186.063 2.43.179 2.338 2.125-.116 2.445-2.024 2.875-3.096 2.875z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>HDTV</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#546E7A d="M23.258 15.236l-2.258 3.764-2-2-2 2-2.258-3.764c-2.246 1.417-3.742 3.913-3.742 6.764l2.417 1 1.583 23h8l1.625-23 2.857-1.847c-1.131-2.414-2.123-4.778-4.224-5.917z"/><g fill=#E3F2FD><path d="M19 17l2 2 2.258-3.764c-1.234-.779-2.691-1.236-4.258-1.236s-3.024.457-4.258 1.236l2.258 3.764 2-2zM24.343 27h-10.65l.049.71.258 5.29c0 1.104.896 2 2 2h6c1.104 0 2-.896 2-2l.343-6z"/></g><path fill=#BF360C d="M23 14s-1-1-4-1l-4 1v-9h8v9z"/><path fill=#FF9800 d="M21 11h-4v3s-.124 2 1.959 2l2.041-2v-3z"/><g fill=#FFB74D><path d="M33 19.094l-1-.529-3.929 3.778-.589-1.19-2.857 1.847 2.375 3h2l4-4.931zM11 22v8l3 2-.583-9zM23.5 5c0-3.818-9-2.484-9 0v3.5c0 2.485 2.015 4.5 4.5 4.5s4.5-2.015 4.5-4.5v-3.5z"/></g><path fill=#3F51B5 d="M32 9h2v27h-2z"/><path fill=#FFC107 d="M34 35h-2s-4 5-4 11h10c0-6-4-11-4-11z"/><path fill=#FF5722 d="M19 1c-3.038 0-7 1-7 10l3 3v-6.5l6-3.5 2 2.5v7.5l3-3c0-2.012 0-9-5-9l-.5-1h-1.5z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Housekeeper female</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#CFD8DC d="M38 12h-2c-.132 0 .744.028.628.075-14.628.925-25.987 9.553-33.628 22.925h31v-2c0-.553.447-1 1-1h7s1 0 1-1c0-5-2-19-5-19zm-2 9.999h-12s-1.547.063-1-1c2-4 12-5 12-5 2 .001 2 5 2 5 0 .553-.447 1-1 1z"/><path fill=#B0BEC5 d="M42 27h3v2h-3z"/><path fill=#2196F3 d="M3 35h31v-2c0-.553.447-1 1-1h7s1 0 1-1c0-2.029-.33-5.543-.922-9h-28.76c-4.023 3.558-7.433 7.95-10.318 13z"/><g fill=#455A64><path d="M26 20h9v2h-9zM3 35h31v-2c0-.553.447-1 1-1h-30.16c-.633.975-1.251 1.97-1.84 3z"/></g><g fill=#fff><circle cx=25.5 cy=26.5 r="1.5"/><circle cx=30.5 cy=26.5 r="1.5"/><circle cx=35.5 cy=26.5 r="1.5"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Iron</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#546E7A d="M38 6c-2.112 0-3.913 1.321-4.645 3.178l1.804.902c.392-1.203 1.51-2.08 2.841-2.08 1.654 0 3 1.346 3 3v9h2v-9c0-2.757-2.243-5-5-5z"/><path fill=#64B5F6 d="M36 42h-24l-8-23s13 2 20 2l20-2s-3 23-8 23z"/><g fill=#2196F3><circle cx=33 cy=12 r="1"/><circle cx=32 cy=15 r="1"/><circle cx=31 cy=18 r="1"/></g><g fill=#BBDEFB><path d="M24 20c-4.535 0-11.587.16-15.992-.431.17 8.699 4.249 18.431 15.992 18.431s15.822-9.732 15.992-18.431c-4.405.591-11.457.431-15.992.431z"/><circle cx=16.5 cy=19.5 r="3.5"/><circle cx=22 cy=18 r="3"/><circle cx=14.5 cy=9.5 r="1.5"/><circle cx=26 cy=20 r="2"/><circle cx=7.5 cy=13.5 r="2.5"/></g><g fill=#fff><circle cx=28 cy=32 r="3"/><circle cx=18 cy=29 r="2"/><circle cx=22.5 cy=22.5 r="1.5"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Jacuzzi</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path stroke=#546E7A stroke-width=2 stroke-linejoin=round stroke-miterlimit=10 d="M24 21c0-12.912 13-.962 13-14" fill="none"/><path fill=#8CBCD6 d="M2 21h44v20h-44z"/><g fill=#E1F5FE><path d="M4 23h4v4h-4zM10 23h4v4h-4zM16 23h4v4h-4zM22 23h4v4h-4zM28 23h4v4h-4zM34 23h4v4h-4zM40 23h4v4h-4zM4 35h4v4h-4zM10 35h4v4h-4zM16 35h16v4h-16zM34 35h4v4h-4zM40 35h4v4h-4zM4 29h7v4h-7zM13 29h4v4h-4zM19 29h4v4h-4zM25 29h4v4h-4zM31 29h4v4h-4zM37 29h7v4h-7z"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Keyboard</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#FBC02D d="M22 27v11c0 2.209 1.791 4 4 4s4-1.791 4-4v-11h-8z"/><g fill=#546E7A><path d="M27 29h-2v-14c0-2.823-2.504-2.994-3.006-3h-13.994v-2h14c1.729 0 5 1.045 5 5v14zM30 24.584h-8v-2.584l3-2h2l3 2z"/></g><circle fill=#FFF59D cx=26 cy=32.063 r="2"/><g fill=#90A4AE><path d="M31 24h-10l-11 6v2h32v-2zM6 6h4v10h-4z"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Lights</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#FF1744 d="M13 3h5v3h-5z"/><path fill=#CFD8DC d="M33.5 13h-27.106c-.248.961-.394 1.962-.394 3 0 0 0 6 1 11h12c0-2 1.896-4 3-4h14.081c5.919 0 5.919-7 5.919-7 0-1.062-.059-2.059-.174-3h-8.326z"/><g fill=#90A4AE><path d="M12 27h2v18h-2zM17 45h-8c-1.103 0-2-.897-2-2l.024-.217 1.98-8.911c.066-1.043.936-1.872 1.996-1.872h4c1.06 0 1.93.829 1.996 1.872l2.004 9.128c0 1.103-.897 2-2 2zm-7.976-2h7.951l-1.975-9h-4l-.024.217-1.952 8.783z"/></g><g fill=#90A4AE><path d="M10 15h-3.95c-.027.33-.05.662-.05 1 0 0 0 .37.015 1h3.985v-2zM6.22 21h3.78v-2h-3.909c.031.608.073 1.283.129 2z"/></g><g fill=#455A64><path d="M7 27h12c0-2 1.896-4 3-4h-15.596c.143 1.318.335 2.692.596 4zM33 4h-15c-5.589 0-10.272 3.827-11.606 9h12.606c-1.381 0-2.5-1.119-2.5-2.5s1.119-2.5 2.5-2.5h14.5c1.381 0 2.5 1.119 2.5 2.5 0 1.21-.859 2.218-2 2.449v.051h7.923c-.411-5.311-2.923-9-8.923-9z"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Mixer</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#455A64 d="M40 31c0 .553-.447 2-1 2h-30c-.552 0-1-1.447-1-2v-21c0-.553.448-1 1-1h30c.553 0 1 .447 1 1v21z"/><path fill=#BBDEFB d="M10 11h28v18h-28z"/><g fill=#CFD8DC><path d="M3 37h42v2h-42zM40 31h-32l-5 6h42z"/></g><path fill=#546E7A d="M10 32h28l2 3h-32z"/><path fill=#90A4AE d="M28 35h-8l-1 2h10z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Notebook</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#455A64 d="M42 18c0 1.657-1.343 3-3 3h-30c-1.657 0-3-1.343-3-3v-10c0-1.657 1.343-3 3-3h30c1.657 0 3 1.343 3 3v10z"/><path fill=#BBDEFB d="M6 15h36v23h-36z"/><circle fill=#8BC34A cx=10 cy=11 r="2"/><circle fill=#FFEB3B cx=16 cy=11 r="2"/><path fill=#FAFAFA d="M40 12c0 .553-.447 1-1 1h-17c-.553 0-1-.447-1-1v-2c0-.553.447-1 1-1h17c.553 0 1 .447 1 1v2z"/><path fill=#3F51B5 d="M30.5 30h-11c-.182 0-.35-.099-.438-.258s-.097-.354 0-.507l5.507-8c.182-.293.666-.293.848 0l5.507 8c.097.153.102.348.014.507s-.256.258-.438.258zM14.134 40.153c10.599 3.123 12.866-2.916 12.866-10.153h-4c0 7.375-2.243 10.643-8.866 10.153z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Open in browser</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#FFC107 d="M24.639 4c-8.6 0-18.43 4.954-18.43 18.947 0 10.161 7.633 21.053 19.31 21.053h.175c4.385-.079 9.105-2.918 9.105-8.959 0-1.157-.431-2.159-.809-3.042-.102-.233-.199-.462-.288-.694-.864-2.175.089-2.971 2.329-4.565 2.537-1.806 6.013-4.278 5.968-10.819 0-3.889-4.243-11.921-17.36-11.921zm.56 35.2c-2.241 0-4.001-1.76-4.001-3.999 0-2.241 1.76-4.001 4.001-4.001 2.238 0 3.998 1.76 3.998 4.001 0 2.239-1.759 3.999-3.998 3.999z"/><circle fill=#9C27B0 cx=34.5 cy=16.5 r="3.5"/><circle fill=#2196F3 cx=25.5 cy=10.5 r="3.5"/><circle fill=#4CAF50 cx=15.5 cy=15.5 r="3.5"/><circle fill=#FF3D00 cx=14.5 cy=26.5 r="3.5"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Paint palette</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#5C6BC0 d="M40 37c0 1.104-.896 2-2 2h-20c-1.104 0-2-.896-2-2v-25c0-1.104.896-2 2-2h20c1.104 0 2 .896 2 2v25z"/><path fill=#CDDC39 d="M23 14h13v5h-13z"/><g fill=#BBDEFB><path d="M23 22h3v3h-3zM28 22h3v3h-3zM33 22h3v3h-3zM23 27h3v3h-3zM28 27h3v3h-3zM33 27h3v3h-3zM23 32h3v3h-3zM28 32h3v3h-3zM33 32h3v3h-3z"/></g><path fill=#283593 d="M13.5 6c-5.5 0-5.5 2-5.5 3v30s-.063 3 5.5 3 5.5-2 5.5-3v-30s0-3-5.5-3z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Phone office</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><g fill=#90CAF9><path d="M24.256 10h2v17h-2zM12.52 13.931l1.81-.85 7.225 15.385-1.81.85z"/></g><circle fill=#3F51B5 cx=25.256 cy=9 r="3"/><path fill=#FFC107 d="M36.256 42h-22c-2-4-2-9-2-9h26s0 6-2 9z"/><g fill=#E91E63><circle cx=13 cy=12.598 r="2.999"/><path d="M25.256 27c-7 0-11 3-11 6h22c0-3-4-6-11-6z"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Pin cushion</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#B0BEC5 d="M9.536 41.293l-3.536.707.706-3.535 12.73-12.729 2.828 2.828z"/><path fill=#D84315 d="M28.071 27.106l-7.071-7.071 13-11.035 5 5z"/><g fill=#FF5722><path d="M33.515 6l-1.414 1.415c-.781.78-.781 2.047 0 2.828l5.656 5.656c.781.781 2.048.781 2.828 0l1.415-1.414-8.485-8.485zM26.121 35l1.415-1.414c1.952-1.953 1.952-5.118 0-7.071l-6.051-6.051c-1.953-1.952-5.118-1.952-7.071 0l-1.414 1.415 13.121 13.121z"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Pin</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><g fill=#2196F3><path d="M33 17h-23v8h23c1 0 1 .531 1 1v7h8v-7c0-6.557-5.521-9-9-9zM6 12h5v18h-5z"/></g><g fill=#1565C0><path d="M24 6h2v3h-2zM22 14h6v13h-6z"/></g><path fill=#FFC107 d="M36 8c0-.553-.447-1-1-1l-8 2h-4l-8-2c-.552 0-1 .447-1 1v6h22v-6z"/><path fill=#FF9800 d="M29 11l-2-3h-4l-2 3v4h8z"/><path fill=#81D4FA d="M38 42c-1.68 0-3-1.237-3-2.813 0-1.35 2.041-4.667 2.459-5.342l.541-.845.54.846c.419.675 2.46 4.048 2.46 5.342 0 1.575-1.32 2.812-3 2.812z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Plumbing</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#F44336 d="M42 42h-36v-36h31l5 5z"/><path fill=#fff d="M39 39c0 .553-.447 1-1 1h-28c-.553 0-1-.447-1-1v-14c0-.553.447-1 1-1h28c.553 0 1 .447 1 1v14z"/><g fill=#CFD8DC><path d="M13 31h22v2h-22zM13 27h22v2h-22zM13 35h22v2h-22z"/></g><path fill=#C62828 d="M9 6v10c0 1.104.896 2 2 2h15c1.104 0 2-.896 2-2v-10h-19z"/><path fill=#B0BEC5 d="M15 6v10c0 1.104.896 2 2 2h15c1.104 0 2-.896 2-2v-10h-19z"/><path fill=#263238 d="M26 8h4v8h-4z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Save</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#B0BEC5 d="M8 25h32c1.104 0 2 .896 2 2v9c0 1.104-.896 2-2 2h-32v-13z"/><path fill=#37474F d="M10 27h30v9h-30z"/><path fill=#18FFFF d="M30 27h2v9h-2z"/><g fill=#00838F><path d="M40 38h-32v2c0 1.104.896 2 2 2h30c1.104 0 2-.896 2-2v-4c0 1.104-.896 2-2 2zM31 7.998c0-2-1.479-2.563-2.828-1.397 0 0-20.766 17.07-21.172 17.398s-1 1.004-1 2.002v9.999c0 1.104.896 2 2 2 0 0 20.178-15.668 21.35-16.637s1.65-1.301 1.65-3.384v-9.981z"/></g><circle fill=#FFEB3B cx=38 cy=40 r="1"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Scanner</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#3F51B5 d="M8 10l6-6h25c.553 0 1 .447 1 1v37c0 .553-.447 1-1 1h-30c-.552 0-1-.447-1-1v-32z"/><path fill-rule=evenodd clip-rule=evenodd fill=#fff d="M21.009 33.014l-.327 1.034h-3.473c-.427 0-1.541 0-1.541.428 0 .782 3.998.677 3.998 2.67 0 1.354-1.212 1.713-2.589 1.818-.59.036-1.212 0-1.802 0-1.9 0-3.277-.105-3.277-.105l.623-1.782s1.081.141 1.769.141c.656 0 2.556.217 2.556-.214 0-.71-3.146-.675-3.146-2.492 0-.926 1.769-1.425 3.276-1.425 1.542-.001 3.933-.073 3.933-.073zm6.684.963l-3.244.927c.033.143.033.249 0 .392-.361 1.211-3.571 1.354-3.571 1.354l-.753 2.35s8.06-.036 8.847-3.278c.163-.606-.394-1.246-1.279-1.745zm-2.818-.856c-1.442-.178-2.817-.107-2.817-.107l-.296.998s.853 0 1.573.214l1.54-1.105zm1.41.284l-2.327 1.034.262.142 2.654-.96c-.196-.106-.394-.145-.589-.216z"/><path fill-rule=evenodd clip-rule=evenodd fill=#FDD835 d="M35 6h3v7h-3zM30 6h3v7h-3zM25 6h3v7h-3zM20 6h3v7h-3zM10 10.854v2.146h3v-5.158zM15 6h3v7h-3z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>SD</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#80DEEA d="M37 38c0 2.209-1.791 4-4 4h-17c-2.209 0-4-1.791-4-4v-17c0-2.209 1.791-4 4-4h17c2.209 0 4 1.791 4 4v17z"/><g fill=#546E7A><path d="M13.109 11.832l-1.109-1.664c3.161-2.107 5.319-2.168 5.555-2.168h6v2h-6c-.007 0-1.785.059-4.446 1.832zM21 14h7v3h-7z"/></g><path fill=#00ACC1 d="M12 26v12c0 2.209 1.791 4 4 4h17c2.209 0 4-1.791 4-4v-12h-25z"/><path fill=#80DEEA d="M30 35c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3z"/><path fill=#4DD0E1 d="M22.506 39c-1.382 0-2.506-1.121-2.506-2.5s1.124-2.5 2.506-2.5c1.375 0 2.494 1.121 2.494 2.5s-1.119 2.5-2.494 2.5z"/><path fill=#B0BEC5 d="M28 14v-7c0-.553-.447-1-1-1h-5c-.553 0-1 .447-1 1v7h7z"/><path fill=#E0F7FA d="M21.502 30c-2.482 0-4.502-2.02-4.502-4.503 0-2.479 2.02-4.497 4.502-4.497 2.48 0 4.498 2.018 4.498 4.497 0 2.483-2.018 4.503-4.498 4.503z"/><path fill=#B2EBF2 d="M17.051 26c.254 2.244 2.141 4 4.451 4 2.309 0 4.193-1.756 4.447-4h-8.898z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Shampoo dispenser</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#546E7A d="M7 20h-2v-9c0-1.729 1.045-5 5-5h28c1.729 0 5 1.254 5 6v8h-2v-8c0-3.954-2.877-4-3-4h-28c-2.823 0-2.994 2.504-3 3.006v8.994z"/><path fill=#E91E63 d="M33.535 20c-1.275 4.056-5.059 7-9.535 7s-8.26-2.944-9.535-7h-10.465l4.821 22h30.357l4.822-22h-10.465zm-8.535 19h-2v-4h2v4zm0-6h-2v-4h2v4zm5 6h-2v-4h2v4zm0-6h-2v-4h2v4zm5 6h-2v-4h2v4zm0-6h-2v-4h2v4zm-15 6h-2v-4h2v4zm0-6h-2v-4h2v4zm-5 6h-2v-4h2v4zm0-6h-2v-4h2v4z"/><path fill=#AD1457 d="M43 19h-13.349c-.825 2.329-3.04 4-5.651 4s-4.827-1.671-5.651-4h-13.349c-1.104 0-2 .896-2 2v1c0 1.104.896 2 2 2h10.434c1.949 2.335 4.894 4 8.566 4s6.617-1.665 8.566-4h10.434c1.104 0 2-.896 2-2v-1c0-1.104-.896-2-2-2z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Shopping basket</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#546E7A d="M23 7h2v17h-2zM11 44v-2c1.103 0 2-.897 2-2h2c0 2.206-1.794 4-4 4zM37 44v-2c-1.103 0-2-.897-2-2h-2c0 2.206 1.794 4 4 4zM36 9h-8l3-4h2z"/><path stroke=#546E7A stroke-width=2 stroke-miterlimit=10 d="M24 7s0-3 3-3h4M31 4s1 0 1 1" fill="none"/><g fill=#2196F3><circle cx=34 cy=11 r="1"/><circle cx=34 cy=14 r="1"/><circle cx=34 cy=17 r="1"/><circle cx=34 cy=20 r="1"/><circle cx=30 cy=20 r="1"/><circle cx=30 cy=17 r="1"/><circle cx=30 cy=14 r="1"/><circle cx=30 cy=11 r="1"/></g><path fill=#BBDEFB d="M36 40h-24l-8-19s13 2 20 2l20-2s-3 19-8 19z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Shower and tub</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><g fill=#891212><path d="M24 28l-18 7v-15l18-7zM42 20l-18-7v15l18 7z"/></g><circle fill=#37474F cx=23.5 cy=18.5 r="2.5"/><path fill=#90CAF9 d="M23.5 6c-6.903 0-12.5 5.597-12.5 12.5s5.597 12.5 12.5 12.5 12.5-5.597 12.5-12.5-5.597-12.5-12.5-12.5zm0 14.803c-1.272 0-2.303-1.03-2.303-2.303s1.03-2.303 2.303-2.303 2.303 1.03 2.303 2.303-1.031 2.303-2.303 2.303z"/><g fill=#CFE8F9><path d="M20.677 19.843l-7.677 5.501c.878 1.316 2.516 2.938 4.188 4l5.429-7.533c-.932-.294-1.659-1.03-1.94-1.968zM30.269 8.001l-5.966 8.163c.938.267 1.68.977 1.99 1.895l8.118-5.648c-1-1.789-2.427-3.302-4.142-4.41z"/></g><path fill=#F44336 d="M24 27l-18-7v15l18 7z"/><path fill=#C62828 d="M42 35l-18 7v-15l18-7z"/><path fill=#1E88E5 d="M23.5 15c-1.933 0-3.5 1.567-3.5 3.5s1.567 3.5 3.5 3.5 3.5-1.567 3.5-3.5-1.567-3.5-3.5-3.5zm0 5c-.828 0-1.5-.672-1.5-1.5s.672-1.5 1.5-1.5 1.5.672 1.5 1.5-.672 1.5-1.5 1.5z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Software box</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#CFD8DC d="M3 16h42v14h-42z"/><g fill=#37474F><path d="M38.521 17h-11.041c-1.532 1.537-2.48 3.657-2.48 6s.948 4.463 2.48 6h11.041c1.532-1.537 2.479-3.657 2.479-6s-.947-4.463-2.479-6zm-5.521 8c-1.104 0-2-.896-2-2s.896-2 2-2 2 .896 2 2-.896 2-2 2zM21.521 17h-12.04c-1.533 1.537-2.481 3.657-2.481 6s.948 4.463 2.481 6h12.041c1.531-1.537 2.478-3.657 2.478-6s-.947-4.463-2.479-6zm-6.521 8c-1.104 0-2-.896-2-2s.896-2 2-2 2 .896 2 2-.896 2-2 2z"/></g><g fill=#546E7A><path d="M2 11v25h44v-25h-44zm42 18h-40v-12h40v12zM16 16h16v14h-16z"/></g><path fill=#FAFAFA d="M18 17h12v12h-12z"/><path fill=#FF1744 d="M18 25h12v4h-12z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Tape drive</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#FFC107 d="M3 21h42v19h-42z"/><g fill=#455A64><path d="M45 21v-5c0-1.104-.896-2-2-2h-38c-1.104 0-2 .896-2 2v5h42zM19 14v-4h9v4h2v-4c0-1.104-.896-2-2-2h-9c-1.104 0-2 .896-2 2v4h2z"/></g><g fill=#78909C><path d="M9 19h6v9h-6zM33 19h6v9h-6z"/></g><g fill=#455A64><path d="M9 24h6v2h-6zM33 24h6v2h-6z"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Toolbox</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><g fill=#B0BEC5><circle cx=9 cy=9 r="3"/><circle cx=39 cy=9 r="3"/></g><path fill=#E91E63 d="M35 8c0-.931-.639-1.706-1.5-1.929-.861.223-1.5.998-1.5 1.929v26h3v-26z"/><path fill=#AD1457 d="M32.728 22.343h-.001l-2.829 2.828-.898-.9v2.83l.898.899 1.213-1.213 1.617-1.616 2.272 2.273v-2.829z"/><path fill=#546E7A d="M39 10h-30c-.552 0-1-.447-1-1s.448-1 1-1h30c.553 0 1 .447 1 1s-.447 1-1 1z"/><path fill=#F8BBD0 d="M33 6h-18c-2 0-2 2-2 2v34h19v-34c0-.931.639-1.706 1.5-1.929-.161-.042-.326-.071-.5-.071z"/><path fill=#F48FB1 d="M32 35.444v-2.829l-2.272-2.272h-.001l-2.829 2.828-2.827-2.828h-.001l-2.828 2.828-2.827-2.828h-.001l-2.829 2.828-2.585-2.586v2.829l2.585 2.586.606-.606 2.223-2.223 1.414 1.414.566.566.849.849 1.414-1.415 1.413-1.414 2.828 2.829 1.213-1.213 1.617-1.616z"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Tovel</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><g fill=#37474F><path d="M15 36c0-.553-.447-1-1-1h-3c-.553 0-1 .447-1 1v5c0 .553.447 1 1 1h3c.553 0 1-.447 1-1v-5zM38 36c0-.553-.447-1-1-1h-3c-.553 0-1 .447-1 1v5c0 .553.447 1 1 1h3c.553 0 1-.447 1-1v-5zM41 21v3h-2v2h2c.97 0 2-.701 2-2v-3h-2zM9 24h-2v-3h-2v3c0 1.299 1.03 2 2 2h2v-2z"/></g><path fill=#B71C1C d="M39 13v-6c0-.553-.447-1-1-1h-28c-.552 0-1 .447-1 1v6h30z"/><g fill=#FF5722><path d="M44 22c0 .553-.447 1-1 1h-2c-.553 0-1-.447-1-1v-6c0-.553.447-1 1-1h2c.553 0 1 .447 1 1v6zM39 13c0-1.104-.896-2-2-2h-26c-1.104 0-2 .896-2 2v23c0 1.104.896 2 2 2h26c1.104 0 2-.896 2-2v-23zM4 22c0 .553.448 1 1 1h2c.552 0 1-.447 1-1v-6c0-.553-.448-1-1-1h-2c-.552 0-1 .447-1 1v6z"/></g><path fill=#37474F d="M16 26h16v10h-16z"/><path fill=#455A64 d="M37 14c0-.553-.447-1-1-1h-24c-.552 0-1 .447-1 1v9c0 .553.448 1 1 1h24c.553 0 1-.447 1-1v-9z"/><g fill=#546E7A><path d="M16 28h16v2h-16zM16 32h16v2h-16z"/></g><g fill=#fff><circle cx=12 cy=31 r="2"/><circle cx=36 cy=31 r="2"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Transportation</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#CFD8DC d="M16 3h16v15h-16z"/><g fill=#546E7A><path d="M27 38c0-.553-.447-1-1-1h-4c-.552 0-1 .447-1 1v7h6v-7zM35 21c0-1.657-1.344-3-3-3h-16c-1.657 0-3 1.343-3 3v12c0 4 3 7 7 7h8c3 0 7-3 7-7v-12zM18 9h4v3h-4zM26 9h4v3h-4z"/></g><circle fill=#263238 cx=24 cy=25 r="4"/><circle fill=#64DD17 cx=24 cy=25 r="2"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Usb on</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><g fill=#546E7A><path d="M30 18c-3.865 0-7 3.135-7 7v13c0 .568.087 1.048.226 1.466.836 2.526 3.774 2.534 3.774 2.534h6s4 0 4-4v-13c0-3.865-3.135-7-7-7zm0 4c-1.519 0-2.273.689-2.305.719-.399.373-1.028.362-1.408-.029-.379-.393-.38-1.011.006-1.396.132-.134 1.36-1.294 3.707-1.294s3.575 1.16 3.707 1.293c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293s-.512-.098-.707-.293c-.02-.018-.774-.707-2.293-.707zM18 42v-2c0-1.104-.896-2-2-2h-8c-1.104 0-2 .896-2 2v2h12z"/></g><circle fill=#37474F cx=30 cy=27 r="3"/><path fill=#CFD8DC d="M35 35c0-1.104-.896-2-2-2h-6c-1.104 0-2 .896-2 2v3c0 1.104.896 2 2 2h6c1.104 0 2-.896 2-2v-3z"/><circle fill=#FF1744 cx=32.5 cy=36.5 r="1.5"/><g fill=#90A4AE><path d="M30 26c-1.924 0-4.711.484-7 1.879-2.238 1.365-4 3.601-4 7.121 0 2.484.79 4.378 2.348 5.628 1.604 1.287 4.023 1.372 5.652 1.372 0 0-2.938-.008-3.774-2.534-.219-.119-.434-.243-.627-.398-1.061-.851-1.599-2.22-1.599-4.068 0-2.146.837-3.633 2-4.665 2.574-2.284 6.748-2.334 7.001-2.335.552-.002.999-.449.998-1.001 0-.552-.447-.999-.999-.999zM37 36.83c2.669-3.026 5-7.705 5-14.83 0-6.52-1.322-11.12-3.93-13.672-2.477-2.425-5.364-2.359-6.755-2.328h-7.315c-.106 0-2.633.029-3.895 2.553-.905 1.809-7.12 22.81-9.038 29.447h2.065c3.246-11.532 8.104-27.238 8.762-28.553.699-1.397 2.06-1.446 2.106-1.447h7.358c1.197-.032 3.437-.079 5.313 1.757 2.209 2.162 3.329 6.281 3.329 12.243 0 5.185-1.293 8.925-3 11.605v3.225z"/></g></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Vacuum cleaner</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
								<div class=grid-item>
										<div class="card app-icon-card">
												<div class=app-icon-image>
														<div class="svg-icon codepen-group"><pre class=codepen-able data-type=html><code>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 48 48" enable-background="new 0 0 48 48"><path fill=#546E7A d="M8 10h36v26h-36z"/><path fill=#BBDEFB d="M10 12h32v21h-32z"/><g fill=#455A64><path d="M23 36h6v3h-6zM35 39h-18l-2 2v1h22v-1s0-2-2-2z"/></g><path fill=#3F51B5 d="M4 4h18v40h-18z"/><g fill=#9FA8DA><path d="M6 6h14v4h-14zM6 12h14v2h-14zM6 16h14v2h-14zM6 20h14v2h-14zM6 24h14v2h-14z"/></g><circle fill=#CDDC39 cx=13 cy=38 r="2"/></svg></code></pre></div>
												</div>
												<div class=app-icon-details>
														<div class=app-icon-title>Workstation</div>
														<svg class=icon>
																<use xlink:href="#codepen" />
														</svg>
												</div>
										</div>
								</div>
						</div>
				</main>
				<footer>2015, Voom</footer>
				<label for=navigation id=overlay></label>
              
            
!

CSS

              
                #navigation {
		display: none
}

.drawer {
		-webkit-box-shadow: rgba(0, 0, 0, .2) 0 0 1px;
		background: #f5f5f5;
		box-shadow: rgba(0, 0, 0, .2) 0 0 1px;
		height: 100%;
		position: fixed;
		width: 16em;
		z-index: 2
}

.drawer a {
		color: gray;
		display: block;
		font-size: 1.1em;
		font-weight: 400;
		line-height: 3.9em;
		padding-left: 1.5em;
		text-decoration: none
}

.drawer a:hover {
		background: #fff
}

.icon-drawer {
		display: inline-block;
		fill: gray;
		height: 2.3em;
		margin-right: 1em;
		padding: .03em;
		top: .7em;
		width: 2.3em
}

.left {
		float: left
}

.right {
		float: right;
		margin-left: 0;
		margin-right: 10px
}

.ripple {
		display: block;
		overflow: hidden;
		position: relative;
		transition: background-color .3s
}

.ripple:active:before {
		padding-top: 120%;
		transition: width .2s ease-out, padding-top .2s ease-out;
		width: 120%
}

.ripple:before {
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		background-color: rgba(0, 0, 0, .05);
		border-radius: 100%;
		content: "";
		display: block;
		left: 50%;
		padding-top: 0;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 0
}

.ripple>* {
		position: relative
}

body {
		-moz-osx-font-smoothing: grayscale;
		-moz-user-select: none;
		-ms-user-select: none;
		-webkit-font-smoothing: antialiased;
		-webkit-user-select: none;
		background: #f5f5f5;
		cursor: default;
		font-family: sans-serif;
		font-smoothing: antialiased;
		margin: 0;
		user-select: none
}

button {
		-moz-border-radius: 50%;
		-moz-transition: background-color .2s;
		-o-transition: background-color .2s;
		-webkit-border-radius: 50%;
		-webkit-transition: background-color .2s;
		border: none;
		border-radius: 50%;
		cursor: pointer;
		height: 48px;
		margin: 12px;
		padding: 12px;
		transition: background-color .2s;
		width: 48px;
		background: 0 0;
		outline: 0;
		color: gray;
		fill: gray
}

button:hover {
		background: rgba(0, 0, 0, .02)
}

button:active {
		background: rgba(0, 0, 0, .1)
}

footer {
		background: #f0f0f0;
		bottom: 0;
		color: gray;
		font-size: .8em;
		height: 100px;
		margin-top: 100px;
		padding-top: 100px;
		text-align: center;
		width: 100%
}

header {
		-webkit-box-shadow: rgba(0, 0, 0, .1) 0 1px 0;
		background: #f5f5f5;
		box-shadow: rgba(0, 0, 0, .1) 0 1px 0;
		height: 4.3em;
		position: fixed;
		text-align: center;
		top: 0;
		width: 100%;
		z-index: 1
}

header a {
	text-decoration: none
}

header a:hover {
	color: blue
}

@keyframes fadein {
		from {
				opacity: 0
		}
		to {
				opacity: 1
		}
}

@-webkit-keyframes fadein {
		from {
				opacity: 0
		}
		to {
				opacity: 1
		}
}

#overlay {
		-webkit-animation: fadein .5s;
		animation: fadein .5s;
		background: rgba(0, 0, 0, .2);
		display: none;
		height: 100%;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 1
}

.app-icon-card {
		-moz-box-align: center;
		-moz-box-direction: normal;
		-moz-box-orient: vertical;
		-moz-box-pack: center;
		-ms-flex-align: center;
		-ms-flex-direction: column;
		-ms-flex-pack: center;
		-webkit-align-items: center;
		-webkit-box-align: center;
		-webkit-box-direction: normal;
		-webkit-box-orient: vertical;
		-webkit-box-pack: center;
		-webkit-flex-direction: column;
		-webkit-justify-content: center;
		align-items: center;
		display: -webkit-box;
		display: -webkit-flex;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
		flex-direction: column;
		justify-content: center;
		overflow: hidden
}

.app-icon-details {
		-moz-box-align: center;
		-moz-box-pack: center;
		-ms-flex-align: center;
		-ms-flex-pack: center;
		-webkit-align-items: center;
		-webkit-box-align: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		align-items: center;
		display: -webkit-box;
		display: -webkit-flex;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
		justify-content: center;
		width: 300px;
		background: #fbfbfc
}

.app-icon-image {
		-moz-box-align: center;
		-moz-box-flex: 1;
		-moz-box-pack: center;
		-ms-flex: 1;
		-ms-flex-align: center;
		-ms-flex-pack: center;
		-webkit-align-items: center;
		-webkit-box-align: center;
		-webkit-box-flex: 1;
		-webkit-box-pack: center;
		-webkit-flex: 1;
		-webkit-justify-content: center;
		align-items: center;
		display: -webkit-box;
		display: -webkit-flex;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
		flex: 1;
		justify-content: center;
		width: 300px
}

.app-icon-title {
		-moz-box-align: center;
		-moz-box-flex: 1;
		-ms-flex: 1;
		-ms-flex-align: center;
		-webkit-align-items: center;
		-webkit-box-align: center;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		align-items: center;
		display: -webkit-box;
		display: -webkit-flex;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
		flex: 1;
		height: 72px;
		margin: 0 24px;
		color: gray;
		padding-left: 10px
}

.card {
		-moz-box-shadow: rgba(0, 0, 0, .2) 0 2px 1px;
		-webkit-box-shadow: rgba(0, 0, 0, .2) 0 2px 1px;
		background: #fff;
		box-shadow: rgba(0, 0, 0, .2) 0 2px 1px;
		height: 100%
}

.grid {
		margin: 0 auto;
		margin-top: 50px;
		position: relative;
		width: 99%;
		height: 934px
}

.grid-item {
		border-radius: 3px;
		position: absolute;
		transition: .3s cubic-bezier(.4, .2, .5, 1.4);
		position: absolute;
		transform: translate3d(6px, 6px, 0);
		opacity: 1;
		padding: 10px;
		height: 300px
}

main {
		margin-left: 16em;
		padding: 2em .1em .1em
}

@media screen and (max-width:1600px) {
		#navigation:checked~#overlay {
				display: block
		}
		#navigation:checked~.drawer {
				-webkit-transform: translateX(0);
				transform: translateX(0)
		}
		.drawer {
				-webkit-transform: translateX(-105%);
				transform: translateX(-105%);
				transition: -webkit-transform .2s cubic-bezier(.64, .09, .08, 1);
				transition: transform .2s cubic-bezier(.64, .09, .08, 1)
		}
		main {
				margin: 0
		}
}

.logo {
		color: gray;
		font-size: 1.4em;
		font-weight: 800;
		letter-spacing: -.05em;
		line-height: 3.3em;
		padding-right: .5em
}

.popup {
		-moz-transition: opacity .2s ease;
		-o-transition: opacity .2s ease;
		-webkit-transition: opacity .2s ease;
		background: rgba(0, 0, 0, .2);
		height: 100vh;
		left: 0;
		opacity: 0;
		position: fixed;
		top: -100vh;
		transition: opacity .2s ease;
		width: 100vw;
		z-index: 9999999
}

.popup .closePopUpOutSide {
		height: 100%;
		left: 0;
		position: absolute;
		width: 100%;
		z-index: 9999991
}

.popup .popUpContainer {
		left: 50%;
		margin-left: -250px;
		max-width: 500px;
		position: fixed;
		top: -100vh;
		width: 100%;
		z-index: 9999999
}

.popup article {
		background-color: #f5f5f5;
		height: 300px
}

.popup:target {
		opacity: 1;
		top: 0
}

.popup:target .popUpContainer {
		-moz-transition: top .2s ease;
		-o-transition: top .2s ease;
		-webkit-transition: top .2s ease;
		top: 50px;
		transition: top .2s ease
}

.svg-icon {
		width: 130px;
		height: 130px
}

@media (max-width:796px) {
		.popup .popUpContainer {
				left: 5%;
				margin-left: 0;
				max-width: none;
				width: 90%
		}
		.popup:target .popUpContainer {
				-moz-transition: top .2s ease;
				-o-transition: top .2s ease;
				-webkit-transition: top .2s ease;
				top: 25px;
				transition: top .2s ease
		}
}

.icon {
		width: 24px;
		height: 24px;
		margin-right: 24px;
		fill: gray
}

.codepen {
		margin-left: 153px;
		margin-top: 16px;
		padding: 12px;
		width: 50px;
		height: 50px;
		position: absolute;
		z-index: 99
}
              
            
!

JS

              
                ! function(t) {
		"use strict";

		function e(t, e, i, n, r) {
				var o = Array.prototype.forEach,
						f = t instanceof Node ? t : document.querySelector(t);
				if (!f) return !1;
				var s = f.querySelectorAll(e);
				if (0 === s.length) return !1;
				i = "number" == typeof i && isFinite(i) && Math.floor(i) === i ? i : 6, f.style.width = "";
				var u = f.getBoundingClientRect().width,
						d = s[0].getBoundingClientRect().width + i,
						l = Math.max(Math.floor((u - i) / d), 1),
						a = 0;
				u = d * l + i + "px", f.style.width = u, f.style.position = "relative";
				for (var c = [], m = [], p = 0; l > p; p++) m.push(p * d + i), c.push(i);
				o.call(s, function(t) {
						var e = c.slice(0).sort(function(t, e) {
								return t - e
						}).shift();
						e = c.indexOf(e);
						var r = m[e],
								f = c[e],
								s = ["webkitTransform", "MozTransform", "msTransform", "OTransform", "transform"];
						return t.style.position = "absolute", n || o.call(s, function(e) {
								t.style[e] = "translate3D(" + r + "px," + f + "px,0)"
						}), c[e] += t.getBoundingClientRect().height + i, a += 1, n ? n(t, r, f, a) : void 0
				});
				var h = c.slice(0).sort(function(t, e) {
						return t - e
				}).pop();
				f.style.height = h + "px", "function" == typeof r && r(s)
		}
		"function" == typeof define && define.amd ? define(function() {
				return e
		}) : "undefined" != typeof module && module.exports ? module.exports = e : t.minigrid = e
}(this),
function() {
		minigrid(".grid", ".grid-item"), window.addEventListener("resize", function() {
				minigrid(".grid", ".grid-item")
		})
}();

var PostToCodepen = function() {
		var e, t, n, r, o, a, u = document.getElementsByClassName("codepen-group"),
				d = function(e) {
						var t = document.createElement("form"),
								n = document.createElement("input"),
								i = document.createElement("button"),
								r = document.createDocumentFragment();
						t.setAttribute("action", "https://codepen.io/pen/define"), t.setAttribute("method", "POST"), t.setAttribute("target", "_blank"), n.setAttribute("type", "hidden"), n.setAttribute("name", "data"), n.setAttribute("value", a), t.appendChild(n), i.setAttribute("class", "codepen"), t.appendChild(i), r.appendChild(t), e.appendChild(r)
				},
				s = function(e) {
						var t = JSON.stringify(e);
						return t = t.replace(/"/g, "&quot;"), t = t.replace(/'/g, "&apos;")
				},
				l = function() {
						for (i = 0, len = u.length; i < len; i++) {
								var l = {
										html: ""
								};
								e = u[i].getElementsByClassName("codepen-able");
								for (var c = 0, f = e.length; f > c; c++) t = e[c], n = t.getAttribute("data-type"), r = t.firstChild, o = r.innerHTML, o.length > 0 && (l[n] = o);
								a = s(l), d(u[i])
						}
				};
		return {
				please: l
		}
}();
PostToCodepen.please();
              
            
!
999px

Console