Difference between revisions of "Team:Exeter/Awards"

Line 252: Line 252:
 
min-width:100%;
 
min-width:100%;
 
padding:0;
 
padding:0;
 +
}
 +
.div_vl{
 +
padding-top:2%;
 +
height:37.5vw;
 +
width:95vw;
 +
display:block;
 +
margin-left:auto;
 +
margin-right:auto;
 +
}
 +
.div_vl.backgroundimage{
 +
background-image: url('https://static.igem.org/mediawiki/2016/9/93/T--Exeter--Home_Background1.png');
 +
background-repeat:no-repeat;
 +
background-size: 100% auto;
 +
width:100%;
 +
height:60vh;
 +
}
 +
#title{
 +
style="font-family: 'Arial';
 +
color:#4e4e4e;
 +
text-align:center;
 +
margin-bottom:20px;
 +
font-size:400%;
 +
}
 +
.div_content{
 +
padding:0;
 +
min-height:100vh;
 +
width:100%;
 +
background:#eeeeee;
 +
}
 +
 +
/*div_banner contains to links at the top of each page to link to*/
 +
/*each section of the page*/
 +
.div_banner{
 +
max-width:90vw;
 +
margin:6vw auto;
 +
display:block;
 +
height:8vh;
 +
}
 +
 +
/*Contains styling for the left and right pictures of the banner*/
 +
.subdiv_banner{
 +
height:8vh;
 +
padding:0;
 +
}
 +
.subdiv_banner.left{
 +
float:left;
 +
display:block;
 +
}
 +
.subdiv_banner.right{
 +
float:right;
 +
display:block;
 +
}
 +
.subdiv_banner.middle{
 +
height:100%;
 +
}
 +
/*Positions the images in correct place in the divs*/
 +
.subdiv_banner.left img, .subdiv_banner.right img{
 +
width:100%;
 +
position: relative;
 +
top: 50%;
 +
-ms-transform: translateY(-50%) /* IE 9 */
 +
    -webkit-transform: translateY(-50%) /* Chrome, Safari, Opera */
 +
    transform: translateY(-50%)
 +
}
 +
.banner_link{
 +
height:100%;
 +
color:#47BCC2;
 +
text-align:center;
 +
/*Max font size where "section" and "1" don't appear on*/
 +
}
 +
.banner_link:hover{
 +
text-decoration:none;
 +
color:#339499;
 +
}
 +
 +
/*Mobile and small screen css*/
 +
@media (max-width: 767px){
 +
.div_vl.backgroundimage{
 +
background-image: url('#');
 +
background:#ddd;
 +
}
 +
#title{
 +
font-size:150%;
 +
}
 +
/*Makes side pictures on banner invisible on small screens*/
 +
/*as it clutters screen*/
 +
.subdiv_banner.left, .subdiv_banner.right{
 +
display:none;
 +
}
 +
}
 
}
 
}
 
</style>
 
</style>
Line 341: Line 431:
 
<!--Counter and topnav ends-->
 
<!--Counter and topnav ends-->
 
<!--Content begins-->
 
<!--Content begins-->
 +
<div class="container">
 +
<div class="div_vl backgroundimage">
 +
<h1 id="title">Page Title</h1>
 +
<!--Contains links to sections on page-->
 +
<div class="div_banner">
 +
<!--Right picture (the teal line on right)-->
 +
<div class="col-sm-2 subdiv_banner left">
 +
<img src="https://static.igem.org/mediawiki/2016/8/8a/T--Exeter--Template_Banner_left.png">
 +
</div>
 +
<!--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-->
 +
 +
<!--Font size & line size is in style because you will need to change-->
 +
<!--to look good each time --sorry-- -->
 +
<a href="#section_1" style="font-size:145%;line-height:265%;" class="banner_link col-xs-6 col-sm-3">Section 1</a>
 +
<a href="#section_2" style="font-size:145%;line-height:265%;" class="banner_link col-xs-6 col-sm-3">Section 2</a>
 +
<a href="#section_3" style="font-size:145%;line-height:265%;" class="banner_link col-xs-6 col-sm-3">Section 3</a>
 +
<a href="#section_4" style="font-size:145%;line-height:265%;" class="banner_link col-xs-6 col-sm-3">Section 4</a>
 +
</div>
 +
<!--Left picture (the teal line on left)-->
 +
<div class="col-sm-2 subdiv_banner right">
 +
<img src="https://static.igem.org/mediawiki/2016/5/56/T--Exeter--Template_Banner_right.png">
 +
</div>
 +
</div>
 +
<div>
 +
<a id="Section_link" href="#section_1" style="display:block;margin:20px auto 0 auto;width:14px;"><span style="color:#47BCC2;" class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
 +
</div>
 +
</div>
 +
<div id="section_1" class="col-xs-12 div_content">
 +
<div id="contentTitle">
 +
Section 1
 +
</div>
 +
<div>
 +
<a id="Section_link" href="#section_2" style="display:block;margin:20px auto 0 auto;width:14px;"><span style="color:#47BCC2;" class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
 +
</div>
 +
</div>
 +
<div id="section_2" class="col-xs-12 div_content">
 +
<div id="contentTitle">
 +
Section 2
 +
</div>
 +
<div>
 +
<a id="Section_link" href="#section_3" style="display:block;margin:20px auto 0 auto;width:14px;"><span style="color:#47BCC2;" class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
 +
</div>
 +
</div>
 +
<div id="section_3" class="col-xs-12 div_content">
 +
<div id="contentTitle">
 +
Section 3
 +
</div>
 +
</div>
 +
</div>
 +
  
 
<!--Content Ends-->
 
<!--Content Ends-->

Revision as of 14:32, 16 August 2016