Skip to content

Instantly share code, notes, and snippets.

@david84
david84 / template.html
Created August 8, 2017 13:27 — forked from nmwalsh/template.html
Facebook Instant Article Template
<!doctype html>
<html lang="en" prefix="op: http://media.facebook.com/op#">
<head>
<meta charset="utf-8">
<!-- URL of the web version of this article -->
<!-- TODO: Change the domain to match the domain of your website -->
<link rel="canonical" href="http://example.com/article.html">
<meta property="op:markup_version" content="v1.0">
</head>
<body>

Fully responsive CSS3 menu

A fully responsive menu without any need of JavaScript and using less than 200 lines of functional CSS code.

A Pen by Claudio Holanda on CodePen.

License.

Awesome Context Menu

Sorry, Google+ ... but ... like, really?

UPDATE: Added some collision detection; the menu shouldn't touch the sides, or open sub-menus in to the sides.

A Pen by Simon Goellner on CodePen.

License.

@david84
david84 / index.html
Created November 28, 2012 15:46
A CodePen by ryan2611. Avatar Test - A huge debt of gratitude to http://codepen.io/mnafricano/pen/Bmqdn - great work.
<ul class="rp-grid">
<li>
<div class="rp-item rp-img-1">
<div class="rp-info">
<h3>PAUL CACKETT</h3>
<p>CHIEF CREATIVE OFFICER<a href="https://twitter.com/Rockpack">Follow on Twitter</a></p>
</div>
</div>
</li>
<li>
@david84
david84 / index.html
Created November 28, 2012 15:45
A CodePen by Simon Busborg. Bounce Effect - Simple bounce effect made with css3 keyframe animation // @simonbusborg on twitter
<div class="holder">
<h1> Bounce Effect </h1>
<div class="avatar">
<a href="https://twitter.com/simonbusborg" target="_blank">
<img src="http://cl.busb.org/L79J/dj.png" class="user"/>
</a>
</div>
<p>Border bounce effect on hover</p>
</div>
@david84
david84 / index.html
Created November 28, 2012 15:44
A CodePen by david84. Animaciones MultiBackground - En este ejercicio se prueba el uso multibackgrounds y la manera en que pueden llegar a ser utilizados
<div id="banner"></div>
<span>Curso Integral de CSS3<br />
<a href="http://maweb.mx/" target="_blank">maweb.mx/</a></span>