Stan Williams
stanwmusic
| <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="300 300 1400 1400"> | |
| <g id="Drums"> | |
| <g> | |
| <path id="Drum-Shadow" opacity="0.1" fill="#333333" d="M1626.6,1282.8c0,45.4-280.5,82.1-626.6,82.1 | |
| c-346,0-626.6-36.8-626.6-82.1c0-45.4,280.5-82.1,626.6-82.1C1346,1200.6,1626.6,1237.4,1626.6,1282.8z"/> | |
| <g id="Snare"> | |
| <g id="Snare-Drum"> | |
| <rect x="1219" y="885" fill="#0BC1F8" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="223" height="110"/> | |
| <line fill="none" stroke="#0891BA" stroke-width="8" stroke-miterlimit="10" x1="1438" y1="914" x2="1223" y2="914"/> |
| <div> | |
| <canvas id="background"></canvas> | |
| <canvas id="text"></canvas> | |
| <canvas id="render"></canvas> | |
| </div> | |
| <section> | |
| <input id="name" type="text" placeholder="Loved One" maxlength="24" /> | |
| <input id="line1" type="text" placeholder="Line 1" maxlength="40" /> | |
| <input id="line2" type="text" placeholder="Line 2" maxlength="40" /> |
| <div id=bg></div> | |
| <svg id=svg></svg> | |
| <header> | |
| <input type=text id=playlist placeholder="SoundCloud Playlist URL" /> | |
| <button id=load>Load Playlist</button> | |
| </header> | |
| <footer> | |
| <a href="https://soundcloud.com"> | |
| <img src="https://developers.soundcloud.com/assets/powered_by_white-371bd6967352fcc89673d4c81f7e5661.png" /> |
stanwmusic
/ css-only-lightbox-with-buttons.markdown
A Pen by Stan Williams on CodePen.
| <input type="checkbox" id="share-menu" /> | |
| <label for="share-menu" class="share-menu"> | |
| <ul> | |
| <li><strong>Share</strong></li> | |
| <li><a href="#">Google+</a></li> | |
| <li><a href="#">Facebook</a></li> | |
| <li><a href="#">Twitter</a></li> | |
| <li><a href="#">Email</a></li> | |
| </ul> | |
| </label> |
| <main> | |
| <header> | |
| <video autoplay loop> | |
| <source src="https://res.cloudinary.com/dzjiv8sye/video/upload/v1472205518/Coverr-lamp_jikfrz.webm"> | |
| <source src="https://res.cloudinary.com/dzjiv8sye/video/upload/v1472205519/Coverr-lamp_krhevy.mp4"> | |
| </video> | |
| <h1>I have not failed. I've just found 10,000 ways that won't work.</h1> | |
| </header> | |
| <div id="maincontent"> | |
| <h1>Thomas Alva Edison</h1> |
| <div class="header-video" style="width: 1349px; height: 318px;"> | |
| <img src="http://zerosixthree.se/labs/video-header/img/masthead.jpg" class="header-video__media" data-video-url="https://www.youtube.com/embed/Scxs7L0vhZ4" data-teaser="video/teaser-video" data-video-width="560" data-video-height="315"> | |
| <!-- <a href="https://www.youtube.com/embed/Scxs7L0vhZ4" class="header-video__play-trigger" id="header-video__play-trigger" style="display: block;">Play video__</a> ---> | |
| <button type="button" class="header-video__close-trigger" id="header-video__close-trigger" style="display: none;">Close video</button> | |
| <video autoplay="true" loop="true" muted="" id="header-video__teaser-video" class="header-video__teaser-video"><source src="video/teaser-video.webm" type="video/mp4"><source src="http://zerosixthree.se/labs/video-header/video/teaser-video.mp4" type="video/mp4"></video></div> | |
| <div class="container"> | |
| <h1>Responsive header video demo.</h1> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adip |
stanwmusic
/ Bootstrap-3_Carousel-Collection
| Bootstrap 3 - Carousel/Slider Collection | |
| Article: http://sevenx.de/blog | |
| Demo: http://sevenx.de/demo/bootstrap-carousel | |
| Working Examples (inline Styles, CDN Scripts) | |
| - minimal Bootstrap Markup changes | |
| - minimal CSS Styles | |
| - minimal jQuery |
stanwmusic
/ bootstrap_3_full_class_list
| Here are all the classes from Bootstrap 3 (version 3.1.1). | |
| Method of extraction: | |
| 1. Download Bootstrap 3 and rename bootstrap.css as "bootstrap.html" | |
| 2. Add the following 24 lines of code to the very bottom of the bootstrap.html file: | |
| <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script> | |
| <script> |