Team:Sheffield/yyy

From 2014.igem.org

(Difference between revisions)
 
Line 1: Line 1:
{{Team:Sheffield/NavigationBar}}
{{Team:Sheffield/NavigationBar}}
-
 
-
{{Team:Sheffield}}
 
-
 
<html>
<html>
<head>
<head>
-
<title></title>
 
-
<link href="https://2014.igem.org/Team:Sheffield/Template:team3bootstrap.css?action=raw&ctype=text/css" rel='stylesheet' type='text/css' />
+
<link href="https://2014.igem.org/Team:Sheffield/Template:outreachStyle.css?action=raw&ctype=text/css" rel='stylesheet' type='text/css' />
-
<!-- Custom Theme files -->
+
<script src="https://2014.igem.org/Team:Sheffield/Template:outreachjquery.min.js?action=raw&ctype=text/javascript"></script>
-
<link href="https://2014.igem.org/Team:Sheffield/Template:team3style.css?action=raw&ctype=text/css" rel='stylesheet' type='text/css' />
+
-
<script src="https://2014.igem.org/Team:Sheffield/Template:team3jquery.min.js?action=raw&ctype=text/javascript"></script>
+
-
<!-- Custom Theme files -->
+
-
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
+
-
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
+
-
<!---//webfonts--->
+
-
<!---- start-smoth-scrolling---->
+
-
<script type="text/javascript" src="https://2014.igem.org/Team:Sheffield/Template:move-top.js?action=raw&ctype=text/javascript"></script>
+
-
<script type="text/javascript" src="https://2014.igem.org/Team:Sheffield/Template:easing.js?action=raw&ctype=text/javascript"></script>
+
 +
<style type="text/css">
 +
body{
 +
    width: 100%;
 +
margin-left: auto;
 +
margin-right: auto;
 +
}
-
</head>
+
.block{
 +
    display: block;
 +
height: 10em;
 +
background: #21B8C6;
 +
border-radius:10px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
}
 +
.block a:hover{
 +
background: #475965;
 +
}
 +
.left{
 +
    background: red;
 +
    margin-left: 5em;
 +
float: left;
 +
}
 +
 +
.mid{
 +
    background: orange;
 +
    margin-left: 5em;
 +
float: left;
 +
}
 +
 +
.right{
 +
    background: green;
 +
    margin-left: 5em;
 +
float: left;
 +
}
 +
 +
h1{
 +
font-family: 'Oswald', sans-serif;
 +
font-size: 20px;
 +
line-height: 30px;
 +
font-weight: bold;
 +
color: #000;
 +
margin-right: 2em;
 +
word-spacing: 5px;
 +
border-bottom: none;
 +
}
 +
 +
p{
 +
font-family: 'Lato', sans-serif;
 +
font-size: 18px;
 +
color: #ffffff;
 +
margin-right: 3em;
 +
}
 +
 +
p1{
 +
font-family: 'Lato', sans-serif;
 +
font-size: 18px;
 +
color: #000000;
 +
}
 +
 +
.head{
 +
    width: 80%;
 +
height: 10em;
 +
background:red;
 +
margin-left: auto;
 +
margin-right: auto;
 +
margin-bottom: 2em;
 +
}
 +
 +
.section{
 +
    width: 80%;
 +
height: 50em;
 +
background: orange;
 +
margin-left: auto;
 +
margin-right: auto;
 +
}
 +
 +
a{TEXT-DECORATION:none}
 +
</style>
 +
</head>
<body>
<body>
-
<!--- Portfolio --->
+
    <br><br><br><br><br>
-
<div id="port" class="portfolio-box">
+
    <div class="head">
-
<div class="container">
+
    <h1>Another aspect of our policy and practice project entailed outreach within schools to educate the next generation of scientists about synthetic biology. As this is an emerging science, these are the individuals who will be pioneering the technology and so we believed they would be the perfect target audience for our session. We carried out the outreach sessions in Porto, Portugal and Manchester, England.</h1>
-
<ul id="filters" class="clearfix">
+
</div>
-
<li><span class="filter active" data-filter="app card icon logo web">All</span></li>
+
-
<li><span class="filter" data-filter="app">Web</span></li>
+
    <div class="head">
-
<li><span class="filter" data-filter="card">Mobile</span></li>
+
    <h1>Another aspect of our policy and practice project entailed outreach within schools to educate the next generation of scientists about synthetic biology. As this is an emerging science, these are the individuals who will be pioneering the technology and so we believed they would be the perfect target audience for our session. We carried out the outreach sessions in Porto, Portugal and Manchester, England.</h1>
-
<li><span class="filter" data-filter="icon">Photography</span></li>
+
</div>
-
<li><span class="filter" data-filter="logo">Design</span></li>
+
-
<li><span class="filter" data-filter="web">Type</span></li>
+
<div class="section">
-
</ul>
+
    <a href="">
-
</div>
+
        <div class="block">
-
<div id="portfoliolist">
+
        <div class="left">
-
<div class="portfolio icon mix_all" data-cat="icon" style="display: inline-block;width:25%; opacity: 1;">
+
        <p>Introduction</p>
-
    <div class="portfolio-wrapper">
+
    </div>
-
<a class="lightbox" href="#goofy">
+
        <div class="mid">
-
  <img src="https://static.igem.org/mediawiki/2014/0/0d/SheffieldJay1.jpg"/>
+
        <p>mid</p>
-
</a>
+
    </div>
-
<div class="lightbox-target" id="goofy">
+
        <div class="right">
-
<img src="https://static.igem.org/mediawiki/2014/0/0d/SheffieldJay1.jpg"/>
+
        <p>fd</p>
