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

m
m
Line 1: Line 1:
−
div.timeline-icon>i {
+
<html>
−
    margin-top: 12px;
+
−
    margin-left: 12px;
+
−
}
+
−
#timeline .timeline-item:after,#timeline .timeline-item:before {
+
−
    content: '';
+
−
    display: block;
+
−
    width: 100%;
+
−
    clear: both;
+
−
}
+
  
−
#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%;
+
−
    background: #ee4d4d;
+
−
    left: 50%;
+
−
    top: 0;
+
−
    position: absolute;
+
−
}
+
−
#timeline:after {
+
−
    content: "";
+
−
    clear: both;
+
−
    display: table;
+
−
    width: 100%}
+
−
#timeline .timeline-item {
+
−
    margin-bottom: 50px;
+
−
    position: relative;
+
−
}
+
−
#timeline .timeline-item .timeline-icon {
+
−
    background: #ee4d4d;
+
−
    width: 50px;
+
−
    height: 50px;
+
−
    position: absolute;
+
−
    top: 0;
+
−
    left: 50%;
+
−
    overflow: hidden;
+
−
     margin-left: -23px;
+
−
    -webkit-border-radius: 50%;
+
−
    -moz-border-radius: 50%;
+
−
    -ms-border-radius: 50%;
+
−
    border-radius: 50%}
+
−
#timeline .timeline-item .timeline-icon img {
+
−
     position: relative;
+
−
    top: 14px;
+
−
    left: 14px;
+
−
}
+
−
#timeline .timeline-item .timeline-content {
+
−
    width: 45%;
+
−
    background: #fff;
+
−
    padding: 20px;
+
−
    -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
+
−
    -moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
+
−
     -ms-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
+
−
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
+
−
     -webkit-border-radius: 5px;
+
−
    -moz-border-radius: 5px;
+
−
    -ms-border-radius: 5px;
+
−
    border-radius: 5px;
+
−
    -webkit-transition: all 0.3s ease;
+
−
    -moz-transition: all 0.3s ease;
+
−
    -ms-transition: all 0.3s ease;
+
−
    transition: all 0.3s ease;
+
−
}
+
−
#timeline .timeline-item .timeline-content h2 {
+
−
    font-size: 1.5em;
+
−
     padding: 15px;
+
−
    background: #ee4d4d;
+
−
    color: #fff;
+
−
    margin: -20px -20px 0 -20px;
+
−
}
+
−
#timeline .timeline-item .timeline-content:before {
+
−
    content: '';
+
−
    position: absolute;
+
−
    left: 45%;
+
−
    top: 20px;
+
−
    width: 0;
+
−
    height: 0;
+
−
    border-top: 7px solid transparent;
+
−
     border-bottom: 7px solid transparent;
+
−
    border-left: 7px solid #ee4d4d;
+
−
}
+
−
#timeline .timeline-item .timeline-content.right {
+
−
    float: right;
+
−
}
+
−
#timeline .timeline-item .timeline-content.right:before {
+
−
    content: '';
+
−
    right: 45%;
+
−
    left: inherit;
+
−
    border-left: 0;
+
−
    border-right: 7px solid #ee4d4d;
+
−
}
+
  
−
@media screen and (max-width: 768px) {
+
<body>
−
     #timeline {
+
     <header>
−
    margin: 30px;
+
        <nav class="top-nav">
−
    padding: 0;
+
            <div class="container">
−
}
+
                <div class="nav-wrapper"><a class="page-title">Calendar</a></div>
−
#timeline:before {
+
            </div>
−
    left: 0;
+
        </nav>
−
}
+
        <div class="container">
−
#timeline .timeline-item .timeline-content {
+
            <a href="#" data-activates="nav-mobile" class="button-collapse top-nav full hide-on-large-only"> <i class="material-icons">menu</i> </a>
−
     width: 90%;
+
        </div>
−
    float: right;
+
        <ul id="nav-mobile" class="side-nav fixed">
−
}
+
            <li class="logo">
−
#timeline .timeline-item .timeline-content:before, #timeline .timeline-item .timeline-content.right:before {
+
                <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>
−
     left: 10%;
+
            </li>
−
     margin-left: -6px;
+
            <li class="bold"><a href="https://2016.igem.org/Team:NJU-China/Background" class="waves-effect waves-teal">Background</a></li>
−
     border-left: 0;
+
            <li class="bold no-padding">
−
     border-right: 7px solid #ee4d4d;
+
                <ul class="collapsible collapsible-accordion">
