Difference between revisions of "Template:CSMU Taiwan"

Line 1: Line 1:
 
<html>
 
<html>
−
<style>
 
−
   
 
−
 
 
−
@import url('https://fonts.googleapis.com/css?family=Raleway');
 
−
   
 
−
 
 
  
−
     a{
+
<head>
−
     text-decoration:none;
+
     <!-- External scripts -->
 +
     <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
 +
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
 +
    <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,700' rel='stylesheet' type='text/css'>
 +
    <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>
 +
    <!-- Functionallity and behaviour JS -->
 +
    <script>
 +
    $(document).ready(function() {
 +
        //Loading screen functionallity
 +
        $('.loading').animate({ opacity: 0 },
 +
            500,
 +
            function() {
 +
                $('.loading').attr("style", "display:none");
 +
            }
 +
        );
 +
        //Height responsiveness
 +
        $(window).resize(function() {
 +
            wheight = $(window).height();
 +
            $('.container').attr("style", "height:" + (wheight) + "px;background-size:cover;");
 +
            $('.team-member-container').attr("style", "height:" + wheight / 2.7 + "px;");
 +
        });
 +
        $(window).trigger('resize');
 +
        //Menu moveto container on item click functionallity
 +
        $('.menu-item').on('click', function() {
 +
            $('.menu-item').removeClass('subselected');
 +
            $(this).addClass('subselected');
 +
            if ($(this).attr("data") == "#top") {
 +
                $('html, body').animate({
 +
                    scrollTop: 0
 +
                }, 1000);
 +
            } else {
 +
                $('html, body').animate({
 +
                    scrollTop: $($(this).attr("data")).offset().top - 70
 +
                }, 1000);
 +
            }
 +
        });
 +
        //Hover of team members
 +
        $('.team-member-container').on('mouseenter', function() {
 +
            $(this).children('.team-member-photo').attr("style", "background-image:url('" + $(this).attr("hover") + "');");
 +
            $(this).on('mouseleave', function() {
 +
                $(this).children('.team-member-photo').attr('style', "background-image:url('" + $(this).attr("data") + "');");
 +
            });
 +
        });
 +
 
 +
    });
 +
    </script>
 +
    <style>
 +
    #sideMenu,
 +
    #top_title {
 +
        display: none;
 
     }
 
     }
−
   
+
 
−
    ul
+
     #content {
−
     {
+
        padding: 0px;
−
    margin: 0;
+
        width: 90%;
−
    padding: 0;
+
        margin-top: -7px;
−
    list-style-type: none;
+
        margin-left: 5%;
 +
        margin-right: 5%
 
     }
 
     }
−
   
+
 
−
    .menu
+
     body {
−
     {  
+
        background-color: white;
−
    font-family:'Raleway', sans-serif;
+
−
    font-size :20px;
+
−
    font-weight:normal;
+
−
    margin:0px;
+
 
     }
 
     }
−
      
+
 
−
     .menu>li
+
    #bodyContent h1,
−
     {
+
    #bodyContent h2,
−
  float: left;
+
     #bodyContent h3,
 +
     #bodyContent h4,
 +
     #bodyContent h5 {
 +
        margin-bottom: 0px;
 
     }
 
     }
−
   
+
 
−
     .menu li
+
     body,
−
     {position: relative;
+
     html {
−
    padding: 0px;
+
        margin: 0;
−
    border: none;
+
        padding: 0;
−
    min-width :150px;
+
        font-family: font-family: 'Yanone Kaffeesatz', sans-serif;
−
       
+
 
     }
 
     }
−
      
+
 
−
     .menu ul
+
     /* REMOVE UNWANTED ELEMENTS AND STYLE OTHERS */
−
    {
+
     .firstHeading {
−
    position: absolute;
+
        display: none;
−
    z-index:10;
+
−
    top:100%;
+
−
    display:none;
+
 
     }
 
     }
−
   
+
 
−
    .menu a 
+
     #top-section {
−
     {
+
        background: #48af5d;
−
    display: block;
+
        margin-left: 0 !important;
−
    padding:5px20px;
+
        width: 100%;
−
    text-decoration: none;
+
        left: 0;
−
    color: #2485b9;
+
 
     }
 
     }