-
  <a class="lightbox-close" href="#"></a>
+
    </div>
-
</div>
+
    </div>
-
</div>
+
    </a>    
-
            </div>
+
</div>
-
<div class="portfolio web mix_all" data-cat="web" style="display: inline-block;width:25%; opacity: 1;">
+
 
-
<div class="portfolio-wrapper">
+
-
<a class="lightbox" href="#goofy">
+
-
  <img src="https://static.igem.org/mediawiki/2014/0/0d/SheffieldJay1.jpg"/>
+
-
</a>  
+
-
    </div>
+
-
</div>
+
-
<div class="portfolio card mix_all" data-cat="card" style="display: inline-block;width:25%; opacity: 1;">
+
-
<div class="portfolio-wrapper">
+
-
<a class="lightbox" href="#goofy">
+
-
  <img src="https://static.igem.org/mediawiki/2014/0/0d/SheffieldJay1.jpg"/>
+
-
</a>
+
-
    </div>
+
-
</div>
+
-
<div class="portfolio logo mix_all" data-cat="logo" style="display: inline-block;width:25%; opacity: 1;">
+
-
<div class="portfolio-wrapper">
+
-
<a class="lightbox" href="#goofy">
+
-
  <img src="https://static.igem.org/mediawiki/2014/0/0d/SheffieldJay1.jpg"/>
+
-
</a>
+
-
</div>
+
-
</div>
+
-
<div class="portfolio card mix_all" data-cat="card" style="display: inline-block;width:25%; opacity: 1;">
+
-
<div class="portfolio-wrapper">
+
-
<a class="lightbox" href="#goofy">
+
-
<img src="https://static.igem.org/mediawiki/2014/0/0d/SheffieldJay1.jpg"/>
+
-
</a>
+
-
</div>
+
-
</div>
+
-
<div class="portfolio app mix_all" data-cat="app" style="display: inline-block;width:25%; opacity: 1;">
+
-
<div class="portfolio-wrapper">
+
-
<a class="lightbox" href="#goofy">
+
-
  <img src="https://static.igem.org/mediawiki/2014/0/0d/SheffieldJay1.jpg"/>
+
-
</a>
+
-
    </div>
+
-
</div>
+
-
<div class="portfolio app mix_all" data-cat="app" style="display: inline-block;width:25%; opacity: 1;">
+
-
<div class="portfolio-wrapper">
+
-
<a class="lightbox" href="#goofy">
+
-
  <img src="https://static.igem.org/mediawiki/2014/0/0d/SheffieldJay1.jpg"/>
+
-
</a>  
+
-
    </div>
+
-
</div>
+
-
    <div class="portfolio app mix_all" data-cat="icon" style="display: inline-block;width:25%; opacity: 1;">
+
-
  <div class="portfolio-wrapper">
+
-
<a class="lightbox" href="#goofy">
+
-
  <img src="https://static.igem.org/mediawiki/2014/0/0d/SheffieldJay1.jpg"/>
+
-
</a>
+
-
    </div>
+
-
</div>
+
-
<div class="clearfix"></div>
+
-
</div>
+
-
    </div>
+
-
            <!---- start-portfolio-script----->
+
-
<script type="text/javascript" src="https://2014.igem.org/Team:Sheffield/Template:jquery.mixitup.min.js?action=raw&ctype=text/javascript"></script>
+
-
<script type="text/javascript">
+
-
$(function () {
+
-
var filterList = {
+
-
init: function () {
+
-
+
-
// MixItUp plugin
+
-
// http://mixitup.io
+
-
$('#portfoliolist').mixitup({
+
-
targetSelector: '.portfolio',
+
-
filterSelector: '.filter',
+
-
effects: ['fade'],
+
-
easing: 'snap',
+
-
// call the hover effect
+
-
onMixEnd: filterList.hoverEffect()
+
-
});
+
-
+
-
},
+
-
hoverEffect: function () {
+
-
// Simple parallax effect
+
-
$('#portfoliolist .portfolio').hover(
+
-
function () {
+
-
$(this).find('.label1').stop().animate({bottom: 0}, 200, 'easeOutQuad');
+
-
$(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');
+
-
},
+
-
function () {
+
-
$(this).find('.label1').stop().animate({bottom: -40}, 200, 'easeInQuad');
+
-
$(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');
+
-
}
+
-
);
+
-
+
-
}
+
-
+
-
};
+
-
// Run the show!
+
-
filterList.init();
+
-
});
+
-
</script>
+
-
</div>
+
-
<script type="text/javascript">
+
-
$(document).ready(function() {
+
-
/*
+
-
var defaults = {
+
-
  containerID: 'toTop', // fading element id
+
-
containerHoverID: 'toTopHover', // fading element hover id
+
-
scrollSpeed: 1200,
+
-
easingType: 'linear'
+
-
};
+
-
*/
+
-
+
-
$().UItoTop({ easingType: 'easeOutQuart' });
+
-
+
-
});
+
-
</script>
+
-
<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
+
</body>
</body>
</html>
</html>

Latest revision as of 22:11, 16 October 2014






Another aspect of our policy and practice project entailed outreach within schools to educate the next generation of scientists about synthetic biology. As this is an emerging science, these are the individuals who will be pioneering the technology and so we believed they would be the perfect target audience for our session. We carried out the outreach sessions in Porto, Portugal and Manchester, England.

Another aspect of our policy and practice project entailed outreach within schools to educate the next generation of scientists about synthetic biology. As this is an emerging science, these are the individuals who will be pioneering the technology and so we believed they would be the perfect target audience for our session. We carried out the outreach sessions in Porto, Portugal and Manchester, England.