"

From 2013.igem.org

Revision as of 00:32, 16 August 2013 (view source) EstherJ (Talk | contribs) (Created page with "//Functionality for FILTER BUTTONS $(document).ready( function () { $('.tabs').find('a').click( function (e) { var theFilter = $(this).data('filter'); e.preventDef...") ← Older edit		Revision as of 02:54, 23 August 2013 (view source) EstherJ (Talk | contribs) Newer edit →
Line 1:		Line 1:
-	//Functionality for FILTER BUTTONS	+	<style type="text/css">
-	$(document).ready( function () {	+
-	$('.tabs').find('a').click( function (e) {	+	@import url('http://fonts.googleapis.com/css?family=Lato');
-	var theFilter = $(this).data('filter');	+
-		+	* {
-	e.preventDefault();	+	margin: 0;
-	$('.tabs').find('a').removeClass('active');	+	padding: 0;
-	$(this).addClass('active');	+	box-sizing: border-box;
-		+	}
-	$('.portfolio').find('li').show(); $('.portfolio').find('li').not(theFilter).hide();	+
-		+	body {
-	});	+	font: 14px/1 Lato, sans-serif;
-	});	+	color: #555;
		+	background: #eee;
		+	}
		+
		+	.gallery {
		+	width: 790px;
		+	margin: 0 auto;
		+	padding: 5px;
		+	background: #333;
		+	}
		+
		+	.gallery > div {
		+	position: relative;
		+	float: left;
		+	padding: 5px;
		+	}
		+
		+	.gallery > div > img {
		+	width: 250px;
		+	transition: .1s transform;
		+	transform: translateZ(0); /* hack */
		+	}
		+
		+	.gallery > div:hover {
		+	z-index: 2;
		+	}
		+
		+	.gallery > div:hover > img {
		+	transform: scale(1.5,1.5);
		+	transition: .3s transform;
		+	}
		+
		+	.cf:before, .cf:after {
		+	display: table;
		+	content: "";
		+	line-height: 0;
		+	}
		+
		+	.cf:after {
		+	clear: both;
		+	}
		+
		+	h1 {
		+	margin: 40px 0;
		+	font-size: 24px;
		+	text-align: center;
		+	text-transform: uppercase;
		+	}
		+
		+	footer {
		+	margin: 80px 0;
		+	text-align: center;
		+	}
		+
		+	</style>

---

Revision as of 02:54, 23 August 2013

<style type="text/css">

@import url('http://fonts.googleapis.com/css?family=Lato');

• {

 margin: 0;
 padding: 0;
 box-sizing: border-box;

}

body {

 font: 14px/1 Lato, sans-serif;
 color: #555;
 background: #eee;

}

.gallery {

 width: 790px;
 margin: 0 auto;
 padding: 5px;
 background: #333;

}

.gallery > div {

 position: relative;
 float: left;
 padding: 5px;

}

.gallery > div > img {

 width: 250px;
 transition: .1s transform;
 transform: translateZ(0); /* hack */

}

.gallery > div:hover {

 z-index: 2;

}

.gallery > div:hover > img {

 transform: scale(1.5,1.5);
 transition: .3s transform;

}

.cf:before, .cf:after {

   display: table;
   content: "";
   line-height: 0;

}

.cf:after {

   clear: both;

}

h1 {

 margin: 40px 0;
 font-size: 24px;
 text-align: center;
 text-transform: uppercase;

}

footer {

 margin: 80px 0;
 text-align: center;

}

</style>