Team:Sheffield/yyy

From 2014.igem.org

(Difference between revisions)
 
(5 intermediate revisions not shown)
Line 1: Line 1:
{{Team:Sheffield/NavigationBar}}
{{Team:Sheffield/NavigationBar}}
-
 
-
{{Team:Sheffield}}
 
-
 
<html>
<html>
<head>
<head>
-
<title></title>
 
-
<link href="./css/bootstrap.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="./css/style.css" rel='stylesheet' type='text/css' />
+
-
<link rel="stylesheet" href="./css/hover.css" />
+
-
<script src="./js/jquery.min.js"></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="./js/move-top.js"></script>
+
-
<script type="text/javascript" src="./js/easing.js"></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 ---->
+
 
-
<div id="portfolio" class="portfolio">
+
    <br><br><br><br><br>
-
<div class="container">
+
    <div class="head">
-
<div class="head-section text-center">
+
    <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>
-
<h3>Checkout my latest work </h3>
+
</div>
-
  <span1> </span1>
+
-
  <p>Proin iaculis purus consequat sem cure  digni sim donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt proin iaculis.</p>
+
    <div class="head">
-
</div>
+
    <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>
-
</div>
+
</div>
-
<!--- Portfolio --->
+
-
<div id="port" class="portfolio-box">
+
<div class="section">
-
<div class="container">
+
    <a href="">
-
<ul id="filters" class="clearfix">
+
        <div class="block">
-
<li><span class="filter active" data-filter="app card icon logo web">All</span></li>
+
        <div class="left">
-
<li><span class="filter" data-filter="app">Web</span></li>
+
        <p>Introduction</p>
-
<li><span class="filter" data-filter="card">Mobile</span></li>
+
    </div>
-
<li><span class="filter" data-filter="icon">Photography</span></li>
+
        <div class="mid">
-
<li><span class="filter" data-filter="logo">Design</span></li>
+
        <p>mid</p>
-
<li><span class="filter" data-filter="web">Type</span></li>
+
    </div>
-
</ul>
+
        <div class="right">
-
</div>
+
        <p>fd</p>
-
<div id="portfoliolist">
+
    </div>
-
<div class="portfolio icon mix_all" data-cat="icon" style="display: inline-block;width:25%; opacity: 1;">
+
    </div>
-
    <div class="portfolio-wrapper">
+
    </a>    
-
<a class="lightbox" href="#goofy">
+
</div>
-
  <img src="./images/p1.jpg"/>
+
 
-
</a>
+
-
<div class="lightbox-target" id="goofy">
+
-
<img src="./images/p1.jpg"/>
+
-
  <a class="lightbox-close" href="#"></a>
+
-
</div>
+
-
</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="./images/p2.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="./images/p3.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="./images/p4.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="./images/p5.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="./images/p6.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="./images/p7.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="./images/p8.jpg"/>
+
-
</a>  
+
-
    </div>
+
-
</div>
+
-
<div class="clearfix"></div>
+
-
</div>
+
-
    </div>
+
-
            <!---- start-portfolio-script----->
+
-
<script type="text/javascript" src="./js/jquery.mixitup.min.js"></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.

Introduction

mid

fd

Retrieved from "http://2014.igem.org/Team:Sheffield/yyy"