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

m
Line 1: Line 1:
−
<html>
+
div.timeline-icon>i {
 +
    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;
 +
}*/
  
−
<head>
+
#timeline {
−
     <meta charset="UTF-8">
+
     width: 90%;
−
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+
    margin: 30px auto;
−
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+
    position: relative;
−
     <!--Import materialize.css-->
+
     -webkit-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">
+
     -moz-transition: all 0.4s ease;
−
     <!--Import Google Icon Font-->
+
     -ms-transition: all 0.4s ease;
−
     <link href="https://2016.igem.org/Team:NJU-China/mdlib/mdiconcss?action=raw&amp;ctype=text/css" rel="stylesheet">
+
     transition: all 0.4s ease;
−
     <link href="https://2016.igem.org/Team:NJU-China/mdlib/customedcss?action=raw&amp;ctype=text/css" rel="stylesheet">
+
}
−
     <link href="https://2016.igem.org/Team:NJU-China/mdlib/calendarcss?action=raw&amp;ctype=text/css" rel="stylesheet">
+
#timeline:before {
−
</head>
+
    content: "";
−
 
+
     width: 3px;
−
<body>
+
     height: 100%;
−
     <header>
+
     background: #ee4d4d;
−
        <nav class="top-nav">
+
     left: 50%;
−
            <div class="container">
+
     top: 0;
−
                <div class="nav-wrapper"><a class="page-title">Calendar</a></div>
+
    position: absolute;
−
            </div>
+
}
−
        </nav>
+
#timeline:after {
−
        <div class="container">
+
    content: "";
−
            <a href="#" data-activates="nav-mobile" class="button-collapse top-nav full hide-on-large-only"> <i class="material-icons">menu</i> </a>
+
    clear: both;
−
        </div>
+
    display: table;
−
        <ul id="nav-mobile" class="side-nav fixed">
+
    width: 100%}
−
            <li class="logo">
+
#timeline .timeline-item {
−
                <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>
+
    margin-bottom: 50px;
−
            </li>
+
    position: relative;
−
            <li class="bold"><a href="https://2016.igem.org/Team:NJU-China/Background" class="waves-effect waves-teal">Background</a></li>
+
}
−
            <li class="bold no-padding">
+
#timeline .timeline-item .timeline-icon {
−
                <ul class="collapsible collapsible-accordion">
+
    background: #ee4d4d;
−
                    <li class="bold"> <a class="collapsible-header waves-effect waves-teal">Project Design</a>
+
    width: 50px;
−
                        <div class="collapsible-body">
+
    height: 50px;
−
                            <ul>
+
    position: absolute;
−
                                <li><a href="https://2016.igem.org/Team:NJU-China/Project_Design">RNAi Module</a></li>
+
    top: 0;
−
                                <li><a href="https://2016.igem.org/Team:NJU-China/Project_Design#Targeting_Module">Targeting Module</a></li>
+
    left: 50%;
−
                                <li><a href="https://2016.igem.org/Team:NJU-China/Project_Design#Assembly">Assembly</a></li>
+
    overflow: hidden;
−
                            </ul>
+
    margin-left: -23px;
−
                        </div>
+
    -webkit-border-radius: 50%;
−
                    </li>
+
    -moz-border-radius: 50%;
−
                </ul>
+
    -ms-border-radius: 50%;
−
            </li>
+
    border-radius: 50%}
−
            <li class="bold"><a href="https://2016.igem.org/Team:NJU-China/Modeling" class="waves-effect waves-teal">Modeling</a></li>
+
#timeline .timeline-item .timeline-icon img {
−
            <li class="bold no-padding">
+
    position: relative;
−
                <ul class="collapsible collapsible-accordion">
+
    top: 14px;
−
                    <li class="bold"> <a class="collapsible-header waves-effect waves-teal">Results</a>
+
    left: 14px;
−
                        <div class="collapsible-body">
+
}
−
                            <ul>
+
#timeline .timeline-item .timeline-content {
−
                                <li><a href="https://2016.igem.org/Team:NJU-China/Results">in vitro</a></li>
+
    width: 45%;
−
                                <li><a href="https://2016.igem.org/Team:NJU-China/Results#in_vivo">in vivo</a></li>
+
    background: #fff;
−
                                <li><a href="https://2016.igem.org/Team:NJU-China/Results#Conclusions">Conclusions</a></li>
+
    padding: 20px;
−
                            </ul>
+
    -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
−
                        </div>
+
    -moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
−
                    </li>
+
    -ms-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
−
                </ul>
+
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
−
            </li>
+
    -webkit-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>
+
    -moz-border-radius: 5px;
−
            <li class="bold"><a href="https://2016.igem.org/Team:NJU-China/Team" class="waves-effect waves-teal">Team</a></li>
+
    -ms-border-radius: 5px;
−
            <li class="bold"><a href="https://2016.igem.org/Team:NJU-China/Attributions" class="waves-effect waves-teal">Attributions</a></li>
