Difference between revisions of "Team:Exeter/Awards"

Line 50: Line 50:
 
display:none;
 
display:none;
 
   }
 
   }
 +
  .subdiv_banner.left img, .subdiv_banner.right img{
 +
width:100%;
 +
position: relative;
 +
top: 32%;
 +
-ms-transform: translateY(-50%) /* IE 9 */
 +
    -webkit-transform: translateY(-50%) /* Chrome, Safari, Opera */
 +
    transform: translateY(-50%);
 +
}
 
}
 
}
 
#links{
 
#links{
Line 325: Line 333:
 
height:8vh;
 
height:8vh;
 
padding:0;
 
padding:0;
 +
margin:auto;
 +
position:relative;
 +
bottom:0;
 +
right:0;
 
}
 
}
 
.subdiv_banner.left{
 
.subdiv_banner.left{
Line 341: Line 353:
 
width:100%;
 
width:100%;
 
position: relative;
 
position: relative;
−
top: 50%;
+
top: 38%;
 
-ms-transform: translateY(-50%) /* IE 9 */
 
-ms-transform: translateY(-50%) /* IE 9 */
 
     -webkit-transform: translateY(-50%) /* Chrome, Safari, Opera */
 
     -webkit-transform: translateY(-50%) /* Chrome, Safari, Opera */
−
     transform: translateY(-50%)
+
     transform: translateY(-50%);
 
}
 
}
 
.banner_link,.banner_link:visited{
 
.banner_link,.banner_link:visited{
 +
position: relative;
 
height:100%;
 
height:100%;
 +
padding:0, 2px!important;
 
color:#47BCC2;
 
color:#47BCC2;
 
text-align:center;
 
text-align:center;
 +
font-size:1.5vw;
 
/*Max font size where "section" and "1" don't appear on*/
 
/*Max font size where "section" and "1" don't appear on*/
 +
}
 +
.banner_link span.oneline{
 +
position: relative;
 +
top: 34.5%;
 +
-ms-transform: translateY(-50%) /* IE 9 */
 +
    -webkit-transform: translateY(-50%) /* Chrome, Safari, Opera */
 +
    transform: translateY(-50%);
 +
}
 +
.banner_link span.twoline{
 +
position: relative;
 +
top: 7.5%;
 +
-ms-transform: translateY(-50%) /* IE 9 */
 +
    -webkit-transform: translateY(-50%) /* Chrome, Safari, Opera */
 +
    transform: translateY(-50%);
 
}
 
}
 
.banner_link:hover{
 
.banner_link:hover{
Line 357: Line 386:
 
}
 
}
 
.link_fix{
 
.link_fix{
 +
display:block;
 
position:relative;
 
position:relative;
 
height:1px;
 
height:1px;
Line 363: Line 393:
 
/*Mobile and small screen css*/
 
/*Mobile and small screen css*/
 
@media (max-width: 767px){
 
@media (max-width: 767px){
 +
.link_fix{
 +
display:none;
 +
}
 
.div_vl.backgroundimage{
 
.div_vl.backgroundimage{
 
background-image: url('#');
 
background-image: url('#');
Line 465: Line 498:
 
<div class="container">
 
<div class="container">
 
<div class="div_vl backgroundimage">
 
<div class="div_vl backgroundimage">
−
<h1 id="title">Page Title</h1>
+
<h1 id="title">Awards</h1>
 
<!--Contains links to sections on page-->
 
<!--Contains links to sections on page-->
 
<div class="div_banner">
 
<div class="div_banner">
Line 479: Line 512:
 
<!--the screen is xs compared to when it is sm-->
 
<!--the screen is xs compared to when it is sm-->
 
 
−
<!--Font size & line size is in style because you will need to change-->
+
<!--Give span class "oneline" or "twoline" depending on how llong the section text is-->
−
<!--to look good each time --sorry-- -->
+
<a href="#section_1" class="banner_link col-xs-6 col-sm-3"><span class="oneline">Section 1</span></a>
−
<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" class="banner_link col-xs-6 col-sm-3"><span class="oneline">Section 2</span></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" class="banner_link col-xs-6 col-sm-3"><span class="oneline">Section 3</span></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" class="banner_link col-xs-6 col-sm-3"><span class="oneline">Section 4</span></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>
 
</div>
 
<!--Left picture (the teal line on left)-->
 
<!--Left picture (the teal line on left)-->

Revision as of 20:08, 29 August 2016