Difference between revisions of "Template:Freiburg/Home"

 
(9 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
<style>
+
<head>
  
    /********************************* MENU ********************************/
+
</head>
    /* Wrapper for the menu */
+
  
    /* Remove margins and padding from the list, and add a black background color */
+
<body>
  
     .clearfix:after {
+
      
        display:block;
+
        clear:both;
+
    }
+
  
    /*----- Menu Outline -----*/
 
    .menu-wrap {
 
      /* width:100%;*/
 
/*        box-shadow:0px 1px 3px rgba(255, 197, 0, 0.2);*/
 
        color: #3e0a11;
 
    }
 
  
    .menu {
+
<p style="text-align: center;">
        /*width:1500px;*/
+
        padding:10px 16px;
+
        margin-left:20%;
+
    }
+
 
+
    .menu li {
+
        margin:20x;
+
        list-style:none;
+
        padding:4px 4px;
+
 
+
    }
+
 
+
    .menu a {
+
        font-size:20px;
+
        font-family: 'Bad Script', cursive;
+
        font-weight: bold;
+
        letter-spacing: 3px;
+
        transition:all linear 0.15s;
+
        color:white;
+
        background-color: #bca8ab;
+
        text-decoration:none;
+
/*        -webkit-border-radius: 10px 10px 10px 10px;*/
+
        border-radius: 15px 15px 15px 15px;
+
    }
+
 
+
    .menu li:hover > a, .menu .current-item > a {
+
        text-decoration:none;
+
        color: #be740d;
+
    }
+
 
+
    .menu .arrow {
+
        font-size:10px;
+
        line-height:0%;
+
    }
+
 
+
    /*----- Top Level -----*/
+
    .menu > ul > li {
+
        float:left;
+
        display:inline-block;
+
        position:relative;
+
        font-size:12px;
+
/*        color: black;*/
+
       
+
    }
+
 
+
    .menu > ul > li > a {
+
        padding:12px 22px;
+
        display:inline-block;
+
/*        text-shadow:0px 1px 0px rgba(0,0,0,0.4);*/
+
 
+
       
+
 
+
    }
+
 
+
    .menu > ul > li:hover > a, .menu > ul > .current-item > a {
+
/*        background:#2e2728;*/
+
        margin-bottom:-5px;
+
    }
+
 
+
    /*----- Bottom Level -----*/
+
    .menu li:hover .sub-menu {
+
        z-index:1;
+
        opacity:1;
+
    }
+
 
+
    .sub-menu {
+
        width:600px;
+
        font-size:20px;
+
        position:absolute;
+
        top:30px;
+
        left:-150px;
+
        z-index:-1;
+
        opacity:0;
+
        transition:opacity linear 0.15s;
+
/*        box-shadow:0px 2px 3px rgba(0,0,0,0.2);*/
+
/*        background:#2e2728;*/
+
    }
+
 
+
    .sub-menu li {
+
        display:inline-block;
+
        padding:20px 2px;
+
 
+
    }
+
 
+
    .sub-menu li a {
+
        padding:6px 15px;
+
        display:inline-block;
+
        background: #a08488;
+
 
+
        /*padding:12px 22px;*/
+
    }
+
 
+
    .sub-menu li a:hover, .sub-menu .current-item a {
+
/*        background:#3e3436;*/
+
    }
+
 
+
 
+
 
+
</style>
+
 
+
 
+
 
+
 
+
<!--- THIS IS WHERE THE HTML BEGINS --->
+
 
+
 
+
<!-- This tells the browser that your page is responsive -->
+
 
+
<head>
+
    <meta name="viewport" content="width=device-width, initial-scale=1">
+
  <link href="https://fonts.googleapis.com/css?family=Bad+Script" rel="stylesheet">
+
</head>
+
 
+
<body>
+
<p style="text-align: center">
+
 
     <a href="https://2016.igem.org/Team:Freiburg">
 
     <a href="https://2016.igem.org/Team:Freiburg">
 
         <img src="https://static.igem.org/mediawiki/2016/8/84/T--Freiburg--Logo.png" style="width:300px"/>
 
         <img src="https://static.igem.org/mediawiki/2016/8/84/T--Freiburg--Logo.png" style="width:300px"/>
Line 141: Line 16:
  
  
<p style="text-align: center">
+
</div>  
  
  
<div class="menu-wrap" >
 
    <nav class="menu">
 
 
 
        <ul class="clearfix">
 
 
            <li class="menu_item" >
 
                <a href=" https://2016.igem.org/Team:Freiburg/Team"> Team  </a>
 
                <ul class="sub-menu">
 
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Team">  Team </a> </li>
 
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Attributions">  Attributions </a> </li>
 
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Achievements">  Achievements </a> </li>
 
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Pictures">  Pictures </a> </li>
 
 
                </ul>
 
            </li>
 
 
            <li class="menu_item">
 
                <a href="https://2016.igem.org/Team:Freiburg/Description"> Project <span class="arrow"></span></a>
 
                <ul class="sub-menu">
 
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Description"> Project </a></li>
 
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Motivation"> Motivation </a></li>
 
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Goals"> Goals </a></li>
 
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Outreach"> Outreach </a></li>
 
                </ul>
 
            </li>
 
 
            <li class="menu_item">
 
              <a href="https://2016.igem.org/Team:Freiburg/Methods"> Methods <span class="arrow"></span></a>
 
                <ul class="sub-menu">
 
 
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Methods"> Methods </a></li>
 
                    <li> <a href="https://2016.igem.org/Team:Freiburg/B_subtilis"> Bacillus subtilis </a></li>
 
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Experiments"> Protocols </a></li>
 
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Notebook"> Journal </a></li>
 
                 
 
       
 
                </ul>
 
            </li>
 
 
            <li class="menu_item">
 
                <a href="https://2016.igem.org/Team:Freiburg/Results"> Results <span class="arrow"></span></a>
 
                <ul class="sub-menu">
 
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Results"> Results </a></li>
 
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Proof"> Proof of Concept </a></li>
 
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Data"> Data </a></li>
 
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Biobricks"> Biobricks </a></li>
 
                 
 
                </ul>
 
            </li>
 
 
 
            <li class="menu_item">
 
                <a href="https://2016.igem.org/Team:Freiburg/Safety"> Safety <span class="arrow"></span></a>
 
                <ul class="sub-menu">
 
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Safety"> General </a></li>
 
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Knockouts"> Knock Outs </a></li>
 
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Killswitch"> Kill Switch </a></li>
 
 
                </ul>
 
            </li>
 
 
 
            <li class="menu_item">
 
                <a href="https://2016.igem.org/Team:Freiburg/Human_Practices"> Human Practices <span class="arrow"></span> </a>
 
                <ul class="sub-menu">
 
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Human_Practices"> General </a></li>
 
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Integrated_Practices"> Integrated </a></li>
 
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Collaborations"> Collaborations </a></li>
 
                </ul>
 
            </li>
 
 
        </ul>
 
    </nav>
 
</div>
 
</p>
 
  
 
</body>
 
</body>
 
 
<script>
 
 
    // This is the jquery part of your template.  Try not modify any of this code since it makes your menu work.
 
 
 
 
 
</script>
 
  
 
</html>
 
</html>

Latest revision as of 19:09, 18 October 2016