Difference between revisions of "Team:NKU China"

Line 20: Line 20:
 
         #wowslider-container1 {
 
         #wowslider-container1 {
 
             margin:0;
 
             margin:0;
 +
        }
 +
    </style>
 +
    <style>
 +
        #slider1 {
 +
            margin: 8vh 8vw;
 +
            letter-spacing: 0.025rem;
 +
            line-height: 1.42857143;
 +
        }
 +
 +
        #slider1 > .h1 {
 +
            margin: 1.5rem 0;
 +
            font-size: 2rem;
 +
            font-family: 'Arvo',serif;
 +
            font-weight: 400;
 +
            line-height: 1.1;
 +
            color: rgb(44,62,80);
 +
        }
 +
 +
        #slider1 > .p {
 +
            text-indent: 0;
 +
            text-align: center;
 +
            font-family: 'Raleway',serif;
 +
            font-weight: 300;
 +
            width: 48vw;
 +
            margin: 0 auto;
 +
        }
 +
 +
        #slider1 > div:nth-child(3) {
 +
            margin: 4rem auto;
 +
            display: flex;
 +
            justify-content: space-around;
 +
            align-content: space-around;
 +
            flex-wrap: wrap;
 +
        }
 +
 +
        #slider1 > div:nth-child(3) div {
 +
            margin: auto;
 +
            width: 10vw;
 +
            position: relative;
 +
        }
 +
 +
        #slider1 > div:nth-child(3) div img {
 +
            width: 100%;
 +
        }
 +
 +
        #slider1 > div:nth-child(3) div img:nth-child(2) {
 +
            position: absolute;
 +
            top: 3vw;
 +
            left: 2vw;
 +
            width: 6vw;
 +
        }
 +
    </style>
 +
    <style>
 +
        #slider5 {
 +
            line-height: 1.42857143;
 +
            padding: 7vh 0 0 0;
 +
            background-color: #EDEEF0;
 +
        }
 +
 +
        #slider5 .h1, #slider5 .h2 {
 +
            font-family: "Lato", Arial, Verdana;
 +
            font-weight: 100;
 +
            color: #444649;
 +
        }
 +
 +
        #slider5 .p {
 +
            text-indent: 0;
 +
            color: #939393;
 +
            font-family: 'Open Sans',sans-serif;
 +
            font-weight: 300;
 +
            font-size: 0.95rem;
 +
            text-align: center;
 +
        }
 +
 +
        #slider5 > .h1 {
 +
            font-size: 2rem;
 +
            padding: 0.56rem 0;
 +
        }
 +
 +
        #slider5 > .p {
 +
            padding: 0 23vw;
 +
        }
 +
 +
        #slider5 > div:last-child {
 +
            padding: 2rem 0 20vh 0;
 +
            display: flex;
 +
            justify-content: space-between;
 +
            align-content: space-around;
 +
            flex-wrap: wrap;
 +
        }
 +
 +
        #slider5 > div:last-child .h2 {
 +
            font-size: 1.35rem;
 +
            margin: 0.6rem 0;
 +
        }
 +
 +
        #slider5 > div:last-child figure {
 +
            margin: 0;
 +
            padding: 0;
 +
            width: 32vw;
 +
            height: 21.3vw;
 +
        }
 +
 +
        #slider5 > div:last-child > figure img {
 +
            width: 100%;
 +
        }
 +
 +
        #slider5 > div:last-child > figure:nth-child(1) img {
 +
            filter: brightness(25%);
 +
            -webkit-filter: brightness(25%);
 +
        }
 +
 +
        #slider5 > div:last-child > figure:nth-child(2) img {
 +
            filter: grayscale(90%);
 +
            -webkit-filter: grayscale(90%);
 +
        }
 +
 +
        #slider5 > div:last-child > figure:nth-child(3) img {
 +
            filter: invert(90%);
 +
            -webkit-filter: invert(80%);
 +
        }
 +
 +
        #slider5 > div:last-child > figure:hover img {
 +
            filter: none;
 +
            -webkit-filter: none;
 +
        }
 +
 +
        #slider5 > div:last-child > figure figcaption {
 +
            visibility: hidden;
 +
        }
 +
 +
        #slider5 > div:last-child > figure:hover figcaption {
 +
            visibility: visible;
 +
        }
 +
    </style>
 +
    <style>
 +
        #slider3 {
 +
            line-height: 1.42857143;
 +
            padding: 5vh 0 4vh 0;
 +
            background-color: white;
 +
            letter-spacing: 0.025rem;
 +
        }
 +
 +
        #slider3 .p {
 +
            font-family: 'Raleway',serif;
 +
            font-weight: 300;
 +
            text-indent: 0;
 +
            text-align: center;
 +
            font-size: 1rem;
 +
        }
 +
 +
        #slider3 > div:first-child {
 +
            margin: 0 24vw;
 +
        }
 +
 +
        #slider3 > div:first-child .h2 {
 +
            line-height: 1.1;
 +
            font-family: 'Arvo',serif;
 +
            font-weight: 400;
 +
            font-size: 2rem;
 +
            margin: 0.8rem 0;
 +
        }
 +
 +
        #slider3 > div:nth-child(2) {
 +
            margin: 5vh auto;
 +
            width: 86vw;
 +
            height: 28vw;
 +
            display: flex;
 +
            justify-content: space-around;
 +
            align-content: space-around;
 +
            flex-wrap: wrap;
 +
        }
 +
 +
        #slider3 > div:nth-child(2) img {
 +
            border-radius: 0.2rem;
 +
            display: block;
 +
            margin: auto;
 +
            width: 18vw;
 +
            height: 12vw;
 +
        }
 +
    </style>
 +
    <style>
 +
        #slider6 {
 +
            line-height: 1.42857143;
 +
            padding: 10vh 8vw;
 +
            display: flex;
 +
            justify-content: space-between;
 +
            align-content: space-around;
 +
            flex-wrap: wrap;
 +
        }
 +
 +
        #slider6 .h1, #slider6 .h2 {
 +
            text-align: left;
 +
            font-family: "Lato", Arial, Verdana;
 +
            font-weight: 100;
 +
            color: #444649;
 +
            line-height: 1.1;
 +
            text-transform: uppercase;
 +
        }
 +
 +
        #slider6 .h1 {
 +
            font-size: 2rem;
 +
            margin-bottom: 2.5rem;
 +
        }
 +
 +
        #slider6 > div {
 +
            width: 26vw;
 +
        }
 +
 +
        #slider6 > div:first-child .p {
 +
            color: #939393;
 +
            font-family: 'Open Sans',sans-serif;
 +
            font-weight: 300;
 +
            font-size: 0.95rem;
 +
            margin-bottom: 0.5rem;
 +
        }
 +
 +
        #slider6 > div:nth-child(2) .ui-accordion-header {
 +
            padding: 0;
 +
            border-radius: 0;
 +
            background: #EDEEF0;
 +
        }
 +
 +
        #slider6 > div:nth-child(2) .ui-accordion-header span {
 +
            display: none;
 +
        }
 +
 +
        #slider6 > div:nth-child(2) .ui-accordion-content {
 +
            border-radius: 0;
 +
        }
 +
 +
        #slider6 > div:nth-child(2) > div:nth-child(2) div {
 +
            border-color: #ddd;
 +
        }
 +
 +
        #slider6 > div:nth-child(2) > div:nth-child(2) .h2 {
 +
            color: rgb(51, 51, 51);
 +
            transition: all 0.4s ease 0s;
 +
            font-family: "Lato", Arial, Verdana;
 +
            font-weight: 300;
 +
            padding: 0.55rem 0.95rem;
 +
        }
 +
 +
        #slider6 > div:nth-child(2) > div:nth-child(2) .p {
 +
            font-size: 0.95rem;
 +
            color: #333;
 +
            font-family: "Lato", Arial, Verdana;
 +
            background: white;
 +
            padding: 0.95rem;
 +
        }
 +
 +
        #slider6 > div:nth-child(3) {
 +
        }
 +
 +
        #slider6 > div:nth-child(3) > div > div {
 +
            width: 100%;
 +
            margin-bottom: 2rem;
 +
        }
 +
 +
        #slider6 > div:nth-child(3) > div > div > div {
 +
            position: relative;
 +
            height: 1rem;
 +
        }
 +
 +
        #slider6 > div:nth-child(3) > div > div > div span {
 +
            font-size: 1rem;
 +
            line-height: 1.9px;
 +
            font-family: "Lato", Arial, Verdana;
 +
            color: #333;
 +
        }
 +
 +
        #slider6 > div:nth-child(3) > div > div > div span:first-child {
 +
            position: absolute;
 +
            top: 0;
 +
            left: 0;
 +
        }
 +
 +
        #slider6 > div:nth-child(3) > div > div > div span:last-child {
 +
            position: absolute;
 +
            top: 0;
 +
            right: 0;
 +
        }
 +
 +
        #slider6 > div:nth-child(3) > div > div > progress {
 +
            width: 100%;
 +
        }
 +
    </style>
 +
    <style>
 +
        #slider4 {
 +
            background-image: url('resource/2/map-bottom.png');
 +
            width: 100%;
 +
            height: 40vh;
 +
        }
 +
 +
        #slider4 div:first-child {
 +
            padding: 5vh 16vw;
 +
            display: flex;
 +
            justify-content: space-around;
 +
            align-content: space-around;
 +
            flex-wrap: wrap;
 +
        }
 +
 +
        #slider4 div:first-child img {
 +
            width: 20vw;
 +
            height: 7vw;
 +
        }
 +
 +
        #slider4 .p {
 +
            padding: 10vh 0 0 0;
 +
            text-align: center;
 
         }
 
         }
 
     </style>
 
     </style>
