CSS hexagons skillset animation. Please note the current design is not mobile friendly, and is not production ready.
A Pen by Matthew Nance on CodePen.
Enza enzienza
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
| <body> | |
| <header> | |
| <h1>Responsive Vertical Timeline</h1> | |
| </header> | |
| <section id="cd-timeline" class="cd-container"> | |
| <div class="cd-timeline-block"> | |
| <div class="cd-timeline-img cd-picture"> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-picture.svg" alt="Picture"> | |
| </div> <!-- cd-timeline-img --> |
enzienza
/ experimental-portfolio-hexagon-skillset-with-velocityjs.markdown
Created
October 1, 2020 14:08
[Experimental] - Portfolio Hexagon Skillset With VelocityJS
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
| <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> | |
| <div class='thetop'></div> | |
| <div class='testheight'>Some exciting content... Scroll down for the button to appear.<br><br> | |
| <i class="fa fa-4x fa-thumbs-up fa-spin"></i> | |
| </div> | |
| <div class='scrolltop'> | |
| <div class='scroll icon'><i class="fa fa-4x fa-angle-up"></i></div> | |
| </div> |
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
| <body> | |
| <nav class="navbar navbar-default navbar-fixed-top"> | |
| <div class="container"> | |
| <div class="navbar-header"> | |
| <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> | |
| <span class="sr-only">Toggle navigation</span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| </button> |
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
| <!-- Component: product --> | |
| <template id="product"> | |
| <div class="product"> | |
| <div class="product-image"> | |
| <img :src="`http://www.patrickhurley.co.uk/assets/img/${img}.png`" alt=""/> | |
| </div> | |
| <div class="product-info"> | |
| <h3> | |
| <router-link :to="{ name: 'product-detail', params: { product: slashedName } }">{{ name }}</router-link> | |
| </h3> |
A fantastic credit card form with smooth and sweet micro-interactions. Includes number formatting, validation and automatic card type detection. Built with vuejs and also fully responsive.
See on Github: https://github.com/muhammederdem/credit-card-form
A Pen by Muhammed Erdem 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="table"> | |
| <div class="table-cell"></div> | |
| <div class="table-cell plattform"> | |
| <h3>Platform</h3> | |
| <a href="" class="btn">register now</a> | |
| </div> | |
| <div class="table-cell enterprise"> | |
| <h3>Enterprise</h3> | |
| <a href="" class="btn">Send us a Email</a> | |
| </div> |
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
| <nav class='fixed'> | |
| <ul> | |
| <li><a href="#">Item1</a></li> | |
| <li><a href="#">Item1</a></li> | |
| <li><a href="#">Item1</a></li> | |
| <li><a href="#">Item1</a></li> | |
| </ul> | |
| </nav> | |
| <div class='header'> | |
| <div class='banner'></div> |
enzienza
/ media-queries-sass-mixin.markdown
Created
November 28, 2018 12:33
Media Queries Sass Mixin
A Pen by Dang Van Thanh on CodePen.
A custom google map to show company location on your website. It can be easily customised to perfectly fit your website style!
Article and download on Cody: http://codyhouse.co/gem/custom-google-map/
NewerOlder