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

(Prototype team page)
 
Line 1: Line 1:
−
{{SZU-China}}
 
 
<html>
 
<html>
  
−
<div class="column two_thirds_size" >
+
   
 +
<link rel="stylesheet" type="text/css" href="https://2018.igem.org/Template:SZU-China/CSS?action=raw&amp;ctype=text/css" />
 +
<link rel="stylesheet" type="text/css" href="https://2018.igem.org/Template:SZU-China/CSS/FontAwesome?action=raw&ctype=text/css">
  
−
<h1>Team</h1>
+
<style>
−
<p>In this page you can introduce your team members, instructors, and advisors. </p>
+
        #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;
 +
}
  
−
<h3>What should this page contain?</h3>
+
/* Adjust Menu (red) text color, (Garamond) font-family, (1.5em) font-size  */
−
<ul>
+
.navbar .nav > li > a, .navbar .nav > li > a:first-letter,
−
<li> Include pictures of your teammates, don’t forget instructors and advisors! </li>
+
.navbar .nav > li.current-menu-item > a,  
−
<li>You can add a small biography or a few words from each team member, to tell us what you like, and what motivated you to participate in iGEM.</li>
+
.navbar .nav > li.current-menu-ancestor > a {
−
<li>Take team pictures! Show us your school, your lab and little bit of your city.</li>
+
display:        inline;
−
<li>Remember that image galleries can help you showcase many pictures while saving space.</li>
+
color:          red;
−
</ul>
+
font-size:      1.0em;
−
</div>
+
padding:        5px 20px;
 +
}
  
 +
.bg-green{
 +
  background-color: #18BC9C !important;
 +
}
 +
           
 +
</style>
  
 +
       
 +
<body>
 +
        <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 {
 +
display: -webkit-box;
 +
display: -ms-flexbox;
 +
display: flex;
 +
-webkit-box-flex: 1;
 +
-ms-flex: 1;
 +
flex: 1;
 +
-webkit-box-orient: vertical;
 +
-webkit-box-direction: normal;
 +
-ms-flex-direction: column;
 +
flex-direction: column;
 +
-webkit-box-pack: center;
 +
-ms-flex-pack: center;
 +
justify-content: center;
 +
text-align: center;
 +
background-color: #fff;
 +
padding: 10px;
 +
-webkit-transition: all .4s;
 +
transition: all .4s;
 +
}
 +
 +
#carousel3d .carousel-3d-slide.current {
 +
background-color: #fff;
 +
color: #fff;
 +
}
 +
 +
#carousel3d .carousel-3d-slide.current span {
 +
font-size: 20px;
 +
font-weight: 500;
 +
}
 +
</style>
 +
<!--
 +
<style>
 +
.carousel-3d-container figure {
 +
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>
 +
<div class="container-fluid">
 +
<div class="col-8 offset-2 shadow">
 +
<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">
 +
<slide :index="0" id="silde1">
 +
<span>Web Design</span>
 +
<a id="slide1"></a>
 +
<img src="../img/bg-img.jpg" />
 +
<div class="carousel-caption">
 +
<h3>First slide label</h3>
 +
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
 +
</div>
 +
</slide>
 +
<slide :index="1">
 +
 +
<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>
 +
<p></p>
 +
</slide>
 +
<slide :index="2">
 +
<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>
 +
</slide>
 +
<slide :index="3">
 +
<span class="title">You know</span>
 +
<a href="https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg">Click Here</a>
 +
</slide>
 +
<slide :index="4">
 +
<span class="title">You know</span>
 +
<a href="https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg">Click Here</a>
 +
</slide>
 +
<slide :index="5">
 +
<span class="title">You know</span>
 +
<a href="https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg">Click Here</a>
 +
</slide>
 +
<slide :index="6">
 +
<span class="title">You know</span>
 +
<a href="https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg">Click Here</a>
 +
</slide>
 +
 +
</carousel-3d>
 +
<div class="abstract">
 +
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
 +
<script>
 +
new Vue({
 +
el: '#carousel3d',
 +
data: {
 +
slides: 7
 +
},
 +
components: {
 +
'carousel-3d': Carousel3d.Carousel3d,
 +
'slide': Carousel3d.Slide
 +
}
 +
})
 +
//# sourceURL=pen.js
 +
</script>
 +
 +
 +
 +
    <!--  <script src="https://2018.igem.org/Template:SZU-China/JS/jquery?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>
  
−
<div class="column third_size" >
 
−
<div class="highlight decoration_A_full">
 
−
<h3>Inspiration</h3>
 
−
<p>You can look at what other teams did to get some inspiration! <br />
 
−
Here are a few examples:</p>
 
−
<ul>
 
−
<li><a href="https://2014.igem.org/Team:METU_Turkey_team">2014 METU Turkey </a></li>
 
−
<li><a href="https://2014.igem.org/Team:Colombia/Members">2014 Colombia</a></li>
 
−
<li><a href="https://2014.igem.org/Team:Stony_Brook/Team">2014 Stony Brook</a></li>
 
−
<li><a href="https://2014.igem.org/Team:OUC-China/Team">2014 OUC-China</a></li>
 
−
</ul>
 
−
</div>
 
−
</div>
 
 
</html>
 
</html>

Revision as of 04:19, 3 October 2018

Web Design

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