Difference between revisions of "Team:RUM-UPRM/Description"

Line 1: Line 1:
 
{{RUM-UPRM}}
 
{{RUM-UPRM}}
−
<html lang="en">
+
{{RUM-UPRM/Nav}}
−
<body>
+
−
<!--Preloader-->
+
−
<div class="se-pre-con"></div>
+
−
<!-- Navigation-->
+
−
        <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
+
−
            <div class="container">
+
−
                <a class="navbar-brand js-scroll-trigger" href="https://2020.igem.org/Team:RUM-UPRM">RUM-UPRM</a>
+
−
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
+
−
                    Menu
+
−
                    <i class="fas fa-bars"></i>
+
−
                </button>
+
−
                <div class="collapse navbar-collapse" id="navbarResponsive">
+
−
                    <ul class="navbar-nav ml-auto">
+
−
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="https://2020.igem.org/Team:RUM-UPRM/Members">Team</a></li>
+
−
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="https://2020.igem.org/Team:RUM-UPRM/Description">Projects</a></li>
+
−
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="https://2020.igem.org/Team:RUM-UPRM/Safety">Safety</a></li>
+
−
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="https://2020.igem.org/Team:RUM-UPRM/Engineering">Engineering Success</a></li>
+
−
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="https://2020.igem.org/Team:RUM-UPRM/Human_Practices">Human Practices</a></li>
+
−
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#">Awards</a></li>
+
−
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#">Judging Form</a></li>
+
−
                    </ul>
+
−
                </div>
+
−
            </div>
+
−
        </nav>
+
  
−
<section class="bg-light content" style="background-size: 100%;margin-top: 0em;padding-top: 1.1em;" class="height-90 parallax">
+
<html lang="en">
 +
<head>
 +
  <title>Bootstrap Example</title>
 +
  <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>
 
<style>
−
#myHeader {
+
  body {
−
  background-color: lightblue;
+
    position: relative;
−
  color: black;
+
     
−
  padding: 40px;
+
−
  text-align: center;
+
−
}
+
−
</style>
+
−
</head>
+
  
−
 
+
  }
−
<h1 id="myHeader">Project Description</h1>
+
  ul.nav-pills {
−
 
+
     top: 70px;
−
 
+
−
 
+
−
<style>
+
−
.vertical-menu {
+
−
     width: 200px; /* Set a width if you like */
+
 
}
 
}
  
−
.vertical-menu a {
+
ul.nav {
−
    background-color: #eee; /* Grey background color */
+
position: sticky;  
−
    color: black; /* Black text color */
+
−
    display: block; /* Make the links appear below each other */
+
−
    padding: 12px; /* Add some padding */
+
−
    text-decoration: none; /* Remove underline from links */
+
−
}
+
  
−
.vertical-menu a:hover {
+
  }
−
     background-color: #ccc; /* Dark grey background on mouse-over */
+
  div.col-8 div {
 +
    height: 500px;
 +
  }
 +
.sticky {
 +
     position: relative;
 +
    top: 0;
 +
    width: 100%;
 
}
 
}
 +
#myScrollspy {
 +
position: sticky;
 +
top: 70px;
  
−
.vertical-menu a.active {
 
−
    background-color: #4CAF50; /* Add a green color to the "active/current" link */
 
−
    color: white;
 
 
}
 
}
−
.paragraph{
 
−
width: 90.2%;
 
−
    margin-left: 10%;
 
−
    border-top: 0;
 
−
  }
 
−
</style>
 
  
 +
  </style>
 +
</head>
 +
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
  
−
<div class="vertical-menu">
+
<div class="container-fluid; bg-info" style="height:250px; top: 200px">
−
  <a href="#1" class="active">Overview</a>
+
   <center><h1>Design</h1>
−
   <a href="#2">Link 1</a>
+
   <p>Scroll this page to see how the navbar behaves with data-spy="affix" and data-spy="scrollspy".</p>
−
   <a href="#3">Link 2</a>
+
   <p>The left menu sticks the page after you have scrolled a specified amount of pixels, and the links in the menu are automatically updated based on scroll position.</p></center>
−
  <a href="#4">Link 3</a>
+
−
   <a href="#5">Link 4</a>
+
 
</div>
 
</div>
−
<h4 id="1">clhdbvijbvpriuebgiehbveoihbgpiequbr</h4>
 
−
<h4 id="2">Mercury Genetic Circuit</h4>
 
  
  
−
<p style="margin-left:7%; margin-right:7%">please work</p>
+
<div class="container-fluidtwo">
−
</div>  
+
  <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">Section 1</a>
 +
        </li>
 +
        <li class="nav-item">
 +
          <a class="nav-link" href="#section2">Section 2</a>
 +
        </li>
 +
        <li class="nav-item">
 +
          <a class="nav-link" href="#section3">Section 3</a>
 +
        </li>
 +
        <li class="nav-item dropdown">
 +
          <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Section 4</a>
 +
          <div class="dropdown-menu">
 +
            <a class="dropdown-item" href="#section41">Link 1</a>
 +
            <a class="dropdown-item" href="#section42">Link 2</a>
 +
          </div>
 +
        </li>
 +
      </ul>
 +
    </nav>
 +
    <div class="col-sm-9 col-8">
 +
      <div id="section1" class="insert color" style="background-color:rgba(255,0,0,0.1)">   
 +
        <h1>Section 1</h1>
 +
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
 +
      </div>
 +
      <div id="section2" class="bg-warning">  
 +
        <h1>Section 2</h1>
 +
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
 +
      </div>       
 +
      <div id="section3" class="bg-secondary">       
 +
        <h1>Section 3</h1>
 +
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
 +
      </div>
 +
      <div id="section41" class="bg-danger">       
 +
        <h1>Section 4-1</h1>
 +
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
 +
      </div>     
 +
      <div id="section42" class="bg-info">       
 +
        <h1>Section 4-2</h1>
 +
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
 +
      </div>
 +
    </div>
 +
  </div>
 
</div>
 
</div>
−
</section>
+
 
 +
 
 +
 
 +
 
 +
<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}}
 
{{RUM-UPRM/Footer}}

Revision as of 05:00, 26 October 2020


RUM-UPRM Wiki Source Code

Bootstrap Example

Design

Scroll this page to see how the navbar behaves with data-spy="affix" and data-spy="scrollspy".

The left menu sticks the page after you have scrolled a specified amount of pixels, and the links in the menu are automatically updated based on scroll position.

Section 1

Try to scroll this section and look at the navigation list while scrolling!

Section 2

Try to scroll this section and look at the navigation list while scrolling!

Section 3

Try to scroll this section and look at the navigation list while scrolling!

Section 4-1

Try to scroll this section and look at the navigation list while scrolling!

Section 4-2

Try to scroll this section and look at the navigation list while scrolling!




Our Sponsors

Amgen Snapgene UPRM Goya Genscript PRABIA MolecularCloud MatLab IDT ReviveRestore Twist

Follows Us!