−
}
+
                    <li class="bold"> <a class="collapsible-header waves-effect waves-teal">Project Design</a>
−
#timeline .timeline-item .timeline-icon {
+
                        <div class="collapsible-body">
−
     left: 0;
+
                            <ul>
−
}
+
                                <li><a href="https://2016.igem.org/Team:NJU-China/Project_Design">RNAi Module</a></li>
−
}
+
                                <li><a href="https://2016.igem.org/Team:NJU-China/Project_Design#Targeting_Module">Targeting Module</a></li>
 +
                                <li><a href="https://2016.igem.org/Team:NJU-China/Project_Design#Assembly">Assembly</a></li>
 +
                            </ul>
 +
                        </div>
 +
                    </li>
 +
                </ul>
 +
            </li>
 +
            <li class="bold"><a href="https://2016.igem.org/Team:NJU-China/Modeling" class="waves-effect waves-teal">Modeling</a></li>
 +
            <li class="bold no-padding">
 +
                <ul class="collapsible collapsible-accordion">
 +
                    <li class="bold"> <a class="collapsible-header waves-effect waves-teal">Results</a>
 +
                        <div class="collapsible-body">
 +
                            <ul>
 +
                                <li><a href="https://2016.igem.org/Team:NJU-China/Results">in vitro</a></li>
 +
                                <li><a href="https://2016.igem.org/Team:NJU-China/Results#in_vivo">in vivo</a></li>
 +
                                <li><a href="https://2016.igem.org/Team:NJU-China/Results#Conclusions">Conclusions</a></li>
 +
                            </ul>
 +
                        </div>
 +
                    </li>
 +
                </ul>
 +
            </li>
 +
            <li class="bold"><a href="https://2016.igem.org/Team:NJU-China/Human_Practices" class="waves-effect waves-teal">Human Practices</a></li>
 +
            <li class="bold"><a href="https://2016.igem.org/Team:NJU-China/Team" class="waves-effect waves-teal">Team</a></li>
 +
            <li class="bold"><a href="https://2016.igem.org/Team:NJU-China/Attributions" class="waves-effect waves-teal">Attributions</a></li>
 +
            <li class="bold"><a href="https://2016.igem.org/Team:NJU-China/Collaborations" class="waves-effect waves-teal">Collaborations</a></li>
 +
            <li class="bold no-padding">
 +
                <ul class="collapsible collapsible-accordion">
 +
                    <li class="bold"> <a class="collapsible-header waves-effect waves-teal">Notebook</a>
 +
                        <div class="collapsible-body">
 +
                            <ul>
 +
                                <li><a href="https://2016.igem.org/Team:NJU-China/Notebook/Calendar">Calendar</a></li>
 +
                                <li><a href="https://2016.igem.org/Team:NJU-China/Notebook/Methods">Methods</a></li>
 +
                                <li><a href="https://2016.igem.org/Team:NJU-China/Notebook/Protocol">Protocol</a></li>
 +
                            </ul>
 +
                        </div>
 +
                    </li>
 +
                </ul>
 +
            </li>
 +
        </ul>
 +
    </header>
 +
    <!-- Begin page content -->
 +
     <main>
 +
        <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
 +
            <a class="btn-floating btn-large red">
 +
                <i class="large material-icons">add</i>
 +
            </a>
 +
            <ul>
 +
                <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>
 +
                <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>
 +
                <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>
 +
            </ul>
 +
        </div>
 +
        <div class="container">
 +
            <div id="timeline">
 +
                <div class="timeline-item">
 +
                    <div class="timeline-icon">
 +
                        <i class="material-icons">timeline</i>
 +
                    </div>
 +
                    <div class="timeline-content">
 +
                        <h2>Abc Def</h2>
 +
                        <p>Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz.</p>
 +
                    </div>
 +
                </div>
 +
                <div class="timeline-item">
 +
                    <div class="timeline-icon">
 +
                        <i class="material-icons">timeline</i>
 +
                    </div>
 +
                    <div class="timeline-content right">
 +
                        <h2>Abc Def</h2>
 +
                        <p>Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz.</p>
 +
                    </div>
 +
                </div>
 +
                <div class="timeline-item">
 +
                    <div class="timeline-icon">
 +
                        <i class="material-icons">timeline</i>
 +
                    </div>
 +
                    <div class="timeline-content">
 +
                        <h2>Abc Def</h2>
 +
                        <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.</p>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </div>
 +
     </main>
 +
     <!-- 理论上应用 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 15:13, 17 October 2016

menu
add
timeline

Abc Def

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

timeline

Abc Def

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

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.