−
      
+
 
−
     .menu a:hover
+
 
−
    {
+
     /* LOADING SCREEN */
−
    color:#8a18ed;
+
     .loading {
 +
        position: fixed;
 +
        width: 100%;
 +
        height: 100%;
 +
        top: 0;
 +
        left: 0;
 +
 
 +
        z-index: 5;
 +
 
 +
        background-color: #555;
 +
        color: #fff;
 +
        text-align: center;
 
     }
 
     }
−
   
+
 
−
     .menu li:hover>ul{
+
     .loading p {
−
         display:block;
+
         position: relative;
 +
        width: 100%;
 +
        height: 10%;
 +
        top: 45%;
 +
        left: 0;
 
     }
 
     }
−
   
 
  
−
      
+
     /* MENU STYLING */
−
</style>
+
    .menu {
 +
        position: fixed;
 +
        width: 100%;
 +
        height: 56px;
 +
        top: 14px;
 +
        background-color: #57b5b5;
 +
 
 +
        z-index: 4;
 +
 
 +
        border-collapse: collapse;
 +
        text-align: center;
 +
    }
 +
 
 +
    .menu tr td {
 +
        text-align: center;
 +
        vertical-align: middle;
 +
 
 +
        font-weight: 700;
 +
        font-size: 16px;
 +
        color: #fff;
 +
        width: 7%;
 +
    }
 +
 
 +
    .menu tr td.menu-item:hover {
 +
        background-color: #429797;
 +
        cursor: pointer;
 +
    }
 +
 
 +
    .subselected {
 +
        background-color: #429797;
 +
    }
 +
 
 +
    /* CONTAINERS STYLING */
 +
    .container {
 +
        position: relative;
 +
        width: 100%;
 +
        top: 50px;
 +
    }
 +
 
 +
    .container .subcontainer {
 +
        position: absolute;
 +
        width: 95%;
 +
        height: 90%;
 +
        top: 5%;
 +
        left: 2.5%;
 +
    }
 +
 
 +
    #top {
 +
        background-size: cover;
 +
 
 +
        overflow: hidden;
 +
    }
 +
 
 +
    /* TEAM MEMBERS CARDS STYLING */
 +
    .team-member-container {
 +
        position: relative;
 +
        width: 14%;
 +
        margin-left: 2.28%;
 +
 
 +
        float: left;
 +
    }
 +
 
 +
    .team-member-container:hover {
 +
        cursor: pointer;
 +
    }
 +
 
 +
    .row2 {
 +
        top: 4%;
 +
    }
 +
 
 +
    .team-member-container .team-member-photo {
 +
        position: relative;
 +
        width: 100%;
 +
        height: 85%;
 +
        top: 0;
 +
        left: 0;
 +
        background-size: cover;
 +
    }
 +
 
 +
    .team-member-container .team-member-footer {
 +
        position: relative;
 +
        width: 100%;
 +
        height: 15%;
 +
        top: 0;
 +
        left: 0;
 +
 
 +
        border: none;
 +
        border-collapse: collapse;
 +
        background-color: #57b5b5;
 +
        color: #fff;
 +
 
 +
        text-align: center;
 +
        vertical-align: middle;
 +
    }
 +
 
 +
    body {
 +
        padding-top: 110px;
 +
    }
 +
 
 +
    .center-block {
 +
        display: block;
 +
        margin-left: auto;
 +
        margin-right: auto;
 +
    }
 +
 
 +
 
 +
    .navbar-fixed-top {
 +
        background: #fff;
 +
        filter: none !important;
 +
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
 +
        -moz-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
 +
        -webkit-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
 +
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
 +
 
 +
    }
 +
 
 +
 
 +
    .dropdown-submenu {
 +
        position: relative;
 +
    }
 +
 
 +
    .dropdown-submenu>.dropdown-menu {
 +
        top: 0;
 +
        left: 100%;
 +
        margin-top: -6px;
 +
        margin-left: -1px;
 +
        -webkit-border-radius: 0 6px 6px 6px;
 +
        -moz-border-radius: 0 6px 6px;
 +
        border-radius: 0 6px 6px 6px;
 +
    }
 +
 
 +
    .dropdown-submenu:hover>.dropdown-menu {
 +
        display: block;
 +
    }
 +
 
 +
    .dropdown-submenu>a:after {
 +
        display: block;
 +
        content: " ";
 +
        float: right;
 +
        width: 0;
 +
        height: 0;
 +
        border-color: transparent;
 +
        border-style: solid;
 +
        border-width: 5px 0 5px 5px;
 +
        border-left-color: #ccc;
 +
        margin-top: 5px;
 +
        margin-right: -10px;
 +
    }
 +
 
 +
    .dropdown-submenu:hover>a:after {
 +
        border-left-color: #fff;
 +
    }
 +
 
 +
    .dropdown-submenu.pull-left {
 +
        float: none;
 +
    }
 +
 
 +
    .dropdown-submenu.pull-left>.dropdown-menu {
 +
        left: -100%;
 +
        margin-left: 10px;
 +
        -webkit-border-radius: 6px 0 6px 6px;
 +
        -moz-border-radius: 6px 0 6px 6px;
 +
        border-radius: 6px 0 6px 6px;
 +
 
 +
 
 +
 
 +
        .faceBot {
 +
            background: #202020;
 +
        }
 +
 
 +
        @font-face {
 +
            font-family: 'Open Sans', Arial;
 +
            ;
 +
        }
 +
 
 +
        body {
 +
            font-family: 'Open Sans', Arial;
 +
        }
 +
 
 +
        ul.nav a {
 +
            color: gray;
 +
            background-color: transparent;
 +
            height: 100%;
 +
            position: relative;
 +
        }
 +
 
 +
        ul.nav a:hover {
 +
            color: gray;
 +
            background-color: transparent;
 +
            height: 100%;
 +
            position: relative;
 +
        }
 +
 
 +
        h2 {
 +
            color: green;
 +
        }
 +
 
 +
        h4 {
 +
            font-weight: bold;
 +
        }
 +
 
 +
        .menu-item {
 +
            height: 75px;
 +
        }
 +
 
 +
        li.menu-item {
 +
            background: transparent !important;
 +
        }
 +
 
 +
 
 +
 
 +
        .green-effect {
 +
            display: none;
 +
            background-color: #4AAF51;
 +
            opacity: 1;
 +
            color: #FFF;
 +
            transition-property: all;
 +
            transition-duration: 0.3s;
 +
            transition-timing-function: ease-out;
 +
            transition-delay: 0s;
 +
            border-color: #288D30;
 +
            position: absolute;
 +
            bottom: 0px;
 +
            width: 100%;
 +
            height: 2px;
 +
            right: 0px;
 +
        }
 +
 
 +
        .logo {
 +
            margin-top: 100px;
 +
 
 +
        }
 +
 
 +
        a:hover .green-effect {
 +
            display: inherit;
 +
        }
 +
 
 +
        .invertir:hover {
 +
            -webkit-filter: invert(100%);
 +
        }
 +
 
 +
        dropdown-toggle {
 +
            width: 10%;
 +
 
 +
 
 +
 
 +
        }
 +
    }
 +
    .nav li a {
 +
        font-size: 18px;
 +
        color: #57b5b5;
 +
      } 
 +
    nav ul li ul li a {
 +
        display: block; padding: 15px 25px;
 +
        color: #57b5b5 !important; text-decoration: none;
 +
        font-size: 20px;
 +
      }
 +
      nav ul li:hover > ul {
 +
        display: block;
 +
      }
 +
         
 +
       
 +
             
 +
    </style>
 +
