Difference between revisions of "Team:UFlorida"

 
(474 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
{{UFlorida}}
+
{{UFlorida/Menu2}}
 +
 
 +
 
 
<html>
 
<html>
  
 
<head>
 
<head>
 +
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 +
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 +
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 +
  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
 +
 
 +
<style>
  
−
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
−
 
−
<style>
 
 
   body {
 
   body {
−
       font: 20px Montserrat, sans-serif;
+
       font: 400 15px Lato, sans-serif;
−
       line-height: 1.8;
+
       background-color: rgb(192,192,192);
−
      color: #f5f6f7;
+
 
   }
 
   }
−
   p {font-size: 16px;}
+
   footer .glyphicon {
−
  .margin {margin-bottom: 45px;}
+
      font-size: 20px;
−
.bg-1 {
+
      margin-bottom: 20px;
−
      background-color: #1abc9c; /* Green */
+
       color: #f4511e;
−
       color: #ffffff;
+
 
   }
 
   }
−
  .bg-2 {  
+
    img {
−
      background-color: #474e5d; /* Dark Blue */
+
    width: 100%;
−
      color: #ffffff;
+
    height:auto;
−
  }
+
}
−
  .bg-3 {  
+
p {
−
      background-color: #ffffff; /* White */
+
    margin: .4em 0 .5em 0;
−
      color: #555555;
+
    line-height: 0em;
−
  }
+
}
−
  .bg-4 {
+
p {
−
      background-color: #2f2f2f; /* Black Gray */
+
    margin: 0 0 0px;
−
      color: #fff;
+
}
−
  }
+
.navbar {
−
  .container-fluid {
+
    position: relative;
−
      padding-top: 70px;
+
    min-height: 50px;
−
      padding-bottom: 70px;
+
    margin-bottom: 0px;
−
  }
+
    border: 1px solid transparent;
−
  .navbar {
+
}
−
      padding-top: 15px;
+
.img-fluid {
−
      padding-bottom: 15px;
+
  max-width: 100%;
−
      border: 0;
+
  height: auto;
−
      border-radius: 0;
+
}
−
      margin-bottom: 0;
+
</style>
−
      font-size: 12px;
+
−
      letter-spacing: 5px;
+
−
  }
+
−
  .navbar-nav  li a:hover {
+
−
      color: #1abc9c !important;
+
−
  }
+
−
  </style>
+
 
</head>
 
</head>
−
<body>
+
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
  
−
<!-- Navbar -->
+
<div class="img-fluid">
−
<nav class="navbar navbar-default">
+
  <img src="https://static.igem.org/mediawiki/2017/2/2f/UFlorida_Home_Pic.jpg" width="600" height="300"/>
−
  <div class="container">
+
</div>
−
    <div class="navbar-header">
+
−
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
+
−
        <span class="icon-bar"></span>
+
−
        <span class="icon-bar"></span>
+
−
        <span class="icon-bar"></span>                       
+
−
      </button>
+
−
      <a class="navbar-brand" href="#">Me</a>
+
−
    </div>
+
−
    <div class="collapse navbar-collapse" id="myNavbar">
+
−
      <ul class="nav navbar-nav navbar-right">
+
−
        <li><a href="#">WHO</a></li>
+
−
        <li><a href="#">WHAT</a></li>
+
−
        <li><a href="#">WHERE</a></li>
+
−
      </ul>
+
−
    </div>
+
−
  </div>
+
−
</nav>
+
  
−
<!-- First Container -->
+
<br>
−
<div class="container-fluid bg-1 text-center">
+
<div class="img-fluid">
−
  <h3 class="margin">Stop Stalking our wiki please</h3>
+
<img src="https://static.igem.org/mediawiki/2017/6/61/IGEM_Home_Design_2.jpg" class="img-fluid" alt="Responsive image">
−
  <img src="https://static.igem.org/mediawiki/2017/d/de/UF_Century_Tower.jpeg" alt="Century Tower" height="500" width="1000" style="background-color:
+
−
  <h3>I'm an adventurer</h3>
+
 
</div>
 
</div>
  
−
<!-- Second Container -->
+
<footer class="container-fluid text-center">
−
<div class="container-fluid bg-2 text-center">
+
   <a href="#myPage" title="To Top">
−
  <h3 class="margin">Seriously stop</h3>
+
     <span class="glyphicon glyphicon-chevron-up"></span>
−
  <p>I'm not kidding, its creepy </p>
+
−
   <a href="#" class="btn btn-default btn-lg">
+
−
     <span class="glyphicon glyphicon-search"></span> Search
+
 
   </a>
 
   </a>
−
</div>
+
</footer>
  
−
<!-- Third Container (Grid) -->
+
<script>
−
<div class="container-fluid bg-3 text-center">   
+
$(document).ready(function(){
−
   <h3 class="margin">Where To Find Me?</h3><br>
+
   // Add smooth scrolling to all links in navbar + footer link
−
   <div class="row">
+
   $(".navbar a, footer a[href='#myPage']").on('click', function(event) {
−
    <div class="col-sm-4">
+
    // Make sure this.hash has a value before overriding default behavior
−
      <p>Aren't we cute?</p>
+
     if (this.hash !== "") {
−
      <img src="https://static.igem.org/mediawiki/2017/f/f4/T--UFlorida--iGEM_Team_Picture.jpeg"  style="width:100%" alt="Team pic">
+
       // Prevent default anchor click behavior
−
     </div>
+
       event.preventDefault();
−
    <div class="col-sm-4">
+
−
      <p>Here's a pic of our fearless leader.</p>
+
−
      <img src="https://static.igem.org/mediawiki/2017/7/7a/Tree-frog-5.jpg" class="img-responsive margin" style="width:100%" alt="Frog">
+
−
    </div>
+
−
    <div class="col-sm-4">
+
−
       <p>Fooled ya, that was a frog. Here she isss</p>
+
−
       <img src="https://static.igem.org/mediawiki/2017/a/ae/T--UFlorida--Hannah_iGEM.jpeg" class="img-responsive margin" style="width:100%" alt="Hannah">
+
−
    </div>
+
−
  </div>
+
−
</div>
+
  
−
<!-- Footer -->
+
      // Store hash
−
<footer class="container-fluid bg-4 text-center">
+
      var hash = this.hash;
−
  <p>Bootstrap Theme Made By <a href="https://www.w3schools.com">www.w3schools.com</a></p>
+
 
−
</footer>
+
      // Using jQuery's animate() method to add smooth page scroll
 +
      // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
 +
      $('html, body').animate({
 +
        scrollTop: $(hash).offset().top
 +
      }, 900, function(){
 +
 
 +
        // Add hash (#) to URL when done scrolling (default click behavior)
 +
        window.location.hash = hash;
 +
      });
 +
    } // End if
 +
  });
 +
 
 +
  $(window).scroll(function() {
 +
    $(".slideanim").each(function(){
 +
      var pos = $(this).offset().top;
 +
 
 +
      var winTop = $(window).scrollTop();
 +
        if (pos < winTop + 600) {
 +
          $(this).addClass("slide");
 +
        }
 +
    });
 +
  });
 +
})
 +
</script>
  
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 01:58, 2 November 2017



Responsive image