Difference between revisions of "Template:Home"

 
(54 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<head>
 +
    <!-- This tells the browser that your page is responsive -->
 +
    <meta name="viewport" content="width=device-width, initial-scale=1">
 +
 
     <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"
 
     <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"
 
           id="bootstrap-css">
 
           id="bootstrap-css">
 
     <style>
 
     <style>
  
−
      /* Clear the default wiki settings */
+
        /* Clear the default wiki settings */
 
         #home_logo, #sideMenu {
 
         #home_logo, #sideMenu {
 
             display: none;
 
             display: none;
Line 40: Line 43:
 
         }
 
         }
  
−
        /* font and text */
+
        /* font and text */
 
         h1,
 
         h1,
 
         h2,
 
         h2,
Line 46: Line 49:
 
         h4,
 
         h4,
 
         h5 {
 
         h5 {
−
             border:0;
+
             border: 0;
−
             color: #F8CE63;
+
             color: #ebc163;
 
             font-weight: 200;
 
             font-weight: 200;
 
         }
 
         }
Line 54: Line 57:
 
         h2,
 
         h2,
 
         h3 {
 
         h3 {
−
             margin-top: 14px;
+
             margin-top: 24px;
 
             margin-bottom: 14px;
 
             margin-bottom: 14px;
 
         }
 
         }
  
 
         h1 {
 
         h1 {
−
            color: #ebc163;
 
 
             font-size: 50px;
 
             font-size: 50px;
 
         }
 
         }
Line 66: Line 68:
 
         }
 
         }
 
         h3 {
 
         h3 {
 +
            color: #111;
 
             font-size: 30px;
 
             font-size: 30px;
 
         }
 
         }
Line 73: Line 76:
 
         h5 {
 
         h5 {
 
             font-size: 20px;
 
             font-size: 20px;
 +
        }
 +
 +
        .container {
 +
            display: none;
 +
        }
 +
        .container p {
 +
            line-height: 24px;
 +
            font-size: 16px;
 +
            color: #333;
 +
            text-align: justify;
 +
        }
 +
        .img-responsive {
 +
            padding-bottom: 25px;
 
         }
 
         }
  
Line 79: Line 95:
 
             list-style: square outside none !important;
 
             list-style: square outside none !important;
 
             font-size: 16px;
 
             font-size: 16px;
−
             margin: 20px 0 10px 40px;
+
             margin: 20px 0 25px 36px;
 
         }
 
         }
  
Line 86: Line 102:
 
         }
 
         }
  
−
         .container p {
+
        /* TABLE STYLES */
−
             line-height: 24px;
+
         .container table {
−
             font-size: 16px;
+
             margin: 0;
−
             color: #333;
+
            width: calc(100% - 100px);
 +
        }
 +
        .container table th{
 +
            padding: 4px;
 +
             font-weight: bold;
 +
        }
 +
        .container table td{
 +
             padding: 4px;
 
         }
 
         }
  
Line 96: Line 119:
 
             border: 0;
 
             border: 0;
 
         }
 
         }
−
 
 
         .navbar-default {
 
         .navbar-default {
 
             margin-top: 15px;
 
             margin-top: 15px;
Line 114: Line 136:
 
         .navbar-default .navbar-nav > li > a {
 
         .navbar-default .navbar-nav > li > a {
 
             color: white;
 
             color: white;
 +
            text-transform: uppercase;
 
         }
 
         }
  
Line 119: Line 142:
 
         .navbar-default .navbar-nav > li > a:hover,
 
         .navbar-default .navbar-nav > li > a:hover,
 
         .navbar-default .navbar-nav > .dropdown > a .caret:hover {
 
         .navbar-default .navbar-nav > .dropdown > a .caret:hover {
−
             color: #F8CE63;
+
             color: #ebc163;
 
         }
 
         }
  
Line 125: Line 148:
 
         .navbar-default .navbar-nav > .open > a:hover,
 
         .navbar-default .navbar-nav > .open > a:hover,
 
         .navbar-default .navbar-nav > .open > a:focus {
 
         .navbar-default .navbar-nav > .open > a:focus {
−
             color: #F8CE63;
+
             color: #ebc163;
 
             background-color: #444;
 
             background-color: #444;
 
         }
 
         }
Line 137: Line 160:
 
             border: 0;
 
             border: 0;
 
         }
 
         }
 +
 
         .dropdown-menu > li > a {
 
         .dropdown-menu > li > a {
 
             color: white;
 
             color: white;
Line 145: Line 169:
 
             color: #111;
 
             color: #111;
 
             text-decoration: none;
 
             text-decoration: none;
−
             background-color: #F8CE63;
+
             background-color: #ebc163;
 
         }
 
         }
  
Line 154: Line 178:
 
         }
 
         }
  
