Difference between revisions of "Team:Exeter/Collaborations"

Line 341: Line 341:
 
height:8vh;
 
height:8vh;
 
padding:0;
 
padding:0;
 +
margin:auto;
 +
position:relative;
 +
bottom:0;
 +
right:0;
 
}
 
}
 
.subdiv_banner.left{
 
.subdiv_banner.left{
Line 357: Line 361:
 
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 373: Line 394:
 
}
 
}
 
.link_fix{
 
.link_fix{
 +
display:block;
 
position:relative;
 
position:relative;
 
height:1px;
 
height:1px;
Line 379: Line 401:
 
/*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 495: Line 520:
 
<!--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">Measurement</span></a>
<a href="#section_1" style="font-size:145%;line-height:265%;" class="banner_link col-xs-6 col-sm-3">Measurement</a>
+
<a href="#section_2" class="banner_link col-xs-6 col-sm-3"><span class="oneline">Software</span></a>
<a href="#section_2" style="font-size:145%;line-height:265%;" class="banner_link col-xs-6 col-sm-3">Software</a>
+
<a href="#section_3" class="banner_link col-xs-6 col-sm-3"><span class="oneline">Parts</span></a>
<a href="#section_3" style="font-size:145%;line-height:265%;" class="banner_link col-xs-6 col-sm-3">Parts</a>
+
<a href="#section_4" class="banner_link col-xs-6 col-sm-3"><span class="twoline">Skype and Meet-ups</span></a>
<a href="#section_4" style="font-size:145%;line-height:265%;" class="banner_link col-xs-6 col-sm-3">Skype and Meet-ups</a>
+
 
</div>
 
</div>
 
<!--Left picture (the teal line on left)-->
 
<!--Left picture (the teal line on left)-->

Revision as of 20:06, 29 August 2016