Difference between revisions of "Team:NJU-China/Notebook/Calendar"

Line 1: Line 1:
−
div.timeline-icon>i {
+
<html>
−
    padding-top: 12px;
+
−
    padding-left: 12px;
+
−
}
+
−
#timeline .timeline-item:after,#timeline .timeline-item:before {
+
−
    content: '';
+
−
    display: block;
+
−
    width: 100%;
+
−
    clear: both;
+
−
}
+
−
/**, *:before, *:after {
+
−
    box-sizing: border-box;
+
−
    -webkit-box-sizing: border-box;
+
−
    -moz-box-sizing: border-box;
+
−
}*/
+
−
/*body {
+
−
    background: #f9f9f9;
+
−
    background-size: cover;
+
−
    margin: 0;
+
−
    padding: 0;
+
−
    font-family: helvetica, arial, tahoma, verdana;
+
−
    line-height: 20px;
+
−
    font-size: 14px;
+
−
    color: #726f77;
+
−
    -webkit-font-smoothing: antialiased;
+
−
}*/
+
−
/*img {
+
−
    max-width: 100%}*/
+
−
/*a {
+
−
    text-decoration: none;
+
−
}*/
+
−
/*.container {
+
−
    max-width: 1100px;
+
−
    margin: 0 auto;
+
−
}*/
+
−
/*h1, h2, h3, h4 {
+
−
    font-family: "Dosis", arial, tahoma, verdana;
+
−
    font-weight: 600;
+
−
}*/
+
  
−
#timeline {
+
<head>
−
     width: 90%;
+
     <meta charset="UTF-8">
−
    margin: 30px auto;
+
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
−
    position: relative;
+
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
−
     -webkit-transition: all 0.4s ease;
+
     <!--Import materialize.css-->
−
     -moz-transition: all 0.4s ease;
+
     <link rel="stylesheet" href="https://2016.igem.org/Team:NJU-China/mdlib/ghpages?action=raw&amp;ctype=text/css" media="screen,projection">
−
     -ms-transition: all 0.4s ease;
+
     <!--Import Google Icon Font-->
−
     transition: all 0.4s ease;
+
     <link href="https://2016.igem.org/Team:NJU-China/mdlib/mdiconcss?action=raw&amp;ctype=text/css" rel="stylesheet">
−
}
+
     <link href="https://2016.igem.org/Team:NJU-China/mdlib/customedcss?action=raw&amp;ctype=text/css" rel="stylesheet">
−
#timeline:before {
+
     <link href="https://2016.igem.org/Team:NJU-China/mdlib/calendarcss?action=raw&amp;ctype=text/css" rel="stylesheet">
−
    content: "";
+
</head>
−
     width: 3px;
+
 
−
     height: 100%;
+
<body>
−
     background: #ee4d4d;
+
     <header>
−
     left: 50%;
+
        <nav class="top-nav">
−
     top: 0;
+
            <div class="container">
−
    position: absolute;
+
                <div class="nav-wrapper"><a class="page-title">Calendar</a></div>
−
}
+
            </div>
−
#timeline:after {
+
        </nav>
−
    content: "";
+
        <div class="container">
−
    clear: both;
+
            <a href="#" data-activates="nav-mobile" class="button-collapse top-nav full hide-on-large-only"> <i class="material-icons">menu</i> </a>
−
    display: table;
+
        </div>
−
    width: 100%}
+
        <ul id="nav-mobile" class="side-nav fixed">
−
#timeline .timeline-item {
+
            <li class="logo">
−
    margin-bottom: 50px;
+
                <a href="https://2016.igem.org/Team:NJU-China"><img class="background responsive-img" src="https://static.igem.org/mediawiki/2016/c/c8/NJU_China_2016_iGEM_logo.png" alt="NJU-China LOGO"></a>
−
    position: relative;
+
            </li>
−
}
+
            <li class="bold"><a href="https://2016.igem.org/Team:NJU-China/Background" class="waves-effect waves-teal">Background</a></li>
−
#timeline .timeline-item .timeline-icon {
+
            <li class="bold no-padding">
