Difference between revisions of "Team:Tec-Monterrey/sandboxDavid"

(TestMenu)
Line 1: Line 1:
 
<!-- GENERAL TEMPLATE BEGINS -->
 
<!-- GENERAL TEMPLATE BEGINS -->
 +
<!doctype html>
 
<html>
 
<html>
 
     <head>
 
     <head>
Line 11: Line 12:
 
         <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&amp;ctype=text/css" rel="stylesheet">
 
         <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&amp;ctype=text/css" rel="stylesheet">
 
          
 
          
−
         <!-- Custom scripts for this template -->
+
         <!-- Custom scripts for this template
 
         <script src="js/stylish-portfolio.js" type="text/javascript"></script>
 
         <script src="js/stylish-portfolio.js" type="text/javascript"></script>
 +
        -->
 
          
 
          
 
         <!-- Fonts -->
 
         <!-- Fonts -->
Line 89: Line 91:
 
<!-- GENERAL TEMPLATE ENDS -->
 
<!-- GENERAL TEMPLATE ENDS -->
  
−
<html>
+
<html lang="en">
 
     <head>
 
     <head>
−
        <link rel="stylesheet" type="text/css" href="main.css">
 
 
         <style>
 
         <style>
−
/*Override iGem default wiki settings */
+
              /*Override iGem default wiki settings */
 
#home_logo, #sideMenu {
 
#home_logo, #sideMenu {
 
     display:none;
 
     display:none;
Line 159: Line 160:
 
}             
 
}             
  
−
/*** HEADER ***/
+
/**** NAVBAR ****/
 
.masthead {
 
.masthead {
 
     position: fixed;
 
     position: fixed;
−
     top: 20;
+
     top: 20px;
−
     z-index: 1;
+
     z-index: 2;
 
     height: 60px;
 
     height: 60px;
 
     width: 100%;
 
     width: 100%;
 
}
 
}
  
−
/**** NAVBAR ****/
 
 
#navBar {
 
#navBar {
−
     top: 20px;
+
     position: fixed;
 +
    z-index: 2;
 
     height: 60px;
 
     height: 60px;
 
     width: 100%;
 
     width: 100%;
 +
    background: rgb(0,0,0);
 +
    background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%);
 +
}
 +
 +
#navContainer {
 +
    z-index: 2;
 +
    top:20px;
 +
    height: 60px;
 +
    width: 80%;
 +
    left: 10%;
 
     position: fixed;
 
     position: fixed;
−
     background-color: #eef;
+
     background-color: rgba(0,0,0,0);
 
}
 
}
  
−
#navbar-linkContainer {
+
.nav-link {
 
     height: 100%;
 
     height: 100%;
−
     width: 100px;
+
     width: 150px;
−
    background-color: greenyellow;
+
 
     position: relative;
 
     position: relative;
 
     float: left;
 
     float: left;
 
}
 
}
  
−
#navbar-link:hover + .navbar {
+
 
 +
.navbar-linkContainer {
 +
    height: 100%;
 +
    width: 150px;
 +
    background-color: rgba(0,0,0,0); /* transparent */
 +
    position: relative;
 +
    float: left;
 +
    text-align: center;
 +
    vertical-align: middle;
 +
}
 +
 
 +
.navbar-linkContainer:hover {
 
     background-color: aquamarine;
 
     background-color: aquamarine;
 
}
 
}
  
−
#collapseProject, #collapseParts, #collapsePeople, #collapsePeople, #collapseHP, #collapseModeling {
+
.collapsedMenu {
−
     top: 60px;
+
     top: 20px;
 
     position: fixed;
 
     position: fixed;
−
     background-color: aqua;
+
    z-index: 1;
 +
     background-color: aquamarine;
 +
    width: 100%;
 +
}
 +
 
 +
.height-support {
 +
    height: 60px;
 
     width: 100%;
 
     width: 100%;
 
}
 
}
Line 203: Line 230:
  
 
#intro {
 
#intro {
−
    min-height: 30rem;
 
 
     top: 20;
 
     top: 20;
 
     position: relative;
 
     position: relative;
Line 227: Line 253:
 
