(Prototype team page) |
Jackyang0216 (Talk | contribs) |
||
Line 1: | Line 1: | ||
− | {{CSMU_NCHU_Taiwan}} | + | {{:Team:CSMU_NCHU_Taiwan/Templates/Header}} |
− | <html> | + | <html lang="en"> |
+ | <head> | ||
+ | <meta charset="UTF-8"> | ||
+ | <link href='https://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet'> | ||
+ | <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'> | ||
+ | <title>Safety</title> | ||
+ | </head> | ||
+ | <style type="text/css"> | ||
+ | * { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | box-sizing: border-box; } | ||
+ | body { | ||
+ | width: 100%; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | font-family: 'Ubuntu' !important; } | ||
+ | .bg-container { | ||
+ | overflow: hidden; | ||
+ | position: relative; | ||
+ | max-height: 200vh; } | ||
+ | .bg-container > img { | ||
+ | width: 100%; | ||
+ | margin-top: -45px; } | ||
+ | .my-main-container { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | padding: 50px 7%; | ||
+ | min-height: 200vh; | ||
+ | overflow: hidden; } | ||
− | + | .main-content { | |
+ | background-color: white; | ||
+ | width: 80%; | ||
+ | margin-left: 10%; | ||
+ | padding: 50px; | ||
+ | min-height: 180vh; | ||
+ | z-index: 10; } | ||
− | + | .text-area { | |
− | + | margin-bottom: 80px; } | |
− | + | .text-area h1 { | |
− | + | font-size: 60px; | |
− | + | font-weight: 700; | |
− | + | font-family: 'Arizonia' !important; | |
− | + | text-align: center; | |
− | + | margin-bottom: 1rem; } | |
− | + | .text-area p { | |
− | + | font-size: 22px; | |
− | + | font-weight: 500; } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | .text-area img { | ||
+ | width: 100%; } | ||
+ | .pdfbtn { | ||
+ | width: 100%; | ||
+ | margin: 20px 0 10px 0; | ||
+ | padding: 10px 20px; | ||
+ | border-radius: 5px; | ||
+ | background-color: #556b7e; | ||
+ | color: white; | ||
+ | display: block; | ||
+ | position: relative; } | ||
+ | .pdfbtn i { | ||
+ | position: absolute; | ||
+ | right: 50px; | ||
+ | top: 50%; | ||
+ | transform: translateY(-50%); } | ||
+ | .pdf-container { | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | height: 90vh; | ||
+ | display: none; } | ||
+ | #HQ_page .path .pathWord p { | ||
+ | font-weight: 700; | ||
+ | text-align: left !important; | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | #HQ_page .text-area p { | ||
+ | font-size: 22px; | ||
+ | font-family: 'Ubuntu'; | ||
+ | font-weight: 500; } | ||
+ | img.center { | ||
+ | display: block; | ||
+ | margin: 0 auto; } | ||
+ | #HQ_page .text-area h2 { | ||
+ | text-align: center; | ||
+ | margin-bottom: 2rem !important; | ||
+ | margin-top: 2rem; | ||
+ | color: black !important; } | ||
+ | .top { | ||
+ | position: fixed; | ||
+ | right: 50px; | ||
+ | bottom: 50px; | ||
+ | height: 50px; | ||
+ | width: 50px; | ||
+ | cursor: pointer; } | ||
+ | .top img { | ||
+ | width: 100%; } | ||
+ | </style> | ||
+ | <body> | ||
+ | <div class="bg-container"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/f/fd/T--CSMU_NCHU_Taiwan--parts.png"> | ||
+ | <div class="my-main-container"> | ||
+ | <div class="main-content"> | ||
+ | <div class="text-area"> | ||
+ | <h1>Parts</h1> | ||
+ | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum veritatis quaerat obcaecati, nobis assumenda reprehenderit nisi minus tenetur. Quae, debitis? ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam suscipit officiis fugiat accusamus quia eaque adipisci, odio rem saepe odit sint quasi, officia consequuntur praesentium laboriosam magni corporis. Quos, vero.</p> | ||
+ | <img src="" alt=""> | ||
+ | <img src="" alt=""> | ||
+ | </div> | ||
+ | <div class="pdf-area"> | ||
+ | <span class="pdfbtn" id="parts-btn-1">Basic Parts<i class="fa fa-caret-down" aria-hidden="true"></i></span> | ||
+ | <div class="pdf-container" id="parts-1"> | ||
+ | <object data="" type="application/pdf" width="100%" height="100%"> | ||
+ | <p>Alternative text - include a link <a href="">to the PDF!</a></p> | ||
+ | </object> | ||
+ | </div> | ||
+ | <span class="pdfbtn" id="parts-btn-2">Component Parts<i class="fa fa-caret-down" aria-hidden="true"></i></span> | ||
+ | <div class="pdf-container" id="parts-2"> | ||
+ | <object data="" type="application/pdf" width="100%" height="100%"> | ||
+ | <p>Alternative text - include a link <a href="">to the PDF!</a></p> | ||
+ | </object> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="top"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/5/52/T--CSMU_NCHU_Taiwan--top.png" alt=""> | ||
+ | </div> | ||
+ | </body> | ||
+ | <script type="text/javascript"> | ||
+ | $('#parts-btn-1').on('click', function(){ | ||
+ | $('#parts-1').css('height','250vh') | ||
+ | $('#parts-1').slideToggle("slow"); | ||
+ | $('.bg-container').css('max-height','500vh') | ||
+ | $('.main-content').css('min-height','200vh') | ||
+ | }); | ||
+ | $('#parts-btn-2').on('click', function(){ | ||
+ | $('#parts-2').css('height','250vh') | ||
+ | $('#parts-2').slideToggle("slow"); | ||
+ | $('.bg-container').css('max-height','500vh') | ||
+ | $('.main-content').css('min-height','200vh') | ||
+ | }); | ||
+ | $('.top').on('click', function(){ | ||
+ | $('html, body').animate({scrollTop: '0px'}, 500); | ||
+ | }); | ||
+ | </script> | ||
</html> | </html> |
Revision as of 07:48, 30 October 2017
![](https://static.igem.org/mediawiki/2017/f/fd/T--CSMU_NCHU_Taiwan--parts.png)
Parts
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum veritatis quaerat obcaecati, nobis assumenda reprehenderit nisi minus tenetur. Quae, debitis? ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam suscipit officiis fugiat accusamus quia eaque adipisci, odio rem saepe odit sint quasi, officia consequuntur praesentium laboriosam magni corporis. Quos, vero.
Basic Parts
Component Parts
![](https://static.igem.org/mediawiki/2017/5/52/T--CSMU_NCHU_Taiwan--top.png)