(Prototype team page) |
|||
Line 1: | Line 1: | ||
− | |||
{{RUM-UPRM}} | {{RUM-UPRM}} | ||
− | + | {{RUM-UPRM/Nav}} | |
− | < | + | <html lang="en"> |
+ | <head> | ||
+ | <meta charset="utf-8"> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
+ | <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> | ||
+ | |||
− | < | + | <style> |
− | + | body { | |
+ | position: relative; | ||
+ | |||
− | + | } | |
+ | ul.nav-pills { | ||
+ | top: 70px; | ||
+ | } | ||
+ | ul.nav { | ||
+ | position: sticky; | ||
+ | |||
+ | } | ||
+ | div.col-8 div { | ||
+ | height: 500px; | ||
+ | } | ||
+ | .sticky { | ||
+ | position: relative; | ||
+ | top: 0; | ||
+ | width: 100%; | ||
+ | } | ||
+ | #myScrollspy { | ||
+ | position: sticky; | ||
+ | top: 70px; | ||
+ | |||
+ | } | ||
+ | |||
+ | </style> | ||
+ | </head> | ||
+ | <body data-spy="scroll" data-target="#myScrollspy" data-offset="1"> | ||
+ | |||
+ | <div class="container-fluid; bg-info" style="height:100px; top: 200px"> | ||
+ | <center><h1>Safety</h1></center> | ||
</div> | </div> | ||
− | <div class="column | + | <div class="container-fluidtwo"> |
− | < | + | <div class="row"> |
+ | <nav class="col-sm-3 col-4" id="myScrollspy"> | ||
+ | <ul class="nav nav-pills flex-sm-column"> | ||
+ | <li class="nav-item"> | ||
+ | <a class="nav-link active" href="#section1">Safety</a> | ||
+ | </li> | ||
+ | <li class="nav-item"> | ||
+ | <a class="nav-link" href="#section2">Covid Precautions</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </nav> | ||
− | |||
− | < | + | <div class="col-sm-9 col-8; scroll"> <div align="justify"> |
− | + | <div id="section1" style="background-color:rgba(255,0,0,0.07)"> | |
− | + | <center><h1>Safety</h1></center> | |
− | + | ||
− | < | + | |
− | </ | + | |
+ | <p style="margin-left:7%; margin-right:7%"> Text Here </p> | ||
</div> | </div> | ||
− | <div | + | <div id="section2"> |
− | <h3> | + | <center><h3>Covid Precautions</h3> </center> |
+ | <style> | ||
+ | * {box-sizing: border-box;} | ||
− | + | .column {float: left; | |
+ | width: 50%} | ||
+ | /* Clearfix (clear floats) */ | ||
+ | .row::after { | ||
+ | content: ""; | ||
+ | clear: both; | ||
+ | display: table; | ||
+ | } | ||
+ | </style> | ||
+ | <body> | ||
+ | <div class="row"> | ||
+ | <div class="column"> | ||
+ | <center><img src="https://static.igem.org/mediawiki/2020/8/80/T--RUM-UPRM--Covid_Hands.png" alt="Hands" style="width:60%"></center> | ||
+ | </div> | ||
+ | <div class="column"> | ||
+ | <center><img src="https://static.igem.org/mediawiki/2020/c/c4/T--RUM-UPRM--Covid_Mask.png" alt="Mask" style="width:60%"></center> | ||
+ | </div> | ||
+ | </div> | ||
+ | <br> | ||
+ | <html> | ||
+ | <head> | ||
+ | <style> | ||
+ | * {box-sizing: border-box;} | ||
+ | |||
+ | .column {float: left; | ||
+ | width: 50%; | ||
+ | padding: 10px;} | ||
+ | |||
+ | /* Clearfix (clear floats) */ | ||
+ | .row::after { | ||
+ | content: ""; | ||
+ | clear: both; | ||
+ | display: table; | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | |||
+ | <div class="row"> | ||
+ | <div class="column"> | ||
+ | <center><img src="https://static.igem.org/mediawiki/2020/9/96/T--RUM-UPRM--Covid_Summary1.png" alt="Summary1" style="width:60%"></center> | ||
+ | </div> | ||
+ | <div class="column"> | ||
+ | <center><img src="https://static.igem.org/mediawiki/2020/3/34/T--RUM-UPRM--Covid_Summary2.png" alt="Summary 2" style="width:60%"></center> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <br> | ||
+ | <p> </p> | ||
+ | <center> <embed src="https://static.igem.org/mediawiki/2020/0/08/T--RUM-UPRM--Covid_Protocal.pdf" width="60%" height="400px" /> <center/> | ||
+ | <p> </p> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <script> | ||
+ | window.onscroll = function() {myFunction()}; | ||
+ | |||
+ | var myScrollspy = document.getElementById("myScrollspy"); | ||
+ | var sticky = myScrollspy.offsetTop+70px; | ||
+ | |||
+ | function myFunction() { | ||
+ | if (window.pageYOffset >= sticky) { | ||
+ | myScrollspy.classList.add("sticky") | ||
+ | } else { | ||
+ | myScrollspy.classList.remove("sticky"); | ||
+ | } | ||
+ | } | ||
+ | </script> | ||
+ | |||
+ | </body> | ||
</html> | </html> | ||
+ | |||
+ | {{RUM-UPRM/Footer}} |
Revision as of 00:56, 27 October 2020
Safety
Safety
Text Here
Covid Precautions