@media (min-width: 992px) {
 
@media (min-width: 992px) {
 
     #intro {
 
     #intro {
−
         height: 100vh;
+
         height: 55.5vw;
 
     }
 
     }
 
     #intro h1 {
 
     #intro h1 {
Line 528: Line 554:
 
}
 
}
 
         </style>
 
         </style>
 +
       
 
     </head>
 
     </head>
 
     <body id="page-top">
 
     <body id="page-top">
−
     
 
 
        
 
        
 
         <!-- Header/NavBar-->
 
         <!-- Header/NavBar-->
 
         <header class="masthead d-flex">
 
         <header class="masthead d-flex">
 
             <div id="navBar">
 
             <div id="navBar">
−
                 <div class="container" id="navbar-linkContainer" >
+
                 <div id="navContainer">
−
                     <a class="nav-link" id="navbar-link" href="#collapseProject" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseProject"> Project </a>
+
                     <a href="#collapseProject">
−
                </div>
+
                        <div class="container navbar-linkContainer" id="linkContainer_Project">
−
                <div class="container" id="navbar-linkContainer" >
+
                            <span>Project</span>
−
                     <a class="nav-link" id="navbar-link" href="#collapseParts" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseParts"> Parts </a>
+
                            <a href="#collapseProject"></a>
−
                </div>
+
                        </div>
−
                <div class="container" id="navbar-linkContainer" >
+
                    </a>
−
                    <a class="nav-link" id="navbar-link" href="#collapsePeople" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapsePeople"> People </a>
+
                     <a href="#collapseParts" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseParts">
−
                </div>
+
                        <div class="container navbar-linkContainer">  
−
                <div class="container" id="navbar-linkContainer" >
+
                            <span>Parts</span>
−
                    <a class="nav-link" id="navbar-link" href="#collapseHP" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseHP"> Human Practices </a>
+
                            <a href="#collapseParts"></a>
−
                </div>
+
                        </div>
−
                <div class="container" id="navbar-linkContainer" >
+
                    </a>
−
                    <a class="nav-link" id="navbar-link" href="#collapseModeling" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseModeling"> Modeling</a>
+
                    <a href="#collapsePeople" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapsePeople">
 +
                        <div class="container navbar-linkContainer">
 +
                            <span>People</span>
 +
                            <a href="#collapsePeople"></a>
 +
                        </div>
 +
                    </a>
 +
                    <a href="#collapseHP" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseHP">
 +
                        <div class="container navbar-linkContainer">
 +
                            <span>Human Practices</span>
 +
                            <a href="#collapseHP"></a>
 +
                        </div>
 +
                    </a>
 +
                    <a href="#collapseModeling" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseModeling">
 +
                        <div class="container navbar-linkContainer">
 +
                            <span>Modeling</span>
 +
                            <a href="#collapseModeling"></a>
 +
                        </div>
 +
                    </a>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
              
 
              
 
             <!-- Project collapsed -->
 
             <!-- Project collapsed -->
−
             <div class="collapse" id="collapseProject">
+
             <div class="collapse collapsedMenu" id="collapseProject">
 
                 <div class="container">
 
                 <div class="container">
 +
                    <div class="height-support">
 +
                    </div>
 
                     <ul class="navbar-nav mr-auto">
 
                     <ul class="navbar-nav mr-auto">
 
                         <li class="nav-item">
 
                         <li class="nav-item">
Line 563: Line 608:
 
                             <a href="#page-top">Results</a>
 
                             <a href="#page-top">Results</a>
 
                             <a href="#page-top">Safety</a>
 
                             <a href="#page-top">Safety</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto">
 +
                        <li class="nav-item">
 +
                            PROJECT
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto">
 +
                        <li class="nav-item">
 +
                            PROJECT
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto">
 +
                        <li class="nav-item">
 +
                            PROJECT
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto">
 +
                        <li class="nav-item">
 +
                            PROJECT
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto">
 +
                        <li class="nav-item">
 +
                            PROJECT
 
                         </li>
 
                         </li>
 
                     </ul>
 
                     </ul>
Line 568: Line 638:
 
             </div>
 
             </div>
 
             <!-- Parts collapsed -->
 
             <!-- Parts collapsed -->
−
             <div class="collapse" id="collapseParts">
