Flexslider slider with master slider like animated layers like title, description, price tag and category tag. pure css animations for slider layers
tarek hariri linebreaker
linebreaker
/ flexslider-with-simple-css-animated-layers.markdown
Created
October 18, 2017 04:47
Flexslider with simple CSS animated layers
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <!--header--> | |
| <head> | |
| <!-- Basic Page Needs | |
| ================================================== --> | |
| <meta charset="utf-8"> |
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
| <div class="more"> | |
| <svg width="32px" height="32px" viewBox="0 0 32 32"> | |
| <circle cx="16" cy="16" r="15"></circle> | |
| <g id="plus"> | |
| <path d="M16,11 L16,21"></path> | |
| <path d="M11,16 L21,16"></path> | |
| </g> | |
| </svg> | |
| </div> |
Basic CMS for creating a definition and then populating it with content
A Pen by Dominic Watson on CodePen.
linebreaker
/ collection-of-animated-loaders.markdown
Created
October 12, 2017 22:26
Collection of animated loaders
Inspired by this article, except I've tried to create one element (no cheating with pseudos) versions. Not meant to reproduce the loaders in the article exactly and may have poorer browser support.
linebreaker
/ dc-metro-lines-map-animated-svg-path.markdown
Created
October 12, 2017 22:18
DC Metro Lines Map (Animated SVG Path)
The DC Metro lines map drawn in SVG and animated with SVG Line Animation. Inspired by https://css-tricks.com/svg-line-animation-works/ and https://codepen.io/juliangarnier/pen/ZeEpgd
A Pen by Michael Gilbertson on CodePen.
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
| <div class="full-wrapper"> | |
| <div class="content-wrapper"> | |
| <div class="headline"> | |
| <small>the new</small><br/> | |
| GDG™<br/> | |
| website <br/> | |
| will be<br/> | |
| ready<br/> | |
| <strong>very</strong><br/> | |
| soon<br/> |
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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Flexbox responsive grid</title> | |
| </head> | |
| <body> | |
| <div class="wrapper"> | |
| <p>Responsive grid with Flexbox</p> | |
| <h1>Basic Grid</h1> | |
| <p></p> |
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
| .lt | |
| .rt | |
| .wrap | |
| .cube | |
| .face.road | |
| - 10.times do | |
| .face.building1.left | |
| - 10.times do | |
| .face.building1.right | |
| - 10.times do |
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
| <div class="container grids"> | |
| <header> | |
| <h1>Responsive Grid </h1> | |
| <p>A simple responsive grid system, mobile first design. Resize your browser to test the grids.</p> | |
| </header> | |
| <div class="row"> | |
| <div class="col12">column 12</div> | |
| </div> | |
| <div class="row"> | |
| <div class="col11">column 11</div> |
NewerOlder