Difference between revisions of "Template:Swiper"

 
(13 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 253: Line 256:
 
         /* HOME banner slides */
 
         /* HOME banner slides */
 
         .swiper-slide > img {
 
         .swiper-slide > img {
−
             height: 380px;
+
             height: 480px;
 
             background-position: center;
 
             background-position: center;
 
             background-repeat: no-repeat;
 
             background-repeat: no-repeat;
Line 275: Line 278:
 
             align-items: center;
 
             align-items: center;
 
         }
 
         }
−
         .swiper-button-prev.x0{
+
        .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");
 
             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 {
+
         .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");
 
             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");
 
         }
 
         }
Line 310: Line 319:
  
 
             .swiper-container {
 
             .swiper-container {
−
                 height: 400px;
+
                 height: 350px;
 
             }
 
             }
−
             .swiper-pagination-bullet {
+
             .swiper-slide > img {
−
                width: 10px;
+
                 height: 350px;
−
                 height: 10px;
+
 
             }
 
             }
 
         }
 
         }
  
−
         /* 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 337: Line 348:
 
             .container table {
 
             .container table {
 
                 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");
 +
            }
 +
        }
 +
        /* IF THE SCREEN IS LESS THAN 320PX */
 +
        @media only screen and (max-width: 320px) {
 +
            .swiper-container {
 +
                height: 280px;
 +
            }
 +
            .swiper-slide > img {
 +
                height: 280px;
 
             }
 
             }
 
         }
 
         }
Line 403: 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