+
             <div class="collapse collapsedMenu" id="collapseParts">
 
                 <div class="container">
 
                 <div class="container">
 +
                    <div class="height-support">
 +
                    </div>
 
                     <ul class="navbar-nav mr-auto">
 
                     <ul class="navbar-nav mr-auto">
 
                         <li class="nav-item">
 
                         <li class="nav-item">
Line 578: Line 650:
 
                             <a href="#page-top">Improved parts</a>
 
                             <a href="#page-top">Improved parts</a>
 
                             <a href="#page-top">Parts list</a>
 
                             <a href="#page-top">Parts list</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto">
 +
                        <li class="nav-item">
 +
                            PARTS
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto">
 +
                        <li class="nav-item">
 +
                            PARTS
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto">
 +
                        <li class="nav-item">
 +
                            PARTS
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto">
 +
                        <li class="nav-item">
 +
                            PARTS
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto">
 +
                        <li class="nav-item">
 +
                            PARTS
 
                         </li>
 
                         </li>
 
                     </ul>
 
                     </ul>
Line 583: Line 680:
 
             </div>
 
             </div>
 
             <!-- People collapsed -->
 
             <!-- People collapsed -->
−
             <div class="collapse" id="collapsePeople">
+
             <div class="collapse collapsedMenu" id="collapsePeople">
 
                 <div class="container" id="collapsedMenu">
 
                 <div class="container" id="collapsedMenu">
 +
                    <div class="height-support">
 +
                    </div>
 
                     <ul class="navbar-nav mr-auto">
 
                     <ul class="navbar-nav mr-auto">
 
                         <li class="nav-item">
 
                         <li class="nav-item">
−
 
+
                            <a href="#page-top">Overview</a>
 +
                            <a href="#page-top">Team</a>
 +
                            <a href="#page-top">Attributions</a>
 +
                            <a href="#page-top">Collaborations</a>
 +
                            <a href="#page-top">Sponsors</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto">
 +
                        <li class="nav-item">
 +
                            PEOPLE
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto">
 +
                        <li class="nav-item">
 +
                            PEOPLE
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto">
 +
                        <li class="nav-item">
 +
                            PEOPLE
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto">
 +
                        <li class="nav-item">
 +
                            PEOPLE
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto">
 +
                        <li class="nav-item">
 +
                            PEOPLE
 
                         </li>
 
                         </li>
 
                     </ul>
 
                     </ul>
Line 593: Line 721:
 
             </div>
 
             </div>
 
             <!-- HP collapsed -->
 
             <!-- HP collapsed -->
−
             <div class="collapse" id="collapseHP">
+
             <div class="collapse collapsedMenu" id="collapseHP">
 
                 <div class="container">
 
                 <div class="container">
 +
                    <div class="height-support">
 +
                    </div>
 
                     <ul class="navbar-nav mr-auto">
 
                     <ul class="navbar-nav mr-auto">
 
                         <li class="nav-item">
 
                         <li class="nav-item">
Line 603: Line 733:
 
                             <a href="#page-top">Public Engagement</a>
 
                             <a href="#page-top">Public Engagement</a>
  
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto">
 +
                        <li class="nav-item">
 +
                            HUMAN PRACTICES
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto">
 +
                        <li class="nav-item">
 +
                            HUMAN PRACTICES
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto">
 +
                        <li class="nav-item">
 +
                            HUMAN PRACTICES
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto">
 +
                        <li class="nav-item">
 +
                            HUMAN PRACTICES
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto">
 +
                        <li class="nav-item">
 +
                            HUMAN PRACTICES
 
                         </li>
 
                         </li>
 
                     </ul>
 
                     </ul>
Line 608: Line 763:
 
             </div>
 
             </div>
 
             <!-- Modeling collapsed -->
 
             <!-- Modeling collapsed -->
−
             <div class="collapse" id="collapseModeling">
+
             <div class="collapse collapsedMenu" id="collapseModeling">
 
                 <div class="container">
 
                 <div class="container">
 +
                    <div class="height-support">
 +
                    </div>
 
                     <ul class="navbar-nav mr-auto">
 
                     <ul class="navbar-nav mr-auto">
 
                         <li class="nav-item">
 
                         <li class="nav-item">