−
    background: #ee4d4d;
+
                <ul class="collapsible collapsible-accordion">
−
    width: 50px;
+
                    <li class="bold"> <a class="collapsible-header waves-effect waves-teal">Project Design</a>
−
    height: 50px;
+
                        <div class="collapsible-body">
−
    position: absolute;
+
                            <ul>
−
    top: 0;
+
                                <li><a href="https://2016.igem.org/Team:NJU-China/Project_Design">RNAi Module</a></li>
−
    left: 50%;
+
                                <li><a href="https://2016.igem.org/Team:NJU-China/Project_Design#Targeting_Module">Targeting Module</a></li>
−
    overflow: hidden;
+
                                <li><a href="https://2016.igem.org/Team:NJU-China/Project_Design#Assembly">Assembly</a></li>
−
    margin-left: -23px;
+
                            </ul>
−
    -webkit-border-radius: 50%;
+
                        </div>
−
    -moz-border-radius: 50%;
+
                    </li>
−
    -ms-border-radius: 50%;
+
                </ul>
−
    border-radius: 50%}
+
            </li>
−
#timeline .timeline-item .timeline-icon img {
+
            <li class="bold"><a href="https://2016.igem.org/Team:NJU-China/Modeling" class="waves-effect waves-teal">Modeling</a></li>
−
    position: relative;
+
            <li class="bold no-padding">
−
    top: 14px;
+
                <ul class="collapsible collapsible-accordion">
−
    left: 14px;
+
                    <li class="bold"> <a class="collapsible-header waves-effect waves-teal">Results</a>
−
}
+
                        <div class="collapsible-body">
−
#timeline .timeline-item .timeline-content {
+
                            <ul>
−
    width: 45%;
+
                                <li><a href="https://2016.igem.org/Team:NJU-China/Results">in vitro</a></li>
−
    background: #fff;
+
                                <li><a href="https://2016.igem.org/Team:NJU-China/Results#in_vivo">in vivo</a></li>
−
    padding: 20px;
+
                                <li><a href="https://2016.igem.org/Team:NJU-China/Results#Conclusions">Conclusions</a></li>
−
    -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
+
                            </ul>
−
    -moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
+
                        </div>
−
    -ms-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
+
                    </li>
−
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
+
                </ul>
−
    -webkit-border-radius: 5px;
+
            </li>
−
    -moz-border-radius: 5px;
+
            <li class="bold"><a href="https://2016.igem.org/Team:NJU-China/Human_Practices" class="waves-effect waves-teal">Human Practices</a></li>
−
    -ms-border-radius: 5px;
+
            <li class="bold"><a href="https://2016.igem.org/Team:NJU-China/Team" class="waves-effect waves-teal">Team</a></li>
−
    border-radius: 5px;
+
            <li class="bold"><a href="https://2016.igem.org/Team:NJU-China/Attributions" class="waves-effect waves-teal">Attributions</a></li>
−
    -webkit-transition: all 0.3s ease;
+
            <li class="bold"><a href="https://2016.igem.org/Team:NJU-China/Collaborations" class="waves-effect waves-teal">Collaborations</a></li>
−
    -moz-transition: all 0.3s ease;
+
            <li class="bold no-padding">
−
    -ms-transition: all 0.3s ease;
+
                <ul class="collapsible collapsible-accordion">
−
    transition: all 0.3s ease;
+
                    <li class="bold"> <a class="collapsible-header waves-effect waves-teal">Notebook</a>
−
}
+
                        <div class="collapsible-body">
−
#timeline .timeline-item .timeline-content h2 {
+
                            <ul>
−
    padding: 15px;
+
                                <li><a href="https://2016.igem.org/Team:NJU-China/Notebook/Calendar">Calendar</a></li>
−
    background: #ee4d4d;
+
                                <li><a href="https://2016.igem.org/Team:NJU-China/Notebook/Methods">Methods</a></li>
−
     color: #fff;
+
                                <li><a href="https://2016.igem.org/Team:NJU-China/Notebook/Protocol">Protocol</a></li>
−
     margin: -20px -20px 0 -20px;