Line 42: Line 352:
 
     <div id="ruler" style="display:none;width:1vw;height:1vh;"></div>
 
     <div id="ruler" style="display:none;width:1vw;height:1vh;"></div>
 
     <main>
 
     <main>
 +
        <div id="slider1">
 +
            <div class="h1">
 +
                Amazing Features
 +
            </div>
 +
            <div class="p">
 +
                Product is packed with everything you may ever need. Product is packed with everything
 +
                you may ever need. Product is packed with everything you may ever need.
 +
            </div>
 +
            <div>
 +
                <div>
 +
                    <img src="resource/2/hex.png">
 +
                    <a href="#slider6"><img src="resource/2/retina.png"></a>
 +
                </div>
 +
                <div>
 +
                    <img src="resource/2/hex.png">
 +
                    <a href="#slider5"><img src="resource/2/support.png"></a>
 +
                </div>
 +
                <div>
 +
                    <img src="resource/2/hex.png">
 +
                    <a href="#slider3"><img src="resource/2/speed.png"></a>
 +
                </div>
 +
                <div>
 +
                    <img src="resource/2/hex.png">
 +
                    <a href="#wowslider-wrapper"><img src="resource/2/social.png"></a>
 +
                </div>
 +
                <div>
 +
                    <img src="resource/2/hex.png">
 +
                    <a href="#slider4"><img src="resource/2/shopping.png"></a>
 +
                </div>
 +
                <div>
 +
                    <img src="resource/2/hex.png">
 +
                    <img src="resource/2/cloud.png">
 +
                </div>
 +
            </div>
 +
        </div>
 +
        <div id="slider6">
 +
         
 +
            <div>
 +
                <div class="h1">
 +
                    Our projects
 +
                </div>
 +
                <div class="p">
 +
                    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.
 +
                </div>
 +
                <div class="p">
 +
                    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.
 +
                </div>
 +
            </div>
 +
            <div>
 +
                <div class="h1">
 +
                    Our Goals
 +
                </div>
 +
                <div>
 +
                    <div class="h2">
 +
                        IMPRESSIVE TEMPLATE
 +
                    </div>
 +
                    <div class="p">
 +
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
 +
                    </div>
 +
                    <div class="h2">
 +
                        TONS OF FEATURES
 +
                    </div>
 +
                    <div class="p">
 +
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
 +
                    </div>
 +
                    <div class="h2">
 +
                        CREATIVE LAYOUT
 +
                    </div>
 +
                    <div class="p">
 +
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
 +
                    </div>
 +
                </div>
 +
                <script>
 +
                    $("#slider6 > div:nth-child(2) > div:nth-child(2)").accordion();
 +
                </script>
 +
            </div>
 +
            <div>
 +
                <div class="h1">
 +
                    Our Goals
 +
                </div>
 +
                <div>
 +
                    <div>
 +
                        <div><span>HTML</span><span>40%</span></div>
 +
                        <progress value="40" max="100"></progress>
 +
                    </div>
 +
                    <div>
 +
                        <div><span>Graphic </span><span>20%</span></div>
 +
                        <progress value="20" max="100"></progress>
 +
                    </div>
 +
                    <div>
 +
                        <div><span>JS </span><span>60%</span></div>
 +
                        <progress value="60" max="100"></progress>
 +
                    </div>
 +
                </div>
 +
 +
            </div>
 +
        </div>
 +
        <div id="slider5">
 +
            <div class="h1">
 +
                There're our experiment results!
 +
            </div>
 +
            <div class="p">
 +
                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.
 +
            </div>
 +
            <div>
 +
                <figure>
 +
                    <img src="resource/1/c-1.jpg">
 +
                    <figcaption>
 +
                        <div class="h2">
 +
                            John Doe
 +
                        </div>
 +
                        <div class="p">
 +
                            Graphic Designer
 +
                        </div>
 +
                    </figcaption>
 +
                </figure>
 +
                <figure>
 +
                    <img src="resource/1/c-2.jpg">
 +
                    <figcaption>
 +
                        <div class="h2">
 +
                            John Doe
 +
                        </div>
 +
                        <div class="p">
 +
                            Graphic Designer
 +
                        </div>
 +
                    </figcaption>
 +
                </figure>
 +
                <figure>
 +
                    <img src="resource/1/c-3.jpg">
 +
                    <figcaption>
 +
                        <div class="h2">
 +
                            John Doe
 +
                        </div>
 +
                        <div class="p">
 +
                            Graphic Designer
 +
                        </div>
 +
                    </figcaption>
 +
                </figure>
 +
            </div>
 +
 +
        </div>
 +
        <div id="slider3">
 +
            <div>
 +
                <div class="h2">
 +
                    HP
 +
                </div>
 +
                <div class="p">
 +
                    This is the outline of our human practice.
 +
                </div>
 +
            </div>
 +
            <div id="img-container">
 +
                <img src="resource/2/1.jpg">
 +
                <img src="resource/2/2.jpg">
 +
                <img src="resource/2/3.jpg">
 +
                <img src="resource/2/4.jpg">
 +
                <img src="resource/2/5.jpg">
 +
                <img src="resource/2/6.jpg">
 +
                <img src="resource/2/7.jpg">
 +
                <img src="resource/2/8.jpg">
 +
            </div>
 +
        </div>
 
         <div id="wowslider-wrapper">
 
         <div id="wowslider-wrapper">
 
             <div id="wowslider-container1">
 
             <div id="wowslider-container1">
