Skip to content

Instantly share code, notes, and snippets.

View juanbrujo's full-sized avatar
:octocat:

Jorge Epuñan juanbrujo

:octocat:
View GitHub Profile
@juanbrujo
juanbrujo / Fullpage.html
Created June 18, 2012 23:03
A web page created at CodePen.io
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mi propio menú adaptativo &middot; CodePen</title>
<style>
@juanbrujo
juanbrujo / index.html
Created November 7, 2012 21:07
A CodePen by Jorge Epuñan.
<a href="http://www.rvl.io" class="roll"><span data-title="rvl.io">rvl.io</span></a>
<!--
* ROLLING LINKS
* as seen in http://lab.hakim.se/reveal-js/#/21
-->
@juanbrujo
juanbrujo / index.html
Created November 7, 2012 21:10
A CodePen by Jorge Epuñan. Pure CSS3 planet translation around a sun - Achieved through CSS3 2D and 3D transformations. *Not optimized *Webkit and FF10+ only
<div id="sol" class="esfera"></div>
<div id="container">
<div id="tierra" class="esfera"></div>
</div>
@juanbrujo
juanbrujo / index.html
Created November 7, 2012 21:10
A CodePen by Jorge Epuñan. Pure CSS3 planet translation around a sun - Achieved through CSS3 2D and 3D transformations. *Not optimized *Webkit and FF10+ only
<div id="sol" class="esfera"></div>
<div id="container">
<div id="tierra" class="esfera"></div>
</div>
@juanbrujo
juanbrujo / index.html
Created December 26, 2012 19:37
A CodePen by Jorge Epuñan. Logo Almagro - Hecho completo con CSS3 y la ayuda de LESS. Es proporcional al @ancho si lo modificas todos los otros valores como tamaño de fuente y radio del borde se ajustan. * fácilmente traducible a SASS o Stylus
<h1 class="logo-almagro">Almagro<sub>&reg;</sub></h1>
@juanbrujo
juanbrujo / index.html
Created March 13, 2013 21:21
A CodePen by GreenSock. GSAP JS Banner Example - Just an example to show you the type of animation that you can create on devices that don't support Flash. Give it a spin on your iOS device. We think you will like the results. This banner uses a handful CSS properties that require a modern browser. For desktop users we recommend Google Chrome.
<link href='http://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'>
<div id="wrapper">
<div id="banner">
<div class="slide" id="slide2">
<h4>FOR</h4>
</div>
<div class="slide" id="slide1">
<h1>CREATE</h1>
<div id="stunningWrap"><h2 id="stunning">STUNNING</h2></div>
@juanbrujo
juanbrujo / detect-css-transitions.js
Last active December 19, 2015 03:09
detecting support for CSS transitions
// detecting support for CSS transitions
function supportsTransitions() {
var b = document.body || document.documentElement;
var s = b.style;
var p = 'transition';
if(typeof s[p] == 'string') {return true; }
v = ['Moz', 'Webkit', 'Khtml', 'O', 'ms'],
p = p.charAt(0).toUpperCase() + p.substr(1);
for(var i=0; i<v.length; i++) {
@juanbrujo
juanbrujo / currentBrowser.js
Created July 7, 2013 22:32
Gets the current browser + if it is IE, the version currentBrowser().browser to get the browsername currentBrowser().version to get the version if it is IE
function currentBrowser() {
$.returnVal = "";
var browserUserAgent = navigator.userAgent;
if (browserUserAgent.indexOf("Firefox") > -1) {
$.returnVal = { browser: "Firefox" };
}
else if (browserUserAgent.indexOf("Chrome") > -1) {
$.returnVal = { browser: "Chrome" };
}
else if (browserUserAgent.indexOf("Safari") > -1) {
@juanbrujo
juanbrujo / index.html
Created August 1, 2013 14:39
A CodePen by Jorge Epuñan. CSS dropdown horizontal nav - No JS, just plain CSS (IE8+)
<ul class="nav">
<li><a href="#">One</a></li>
<li class="dropdown">
<a href="#">Dois</a>
<ul>
<li><a href="#">Dois Um</a></li>
<li><a href="#">Dois Dois</a></li>
<li class="dropdown">
<a href="#">Dois Tres</a>
<ul>
@juanbrujo
juanbrujo / fasttabs.js
Last active December 22, 2015 00:59
Fast tabs with jQuery
/*-- TABS --*/
var tabMenu = '.nav';
var tabContent = '.destacadas';
var tabSelectedClass= 'selected';
var tabDefault = 1; // first tab
// add classes and hiding tabs
$(tabMenu+' a:eq('+(tabDefault-1)+')').addClass(tabSelectedClass);
$(tabContent).hide();
$(tabContent+':eq('+(tabDefault-1)+')').show();