−
         .navbar-nav>li>.dropdown-menu {
+
         .navbar-nav > li > .dropdown-menu {
 
             background-color: #444;
 
             background-color: #444;
 
         }
 
         }
Line 163: Line 187:
  
 
         /* HOME banner */
 
         /* HOME banner */
−
         .home-banner-image:hover{
+
         .home-banner-image:hover {
 
             -webkit-animation: swing 2s ease;
 
             -webkit-animation: swing 2s ease;
 
             animation: swing 2s ease;
 
             animation: swing 2s ease;
Line 172: Line 196:
 
             /*transform: rotateZ(32deg);*/
 
             /*transform: rotateZ(32deg);*/
 
         }
 
         }
 +
 
         .home-banner-image {
 
         .home-banner-image {
−
             width:100%;
+
             width: 100%;
 
             height: 440px;
 
             height: 440px;
 
             background-position: center;
 
             background-position: center;
Line 180: Line 205:
 
             background-size: contain;
 
             background-size: contain;
 
         }
 
         }
−
         @-webkit-keyframes swing
+
 
−
        {
+
         @-webkit-keyframes swing {
−
             15%
+
             15% {
−
            {
+
 
                 -webkit-transform: translateX(5px);
 
                 -webkit-transform: translateX(5px);
 
                 transform: translateX(5px);
 
                 transform: translateX(5px);
 
             }
 
             }
−
             30%
+
             30% {
−
            {
+
 
                 -webkit-transform: translateX(-5px);
 
                 -webkit-transform: translateX(-5px);
 
                 transform: translateX(-5px);
 
                 transform: translateX(-5px);
 
             }
 
             }
−
             50%
+
             50% {
−
            {
+
 
                 -webkit-transform: translateX(3px);
 
                 -webkit-transform: translateX(3px);
 
                 transform: translateX(3px);
 
                 transform: translateX(3px);
 
             }
 
             }
−
             65%
+
             65% {
−
            {
+
 
                 -webkit-transform: translateX(-3px);
 
                 -webkit-transform: translateX(-3px);
 
                 transform: translateX(-3px);
 
                 transform: translateX(-3px);
 
             }
 
             }
−
             80%
+
             80% {
−
            {
+
 
                 -webkit-transform: translateX(2px);
 
                 -webkit-transform: translateX(2px);
 
                 transform: translateX(2px);
 
                 transform: translateX(2px);
 
             }
 
             }
−
             100%
+
             100% {
−
            {
+
 
                 -webkit-transform: translateX(0);
 
                 -webkit-transform: translateX(0);
 
                 transform: translateX(0);
 
                 transform: translateX(0);
 
             }
 
             }
 
         }
 
         }
−
         @keyframes swing
+
 
