Difference between revisions of "Team:SZU-China/Team"

Line 2: Line 2:
 
<html>
 
<html>
  
−
   
+
   
−
<link rel="stylesheet" type="text/css" href="https://2018.igem.org/Template:SZU-China/CSS?action=raw&amp;ctype=text/css" />
+
<style class="cp-pen-styles">
−
<link rel="stylesheet" type="text/css" href="https://2018.igem.org/Template:SZU-China/CSS/FontAwesome?action=raw&ctype=text/css">
+
−
<script type="text/javascript" src="https://2018.igem.org/Template:SZU-China/JS/vue?action=raw&amp;ctype=text/javascript"></script>
+
−
<script type="text/javascript" src="https://2018.igem.org/Template:SZU-China/JS/vue-carousel-3d?action=raw&amp;ctype=text/javascript"></script>
+
−
<style>
+
−
        #sideMenu, #top_title {
+
−
        display: none;
+
−
        }
+
−
        #content {
+
−
            width: 100%;
+
−
            margin: 0px;
+
−
            padding: 0px;
+
−
            background: #FFF;
+
−
        }
+
−
        .dropdown:hover {
+
−
        background-color: #00a300;
+
−
        }
+
−
        .dropdown:hover .dropdown-menu {
+
−
        display: block;
+
−
        }
+
−
.fixed-top {
+
−
  top: 10px;
+
−
  }
+
−
 
+
−
.navbar {
+
−
  min-height: 60px;
+
−
}
+
−
 
+
−
/* Adjust Menu (red) text color, (Garamond) font-family, (1.5em) font-size */
+
−
.navbar .nav > li > a, .navbar .nav > li > a:first-letter,
+
−
.navbar .nav > li.current-menu-item > a,
+
−
.navbar .nav > li.current-menu-ancestor > a {
+
−
display:        inline;
+
−
color:          red;
+
−
font-size:      1.0em;
+
−
padding:        5px 20px;
+
−
}
+
−
 
+
−
.bg-green{
+
−
  background-color: #18BC9C !important;
+
−
}
+
−
           
+
−
</style>
+
−
 
+
−
       
+
−
<script>
+
−
$(document).ready(function(){
+
−
$(".dropdown-menu").hover(
+
−
function(){
+
−
$(".dropdown-menu").css("background-color","green");
+
−
},
+
−
function(){
+
−
$(".dropdown-menu").css("background-color","blue");
+
−
}
+
−
);
+
−
});
+
−
</script>
+
−
        <body>
+
−
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-green">
+
−
<div class="container-fluid">
+
−
<a class="navbar-brand" href="#">SZU-China</a>
+
−
+
−
+
−
<ul class="navbar-nav nav justify-content-around">
+
−
<li class="nav-item active">
+
−
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+
−
</li>
+
−
<li class="nav-item dropdown">
+
−
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+
−
Team
+
−
</a>
+
−
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
+
−
<a class="dropdown-item" href="#">Team Members</a>
+
−
<a class="dropdown-item" href="#">Collaborations</a>
+
−
 
+
−
</div>
+
−
</li>
+
−
<li class="nav-item dropdown">
+
−
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+
−
Project
+
−
</a>
+
−
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
+
−
<a class="dropdown-item" href="demo.html">Description</a>
+
−
<a class="dropdown-item" href="#">Design</a>
+
−
<a class="dropdown-item" href="#">Model</a>
+
−
<a class="dropdown-item" href="#">Biobricks</a>
+
−
<a class="dropdown-item" href="#">Improve</a>
+
−
 
+
−
</div>
+
−
</li>
+
−
<li class="nav-item dropdown">
+
−
+
−
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+
−
Experiment <i class="fas fa-flask"></i>
+
−
</a>
+
−
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
+
−
<a class="dropdown-item" href="#">Demonstrate</a>
+
−
<a class="dropdown-item" href="#">Results</a>
+
−
<a class="dropdown-item" href="#">Safety</a>
+
−
<a class="dropdown-item" href="#">InterLab</a>
+
−
 
+
−
</div>
+
−
</li>
+
−
 
+
−
<li class="nav-item dropdown">
+
−
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+
−
Human Practices
+
−
</a>
+
−
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
+
−
<a class="dropdown-item" href="#">Human Practices</a>
+
−
<a class="dropdown-item" href="#">Education and Engagement</a>
+
−
 
+
−
</div>
+
−
</li>
+
−
 
+
−
+
−
<li class="nav-item dropdown">
+
−
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+
−
Judging
+
−
</a>
+
−
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
+
−
<a class="dropdown-item" href="#">Judging Form</a>
+
−
<a class="dropdown-item" href="#">Awards</a>
+
−
 
+
−
</div>
+
−
</li>
+
−
</ul>
+
−
 
+
−
+
−
</div>
+
−
</nav>
+
−
 
+
−
<style class="cp-pen-styles">
+
 
#carousel3d .carousel-3d-slide {
 
#carousel3d .carousel-3d-slide {
 
display: -webkit-box;
 
display: -webkit-box;
Line 167: Line 35:
 
}
 
}
 
</style>
 
</style>
−
<!--
+
−
<style>
+
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/JS/vue&action=raw&ctype=text/javascript"></script>
−
.carousel-3d-container figure {
+
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/JS/vue-carousel-3d&action=raw&ctype=text/javascript"></script>
−
margin: 0;
+
 
−
}
+
−
+
−
.carousel-3d-container figcaption {
+
−
position: absolute;
+
−
background-color: rgba(0, 0, 0, 0.5);
+
−
color: #fff;
+
−
bottom: 0;
+
−
position: absolute;
+
−
bottom: 0;
+
−
padding: 15px;
+
−
font-size: 12px;
+
−
min-width: 100%;
+
−
box-sizing: border-box;
+
−
}
+
−
</style>
+
−
-->
+
−
</head>
+
  
