Difference between revisions of "Team:NKU China"

Line 4: Line 4:
 
      
 
      
 
     <!--separatrix-->
 
     <!--separatrix-->
−
      
+
     <link rel="stylesheet" href="https://2016.igem.org/Template:NKU_China/css/wowslider/Home-team?action=raw&ctype=text/css">
 
     <style>
 
     <style>
 
         .main#home {
 
         .main#home {
Line 26: Line 26:
  
 
         .main#home .p {
 
         .main#home .p {
−
             font-size: 1.2rem;
+
             font-size:1.2rem;
 
         }
 
         }
  
 
         section {
 
         section {
−
             margin-top: 5rem;
+
             margin-top:5rem;
 
         }
 
         }
 
     </style>
 
     </style>
 
     <style>
 
     <style>
 
         #introduction-carousel {
 
         #introduction-carousel {
−
             margin: auto;
+
             margin:auto;
 
             position: relative;
 
             position: relative;
 
             z-index: 3;
 
             z-index: 3;
Line 41: Line 41:
  
 
         #introduction-carousel img {
 
         #introduction-carousel img {
−
             width: 100%;
+
             width:100%;
 
         }
 
         }
  
Line 57: Line 57:
 
     <style>
 
     <style>
 
         #project {
 
         #project {
−
             padding: 0 7vw;
+
             padding:0 7vw;
 
         }
 
         }
  
 
         #project article, #project > div:nth-child(2) {
 
         #project article, #project > div:nth-child(2) {
−
             display: inline-block;
+
             display:inline-block;
−
             vertical-align: top;
+
             vertical-align:top;
 
         }
 
         }
  
Line 70: Line 70:
  
 
         #project article .p {
 
         #project article .p {
−
             margin: 0.5rem 0;
+
             margin:0.5rem 0;
 
         }
 
         }
  
 
         #project > div:nth-child(2) {
 
         #project > div:nth-child(2) {
−
             width: 50vw;
+
             width:50vw;
−
             margin-left: 3vw;
+
             margin-left:3vw;
 
         }
 
         }
  
 
         #project .inline-accordion .ui-accordion-content {
 
         #project .inline-accordion .ui-accordion-content {
−
             height: 11rem;
+
             height:11rem;
 
         }
 
         }
  
Line 87: Line 87:
  
 
         #project > div:nth-child(2) .p {
 
         #project > div:nth-child(2) .p {
−
             background-color: transparent;
+
             background-color:transparent;
 
             padding: 0.95rem;
 
             padding: 0.95rem;
 
         }
 
         }
Line 97: Line 97:
  
 
         #result #figure-wrapper {
 
         #result #figure-wrapper {
−
             padding: 2rem 2vw 0 2vw;
+
             padding:2rem 2vw 0 2vw;
 
             display: flex;
 
             display: flex;
 
             justify-content: space-between;
 
             justify-content: space-between;
Line 113: Line 113:
 
         #result #figure-wrapper figure img {
 
         #result #figure-wrapper figure img {
 
             width: 100%;
 
             width: 100%;
−
             z-index: 3;
+
             z-index:3;
−
             position: relative;
+
             position:relative;
 
         }
 
         }
  
Line 120: Line 120:
 
             filter: opacity(0.3);
 
             filter: opacity(0.3);
 
             -webkit-filter: opacity(0.3);
 
             -webkit-filter: opacity(0.3);
 +
           
 
         }
 
         }
  
Line 146: Line 147:
  
 
         #result #figure-wrapper figure figcaption .h3 {
 
         #result #figure-wrapper figure figcaption .h3 {
−
             font-size: 1.6rem;
+
             font-size:1.6rem;
 
             margin: 0.6rem 0;
 
             margin: 0.6rem 0;
 
         }
 
         }
  
 
         #result #figure-wrapper figure figcaption .h4 {
 
         #result #figure-wrapper figure figcaption .h4 {
−
             font-size: 1.2rem;
+
             font-size:1.2rem;
−
             font-weight: normal;
+
             font-weight:normal;
 
         }
 
         }
 
     </style>
 
     </style>
Line 196: Line 197:
 
             height: 12vw;
 
             height: 12vw;
 
         }
 
         }
−
     </style>
+
     </style>  
 
     <script>
 
     <script>