+
                            </ul>
−
     font-weight: 500;
+
                        </div>
−
    -webkit-border-radius: 3px 3px 0 0;
+
                    </li>
−
    -moz-border-radius: 3px 3px 0 0;
+
                </ul>
−
    -ms-border-radius: 3px 3px 0 0;
+
            </li>
−
    border-radius: 3px 3px 0 0;
+
        </ul>
−
}
+
     </header>
−
#timeline .timeline-item .timeline-content:before {
+
     <!-- Begin page content -->
−
    content: '';
+
     <main>
−
    position: absolute;
+
        <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
−
    left: 45%;
+
            <a class="btn-floating btn-large red">
−
    top: 20px;
+
                <i class="large material-icons">add</i>
−
    width: 0;
+
            </a>
−
    height: 0;
+
            <ul>
−
    border-top: 7px solid transparent;
+
                <li onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><a class="btn-floating green tooltipped" data-position="left" data-delay="50" data-tooltip="Scroll to Top"><i class="material-icons">arrow_upward</i></a></li>
−
    border-bottom: 7px solid transparent;
+
                <li onclick="$('html, body').animate({scrollTop: $('html').height()-$(window).height()}, 'fast')"><a class="btn-floating yellow darken-2 tooltipped" data-position="left" data-delay="50" data-tooltip="Scroll to Bottom"><i class="material-icons">arrow_downward</i></a></li>
−
    border-left: 7px solid #ee4d4d;
+
                <li onclick="$(this).parent().parent().hide('slow')"><a class="btn-floating purple darken-3"><i class="close material-icons tooltipped" data-position="left" data-delay="50" data-tooltip="Hide FAB">close</i></a></li>
−
}
+
                <li><a class="btn-floating blue button-collapse hide-on-large-only tooltipped" data-position="left" data-delay="50" data-tooltip="Show Navigation" data-activates="nav-mobile"><i class="material-icons">menu</i></a></li>
−
#timeline .timeline-item .timeline-content.right {
+
            </ul>
−
    float: right;
+
        </div>
−
}
+
        <div class="container">
−
#timeline .timeline-item .timeline-content.right:before {
+
            <div id="timeline">
−
    content: '';
+
                <div class="timeline-item">
−
    right: 45%;
+
                    <div class="timeline-icon">
−
    left: inherit;
+
                        <i class="material-icons">timeline</i>
−
    border-left: 0;
+
                    </div>
−
    border-right: 7px solid #ee4d4d;
+
                    <div class="timeline-content">
−
}
+
                        <h2>Abc Def</h2>
−
/*.btn {
+
                        <p>Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg</p>
−
    padding: 5px 15px;
+
                        <a href="http://sc.chinaz.com/jiaoben/" class="btn">Test123</a>
−
    text-decoration: none;
+
                    </div>
−
    background: transparent;
+
                </div>
−
    border: 2px solid #f27c7c;
+
                <div class="timeline-item">
−
     color: #f27c7c;
+
                    <div class="timeline-icon">
−
     display: inline-block;
+
                        <i class="material-icons">timeline</i>
−
    position: relative;
+
                    </div>
−
    text-transform: uppercase;
+
                    <div class="timeline-content right">
−
    font-size: 12px;
+
                        <h2>Abc Def</h2>
−
    -webkit-border-radius: 5px;
+
                        <p>Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg</p>
−
    -moz-border-radius: 5px;
+
                        <a href="http://sc.chinaz.com/jiaoben/" class="btn">Test123</a>
−
    -ms-border-radius: 5px;
+
                    </div>
−
    border-radius: 5px;
+
                </div>
−
    -webkit-transition: background 0.3s ease;
+
                <div class="timeline-item">
−
    -moz-transition: background 0.3s ease;
+
                    <div class="timeline-icon">
−
    -ms-transition: background 0.3s ease;
+
                        <i class="material-icons">timeline</i>
−
    transition: background 0.3s ease;
+
                    </div>
−
    -webkit-box-shadow: 2px 2px 0 #f27c7c;
+
                    <div class="timeline-content">
−
    -moz-box-shadow: 2px 2px 0 #f27c7c;
+
                        <h2>Abc Def</h2>
−
    -ms-box-shadow: 2px 2px 0 #f27c7c;
+
                        <p>Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg</p>
−
    box-shadow: 2px 2px 0 #f27c7c;
+
                        <a href="http://sc.chinaz.com/jiaoben/" class="btn">Test123</a>
−
}
+
                    </div>
−
.btn:hover {
+
                </div>
−
    box-shadow: none;
+
            </div>
−
    top: 2px;
+
        </div>
−
     left: 2px;
+
     </main>
−
     -webkit-box-shadow: 2px 2px 0 transparent;
+
     <footer class="page-footer">
−
     -moz-box-shadow: 2px 2px 0 transparent;
+
        <div class="container">
−
     -ms-box-shadow: 2px 2px 0 transparent;
+
            <div class="row">
−
    box-shadow: 2px 2px 0 transparent;
+
                <div class="col l6 s12">
−
}*/
+
                    <h5 class="white-text">Acknowledgement</h5>