+
    border-radius: 5px;
−
            <li class="bold"><a href="https://2016.igem.org/Team:NJU-China/Collaborations" class="waves-effect waves-teal">Collaborations</a></li>
+
    -webkit-transition: all 0.3s ease;
−
            <li class="bold no-padding">
+
    -moz-transition: all 0.3s ease;
−
                <ul class="collapsible collapsible-accordion">
+
    -ms-transition: all 0.3s ease;
−
                    <li class="bold"> <a class="collapsible-header waves-effect waves-teal">Notebook</a>
+
    transition: all 0.3s ease;
−
                        <div class="collapsible-body">
+
}
−
                            <ul>
+
#timeline .timeline-item .timeline-content h2 {
−
                                <li><a href="https://2016.igem.org/Team:NJU-China/Notebook/Calendar">Calendar</a></li>
+
    padding: 15px;
−
                                <li><a href="https://2016.igem.org/Team:NJU-China/Notebook/Methods">Methods</a></li>
+
    background: #ee4d4d;
−
                                <li><a href="https://2016.igem.org/Team:NJU-China/Notebook/Protocol">Protocol</a></li>
+
     color: #fff;
−
                            </ul>
+
     margin: -20px -20px 0 -20px;
−
                        </div>
+
     font-weight: 500;
−
                    </li>
+
    -webkit-border-radius: 3px 3px 0 0;
−
                </ul>
+
    -moz-border-radius: 3px 3px 0 0;
−
            </li>
+
    -ms-border-radius: 3px 3px 0 0;
−
        </ul>
+
    border-radius: 3px 3px 0 0;
−
     </header>
+
}
−
     <!-- Begin page content -->
+
#timeline .timeline-item .timeline-content:before {
−
     <main>
+
    content: '';
−
        <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
+
    position: absolute;
−
            <a class="btn-floating btn-large red">
+
    left: 45%;
−
                <i class="large material-icons">add</i>
+
    top: 20px;
−
            </a>
+
    width: 0;
−
            <ul>
+
    height: 0;
−
                <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-top: 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-bottom: 7px solid transparent;
−
                <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>
+
    border-left: 7px solid #ee4d4d;
−
                <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>
+
#timeline .timeline-item .timeline-content.right {
−
        </div>
+
    float: right;
−
        <div class="container">
+
}
−
            <div id="timeline">
+
#timeline .timeline-item .timeline-content.right:before {
−
                <div class="timeline-item">
+
    content: '';
−
                    <div class="timeline-icon">
+
    right: 45%;
−
                        <i class="material-icons">timeline</i>
+
    left: inherit;
−
                    </div>
+
    border-left: 0;
−
                    <div class="timeline-content">
+
    border-right: 7px solid #ee4d4d;
−
                        <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. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg</p>
+
/*.btn {
−
                        <a href="http://sc.chinaz.com/jiaoben/" class="btn">Test123</a>
+
    padding: 5px 15px;
−
                    </div>
+
    text-decoration: none;
−
                </div>
+
    background: transparent;
−
                <div class="timeline-item">
+
    border: 2px solid #f27c7c;
−
                    <div class="timeline-icon">
+
     color: #f27c7c;
−
                        <i class="material-icons">timeline</i>
+
     display: inline-block;
−
                    </div>
+
    position: relative;
−
                    <div class="timeline-content right">
+
    text-transform: uppercase;
−
                        <h2>Abc Def</h2>
+
    font-size: 12px;
−
                        <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>
+
    -webkit-border-radius: 5px;
−
                        <a href="http://sc.chinaz.com/jiaoben/" class="btn">Test123</a>
+
    -moz-border-radius: 5px;
−
                    </div>
+
    -ms-border-radius: 5px;
−
                </div>
+
    border-radius: 5px;
−
                <div class="timeline-item">
+
    -webkit-transition: background 0.3s ease;
−
                    <div class="timeline-icon">
+
    -moz-transition: background 0.3s ease;
−
                        <i class="material-icons">timeline</i>
+
    -ms-transition: background 0.3s ease;
−
                    </div>
+
    transition: background 0.3s ease;
−
                    <div class="timeline-content">
+
    -webkit-box-shadow: 2px 2px 0 #f27c7c;
−
                        <h2>Abc Def</h2>
+
    -moz-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>
+
    -ms-box-shadow: 2px 2px 0 #f27c7c;
−
                        <a href="http://sc.chinaz.com/jiaoben/" class="btn">Test123</a>
+
    box-shadow: 2px 2px 0 #f27c7c;
−
                    </div>
+
}
−
                </div>
+
.btn:hover {
−
            </div>
+
    box-shadow: none;
−
        </div>
+
    top: 2px;
−
     </main>
+
     left: 2px;
−
     <footer class="page-footer">
+
     -webkit-box-shadow: 2px 2px 0 transparent;
−
        <div class="container">
+
     -moz-box-shadow: 2px 2px 0 transparent;
−
            <div class="row">
+
     -ms-box-shadow: 2px 2px 0 transparent;
−
                <div class="col l6 s12">
+
    box-shadow: 2px 2px 0 transparent;
−
                    <h5 class="white-text">Acknowledgement</h5>
+
}*/
−
                    <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>
