Created
September 7, 2014 10:59
-
-
Save laurazenc/ca7af119dd05048389cd to your computer and use it in GitHub Desktop.
A Pen by Laura C..
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='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'> | |
<div class="tabs-menu"> | |
<nav> | |
<ul> | |
<li class="img1 active" id="1"><a href="#"><h2>Spider-Man</h2><span class="logo"></span></a></li> | |
<li class="img2" id="2"><a href="#"><h2>The Avengers</h2><span class="logo"></span></a></li> | |
<li class="img3" id="3"><a href="#"><h2>Captain America</h2><span class="logo"></span></a></li> | |
<li class="img4" id="4"><a href="#"><h2>Iron Man</h2><span class="logo"></span></a></li> | |
</ul> | |
</nav> | |
<div class="content"> | |
<div class="wrapper"> | |
<div> | |
<img class="ac-img img1" src="http://i.annihil.us/u/prod/marvel/i/mg/1/03/5226155a7157a.jpg"/> | |
</div> | |
<div> | |
<img class="ac-img img2" src="http://i.annihil.us/u/prod/marvel/i/mg/5/50/5220c5f104d3a.jpg"/> | |
</div> | |
<div> | |
<img class="ac-img img3" src="http://i.annihil.us/u/prod/marvel/i/mg/5/d0/5342fc0f31d34.jpg"/> | |
</div> | |
<div> | |
<img class="ac-img img4" src="http://i.annihil.us/u/prod/marvel/i/mg/6/30/522de9bf71205.jpg"/> | |
</div> | |
</div> | |
</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
$(function() { | |
var total = $("body").width(); | |
var total2 = total; | |
var ancho = total*4; | |
$(".ac-img").css("width", total+"px"); | |
$(".wrapper").css({"width":ancho+"px"}); | |
var tabs = $(".tabs-menu li"); | |
$( window ).resize(function() { | |
var total2 = $("body").width(); | |
var ancho2 = total2*4; | |
$(".ac-img").css("width", total2+"px"); | |
$(".wrapper").css({"width":ancho2+"px"}); | |
var clase2 = $(".active").attr("id"); | |
$(".wrapper").stop().animate({ | |
left: -(total2*(clase2-1)), | |
}, 100); | |
}); | |
$('nav ul li').click(function() { | |
var total = $("body").width(); | |
var clase = $(this).attr("id"); | |
tabs.removeClass("active"); | |
$(this).addClass("active"); | |
$(".wrapper").stop().animate({ | |
left: -(total*(clase-1)), | |
}, 1000); | |
}); | |
}); |
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, body{ | |
margin:0 auto; | |
background: #e74c3c; | |
color: #333; | |
font-family: 'Oswald' | |
} | |
a{ | |
text-decoration:none; | |
cursor:pointer; | |
color: #333; | |
} | |
body{ | |
max-width:920px; | |
} | |
@media screen and (max-width: 399px) { | |
.content, body{width:350px;} | |
.wrapper div img{height:200px;} | |
.tabs-menu nav li h2 { | |
display:none; | |
} | |
.tabs-menu nav li span{ | |
margin:20px auto; | |
} | |
} | |
@media screen and (min-width: 400px) and (max-width: 699px) { | |
.content, body{width:400px;} | |
.tabs-menu nav li h2 { | |
display:none; | |
} | |
.tabs-menu nav li span{ | |
margin:20px auto; | |
} | |
} | |
@media screen and (min-width: 700px) and (max-width: 899px) { | |
.content, body{width:700px;} | |
} | |
@media screen and(min-width: 900px) { | |
.content, body{width:900px;} | |
} | |
h2{ | |
margin:0; | |
padding:0; | |
} | |
img{ | |
max-width:100%; | |
height: auto; | |
} | |
.tabs-menu nav ul{ | |
width:100%; | |
height: auto; | |
} | |
nav{ | |
width:100%; | |
height:90px; | |
margin: 0 auto; | |
overflow:hidden; | |
} | |
ul { | |
list-style: none; | |
padding: 0; | |
} | |
nav li { | |
float: left; | |
height: 120px; | |
margin: 5px 3px; | |
padding: 0 20px; | |
position: relative; | |
background: white; | |
border-radius: 30px; | |
} | |
nav li:first-child{margin-left:0;} | |
nav li span{ | |
margin: 0 auto; | |
} | |
.active a{ color: #e74c3c;} | |
.active span.logo{ background-color: #e74c3c; border-radius:99px;} | |
span.logo{ | |
width:40px; | |
height:40px; | |
display:block; | |
} | |
.img1 .logo{ | |
background: url('http://www.clker.com/cliparts/e/c/a/9/13683718001003283990windows_8_icons_superheroes.png') -54px -48px; | |
width:30px; | |
height:30px; | |
} | |
.img2 .logo{ | |
background: url('http://www.clker.com/cliparts/e/c/a/9/13683718001003283990windows_8_icons_superheroes.png') -283px -48px; | |
width:30px; | |
height:30px; | |
} | |
.img3 .logo{ | |
background: url('http://www.clker.com/cliparts/e/c/a/9/13683718001003283990windows_8_icons_superheroes.png') -146px -48px; | |
width:30px; | |
height:30px; | |
} | |
.img4 .logo{ | |
background: url('http://www.clker.com/cliparts/e/c/a/9/13683718001003283990windows_8_icons_superheroes.png') -8px -140px; | |
width:30px; | |
height:30px; | |
} | |
.content{ | |
clear:both; | |
overflow: hidden; | |
border:5px solid white; | |
z-index:10; | |
width:100%; | |
height:auto; | |
background:white; | |
} | |
.wrapper{ | |
z-index:5; | |
position: relative; | |
left:0; | |
} | |
.wrapper div{ | |
position:relative; | |
float:left; | |
z-index:1; | |
} | |
.wrapper div img{ | |
width:100%; | |
height:auto; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment