Difference between revisions of "Team:UFlorida"

 
(478 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">What Am I?</h3>
+
     <span class="glyphicon glyphicon-chevron-up"></span>
−
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </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>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+
     if (this.hash !== "") {
−
      <img src="birds1.jpg" class="img-responsive margin" style="width:100%" alt="Image">
+
       // Prevent default anchor click behavior
−
     </div>
+
       event.preventDefault();
−
     <div class="col-sm-4">
+
−
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+
−
      <img src="birds2.jpg" class="img-responsive margin" style="width:100%" alt="Image">
+
−
    </div>
+
−
    <div class="col-sm-4">
+
−
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+
−
       <img src="birds3.jpg" class="img-responsive margin" style="width:100%" alt="Image">
+
−
    </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