The cards also flip around to show a dynamically generated QR code.
UPDATE: This pen now supports all modern browsers including IE 10 and up!
A Pen by Evan Wieland on CodePen.
Alasom Lira alasomlira
This file contains hidden or 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
| <div class="music-player"> | |
| <div class="info"> | |
| <div class="center"> | |
| <div class="jp-playlist"> | |
| <ul> | |
| <li></li> |
This file contains hidden or 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
| <header class="demo-header"> | |
| <h1 class="logo">Logo</h1> | |
| <nav class="nav"> | |
| <ul class="nav-list"> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="#">About</a></li> | |
| <li><a href="#">Services</a></li> | |
| <li><a href="#">Contact</a></li> | |
| <li><a href="#">Blog</a></li> | |
| <li><a href="#">Event</a></li> |
This file contains hidden or 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
| <div class="container"> | |
| <div class="title"> | |
| <h1 id="city"></h1> | |
| <h1 id="region"></h1> | |
| <div id="farenheit" class="temp-info"></div> | |
| <div id="celsius" class="temp-info"></div> | |
| </div> | |
| </div> | |
This file contains hidden or 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
| <div class="container"> | |
| <div class="player"> | |
| <div class="like waves-effect waves-light"> | |
| <i class="icon-heart"></i> | |
| </div> | |
| <div class="mask"></div> | |
| <ul class="player-info info-one"> | |
| <li>Rock'n'Roll Nerd</li> | |
| <li>Tim Minchin</li> | |
| <li>5:34</li> |
This file contains hidden or 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
| <div class="container"> | |
| <div class="panel panel-default fill grad"> | |
| <!-- BUTTON TOGGLE - UTILIZES BOOTSTRAP TOGGLE - http://www.bootstraptoggle.com/ --> | |
| <div class="row"> | |
| <div class="col-xs-12 text-right pad-toggle"> | |
| <input id="unit-convert" type="checkbox" data-toggle="toggle" data-off="F°" data-on="C°" data-size="mini"> | |
| </div> | |
| </div> <!-- END BUTTON TOGGLE ROW --> | |
This file contains hidden or 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
| <header> | |
| <div class="logo">STICKY MENU ON SCROLL!</div> | |
| <div class="intro">Some dumbass tagline goes here</div> | |
| <div class="menu">Menu goes here - home - links - blah blah</div> | |
| </header> | |
| <div class="content"> | |
| <em><p>This thingie is also available as a ready-made jQuery plugin at <a href="https://github.com/senff/Sticky-Anything" target="_blank">https://github.com/senff/Sticky-Anything</a> and will allow you to make ANY element sticky -- not just the menu.<br><strong>Now also available as a <a href="https://wordpress.org/plugins/sticky-menu-or-anything-on-scroll/">WordPress plugin!</a></strong></em></p> | |
This file contains hidden or 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
| <section class="menu"> | |
| </section> | |
| <header> | |
| <i class="fa fa-sliders" style="cursor: pointer"></i> | |
| | wave | |
| </header> | |
| <section class="content"> |
This file contains hidden or 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
| - var users = { | |
| - "Aaron Rossi": { | |
| - "name": "Aaron Rossi", | |
| - "title": "CEO & Co-Founder", | |
| - "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg", | |
| - "social": { | |
| - "facebook": "", | |
| - "twitter": "", | |
| - "linkedin": "", | |
| - } |
This file contains hidden or 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
| <div data-tabs class="tabs"> | |
| <div class="tab"> | |
| <input type="radio" name="tabgroup" id="tab-1" checked> | |
| <label for="tab-1">Tab 1</label> | |
| <div class="tab__content"> | |
| <h4>Tab heading 1</h4> | |
| <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt libero ipsum, veniam magni modi exercitationem debitis ducimus assumenda ratione corporis, illum eius, laborum tempore cumque amet id perspiciatis nostrum unde?</p> | |
| <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum, maiores.</p> | |
| </div> | |
| </div> |
OlderNewer