Difference between revisions of "Template:Swiper"

 
(17 intermediate revisions by the same user not shown)
Line 140: Line 140:
 
         }
 
         }
  
 +
        .nav>li>a {
 +
            padding: 15px 10px;
 +
        }
 
         .navbar-default .navbar-nav > li > a {
 
         .navbar-default .navbar-nav > li > a {
 
             color: white;
 
             color: white;
Line 190: Line 193:
 
         .section {
 
         .section {
 
             margin: 25px 0;
 
             margin: 25px 0;
−
        }
 
−
 
−
        /* HOME banner slides */
 
−
        .home-banner-image-1 {
 
−
            width: 100%;
 
−
            height: 400px;
 
−
            background-position: center;
 
−
            background-image: url(https://static.igem.org/mediawiki/2017/7/76/Rohrlightupthepipe.png);
 
−
            background-repeat: no-repeat;
 
−
            background-size: contain;
 
 
         }
 
         }
  
Line 254: Line 247:
 
                 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 274: Line 316:
 
             .container table {
 
             .container table {
 
                 width: calc(100% - 50px);
 
                 width: calc(100% - 50px);
 +
            }
 +
 +
            .swiper-container {
 +
                height: 350px;
 +
            }
 +
            .swiper-slide > img {
 +
                height: 350px;
 
             }
 
             }
 
         }
 
         }
  
−
         /* IF THE SCREEN IS LESS THAN 320PX */
+
         /* IF THE SCREEN IS LESS THAN 414PX */
−
         @media only screen and (max-width: 320px) {
+
         @media only screen and (max-width: 414px) {
 +
            body {
 +
                margin-top: 36px;
 +
            }
 
             h1 {
 
             h1 {
 
                 font-size: 44px;
 
                 font-size: 44px;
Line 297: Line 349:
 
                 width: calc(100% - 10px);
 
                 width: calc(100% - 10px);
 
             }
 
             }
−
        }
 
  
−
        /** SWIPER SLIDER **/
+
            .swiper-container {
−
        .swiper-container {
+
                height: 310px;
−
             width: 100%;
+
             }
−
             height: 460px;
+
            .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");
 +
            }
 
         }
 
         }
−
         .swiper-slide {
+
         /* IF THE SCREEN IS LESS THAN 320PX */
−
            text-align: center;
+
        @media only screen and (max-width: 320px) {
−
            font-size: 18px;
+
             .swiper-container {
−
            /* Center slide text vertically */
+
                height: 280px;
−
            display: -webkit-box;
+
             }
−
            display: -ms-flexbox;
+
             .swiper-slide > img {
−
             display: -webkit-flex;
+
                height: 280px;
−
            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-prev.x0{
 
−
            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.x0 {
 
−
            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;
 
−
        }
 
−
 
 
     </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>
Line 399: Line 436:
 
                         <li><a href="https://2017.igem.org/Team:Stuttgart/Keratinases">Keratinases</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/Rose and Limonene Fragrance">Rose and Limonene Fragrance</a></li>
−
                         <li><a href="https://2017.igem.org/Team:Stuttgart/Demonstrate">Demonstrate</a></li>
+
                         <li><a href="https://2017.igem.org/Team:Stuttgart/Demonstrate">Achievements</a></li>
 
                         <!--<li role="separator" class="divider"></li>-->
 
                         <!--<li role="separator" class="divider"></li>-->
 
                     </ul>
 
                     </ul>

Latest revision as of 07:51, 15 December 2017