−
         function adjust_carousel() {
+
         function window_resize() {
−
             create_menu_placeholder()
+
             function adjust(id, W, H) {
−
 
+
                var jquery = $(id);
−
            var carousel = $('#introduction-carousel');
+
                var margin = 1.2 * rem;
−
 
+
                //width and height
−
            var width = $('#home').width() - 0.2 * rem;
+
                var width = $('#home').width() - margin;
−
            var height = $(window).height() - 18 - $('#menu-bar-placeholder').height() - 0.2 * rem;
+
                var height = 0;
−
            if (width > height / 9 * 16) {
+
                if (document.location.href == 'https://2016.igem.org/Team:NKU_China')
−
                carousel.height(height);
+
                    height = $(window).height() - 18 - $('#menu-bar-placeholder').height() - margin;
−
                 carousel.width(height / 9 * 16);
+
                else
 +
                    height = $(window).height() - margin;
 +
                log(id+' height '+height)
 +
                //adjust width and height
 +
                if (width > height / H * W) {
 +
                    jquery.height(height);
 +
                    jquery.width(height / H * W);
 +
                 }
 +
                else {
 +
                    jquery.width(width);
 +
                    jquery.height(width / W * H);
 +
                }
 
             }
 
             }
−
            else {
 
−
                carousel.width(width);
 
−
                carousel.height(width / 16 * 9);
 
−
            }
 
−
 
−
        }
 
−
 
−
        function adjust_wowslider() {
 
−
            var wowslider = $('#wowslider-wrapper');
 
−
 
−
            var width = $(window).width() / 100 * 96;
 
−
            var height = $(window).height() - 18 - 3 * rem;
 
−
            log('Height' + $(window).height())
 
−
            log('rem' + rem);
 
−
            log('width' + width);
 
−
            log('height' + height);
 
−
 
−
            if (width > height / 3 * 4) {
 
−
                wowslider.height(height);
 
−
                wowslider.width(height / 3 * 4);
 
−
            }
 
−
            else {
 
−
                wowslider.width(width);
 
−
                wowslider.height(width / 4 * 3);
 
−
            }
 
−
 
−
 
  
 +
            if (document.location.href == 'https://2016.igem.org/Team:NKU_China')
 +
                create_menu_placeholder();
 +
            adjust('#introduction-carousel', 16, 9);
 +
            adjust('#wowslider-wrapper', 4, 3);
 
         }
 
         }
 
     </script>
 
     </script>
Line 243: Line 232:
 
             $('#introduction-carousel').carousel();
 
             $('#introduction-carousel').carousel();
  
−
             adjust_carousel();
+
             window_resize();
−
             $(window).resize(adjust_carousel);
+
             $(window).resize(window_resize);
  
 
             //particles();
 
             //particles();
Line 372: Line 361:
  
 
);
 
);
−
     </script>
+
     </script>  
 
     <div class="main" id="home">
 
     <div class="main" id="home">
 
         <div id="introduction-carousel" class="carousel slide" data-ride="carousel">
 
         <div id="introduction-carousel" class="carousel slide" data-ride="carousel">
Line 510: Line 499:
 
             </div>
 
             </div>
 
         </section>
 
         </section>
−
          
+
         <section id="wowslider-wrapper">
 +
            <div id="wowslider-container1">
 +
                <div class="ws_images">
 +
                    <ul>
 +
                        <li><img src="https://static.igem.org/mediawiki/2016/a/ad/T--NKU_China--1000-750-chenlingyi.jpg" alt="slider" title="chenlingyi" id="wows1_0" /></li>
 +
                        <li><img src="https://static.igem.org/mediawiki/2016/e/ed/T--NKU_China--1000-750-chenchen.jpg" alt="chenchen" title="chenchen" id="wows1_1" /></li>
 +
                    </ul>
 +
                </div>
 +
                <div class="ws_bullets">
 +
                    <div>
 +
                        <a href="#" title="chenlingyi"><span>1</span></a>
 +
                        <a href="#" title="chenchen"><span>2</span></a>
 +
                    </div>
 +
                </div>
 +
                <div class="ws_shadow"></div>
 +
            </div>
 +
            <script type="text/javascript" src="https://2016.igem.org/Template:NKU_China/js/wowslider?action=raw&ctype=text/javascript"></script>
 +
            <script type="text/javascript" src="https://2016.igem.org/Template:NKU_China/js/script/Home-team?action=raw&ctype=text/javascript"></script>
 +
        </section>
 
     </div>
 
     </div>
 
</body>
 
</body>
 
</html>
 
</html>
 
{{NKU_China/footer}}
 
{{NKU_China/footer}}

Revision as of 16:17, 7 October 2016

Our projects
We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you.
We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place.
Our Goals
IMPRESSIVE TEMPLATE
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
TONS OF FEATURES
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
CREATIVE LAYOUT
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
Owesome Experiment Results
We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you.
John Doe
Graphic Designer
John Doe
Graphic Designer
John Doe
Graphic Designer
HP
This is the outline of our human practice.
  • slider
  • chenchen
1 2