Difference between revisions of "Team:NKU China"

Line 25: Line 25:
 
         }
 
         }
 
     </style>
 
     </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 {
 +
            font-family:Raleway;
 +
            text-align: left;
 +
            font-weight: 100;
 +
            color: cyan;
 +
            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-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: dodgerblue;
 +
            transition: all 0.4s ease 0s;
 +
            font-weight: 300;
 +
            padding: 0.55rem 0.95rem;
 +
        }
 +
 
 +
        #slider6 > div:nth-child(2) > div:nth-child(2) .p {
 +
            font-size: 0.95rem;
 +
            color: #333;
 +
            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: white;
 +
        }
 +
 
 +
        #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>
 
     <style>
 
         #slider5 {
 
         #slider5 {
 
             line-height: 1.42857143;
 
             line-height: 1.42857143;
 
             padding: 7vh 0 0 0;
 
             padding: 7vh 0 0 0;
−
             background-color: #EDEEF0;
+
             background-color: black;
 +
        }
 +
 
 +
        #slider5 .h1 {
 +
            font-family:Raleway;
 +
            color:cyan;
 
         }
 
         }
  
 
         #slider5 .h1, #slider5 .h2 {
 
         #slider5 .h1, #slider5 .h2 {
−
            font-family: "Lato", Arial, Verdana;
+
             color: cyan;
−
            font-weight: 100;
+
−
             color: #444649;
+
 
         }
 
         }
  
Line 42: Line 147:
 
             text-indent: 0;
 
             text-indent: 0;
 
             color: #939393;
 
             color: #939393;
−
            font-family: 'Open Sans',sans-serif;
 
 
             font-weight: 300;
 
             font-weight: 300;
 
             font-size: 0.95rem;
 
             font-size: 0.95rem;
Line 79: Line 183:
 
         #slider5 > div:last-child > figure img {
 
         #slider5 > div:last-child > figure img {
 
             width: 100%;
 
             width: 100%;
 +
            z-index:4;
 +
            position:relative;
 
         }
 
         }
  
 
         #slider5 > div:last-child > figure:nth-child(1) img {
 
         #slider5 > div:last-child > figure:nth-child(1) img {
−
             filter: brightness(25%);
+
             filter: opacity(0.3);
−
             -webkit-filter: brightness(25%);
+
             -webkit-filter: opacity(0.3);
 +
           
 
         }
 
         }
  
 
         #slider5 > div:last-child > figure:nth-child(2) img {
 
         #slider5 > div:last-child > figure:nth-child(2) img {
−
             filter: grayscale(90%);
+
             filter: opacity(0.3);
−
             -webkit-filter: grayscale(90%);
+
             -webkit-filter: opacity(0.3);
 
         }
 
         }
  
 
         #slider5 > div:last-child > figure:nth-child(3) img {
 
         #slider5 > div:last-child > figure:nth-child(3) img {
−
             filter: invert(90%);
+
             filter: opacity(0.3);
−
             -webkit-filter: invert(80%);
+
             -webkit-filter: opacity(0.3);
 
         }
 
         }
  
Line 155: Line 262:
 
         }
 
         }
 
     </style>
 
     </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>
 
     <style>
 
         #slider4 {
 
         #slider4 {
Line 304: Line 306:
 
</head>
 
</head>
 
<body>
 
<body>
−
     <div id="ruler" style="display:none;width:1vw;height:1vh;"></div>
+
     <div id="particles-js"></div>
 +
    <script>
 +
        particlesJS('particles-js',
 +
  {
 +
      "particles": {
 +
          "number": {
 +
              "value": 100,
 +
              "density": {
 +
                  "enable": true,
 +
                  "value_area": 800
 +
              }
 +
          },
 +
          "color": {
 +
              "value": "#0ff"
 +
          },
 +
          "shape": {
 +
              "type": "circle",
 +
              "stroke": {
 +
                  "width": 0,
 +
                  "color": "#000000"
 +
              },
 +
              "polygon": {
 +
                  "nb_sides": 5
 +
              },
 +
              "image": {
 +
                  "src": "img/github.svg",
 +
                  "width": 100,
 +
                  "height": 100
 +
              }
 +
          },
 +
          "opacity": {
 +
              "value": 0.4,
 +
              "random": false,
 +
              "anim": {
 +
                  "enable": false,
 +
                  "speed": 1,
 +
                  "opacity_min": 0,
 +
                  "sync": false
 +
              }
 +
          },
 +
          "size": {
 +
              "value": 5,
 +
              "random": true,
 +
              "anim": {
 +
                  "enable": false,
 +
                  "speed": 40,
 +
                  "size_min": 0,
 +
                  "sync": false
 +
              }
 +
          },
 +
          "line_linked": {
 +
              "enable": true,
 +
              "distance": 150,
 +
              "color": "#ff0",
 +
              "opacity": 0.4,
 +
              "width": 1
 +
          },
 +
          "move": {
 +
              "enable": true,
 +
              "speed": 6,
 +
              "direction": "none",
 +
              "random": false,
 +
              "straight": false,
 +
              "out_mode": "out",
 +
              "attract": {
 +
                  "enable": true,
 +
                  "rotateX": 600,
 +
                  "rotateY": 1200
 +
              }
 +
          }
 +
      },
 +
      "interactivity": {
 +
          "detect_on": "canvas",
 +
          "events": {
 +
              "onhover": {
 +
                  "enable": true,
 +
                  "mode": ["grab", "bubble"]
 +
              },
 +
              "onclick": {
 +
                  "enable": true,
 +
                  "mode": ["push", "repulse"]
 +
              },
 +
              "resize": true
 +
          },
 +
          "modes": {
 +
              "grab": {
 +
                  "distance": 100,
 +
                  "line_linked": {
 +
                      "opacity": 0.75
 +
                  }
 +
              },
 +
              "bubble": {
 +
                  "distance": 100,
 +
                  "size": 4,
 +
                  "duration": 2,
 +
                  "opacity": 8,
 +
                  "speed": 5
 +
              },
 +
              "repulse": {
 +
                  "distance": 200
 +
              },
 +
              "push": {
 +
                  "particles_nb": 4
 +
              },
 +
              "remove": {
 +
                  "particles_nb": 2
 +
              }
 +
          }
 +
      },
 +
      "retina_detect": true,
 +
      "config_demo": {
 +
          "hide_card": false,
 +
          "background_color": "#b61924",
 +
          "background_image": "",
 +
          "background_position": "50% 50%",
 +
          "background_repeat": "no-repeat",
 +
          "background_size": "cover"
 +
      }
 +
  }
 +
 
 +
);
 +
    </script>  
 
     <div class="main">
 
     <div class="main">
 
         <div id="introduction-carousel" class="carousel slide" data-ride="carousel">
 
         <div id="introduction-carousel" class="carousel slide" data-ride="carousel">
Line 338: Line 461:
 
         </div>
 
         </div>
 
         <div id="slider6">
 
         <div id="slider6">
−
 
 
             <div>
 
             <div>
 
                 <div class="h1">
 
                 <div class="h1">

Revision as of 01:05, 21 September 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.
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