Line 86: Line 557:
 
             <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/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>
 
             <script type="text/javascript" src="https://2016.igem.org/Template:NKU_China/js/script/Home-team?action=raw&ctype=text/javascript"></script>
 +
        </div>
 +
        <div id="slider4">
 +
            <div>
 +
                <img src="resource/img/Nankai_bottom1.jpg">
 +
                <img src="resource/img/Nankai_bottom3.jpg">
 +
                <img src="resource/img/Nankai_bottom4.jpg">
 +
            </div>
 +
            <div class="p">
 +
                Copyright &copy; NKU_China IGEM Team 2016
 +
            </div>
 
         </div>
 
         </div>
 
     </main>
 
     </main>

Revision as of 11:25, 14 September 2016

Amazing Features
Product is packed with everything you may ever need. Product is packed with everything you may ever need. Product is packed with everything you may ever need.
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.
Our Goals
HTML40%
Graphic 20%
JS 60%
There're our 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.
  • Team
  • Yuxiu Xiong
  • Chen Chen
  • Xiao Liu
  • Liangti Dai
  • Zhuoer Dong
  • Xianglin Zhao
  • Fankang Meng
  • Cunjiang Song
  • Mengxian Zhang
  • Xinhao Song
  • Zhaoran Zhang
  • Ma Xinyu
  • wowslider
  • Fuchen Shi
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Copyright © NKU_China IGEM Team 2016