Difference between revisions of "Team:British Columbia/Human Practices/Science Communication"

(Created page with "{{British_Columbia_2}} {{British_Columbia_Navbar}} <html> <style> body { background-color: green; } </style> <head> </head> <body> <h1> Science Communication </h1> <div cl...")
 
m
Line 1: Line 1:
 
{{British_Columbia_2}}
 
{{British_Columbia_2}}
 
{{British_Columbia_Navbar}}
 
{{British_Columbia_Navbar}}
−
<html>
+
<html lang="en">
 +
<head>
 +
  <title>Science Communication</title>
 
<style>
 
<style>
−
body {
+
.cover{
−
   background-color: green;
+
   background: url("https://static.igem.org/mediawiki/2016/9/9e/T--British_Columbia--header-frontpage.JPG");
 +
  background-size: cover; background-repeat: no-repeat;
 
}
 
}
 +
 +
@media screen and (min-width: 768px) {
 +
  .cover{
 +
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.15) 25%, rgba(0, 0, 0, 0) 100%), url("https://static.igem.org/mediawiki/2016/9/9e/T--British_Columbia--header-frontpage.JPG");
 +
    background-size: cover; background-repeat: no-repeat;
 +
    background-position: 0 0, 0 -220px;
 +
  }
 +
}
 +
 +
.content-wrap p{
 +
  margin-bottom: 25px;
 +
}
 +
 +
/*important to set the position of these images such that the figcaption below the background image is visible*/
 +
#previous img{
 +
  width: 100%; min-width: 100%; height: auto;
 +
  transition: all 1s ease;
 +
  left: -50px;
 +
}
 +
 +
#next img{
 +
  width: 100%; min-width: 100%; height: auto;
 +
  transition: all 1s ease; bottom: 0;
 +
}
 +
 
</style>
 
</style>
−
<head> </head>
+
</head>
 +
<body>
 +
<div class="cover">
 +
  <div class="container-fluid">
 +
    <div class="row" id="title">
 +
      <div class="col-sm-12">
 +
        <strong><p style="font-size: 3em">Science Communication</p></strong>
 +
      </div>
 +
    </div><!--title-->
 +
  </div><!--container-fluid-->
 +
</div><!--cover-->
 +
 
 +
<div id="breadcrumbs">
 +
<strong>
 +
<a href="https://2016.igem.org/Team:British_Columbia">Home</a> /
 +
<a href="https://2016.igem.org/Team:British_Columbia/Human_Practices/Science_Communication">Human Practices - Science Communication</a></strong>
 +
</div><!--#breadcrumbs-->
  
−
<body>
 
−
<h1> Science Communication </h1>
 
 
<div class="content-wrap">
 
<div class="content-wrap">
−
<p>Write here</p>
+
 
−
</div>
+
</div><!--.content-wrap-->
 
</body>
 
</body>
 +
 +
<p id="read-more"><strong>Check out other parts of our project below!</strong></p>
 +
<div id="up-next">
 +
<div class="row" style="max-width: 100%; margin: 0">
 +
<div class="col-sm-6" id="previous">
 +
<a href="https://2016.igem.org/Team:British_Columbia/Achievements/Parts">
 +
<img src="https://static.igem.org/mediawiki/2016/6/60/T--British_Columbia--header-mountains.jpg"></a>
 +
<a href="https://2016.igem.org/Team:British_Columbia/Project/S-Layer/Cellulases">
 +
<strong><figcaption>Part List</figcaption></strong></a>
 +
</div>
 +
<div class="col-sm-6" id="next">
 +
<a href="https://2016.igem.org/Team:British_Columbia/Project/S-Layer/Cellulases">
 +
<img src="https://static.igem.org/mediawiki/2016/1/1a/T--British_Columbia--header-laccases.JPG"></a>
 +
<a href="https://2016.igem.org/Team:British_Columbia/Project/S-Layer/Laccases">
 +
<strong><figcaption>Cellulases</figcaption></strong></a></div>
 +
</div>
  
 
</html>
 
</html>

Revision as of 11:02, 19 October 2016

Main CSS Navbar CSS

Science Communication

Science Communication

Check out other parts of our project below!