−
<body>
+
<body data-spy="scroll" data-target="#myScrollspy" data-offset="10">
−
<div class="container-fluid">
+
<div class="container-fluid">
−
<div class="col-8 offset-2 shadow">
+
<div class="row">
 +
<div class="col-9 offset-1 shadow ">
 
<div id="carousel3d">
 
<div id="carousel3d">
−
<carousel-3d :perspective="0" :space="200" :display="5" :controls-visible="true" :controls-prev-html="'❬'" :controls-next-html="'❭'" :controls-width="30" :controls-height="60" :clickable="true" :autoplay="true" :autoplay-timeout="5000">
+
<carousel-3d width="300" :height="400" @after-slide-change="onAfterSlideChange" :perspective="0" :space="200" :display="5" :controls-visible="true" :controls-prev-html="'❬'" :controls-next-html="'❭'" :controls-width="30" :controls-height="60" :clickable="true" :autoplay="true" :autoplay-timeout="5000" >
 
<slide :index="0" id="silde1">
 
<slide :index="0" id="silde1">
−
<span>Web Design</span>
+
<span class="fixed-bottom">XXX</span>
 
<a id="slide1"></a>
 
<a id="slide1"></a>
−
<img src="../img/bg-img.jpg" />
+
 
<div class="carousel-caption">
 
<div class="carousel-caption">
 
<h3>First slide label</h3>
 
<h3>First slide label</h3>
Line 206: Line 58:
  
 
<span class="title">Web Design</span>
 
<span class="title">Web Design</span>
−
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
+
<a >Profile</a>
 
<p></p>
 
<p></p>
 
</slide>
 
</slide>
 
<slide :index="2">
 
<slide :index="2">
 
<span class="title">You know</span>
 
<span class="title">You know</span>
−
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
+
<a>Contact</a>
 
</slide>
 
</slide>
 
<slide :index="3">
 
<slide :index="3">
 
<span class="title">You know</span>
 
<span class="title">You know</span>
−
<a href="https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg">Click Here</a>
+
<a class="fixed-bottom" href="#">Click Here</a>
 
</slide>
 
</slide>
 
<slide :index="4">
 
<slide :index="4">
 
<span class="title">You know</span>
 
<span class="title">You know</span>
−
<a href="https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg">Click Here</a>
+
<a >Click Here</a>
 
</slide>
 
</slide>
 
<slide :index="5">
 
<slide :index="5">
 
<span class="title">You know</span>
 
<span class="title">You know</span>
−
<a href="https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg">Click Here</a>
+
<a >Click Here</a>
 
</slide>
 
</slide>
 
<slide :index="6">
 
<slide :index="6">
 
<span class="title">You know</span>
 
<span class="title">You know</span>
−
<a href="https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg">Click Here</a>
+
<a >Click Here</a>
 
</slide>
 
</slide>
  
Line 235: Line 87:
 
</div>
 
</div>
 
</div>
 
</div>
 +
 +
 +
 +
 
</div>
 
</div>
 +
 +
<div class="col-2">
 +
 +
<nav id="myScrollspy" class="navbar navbar-light bg-light position-fixed">
 +
<nav class="nav nav-pills flex-column">
 +
 +
<a class="nav-link" href="#"></a>
 +
 +
</nav>
 +
</nav>
 +
 +
</div>
 +
 
</div>
 
</div>
  
−
<script>
+
</div>
 +
 +
 +
<script>
 
new Vue({
 
new Vue({
 
el: '#carousel3d',
 
el: '#carousel3d',
 
data: {
 
data: {
 
slides: 7
 
slides: 7
 +
},
 +
methods: {
 +
onAfterSlideChange(index) {
 +
console.log(index)
 +
return index;
 +
 +
},
 +
onBeforeSlideChange(index) {
 +
console.log('@onBeforeSlideChange Callback Triggered', 'Slide Index ' + index)
 +
},
 +
onLastSlide(index) {
 +
console.log('@onLastSlide Callback Triggered', 'Slide Index ' + index)
 +
}
 
},
 
},
 
components: {
 
components: {
Line 252: Line 137:
 
</script>
 
</script>
  
−
+
</body>
−
+
−
        <script src="https://2018.igem.org/Template:SZU-China/JS/jquery?action=raw&amp;ctype=text/javascript"></script>
+
  
−
<script type="text/javascript" src="https://2018.igem.org/Template:SZU-China/JavaScript/jquery?action=raw&amp;ctype=text/javascript"></script>
 
−
 
−
<script type="text/javascript" src="https://2018.igem.org/Template:SZU-China/jquery/Javascript?action=raw&amp;ctype=text/javascript"></script>
 
−
 
−
 
−
 
−
        <script src="https://2018.igem.org/Template:SZU-China/JS/bootstrap?action=raw&amp;ctype=text/javascript"></script>
 
−
        <script src="https://2018.igem.org/Template:SZU-China/JS/bootstrap.bundle?action=raw&amp;ctype=text/javascript"></script>
 
−
 
−
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/JS/vue&action=raw&ctype=text/javascript"></script>
 
−
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/JS/vue-carousel-3d&action=raw&ctype=text/javascript"></script>
 
−
 
−
</body>
 
  
 
</html>
 
</html>

Revision as of 13:08, 9 October 2018

XXX

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

 Web Design Profile

You know Contact You know Click Here You know Click Here You know Click Here You know Click Here