</head>
 +
 
 +
<body>
 +
    <div class="navbar navbar-fixed-top" style="margin-top:15px">
 +
        <nav class="navbar-inner">
 +
            <div class="row-sm-height">
 +
                <div class="col-sm-2"><a href="https://2019.igem.org/Team:CSMU_Taiwan"><img class="logo" src="logo.png" height="auto" width="100"></a></div>
 +
                <div class="col-md-9">
 +
                    <ul class="nav navbar-nav" style="margin-top:5px">
 +
                        <li>
 +
                            <a href="https://2019.igem.org/Team:CSMU_Taiwan/Team" class="dropdown-toggle" data-toggle="dropdown">Team<b class="caret"></b>
 +
                            </a>
 +
                            <ul class="dropdown-menu multi-level">
 +
                                <li><a href="https://2019.igem.org/Team:CSMU_Taiwan/Member">Member</a></li>
 +
                                <li><a href="https://2019.igem.org/Team:CSMU_Taiwan/Attributions">Attributions </a></li>
 +
                                <li><a href="https://2019.igem.org/Team:CSMU_Taiwan/Collaboration">Collaboration </a></li>
  
 +
                            </ul>
 +
                        </li>
 +
                        <li>
 +
                            <a href="https://2019.igem.org/Team:CSMU_Taiwan/Project" class="dropdown-toggle" data-toggle="dropdown">Project <b class="caret"></b></a>
 +
                            <ul class="dropdown-menu multi-level">
 +
                                <li><a href="https://2019.igem.org/Team:CSMU_Taiwan/Background">Background</a></li>
 +
                                <!--<li class="divider"></li> use to draw a line-->
 +
                               
 +
                                <li><a href="https://2019.igem.org/Team:CSMU_Taiwan/Design">Design</a></li>
 +
                                <li><a href="https://2019.igem.org/Team:CSMU_Taiwan/Experiment">Experiment</a></li>
 +
                                <li><a href="https://2019.igem.org/Team:CSMU_Taiwan/Result">Result</a></li>
 +
                                <li><a href="https://2019.igem.org/Team:CSMU_Taiwan/Notebook">Notebook</a></li>
 +
                                <li><a href="https://2019.igem.org/Team:CSMU_Taiwan/Safety">Safety</a></li>
 +
                                <!-- submenu
 +
                                <li class="dropdown-submenu">
 +
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Keep Fresh</a>
 +
                                    <ul class="dropdown-menu">
 +
                                        <li><a href="https://2019.igem.org/Team:CSMU_Taiwan/Design">Applied Design</a></li>
 +
                                        <li><a href="https://2019.igem.org/Team:CSMU_Taiwan/Entrepreneurship">Business Plan</a></li>
 +
                                    </ul>
 +
                                </li>
 +
                                -->
 +
                            </ul>
 +
                        </li>
 +
                       
 +
                        <li class="menu-item">
 +
                            <a href="https://2019.igem.org/Team:CSMU_Taiwan/Model">
 +
                                Model <span class="green-effect"></span>
 +
                            </a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 +
                                Part <span class="green-effect"></span>
 +
                            </a>
 +
                           
 +
                        </li>
 +
                        <li>
 +
                        <li>
 +
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 +
                                Software <span class="green-effect"></span>
 +
                            </a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="https://2019.igem.org/Team:CSMU_Taiwan/Achievements" class="dropdown-toggle" data-toggle="dropdown">
 +
                                Achievements <b class="caret"></b>
 +
                            </a>
 +
                            <ul class="dropdown-menu multi-level">
 +
                                <li><a href="https://2019.igem.org/Team:CSMU_Taiwan/Parts"> Parts</a></li>
 +
                                <li><a href="https://2019.igem.org/Team:CSMU_Taiwan/Medals">Medals</a></li>
 +
                            </ul>
 +
                        </li>
  
−
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
                        <li>
−
<!--- Content of the page  --->
+
                            <a href="https://2019.igem.org/Team:CSMU_Taiwan/Human_Practices" class="dropdown-toggle" data-toggle="dropdown">Human Practices<b class="caret"></b>
−
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
                            </a>
 +
                            <ul class="dropdown-menu multi-level">
 +
                                <li><a href="https://2019.igem.org/Team:CSMU_Taiwan/Gerenal_HP">Gerenal HP</a></li>
 +
                                <li><a href="https://2019.igem.org/Team:CSMU_Taiwan/Integrated_HP">Integrated HP</a></li>
 +
                                <li><a href="https://2019.igem.org/Team:CSMU_Taiwan/Entrepreneurship">Entrepreneurship</a></li>
 +
                            </ul>
 +
                        </li>
 +
                    </ul>
 +
                </div>
 +
        </nav>
 +
    </div>
 +
    <html>

Revision as of 03:43, 2 June 2019