−
@media screen and (max-width: 768px) {
+
                    <p class="grey-text text-lighten-4">We would like to express our most sincere gratitude to every person and institute that helped us during this whole project.</p>
−
     #timeline {
+
                </div>
−
    margin: 30px;
+
                <div class="col l4 offset-l2 s12">
−
     padding: 0;
+
                    <h5 class="white-text">Links</h5>
−
}
+
                    <ul>
−
#timeline:before {
+
                        <li>
−
    left: 0;
+
                            <a class="grey-text text-lighten-3" href=""><img src="" alt=""></a>
−
}
+
                        </li>
−
#timeline .timeline-item .timeline-content {
+
                        <li>
−
     width: 90%;
+
                            <a class="grey-text text-lighten-3" href=""><img src="" alt=""></a>
−
    float: right;
+
                        </li>
−
}
+
                        <li>
−
#timeline .timeline-item .timeline-content:before, #timeline .timeline-item .timeline-content.right:before {
+
                            <a class="grey-text text-lighten-3" href=""><img src="" alt=""></a>
−
     left: 10%;
+
                        </li>
−
     margin-left: -6px;
+
                        <li>
−
     border-left: 0;
+
                            <a class="grey-text text-lighten-3" href=""><img src="" alt=""></a>
−
     border-right: 7px solid #ee4d4d;
+
                        </li>
−
}
+
                    </ul>
−
#timeline .timeline-item .timeline-icon {
+
                </div>
−
     left: 0;
+
            </div>
−
}
+
        </div>
−
}
+
        <div class="footer-copyright">
 +
            <div class="container">
 +
                2016 iGEM NJU-China
 +
            </div>
 +
        </div>
 +
     </footer>
 +
     <!-- 理论上应用 2.1.4 版本的 jQuery，但是iGEM官方提供 1.11.1 -->
 +
     <!-- jQuery 2.1.4 -->
 +
     <!-- <script src="https://2016.igem.org/Team:NJU-China/mdlib/jquery214?action=raw&amp;ctype=text/javascript"></script> -->
 +
     <!-- 自己上传的jQuery 1.11.1 -->
 +
     <!-- <script src="https://2016.igem.org/Team:NJU-China/lib/jquery?action=raw&amp;ctype=text/javascript"></script> -->
 +
     <script src="https://2016.igem.org/Team:NJU-China/mdlib/mdjs?action=raw&amp;ctype=text/javascript"></script>
 +
     <script type="text/javascript">
 +
     // Initialize collapse button
 +
     $(".button-collapse").sideNav();
 +
     // Initialize collapsible (uncomment the line below if you use the dropdown variation)
 +
    $('.collapsible').collapsible();
 +
     </script>
 +
</body>
 +
 
 +
</html>

Revision as of 14:45, 17 October 2016

menu
add
timeline

Abc Def

Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg

Test123
timeline

Abc Def

Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg

Test123
timeline

Abc Def

Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg

Test123
Acknowledgement

We would like to express our most sincere gratitude to every person and institute that helped us during this whole project.

Links
2016 iGEM NJU-China