+
@media screen and (max-width: 768px) {
−
                </div>
+
     #timeline {
−
                <div class="col l4 offset-l2 s12">
+
    margin: 30px;
−
                    <h5 class="white-text">Links</h5>
+
     padding: 0;
−
                    <ul>
+
}
−
                        <li>
+
#timeline:before {
−
                            <a class="grey-text text-lighten-3" href=""><img src="" alt=""></a>
+
    left: 0;
−
                        </li>
+
}
−
                        <li>
+
#timeline .timeline-item .timeline-content {
−
                            <a class="grey-text text-lighten-3" href=""><img src="" alt=""></a>
+
     width: 90%;
−
                        </li>
+
    float: right;
−
                        <li>
+
}
−
                            <a class="grey-text text-lighten-3" href=""><img src="" alt=""></a>
+
#timeline .timeline-item .timeline-content:before, #timeline .timeline-item .timeline-content.right:before {
−
                        </li>
+
     left: 10%;
−
                        <li>
+
     margin-left: -6px;
−
                            <a class="grey-text text-lighten-3" href=""><img src="" alt=""></a>
+
     border-left: 0;
−
                        </li>
+
     border-right: 7px solid #ee4d4d;
−
                    </ul>
+
}
−
                </div>
+
#timeline .timeline-item .timeline-icon {
−
            </div>
+
     left: 0;
−
        </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:44, 17 October 2016

div.timeline-icon>i { 

   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;

}*/

  1. timeline {
   width: 90%;
   margin: 30px auto;
   position: relative;
   -webkit-transition: all 0.4s ease;
   -moz-transition: all 0.4s ease;
   -ms-transition: all 0.4s ease;
   transition: all 0.4s ease;

}

  1. timeline:before {
   content: "";
   width: 3px;
   height: 100%;
   background: #ee4d4d;
   left: 50%;
   top: 0;
   position: absolute;

}

  1. timeline:after {
   content: "";
   clear: both;
   display: table;
   width: 100%}
  1. timeline .timeline-item {
   margin-bottom: 50px;
   position: relative;

}

  1. 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%}
  1. timeline .timeline-item .timeline-icon img {
   position: relative;
   top: 14px;
   left: 14px;

}

  1. 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;

}

  1. timeline .timeline-item .timeline-content h2 {
   padding: 15px;
   background: #ee4d4d;
   color: #fff;
   margin: -20px -20px 0 -20px;
   font-weight: 500;
   -webkit-border-radius: 3px 3px 0 0;
   -moz-border-radius: 3px 3px 0 0;
   -ms-border-radius: 3px 3px 0 0;
   border-radius: 3px 3px 0 0;

}

  1. 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;

}

  1. timeline .timeline-item .timeline-content.right {
   float: right;

}

  1. timeline .timeline-item .timeline-content.right:before {
   content: ;
   right: 45%;
   left: inherit;
   border-left: 0;
   border-right: 7px solid #ee4d4d;

} /*.btn { 

   padding: 5px 15px;
   text-decoration: none;
   background: transparent;
   border: 2px solid #f27c7c;
   color: #f27c7c;
   display: inline-block;
   position: relative;
   text-transform: uppercase;
   font-size: 12px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -ms-border-radius: 5px;
   border-radius: 5px;
   -webkit-transition: background 0.3s ease;
   -moz-transition: background 0.3s ease;
   -ms-transition: background 0.3s ease;
   transition: background 0.3s ease;
   -webkit-box-shadow: 2px 2px 0 #f27c7c;
   -moz-box-shadow: 2px 2px 0 #f27c7c;
   -ms-box-shadow: 2px 2px 0 #f27c7c;
   box-shadow: 2px 2px 0 #f27c7c;

} .btn:hover { 

   box-shadow: none;
   top: 2px;
   left: 2px;
   -webkit-box-shadow: 2px 2px 0 transparent;
   -moz-box-shadow: 2px 2px 0 transparent;
   -ms-box-shadow: 2px 2px 0 transparent;
   box-shadow: 2px 2px 0 transparent;

}*/ @media screen and (max-width: 768px) { 

   #timeline {
   margin: 30px;
   padding: 0;

}

  1. timeline:before {
   left: 0;

}

  1. timeline .timeline-item .timeline-content {
   width: 90%;
   float: right;

}

  1. timeline .timeline-item .timeline-content:before, #timeline .timeline-item .timeline-content.right:before {
   left: 10%;
   margin-left: -6px;
   border-left: 0;
   border-right: 7px solid #ee4d4d;

}

  1. timeline .timeline-item .timeline-icon {
   left: 0;

} }