Line 616: Line 773:
 
                             <a href="#page-top">Software Tool</a>
 
                             <a href="#page-top">Software Tool</a>
 
                             <a href="#page-top">Lac Operon</a>
 
                             <a href="#page-top">Lac Operon</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto">
 +
                        <li class="nav-item">
 +
                            MODELING
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto">
 +
                        <li class="nav-item">
 +
                            MODELING
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto">
 +
                        <li class="nav-item">
 +
                            MODELING
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto">
 +
                        <li class="nav-item">
 +
                            MODELING
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto">
 +
                        <li class="nav-item">
 +
                            MODELING
 
                         </li>
 
                         </li>
 
                     </ul>
 
                     </ul>
Line 630: Line 812:
 
             <section id="intro">
 
             <section id="intro">
 
                 <video autoplay muted loop>
 
                 <video autoplay muted loop>
−
                     <source src="https://static.igem.org/mediawiki/2018/d/d7/T--Tec-Monterrey--videoTec.mp4">
+
                     <source src="/Videos/videoTec.mp4">
 
                 </video>
 
                 </video>
 
                 <div class="container text-center my-auto" style="position: relative;">
 
                 <div class="container text-center my-auto" style="position: relative;">
Line 786: Line 968:
 
         <!-- Optional JavaScript -->
 
         <!-- Optional JavaScript -->
 
         <!-- jQuery first, then Popper.js, then Bootstrap JS -->
 
         <!-- jQuery first, then Popper.js, then Bootstrap JS -->
−
         <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+
         <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 
         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
 
         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
 
         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
 
         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
 +
       
 +
        <!-- Script controls collapsedMenus -->
 +
        <script>
 +
           
 +
       
 +
            var href;
 +
            /*
 +
            $(".navbar-linkContainer").mouseenter(function(){
 +
                //$(href).collapse('hide');
 +
                href = $(this).find("a").attr('href');
 +
                $(href).collapse('show');
 +
               
 +
               
 +
                $(href).mouseleave(function(){
 +
                    $(href).collapse('hide');
 +
                });
 +
            });
 +
           
 +
            $(".navbar-linkContainer").mouseleave(function(){
 +
                $(href).not($ mouseenter(function(){
 +
                    $(href).collapse('hide');
 +
                });
 +
            }));
 +
           
 +
            */
 +
           
 +
            $(".navbar-linkContainer").mouseenter(function(){
 +
                $('#navBar').css('background','#eef');
 +
            });
 +
           
 +
            $(".navbar-linkContainer").mouseleave(function(){
 +
                $('#navBar').css('background','linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)');
 +
            });
 +
           
 +
            $(".navbar-linkContainer").mouseenter(function(){
 +
                $(href).collapse('hide');
 +
                href = $(this).find("a").attr('href');
 +
                $(href).collapse('show');
 +
               
 +
               
 +
                $(href).mouseleave(function(){
 +
                    $(href).collapse('hide');
 +
                });
 +
            });
 +
           
 +
            $(".navbar-linkContainer").mouseleave(function(){
 +
                $(href).collapse('hide');
 +
            });
 +
           
 +
        </script>
 
     </body>
 
     </body>
 
</html>
 
</html>

Revision as of 01:28, 17 July 2018

<!doctype html>

  • PROJECT
  • PROJECT
  • PROJECT
  • PROJECT
  • PROJECT
  • PEOPLE
  • PEOPLE
  • PEOPLE
  • PEOPLE
  • PEOPLE
  • HUMAN PRACTICES
  • HUMAN PRACTICES
  • HUMAN PRACTICES
  • HUMAN PRACTICES
  • HUMAN PRACTICES
  • MODELING
  • MODELING
  • MODELING
  • MODELING
  • MODELING

iGEM: Tec de Monterrey

Project: E-Coding

Learn about the project

E-Coding

Description of the project

Know the team

Learn about us

TEAM

Leader 1

Name 1

Redesigned

Freshly redesigned for Bootstrap 4.

Favorited

Millions of users Start Bootstrap!

Question

I mustache you a question...

Welcome to your next website!

Download Now!

The buttons below are impossible to resist...

Click Me! Look at Me!