AndrewWild (Talk | contribs) |
AndrewWild (Talk | contribs) |
||
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