−
        {
+
         @keyframes swing {
−
             15%
+
             15% {
−
            {
+
 
                 -webkit-transform: translateX(5px);
 
                 -webkit-transform: translateX(5px);
 
                 transform: translateX(5px);
 
                 transform: translateX(5px);
 
             }
 
             }
−
             30%
+
             30% {
−
            {
+
 
                 -webkit-transform: translateX(-5px);
 
                 -webkit-transform: translateX(-5px);
 
                 transform: translateX(-5px);
 
                 transform: translateX(-5px);
 
             }
 
             }
−
             50%
+
             50% {
−
            {
+
 
                 -webkit-transform: translateX(3px);
 
                 -webkit-transform: translateX(3px);
 
                 transform: translateX(3px);
 
                 transform: translateX(3px);
 
             }
 
             }
−
             65%
+
             65% {
−
            {
+
 
                 -webkit-transform: translateX(-3px);
 
                 -webkit-transform: translateX(-3px);
 
                 transform: translateX(-3px);
 
                 transform: translateX(-3px);
 
             }
 
             }
−
             80%
+
             80% {
−
            {
+
 
                 -webkit-transform: translateX(2px);
 
                 -webkit-transform: translateX(2px);
 
                 transform: translateX(2px);
 
                 transform: translateX(2px);
 
             }
 
             }
−
             100%
+
             100% {
−
            {
+
 
                 -webkit-transform: translateX(0);
 
                 -webkit-transform: translateX(0);
 
                 transform: translateX(0);
 
                 transform: translateX(0);
Line 249: Line 262:
 
         /* IF THE SCREEN IS LESS THAN 1200PX */
 
         /* IF THE SCREEN IS LESS THAN 1200PX */
 
         @media only screen and (max-width: 1024px) {
 
         @media only screen and (max-width: 1024px) {
−
 
  
 
         }
 
         }
Line 255: Line 267:
 
         /* IF THE SCREEN IS LESS THAN 768PX */
 
         /* IF THE SCREEN IS LESS THAN 768PX */
 
         @media only screen and (max-width: 768px) {
 
         @media only screen and (max-width: 768px) {
−
             .navbar-default .navbar-nav .open .dropdown-menu>li>a {
+
             .navbar-default .navbar-nav .open .dropdown-menu > li > a {
 
                 color: #ddd;
 
                 color: #ddd;
 
             }
 
             }
−
             .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus,
+
 
−
             .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
+
             .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus,
−
                 color: #F8CE63;
+
             .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
 +
                 color: #ebc163;
 +
            }
 +
 
 +
            .container table {
 +
                width: calc(100% - 50px);
 
             }
 
             }
 
         }
 
         }
Line 266: Line 283:
 
         /* IF THE SCREEN IS LESS THAN 320PX */
 
         /* IF THE SCREEN IS LESS THAN 320PX */
 
         @media only screen and (max-width: 320px) {
 
         @media only screen and (max-width: 320px) {
−
 
+
            h1 {
−
 
+
                font-size: 44px;
 +
            }
 +
            h2 {
 +
                font-size: 34px;
 +
            }
 +
            h3 {
 +
                font-size: 28px;
 +
            }
 +
            h4 {
 +
                font-size: 20px;
 +
            }
 +
            h5 {
 +
                font-size: 16px;
 +
            }
 +
            .container table {
 +
                width: calc(100% - 10px);
 +
            }
 
         }
 
         }
  
 
     </style>
 
     </style>
−
     <script type="application/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
+
     <script type="application/javascript"
 +
            src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
  
−
     <script>
+
     <script type="application/javascript">
−
         $(document).ready(function(){
+
         $(document).ready(function () {
 
             /* remove igem mess */
 
             /* remove igem mess */
−
             $("#content").removeClass("mw-body");
+
             $("#content").removeClass("mw-body").attr("id", "");
−
            $("#content").attr("id", "");
+
             $("#mw-content-text").removeClass("mw-content-ltr").attr("id", "");
−
             $("#mw-content-text").removeClass("mw-content-ltr");
+
−
            $("#mw-content-text").attr("id", "");
+
 
             $("#HQ_page").attr("id", "");
 
             $("#HQ_page").attr("id", "");
 
             $("#bodyContent").attr("id", "");
 
             $("#bodyContent").attr("id", "");
 
             $("#globalWrapper").attr("id", "");
 
             $("#globalWrapper").attr("id", "");
 +
        });
 +
        $(window).load(function () {
 +
            setTimeout(function () {
 +
                $(".container").fadeIn();
 +
            }, 150);
 +
            $("#home_logo").remove();
 +
            $("#sideMenu").remove();
 +
            $("#top_title").remove();
 +
            $("#patrollink").remove();
 
         });
 
         });
 
     </script>
 
     </script>
−
 
−
 
−
    <!-- This tells the browser that your page is responsive -->
 
−
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
−
 
 
</head>
 
</head>
 
<body>
 
<body>
Line 339: Line 375:
 
                         <li><a href="https://2017.igem.org/Team:Stuttgart/InterLab">Interlab Study</a></li>
 
                         <li><a href="https://2017.igem.org/Team:Stuttgart/InterLab">Interlab Study</a></li>
 
                         <li><a href="https://2017.igem.org/Team:Stuttgart/Model">Modelling</a></li>
 
                         <li><a href="https://2017.igem.org/Team:Stuttgart/Model">Modelling</a></li>
−
                         <li><a href="https://2017.igem.org/Team:Stuttgart/Results">Results</a></li>
+
                         <li><a href="https://2017.igem.org/Team:Stuttgart/Composite Part">Composite Part</a></li>
−
                         <li><a href="https://2017.igem.org/Team:Stuttgart/Parts">Parts</a></li>
+
                         <li><a href="https://2017.igem.org/Team:Stuttgart/Safety">Safety</a></li>
 
                         <!--<li role="separator" class="divider"></li>-->
 
                         <!--<li role="separator" class="divider"></li>-->
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
−
                 <li>
+
                 <li class="dropdown">
−
                     <a href="https://2017.igem.org/Team:Stuttgart/Safety">Safety</a>
+
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
 +
                      aria-expanded="false">Results <span class="caret"></span></a>
 +
                    <ul class="dropdown-menu">
 +
                        <!--<li class="navbar-text navbar-left">Dry Lab</li>-->
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Esterases and Lipases">Esterases and Lipases</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Keratinases">Keratinases</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Rose and Limonene Fragrance">Rose and Limonene Fragrance</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Demonstrate">Achievements</a></li>
 +
                        <!--<li role="separator" class="divider"></li>-->
 +
                    </ul>
 
                 </li>
 
                 </li>
 
                 <li class="dropdown">
 
                 <li class="dropdown">
Line 373: Line 418:
 
     </div><!-- /.container-fluid -->
 
     </div><!-- /.container-fluid -->
 
</nav>
 
</nav>
−
 
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 07:52, 15 December 2017