stanwmusic

CSS Only Modal + [Animation]

A Pen by Stan Williams on CodePen.

License.

stanwmusic

<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>

stanwmusic

<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>

stanwmusic

<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/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

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>

stanwmusic

- var ticks = 120;
- var tickLabels = 12;
- var tickInc = ticks / tickLabels;
main
  .speedometer
    .speedometer-inner
        - for (var i = 0; i < ticks + 1; ++i) {
            .tick
              - for (var j = 0; j <= tickLabels; ++j) {
                - if (i == tickInc * j) {

stanwmusic

Gallery Image Lightbox

IMG Lightbox

A Pen by Stan Williams on CodePen.

License.

stanwmusic

Digital clock, Time Js

Time Java Script, digital clock

A Pen by Stan Williams on CodePen.

License.

stanwmusic

3D Button

A Pen by Stan Williams on CodePen.

License.