AndrewWild (Talk | contribs) |
AndrewWild (Talk | contribs) |
||
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 212: | Line 220: | ||
padding-left:40px; | padding-left:40px; | ||
font-size:150%; | font-size:150%; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
/*Heading styles*/ | /*Heading styles*/ | ||
Line 331: | 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 347: | Line 353: | ||
width:100%; | width:100%; | ||
position: relative; | position: relative; | ||
− | top: | + | 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 363: | Line 386: | ||
} | } | ||
.link_fix{ | .link_fix{ | ||
+ | display:block; | ||
position:relative; | position:relative; | ||
height:1px; | height:1px; | ||
Line 369: | 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 485: | Line 512: | ||
<!--the screen is xs compared to when it is sm--> | <!--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">Section 1</span></a> | |
− | <a href="#section_1 | + | <a href="#section_2" class="banner_link col-xs-6 col-sm-3"><span class="oneline">Section 2</span></a> |
− | <a href="#section_2 | + | <a href="#section_3" class="banner_link col-xs-6 col-sm-3"><span class="oneline">Section 3</span></a> |
− | <a href="#section_3 | + | <a href="#section_4" class="banner_link col-xs-6 col-sm-3"><span class="oneline">Section 4</span></a> |
− | <a href="#section_4 | + | |
</div> | </div> | ||
<!--Left picture (the teal line on left)--> | <!--Left picture (the teal line on left)--> |
Revision as of 20:08, 29 August 2016