Created
October 3, 2016 16:11
-
-
Save anonymous/7317f37b9fb2e71baea176e0d99e688b to your computer and use it in GitHub Desktop.
Nav (material design)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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, """), t = t.replace(/'/g, "'") | |
}, | |
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 | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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