Skip to content

Instantly share code, notes, and snippets.

@0x7An

0x7An/index.html

Forked from anonymous/index.html
Created October 3, 2016 16:12
Show Gist options
  • Save 0x7An/2f84623d7303f7672fb74d54f01ffa2c to your computer and use it in GitHub Desktop.
Save 0x7An/2f84623d7303f7672fb74d54f01ffa2c to your computer and use it in GitHub Desktop.
Download ZIP
Nav (material design)
Raw
index.html
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto+Mono:400,500'>
<body>
<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>
<svg xmlns="http://www.w3.org/2000/svg" width="106" height="40.2"><g fill="none" stroke-width="3.3"><path stroke="#4A87EE" d="M26.2 15.6c.4 5.2-3 10-8 11.2-5 1.3-10.3-1.3-12.3-6C3.2 16 5 10.4 10 7.6c4-2.8 10-2 13.2 1.8m4.2 7.7h-11"/><path stroke="#D83038" d="M44 21c0 3.7-3 6.7-6.5 6.7-3.7 0-6.7-3-6.7-6.7 0-3.6 3-6.6 6.7-6.6 3.6 0 6.6 3 6.6 6.6z"/><path stroke="#F4C022" d="M62 21c0 3.7-3 6.7-6.6 6.7-3.7 0-6.7-3-6.7-6.7 0-3.6 3-6.6 6.7-6.6s6.6 3 6.6 6.6z"/><path stroke="#4A87EE" d="M73.7 27.7c-2.5.5-5-.6-6.5-2.8-1.5-2.7-1.5-5 0-7.7 1.4-2.2 4-3.3 6.5-2.8m-.8 0c2.3 0 5 2.7 5 6.3 0 3.5-2.7 6.3-5 6.3m5-14v17m0-2.4c1 3-1 6.2-4 7.2s-6-.8-7-3.8"/><path stroke="#4AB95A" d="M83.7 5v24"/><path stroke="#D83038" d="M100.4 19c-1-2.8-3.8-4.6-6.7-4.2-3 .3-5.2 2.7-5.5 5.7-.2 3 1.6 5.6 4.5 6.5 2.8.8 6-.4 7.3-3m1-6.7L88 23"/></g></svg>
<div class="google">Sign in with your Google Account</div>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
</article>
</div>
<a href=# class=closePopUpOutSide></a>
</aside>
<input type=checkbox id=navigation>
<header>
<label for=navigation class="left"></label>
<div class=logo>SVG.LIFE</div>
<a href=#popUp id=openPopUp class="right">
<img id="bild"/>
</a>
</header>
<nav>
<a href=#><svg viewBox="0 0 48 48"><circle fill=#f44336 cx=24 cy=24 r="21" /></svg>Home</a>
<a href=# style="background: #f0f0f0"><svg viewBox="0 0 48 48"><circle fill=#FBC02D cx=24 cy=24 r="21" /></svg>Logos</a>
<a href=#><svg viewBox="0 0 48 48"><circle fill=#2196F3 cx=24 cy=24 r="21" /></svg>Icons</a>
<a href=#><svg viewBox="0 0 48 48"><circle fill=#4CAF50 cx=24 cy=24 r="21" /></svg>Posters</a>
<a href=#><svg viewBox="0 0 48 48"><circle fill=#e91e63 cx=24 cy=24 r="21" /></svg>About</a>
<a href=#><svg viewBox="0 0 48 48"><circle fill=#795548 cx=24 cy=24 r="21" /></svg>Terms</a>
<a href=#><svg viewBox="0 0 48 48"><circle fill=#673ab7 cx=24 cy=24 r="21" /></svg>Color</a>
<a href=#><svg viewBox="0 0 48 48"><circle fill=#009688 cx=24 cy=24 r="21" /></svg>Contacts</a>
</nav>
<main>
<div class=grid style=width:1230px>
<div class=grid-item>
<div class="card card">
<div class=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=details>
<div class=title>Chainsaw</div>
<svg class=icon>
<use xlink:href="#codepen" />
</svg>
</div>
</div>
</div>
<div class=grid-item>
<div class="card card">
<div class=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=details>
<div class=title>Cofee maker</div>
<svg class=icon>
<use xlink:href="#codepen" />
</svg>
</div>
</div>
</div>
<div class=grid-item>
<div class="card card">
<div class=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=details>
<div class=title>Controller</div>
<svg class=icon>
<use xlink:href="#codepen" />
</svg>
</div>
</div>
</div>
<div class=grid-item>
<div class="card card">
<div class=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=details>
<div class=title>Cooker</div>
<svg class=icon>
<use xlink:href="#codepen" />
</svg>
</div>
</div>
</div>
<div class=grid-item>
<div class="card card">
<div class=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=details>
<div class=title>Cottage</div>
<svg class=icon>
<use xlink:href="#codepen" />
</svg>
</div>
</div>
</div>
<div class=grid-item>
<div class="card card">
<div class=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=details>
<div class=title>Cut</div>
<svg class=icon>
<use xlink:href="#codepen" />
</svg>
</div>
</div>
</div>
<div class=grid-item>
<div class="card card">
<div class=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=details>
<div class=title>Dashboard</div>
<svg class=icon>
<use xlink:href="#codepen" />
</svg>
</div>
</div>
</div>
<div class=grid-item>
<div class="card card">
<div class=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=details>
<div class=title>Device manager</div>
<svg class=icon>
<use xlink:href="#codepen" />
</svg>
</div>
</div>
</div>
<div class=grid-item>
<div class="card card">
<div class=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=details>
<div class=title>Drafting compass</div>
<svg class=icon>
<use xlink:href="#codepen" />
</svg>
</div>
</div>
</div>
<div class=grid-item>
<div class="card card">
<div class=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=details>
<div class=title>Drill</div>
<svg class=icon>
<use xlink:href="#codepen" />
</svg>
</div>
</div>
</div>
<div class=grid-item>
<div class="card card">
<div class=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=details>
<div class=title>Ethernet off</div>
<svg class=icon>
<use xlink:href="#codepen" />
</svg>
</div>
</div>
</div>
<div class=grid-item>
<div class="card card">
<div class=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=details>
<div class=title>Fan</div>
<svg class=icon>
<use xlink:href="#codepen" />
</svg>
</div>
</div>
</div>
</div>
</main>
<footer>
<ul center>
<li>
<a href="#" title="Pinterest">
<i><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path d="M13.3 17.3c-1 0-2-.5-2.7-1.2l-1.2 4v.8c-.4.4-.8.6-1.3.6s-1-.6-1-1.4v-.5l2.6-7v-1.8c0-2 1-2.8 2-2.8S13 8 13 9.2c0 1.6-1 2.5-1 3.7 0 1 .6 2 1.5 2 3 0 4-2.2 4-4.3 0-2.7-2.4-5-5.3-5-3 0-5.3 2.3-5.3 5 0 1 0 1.7.3 2.4l.2.8a1.3 1.3 0 0 1-1 1.3c-.5 0-1-.3-1-.7-.8-1-1-2.3-1-3.6C4.2 6.4 7.5 3 12 3s7.8 3.3 7.8 7.4c0 3.3-2 6.8-6.6 6.8z"/></svg></i>
</a>
</li>
<li>
<a href="#" title="Facebook">
<i><svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z" />
</svg></i>
</a>
</li>
<li>
<a href="#" title="GitHub">
<i><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.3 2.4 1 3 .7 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></i>
</a>
</li>
<li>
<a href="#" title="CodePen">
<i><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 48 48"><path d="M38.8 24.3l-4.5-3 4.5-3zM23 37.3v-8.6l8-5.3 6.4 4.3zm-1.8-11.7l-6.4-4.4 6.4-4.3 6.5 4zm-1.8 11.6L5 27.7l6.5-4.3 8 5.3zm-15.7-19l4.5 3-4.5 3zm15.7-13v8.6l-8 5.2L5 14.8zm3.7 0l15 9.6-7 4.2-8-5.2zm20 9.3V14h-1v-1L22 .5c-.7-.3-1.5-.3-2 0L.7 13.5H.5s0 .2-.2.2v.2h-.5v14H0s0 .2.2.2v.2h.4L20 42c.3.3.7.4 1 .4.4 0 .7 0 1-.3l19.5-13h.4V15"/></svg></i>
</a>
</li>
<li>
<a href="#" title="Instagram">
<i><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path d="M20 6.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5M4.5 20a.5.5 0 0 1-.5-.5V11h2v1a6 6 0 0 0 6 6 6 6 0 0 0 6-6v-1h2v8.5a.5.5 0 0 1-.5.5M12 8a4 4 0 0 1 4 4 4 4 0 0 1-4 4 4 4 0 0 1-4-4 4 4 0 0 1 4-4m8-6H4C3 2 2 3 2 4v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V4c0-1-1-2-2-2z"/></svg></i>
</a>
</li>
</ul>
2016, SVG.LIFE
</footer>
<label for=navigation id=overlay></label>
Raw
script.js
// Codepen post
! 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", "http://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();
// End
// Oauth Google
hello.init({
google: '137344846361-2jtokgt9hc2il925hb7lb0icjh7sjhma.apps.googleusercontent.com'
}, {redirect_uri: 'redirect.html'});
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail());
$('#bild').attr('src',profile.getImageUrl());
}
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
console.log(gapi,auth2)
auth2.signOut().then(function () {
console.log('User signed out.');
});
}
// End
Raw
scripts
<script src="https://apis.google.com/js/platform.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hellojs/1.10.1/hello.all.min.js"></script>
Raw
style.css
html,body{width:100%;height:100%;margin:0;padding:0;text-rendering:optimizeLegibility;text-rendering:geometricPrecision;font-smooth:always;font-smoothing:antialiased}
body {
background: #f5f5f5;
font-family: 'Roboto Mono', serif;
color: gray;
}
main {
margin-left: 13em;
padding: 5em .1em .1em
}
.right, .left {
position: fixed;
top: 1.5em;
height: 1.5em;
transition: opacity .2s;
width: 1.5em;
}
.right {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white"><path d="M12 19.2c-2.5 0-4.7-1.3-6-3.2 0-2 4-3 6-3s6 1 6 3c-1.3 2-3.5 3.2-6 3.2M12 5a3 3 0 0 1 3 3 3 3 0 0 1-3 3 3 3 0 0 1-3-3 3 3 0 0 1 3-3m0-3A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10c0-5.5-4.5-10-10-10z"/></svg>') no-repeat center center;
right: 1em;
}
.right img {
width: 100%;
border-radius: 50%;
}
.left {
background: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#fff"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg>') no-repeat center center;
left: 1.5em;
opacity: 1;
}
.right:hover, .left:hover {
opacity: .6;
}
#navigation {
display: none
}
nav {
background: #f5f5f5;
box-shadow: 0px 0px 10px 1px rgba(180, 180, 180, 1);
height: 100%;
position: fixed;
width: 13em;
z-index: 2;
overflow: auto;
}
nav a {
letter-spacing: -1px;
display: block;
font-size: 1.1em;
font-weight: 400;
line-height: 4em;
padding-left: 1.5em;
text-decoration: none;
color: gray;
}
nav a:hover {
background: #fff
}
nav svg {
display: inline-block;
margin-right: 1em;
padding: .03em;
top: .6em;
width: 2em;
height: 2em;
position: relative;
}
.five {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="31.9" height="31.9"><path d="M16 32C7.2 32 0 24.7 0 16S7 0 16 0c8.8 0 16 7.2 16 16s-7.2 16-16 16z"/></svg>') no-repeat center center
}
button{border:none;border-radius:50%;cursor:pointer;height:48px;padding:12px;transition:background-color .2s;width:48px;background:0 0;outline:0}button:hover{background:rgba(0, 0, 0, .02)}button:active{background:rgba(0, 0, 0, .1)}
footer {
background: #f0f0f0;
bottom: 0;
font-size: .8em;
height: 100px;
margin-top: 100px;
padding-top: 100px;
padding-bottom: 150px;
text-align: center;
width: 100%;
}
header {
box-shadow: rgba(0, 0, 0, .2) 0 2px 1px;
background: #4CAF50;
height: 4.5em;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 1;
color: #fff;
}
@keyframes fadein {
from {
opacity: 0
}
to {
opacity: 1
}
}
#overlay {
animation: fadein .5s;
background: rgba(0, 0, 0, .09);
display: none;
height: 100%;
position: fixed;
top: 0;
width: 100%;
z-index: 1
}
.card {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden
}
.details {
align-items: center;
display: flex;
justify-content: center;
width: 300px;
background: #fbfbfc
}
.image {
align-items: center;
display: flex;
flex: 1;
justify-content: center;
width: 300px
}
.title {
align-items: center;
display: flex;
flex: 1;
height: 72px;
margin: 0 24px;
padding-left: 10px
}
.card {
background: #fff;
box-shadow: rgba(0, 0, 0, .2) 0 2px 1px;
height: 100%
}
.grid {
margin: 0 auto;
position: relative;
width: 99%;
height: 934px
}
.grid-item {
transition: .3s cubic-bezier(.4, .2, .5, 1.4);
padding: 10px;
height: 300px;
position: absolute;
}
@media screen and (max-width:1280px){#navigation:checked~#overlay{display:block}#navigation:checked~nav{transform:translateX(0)}nav{transform:translateX(-105%);transition:transform .2s cubic-bezier(.64, .09, .08, 1)}main{margin:0}}
.logo {
font-family: 'Roboto Mono', Arial, serif;
font-size: 1.3em;
font-weight: 500;
width: 200px;
line-height: 3.5em;
margin: auto;
}
.popup{background:rgba(0, 0, 0, .09);height:100%;left:0;opacity:0;position:fixed;top:-100vh;transition:opacity .2s ease;width:100%;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:15em;padding:3em;box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)}.popup:target{opacity:1;top:0}.popup:target .popUpContainer{top:20px;transition:top .2s ease}@media (max-width:796px){.popup .popUpContainer{left:5%;margin-left:0;max-width:none;width:90%}.popup:target .popUpContainer{top:25px;transition:top .2s ease}}
.google {
margin-top: 3em;
margin-bottom: 1em;
font-size: 1.1em;
}
.svg-icon {
width: 130px;
height: 130px;
}
.icon {
width: 24px;
height: 24px;
margin-right: 24px;
fill: gray;
}
.codepen {
margin-left: 153px;
margin-top: 16px;
width: 50px;
height: 50px;
position: absolute;
z-index: 99
}
ul {
list-style-type: none;
font-size: 2em;
padding-bottom: 4em;
margin-right: 2em;
}
li {
display: inline;
margin-left: .5em;
margin-right: .5em;
opacity: .4;
}
footer a {
color: gray;
text-decoration: none;
transition: all .5s ease-in-out;
}
footer a:hover {
opacity: .7;
}
[center] {
text-align: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment