Difference between revisions of "Team:Exeter/dis"

(Created page with "<html> </div></div></div></div></div> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://max...")
 
Line 50: Line 50:
 
display:none;
 
display:none;
 
   }
 
   }
 +
}
 +
.div_audio{
 +
margin: 20px auto 12px auto;
 +
display:block;
 
}
 
}
 
#links{
 
#links{
Line 71: Line 75:
 
#links:hover{
 
#links:hover{
 
color:#339499;
 
color:#339499;
 +
}
 +
 +
.div_audio{
 +
margin: 20px auto 12px auto;
 +
display:block;
 +
}
 +
.div_log{
 +
padding-right:0;
 +
}
 +
span.vlog{
 +
position: absolute;
 +
font-size:4vh;
 +
bottom: 0.2vh;
 +
left: 1.5vh;
 +
}
 +
.log_img{
 +
max-width:100%;
 +
margin:1vh 0;
 +
padding:0;
 +
cursor:default;
 +
}
 +
.audio_controls{
 +
max-width:100%;
 +
padding:0;
 +
background:#fafafa;
 +
border-style: none none solid none;
 +
border-width:3px;
 +
color:#8cd5d9;
 
}
 
}
 
#links:active{
 
#links:active{
Line 289: Line 321:
 
#sectionGap, #sectionGap:focus, #contentTitle{
 
#sectionGap, #sectionGap:focus, #contentTitle{
 
min-width:100%;
 
min-width:100%;
−
min-height:10vh;
+
//min-height:10vh;
 
background:#e8e8e8;
 
background:#e8e8e8;
 
display:block;
 
display:block;
Line 331: Line 363:
 
.div_content{
 
.div_content{
 
padding:0;
 
padding:0;
−
min-height:100vh;
+
min-height:80vh;
 
width:100%;
 
width:100%;
 
background:#eeeeee;
 
background:#eeeeee;
Line 555: Line 587:
 
});
 
});
 
</script>  
 
</script>  
−
<!--Counter and topnav ends-->
+
 
−
<!--Content begins-->
+
 
<div class="container">
 
<div class="container">
 
<div class="div_vl backgroundimage">
 
<div class="div_vl backgroundimage">
−
<h1 id="title">Integrated human practises</h1>
+
<h1 id="title">Desert Island Science</h1>
−
<!--Contains links to sections on page-->
+
</div>
−
<div class="div_banner">
+
−
<!--Right picture (the teal line on right)-->
+
<div class="col-xs-12 div_content">
−
<div class="col-sm-2 subdiv_banner left">
+
<div id="section_2" class="link_fix"></div>
−
<img src="https://static.igem.org/mediawiki/2016/8/8a/T--Exeter--Template_Banner_left.png">
+
<div id="contentTitle">
−
</div>
+
Professor Jim la-Khalili
−
<!--Contains all information of banner in the middle-->
+
−
<!--of the two outer images-->
+
−
<div class="col-xs-12 col-sm-8 subdiv_banner middle">
+
−
<!--Use bootstrap to add links using all 12 columns-->
+
−
<!--For each link please give double the coloumns for when-->
+
−
<!--the screen is xs compared to when it is sm-->
+
−
+
−
<!--Give span class "oneline" or "twoline" depending on how llong the section text is-->
+
−
<a href="#section_1" class="banner_link col-xs-6 col-sm-3"><span class="oneline">S1</span></a>
+
−
<a href="#section_2" class="banner_link col-xs-6 col-sm-3"><span class="oneline">S2</span></a>
+
−
<a href="#section_3" class="banner_link col-xs-6 col-sm-3"><span class="oneline">S3</span></a>
+
−
<a href="#section_4" class="banner_link col-xs-6 col-sm-3"><span class="oneline">S4</span></a>
+
 
</div>
 
</div>
−
<!--Left picture (the teal line on left)-->
+
<div class="col-xs-12 col-sm-5 div_audio" style="padding-bottom:1vh;">
−
<div class="col-sm-2 subdiv_banner right">
+
<a href="#" class="col-xs-12 log_img_link" style="margin:0;padding:0;">
−
<img src="https://static.igem.org/mediawiki/2016/5/56/T--Exeter--Template_Banner_right.png">
+
<img class="log_img" src="https://static.igem.org/mediawiki/2016/8/8e/T--Exeter--dis-jim.jpeg">
 +
</a>
 
</div>
 
</div>
 +
<div class="col-xs-12 audio_controls">
 +
<audio controls style="max-width:100%;display:block;margin:0 auto;">
 +
<source src="https://static.igem.org/mediawiki/2016/a/a8/T--Exeter--Log_31.5.16vlog.ogg" type="audio/ogg">
 +
<source src="https://static.igem.org/mediawiki/2016/a/a7/T--Exeter--Log_31.5.16vlogmp3.mp3" type="audio/mpeg">
 +
Your browser does not support the audio element.
 +
</audio>
 
</div>
 
</div>
−
<div>
+
−
<a id="Section_link" href="#section_1" style="display:block;margin:34vh auto 0 auto;width:14px;"><span style="color:#47BCC2;font-size: 25px;" class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
+
 
−
</div>
+
 
</div>
 
</div>
 
<div class="col-xs-12 div_content">
 
<div class="col-xs-12 div_content">
−
<div id="section_1" class="link_fix"></div>
+
<div id="section_2" class="link_fix"></div>
−
<div id="contentTitle">
+
<div id="contentTitle">
−
S1
+
Dr Jon Marles-Wright
 +
</div>
 +
<div class="col-xs-12 col-sm-5 div_audio" style="padding-bottom:1vh;">
 +
<a href="#" class="col-xs-12 log_img_link" style="margin:0;padding:0;">
 +
<img class="log_img" src="https://static.igem.org/mediawiki/2016/b/b2/T--Exeter--dis-jon.jpg">
 +
</a>
 +
</div>
 +
<div class="col-xs-12 audio_controls">
 +
<audio controls style="max-width:100%;display:block;margin:0 auto;">
 +
<source src="https://static.igem.org/mediawiki/2016/a/a8/T--Exeter--Log_31.5.16vlog.ogg" type="audio/ogg">
 +
<source src="https://static.igem.org/mediawiki/2016/a/a7/T--Exeter--Log_31.5.16vlogmp3.mp3" type="audio/mpeg">
 +
Your browser does not support the audio element.
 +
</audio>
 
</div>
 
</div>
 +
 +
  
 +
</div>
 +
<div class="col-xs-12 div_content">
 +
<div id="section_2" class="link_fix"></div>
 +
<div id="contentTitle">
 +
Professor Richard Kitney
 +
</div>
 +
<div class="col-xs-12 col-sm-5 div_audio" style="padding-bottom:1vh;">
 +
<a href="#" class="col-xs-12 log_img_link" style="margin:0;padding:0;">
 +
<img class="log_img" src="
 +
https://static.igem.org/mediawiki/2016/4/44/T--Exeter--dis-rich.jpg
 +
">
 +
</a>
 +
</div>
 +
<div class="col-xs-12 audio_controls">
 +
<audio controls style="max-width:100%;display:block;margin:0 auto;">
 +
<source src="https://static.igem.org/mediawiki/2016/a/a8/T--Exeter--Log_31.5.16vlog.ogg" type="audio/ogg">
 +
<source src="https://static.igem.org/mediawiki/2016/a/a7/T--Exeter--Log_31.5.16vlogmp3.mp3" type="audio/mpeg">
 +
Your browser does not support the audio element.
 +
</audio>
 +
</div>
 +
 
 
−
<div>
+
 
−
<a id="Section_link" href="#section_2" style="display:block;margin:20px auto 0 auto;width:14px;"><span style="color:#47BCC2;font-size: 25px;" class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
+
</div>
 +
<div class="col-xs-12 div_content">
 +
<div id="section_2" class="link_fix"></div>
 +
<div id="contentTitle">
 +
Professor John Love
 +
</div>
 +
<div class="col-xs-12 col-sm-5 div_audio" style="padding-bottom:1vh;">
 +
<a href="#" class="col-xs-12 log_img_link" style="margin:0;padding:0;">
 +
<img class="log_img" src="https://static.igem.org/mediawiki/2016/1/1a/T--Exeter--dis-john.jpg">
 +
</a>
 +
</div>
 +
<div class="col-xs-12 audio_controls">
 +
<audio controls style="max-width:100%;display:block;margin:0 auto;">
 +
<source src="https://static.igem.org/mediawiki/2016/a/a8/T--Exeter--Log_31.5.16vlog.ogg" type="audio/ogg">
 +
<source src="https://static.igem.org/mediawiki/2016/a/a7/T--Exeter--Log_31.5.16vlogmp3.mp3" type="audio/mpeg">
 +
Your browser does not support the audio element.
 +
</audio>
 
</div>
 
</div>
 +
 
</div>
 
</div>
 
<div class="col-xs-12 div_content">
 
<div class="col-xs-12 div_content">
 
<div id="section_2" class="link_fix"></div>
 
<div id="section_2" class="link_fix"></div>
−
<div id="contentTitle">
+
<div id="contentTitle">
−
S2
+
Dr Mark Ramsdale
 +
</div>
 +
<div class="col-xs-12 col-sm-5 div_audio" style="padding-bottom:1vh;">
 +
<a href="#" class="col-xs-12 log_img_link" style="margin:0;padding:0;">
 +
<img class="log_img" src="https://static.igem.org/mediawiki/2016/5/5a/T--Exeter--dis-mark.jpg">
 +
</a>
 +
</div>
 +
<div class="col-xs-12 audio_controls">
 +
<audio controls style="max-width:100%;display:block;margin:0 auto;">
 +
<source src="https://static.igem.org/mediawiki/2016/a/a8/T--Exeter--Log_31.5.16vlog.ogg" type="audio/ogg">
 +
<source src="https://static.igem.org/mediawiki/2016/a/a7/T--Exeter--Log_31.5.16vlogmp3.mp3" type="audio/mpeg">
 +
Your browser does not support the audio element.
 +
</audio>
 
</div>
 
</div>
−
 
 
 
 
 
−
<div>
 
−
<a id="Section_link" href="#section_3" style="display:block;margin:20px auto 0 auto;width:14px;"><span style="color:#47BCC2;font-size: 25px;" class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
 
−
</div>
 
 
</div>
 
</div>
 
<div class="col-xs-12 div_content">
 
<div class="col-xs-12 div_content">
−
<div id="section_3" class="link_fix"></div>
+
<div id="section_2" class="link_fix"></div>
−
<div id="contentTitle">
+
<div id="contentTitle">
−
S3
+
Dr Nicky King
 +
</div>
 +
<div class="col-xs-12 col-sm-5 div_audio" style="padding-bottom:1vh;">
 +
<a href="#" class="col-xs-12 log_img_link" style="margin:0;padding:0;">
 +
<img class="log_img" src="https://static.igem.org/mediawiki/2016/8/86/T--Exeter--dis-nick.jpg">
 +
</a>
 +
</div>
 +
<div class="col-xs-12 audio_controls">
 +
<audio controls style="max-width:100%;display:block;margin:0 auto;">
 +
<source src="https://static.igem.org/mediawiki/2016/a/a8/T--Exeter--Log_31.5.16vlog.ogg" type="audio/ogg">
 +
<source src="https://static.igem.org/mediawiki/2016/a/a7/T--Exeter--Log_31.5.16vlogmp3.mp3" type="audio/mpeg">
 +
Your browser does not support the audio element.
 +
</audio>
 
</div>
 
</div>
 +
 +
  
−
 
+
</div>
−
+
 
 
−
<div>
+
<div class="col-xs-12 div_content">
−
<a id="Section_link" href="#section_4" style="display:block;margin:20px auto 0 auto;width:14px;"><span style="color:#47BCC2;font-size: 25px;" class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
+
<div id="section_2" class="link_fix"></div>
 +
<div id="contentTitle">
 +
Dr Nicky King
 +
</div>
 +
<div class="col-xs-12 col-sm-5 div_audio" style="padding-bottom:1vh;">
 +
<a href="#" class="col-xs-12 log_img_link" style="margin:0;padding:0;">
 +
<img class="log_img" src="https://static.igem.org/mediawiki/2016/8/86/T--Exeter--dis-nick.jpg">
 +
</a>
 +
</div>
 +
<div class="col-xs-12 audio_controls">
 +
<audio controls style="max-width:100%;display:block;margin:0 auto;">
 +
<source src="https://static.igem.org/mediawiki/2016/a/a8/T--Exeter--Log_31.5.16vlog.ogg" type="audio/ogg">
 +
<source src="https://static.igem.org/mediawiki/2016/a/a7/T--Exeter--Log_31.5.16vlogmp3.mp3" type="audio/mpeg">
 +
Your browser does not support the audio element.
 +
</audio>
 
</div>
 
</div>
 +
 +
 +
 
</div>
 
</div>
−
<div class="col-xs-12 div_content">
+
<div class="col-xs-12 div_content">
−
<div id="section_4" class="link_fix"></div>
+
<div id="section_2" class="link_fix"></div>
−
<div id="contentTitle">
+
<div id="contentTitle">
−
S4
+
Dr Sara Burton
 +
</div>
 +
<div class="col-xs-12 col-sm-5 div_audio" style="padding-bottom:1vh;">
 +
<a href="#" class="col-xs-12 log_img_link" style="margin:0;padding:0;">
 +
<img class="log_img" src="https://static.igem.org/mediawiki/2016/3/31/T--Exeter--dis-sara.jpg">
 +
</a>
 +
</div>
 +
<div class="col-xs-12 audio_controls">
 +
<audio controls style="max-width:100%;display:block;margin:0 auto;">
 +
<source src="https://static.igem.org/mediawiki/2016/a/a8/T--Exeter--Log_31.5.16vlog.ogg" type="audio/ogg">
 +
<source src="https://static.igem.org/mediawiki/2016/a/a7/T--Exeter--Log_31.5.16vlogmp3.mp3" type="audio/mpeg">
 +
Your browser does not support the audio element.
 +
</audio>
 
</div>
 
</div>
 +
 
 
  
−
 
 
</div>
 
</div>
−
 
+
<div class="col-xs-12 div_content">
 +
<div id="section_2" class="link_fix"></div>
 +
<div id="contentTitle">
 +
Professor Chris Linott
 +
</div>
 +
<div class="col-xs-12 col-sm-5 div_audio" style="padding-bottom:1vh;">
 +
<a href="#" class="col-xs-12 log_img_link" style="margin:0;padding:0;">
 +
<img class="log_img" src="https://static.igem.org/mediawiki/2016/9/93/T--Exeter--dis-chris.jpg">
 +
</a>
 +
</div>
 +
<div class="col-xs-12 audio_controls">
 +
<audio controls style="max-width:100%;display:block;margin:0 auto;">
 +
<source src="https://static.igem.org/mediawiki/2016/a/a8/T--Exeter--Log_31.5.16vlog.ogg" type="audio/ogg">
 +
<source src="https://static.igem.org/mediawiki/2016/a/a7/T--Exeter--Log_31.5.16vlogmp3.mp3" type="audio/mpeg">
 +
Your browser does not support the audio element.
 +
</audio>
 +
</div>
 +
 +
</div>
 
</div>
 
</div>
  

Revision as of 21:33, 8 October 2016