Difference between revisions of "Template:Home"

Line 4: Line 4:
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
  
−
    <!-- Link Swiper's CSS -->
+
     <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"
−
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.3/css/swiper.min.css">
+
          id="bootstrap-css">
−
 
+
−
     <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
+
 
     <style>
 
     <style>
  
Line 88: Line 86:
 
             color: #333;
 
             color: #333;
 
             text-align: justify;
 
             text-align: justify;
−
        }
 
−
        .container .text-center p {
 
−
            text-align: center;
 
 
         }
 
         }
 
         .img-responsive {
 
         .img-responsive {
Line 124: Line 119:
 
             border: 0;
 
             border: 0;
 
         }
 
         }
−
 
 
         .navbar-default {
 
         .navbar-default {
 
             margin-top: 15px;
 
             margin-top: 15px;
Line 140: Line 134:
 
         }
 
         }
  
−
        .nav>li>a {
 
−
            padding: 15px 10px;
 
−
        }
 
 
         .navbar-default .navbar-nav > li > a {
 
         .navbar-default .navbar-nav > li > a {
 
             color: white;
 
             color: white;
Line 193: Line 184:
 
         .section {
 
         .section {
 
             margin: 25px 0;
 
             margin: 25px 0;
 +
        }
 +
 +
        /* HOME banner */
 +
        .home-banner-image:hover {
 +
            -webkit-animation: swing 2s ease;
 +
            animation: swing 2s ease;
 +
            -webkit-animation-iteration-count: 2;
 +
            animation-iteration-count: 2;
 +
            /*-webkit-transform: rotateZ(32deg);*/
 +
            /*-ms-transform: rotateZ(32deg);*/
 +
            /*transform: rotateZ(32deg);*/
 +
        }
 +
 +
        .home-banner-image {
 +
            width: 100%;
 +
            height: 440px;
 +
            background-position: center;
 +
            background-image: url(https://static.igem.org/mediawiki/2017/7/76/Rohrlightupthepipe.png);
 +
            background-repeat: no-repeat;
 +
            background-size: contain;
 
         }
 
         }
  
Line 247: Line 258:
 
                 transform: translateX(0);
 
                 transform: translateX(0);
 
             }
 
             }
−
        }
 
−
 
−
        /** SWIPER SLIDER **/
 
−
        .swiper-container {
 
−
            width: 100%;
 
−
            height: 480px;
 
−
        }
 
−
        /* HOME banner slides */
 
−
        .swiper-slide > img {
 
−
            height: 480px;
 
−
            background-position: center;
 
−
            background-repeat: no-repeat;
 
−
            background-size: contain;
 
−
        }
 
−
        .swiper-slide {
 
−
            text-align: center;
 
−
            font-size: 18px;
 
−
            /* Center slide text vertically */
 
−
            display: -webkit-box;
 
−
            display: -ms-flexbox;
 
−
            display: -webkit-flex;
 
−
            display: flex;
 
−
            -webkit-box-pack: center;
 
−
            -ms-flex-pack: center;
 
−
            -webkit-justify-content: center;
 
−
            justify-content: center;
 
−
            -webkit-box-align: center;
 
−
            -ms-flex-align: center;
 
−
            -webkit-align-items: center;
 
−
            align-items: center;
 
−
        }
 
−
        .swiper-button-next {
 
−
            right: 2%;
 
−
        }
 
−
        .swiper-button-prev {
 
−
            left: 2%;
 
−
        }
 
−
        .swiper-button-prev.swiper-button-black{
 
−
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23202020'%2F%3E%3C%2Fsvg%3E");
 
−
        }
 
−
        .swiper-button-next.swiper-button-black {
 
−
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23202020'%2F%3E%3C%2Fsvg%3E");
 
−
        }
 
−
        .swiper-pagination-bullet {
 
−
            width: 12px;
 
−
            height: 12px;
 
−
        }
 
−
        .swiper-pagination-bullet-active {
 
−
            background: #ebc163;
 
 
         }
 
         }
  
Line 316: Line 278:
 
             .container table {
 
             .container table {
 
                 width: calc(100% - 50px);
 
                 width: calc(100% - 50px);
−
            }
 
−
 
−
            .swiper-container {
 
−
                height: 350px;
 
−
            }
 
−
            .swiper-slide > img {
 
−
                height: 350px;
 
−
            }
 
−
            .swiper-pagination-bullet {
 
−
                width: 10px;
 
−
                height: 10px;
 
 
             }
 
             }
 
         }
 
         }
  
 
         /* IF THE SCREEN IS LESS THAN 320PX */
 
         /* IF THE SCREEN IS LESS THAN 320PX */
−
         @media only screen and (max-width: 414px) {
+
         @media only screen and (max-width: 320px) {
 
             h1 {
 
             h1 {
 
                 font-size: 44px;
 
                 font-size: 44px;
Line 350: Line 301:
 
                 width: calc(100% - 10px);
 
                 width: calc(100% - 10px);
 
             }
 
             }
 +
        }
  
−
            .swiper-container {
 
−
                height: 310px;
 
−
            }
 
−
            .swiper-slide > img {
 
−
                height: 310px;
 
−
            }
 
−
            .swiper-button-prev.swiper-button-black{
 
−
                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
 
−
            }
 
−
            .swiper-button-next.swiper-button-black {
 
−
                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
 
−
            }
 
−
        }
 
 
     </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 type="application/javascript">
 +
        $(document).ready(function () {
 +
            /* remove igem mess */
 +
            $("#content").removeClass("mw-body").attr("id", "");
 +
            $("#mw-content-text").removeClass("mw-content-ltr").attr("id", "");
 +
            $("#HQ_page").attr("id", "");
 +
            $("#bodyContent").attr("id", "");
 +
            $("#globalWrapper").attr("id", "");
 +
        });
 +
        $(window).load(function () {
 +
            setTimeout(function () {
 +
                $(".container").fadeIn();
 +
            }, 150);
 +
            $("#home_logo").remove();
 +
            $("#sideMenu").remove();
 +
            $("#top_title").remove();
 +
            $("#patrollink").remove();
 +
        });
 +
    </script>
 
</head>
 
</head>
 
<body>
 
<body>
Line 458: Line 418:
 
     </div><!-- /.container-fluid -->
 
     </div><!-- /.container-fluid -->
 
</nav>
 
</nav>
−
 
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 00:14, 2 November 2017