Difference between revisions of "Team:NKU China/test"

 
(20 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
+
{{NKU_China/menubar}}
 
<html>
 
<html>
 
<head>
 
<head>
    <link rel="stylesheet" href="https://2016.igem.org/Template:NKU_China/css/bootstrap?action=raw&ctype=text/css">
+
 
<script src="https://2016.igem.org/Template:NKU_China/js/jquery?action=raw&ctype=text/javascript"></script> 
+
<script src="https://2016.igem.org/Template:NKU_China/js/bootstrap?action=raw&ctype=text/javascript"></script>
+
   
+
 
     <!--separatrix-->
 
     <!--separatrix-->
   
 
 
     <style>
 
     <style>
        #slider8 {
+
        .main#attributions {
             padding:10vh 6vw 20vh 6vw;
+
             padding: 0 10vw;
             background:#EDEEF0;
+
            padding-bottom: 10vh;
 +
             font-size: 1.15rem;
 
         }
 
         }
  
         #slider8 .h1 {
+
         .main div.h2 {
             font-family: "Lato", Arial, Verdana;
+
             color: cyan;
        font-weight: 100;
+
             text-align: left;
        color: #444649;
+
             font-size: 2rem;
             line-height:1.1;
+
             padding-bottom: 1rem;
             font-size:1.75rem;
+
             padding:1.25rem 0 0.625rem 0;
+
 
         }
 
         }
  
         #slider8 .p {
+
         article {
             color: #939393;
+
             margin-bottom: 2.5rem;
        font-family: 'Open Sans',sans-serif;
+
        font-weight:300;
+
            line-height:1.42857;
+
            font-size:1.1rem;
+
            text-align:center;
+
 
         }
 
         }
  
         #slider8 .carousel-indicators {
+
         #nutshell {
             bottom:-3rem;
+
             padding: 1rem 0;
 
         }
 
         }
  
         #slider8 .carousel-indicators li {
+
         #nutshell .article {
             border-color:#33cccc;
+
             margin: 1rem 0.4rem;
 +
            line-height: 1.6rem;
 
         }
 
         }
  
         #slider8 .carousel-indicators li.active {
+
         #nutshell .article div:first-child {
             background-color:#33cccc;
+
             font-weight: bold;
 +
            color: cyan;
 +
            text-indent: 0;
 +
        }
 +
 
 +
        #details .p {
 +
            line-height: 1.2;
 
         }
 
         }
 
     </style>
 
     </style>
 
     <script>
 
     <script>
     
+
        $(function () {
 
+
            //particles();
     
+
        })
 
     </script>
 
     </script>
 
</head>
 
</head>
<body>
+
<body id="dongzhuoer">
 
+
    <div id="particles-js"></div>
    <main>
+
    <script>
      <div id="slider8">
+
        particlesJS('particles-js',
            <div class="h1">
+
  {
                Testimonial
+
      "particles": {
            </div>
+
          "number": {
            <div id="carousel-demo" class="carousel slide" data-ride="carousel">
+
              "value": 100,
                <ol class="carousel-indicators">
+
              "density": {
                    <li data-target="#carousel-demo" data-slide-to="0" class="active"></li>
+
                  "enable": true,
                    <li data-target="#carousel-demo" data-slide-to="1"></li>
+
                  "value_area": 800
                    <li data-target="#carousel-demo" data-slide-to="2"></li>
+
              }
                </ol>
+
          },
                <div class="carousel-inner">
+
          "color": {
                    <div class="item active">
+
              "value": "#0ff"
                     
+
          },
                            <div class="p">
+
          "shape": {
                                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. This template consist of well-organized layers. Tons of features waiting for you.
+
              "type": "circle",
                            </div>
+
              "stroke": {
                     
+
                  "width": 0,
                    </div>
+
                  "color": "#000000"
                    <div class="item">
+
              },
                       
+
              "polygon": {
                            <div class="p">
+
                  "nb_sides": 5
                                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. This template consist of well-organized layers. Tons of features waiting for you.
+
              },
                            </div>
+
              "image": {
                       
+
                  "src": "img/github.svg",
                    </div>
+
                  "width": 100,
                    <div class="item">
+
                  "height": 100
                     
+
              }
                            <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. 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.
+
          "opacity": {
                            </div>
+
              "value": 0.4,
                     
+
              "random": false,
                    </div>
+
              "anim": {
                </div>
+
                  "enable": false,
                </div>
+
                  "speed": 1,
           
+
                  "opacity_min": 0,
            <script>
+
                  "sync": false
                console.log($('#carousel-demo'))
+
              }
                $('#carousel-demo').carousel();
+
          },
            </script>   
+
          "size": {
        </div>
+
              "value": 5,
    </main>
+
              "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" id="attributions">
 +
        <div class="p">
 +
            haha
 +
        </div>
 +
    </div>
 
</body>
 
</body>
 
</html>
 
</html>
 +
{{NKU_China/footer}}

Latest revision as of 08:07, 7 October 2016

haha