View index.html
<svg version="1.1" xmlns="" viewBox="300 300 1400 1400">
<g id="Drums">
<path id="Drum-Shadow" opacity="0.1" fill="#333333" d="M1626.6,1282.8c0,45.4-280.5,82.1-626.6,82.1
<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"/>
View index.html
<canvas id="background"></canvas>
<canvas id="text"></canvas>
<canvas id="render"></canvas>
<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" />
View index.html
<div id=bg></div>
<svg id=svg></svg>
<input type=text id=playlist placeholder="SoundCloud Playlist URL" />
<button id=load>Load Playlist</button>
<a href="">
<img src="" />
View css-only-lightbox-with-buttons.markdown

CSS Only Lightbox with buttons

This is a lightbox with previous, next, and exit buttons made using CSS. This pen takes advantage of the CSS :target selector. Animation can be added, but for the sake of this pen, I have not implemented it.

A Pen by Stan Williams on CodePen.


View index.html
<input type="checkbox" id="share-menu" />
<label for="share-menu" class="share-menu">
<li><a href="#">Google+</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Email</a></li>
View index.html
<video autoplay loop>
<source src="">
<source src="">
<h1>I have not failed. I've just found 10,000 ways that won't work.</h1>
<div id="maincontent">
<h1>Thomas Alva Edison</h1>
View index.html
<div class="header-video" style="width: 1349px; height: 318px;">
<img src="" class="header-video__media" data-video-url="" data-teaser="video/teaser-video" data-video-width="560" data-video-height="315">
<!-- <a href="" 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="" type="video/mp4"></video></div>
<div class="container">
<h1>Responsive header video demo.</h1>
Lorem ipsum dolor sit amet, consectetur adip
View Bootstrap-3_Carousel-Collection
View 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=""></script>
<script src=""></script>