Team:NJU China/Project

From 2013.igem.org

(Difference between revisions)
(Prototype team page)
Line 1: Line 1:
-
<!-- *** What falls between these lines is the Alert Box!  You can remove it from your pages once you have read and understood the alert *** -->
+
<!DOCTYPE html>
 +
<html lang="en">
 +
    <head>
 +
<meta charset="UTF-8" />
 +
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 +
        <title>CSS-Only Responsive Layout with Smooth Transitions</title>
 +
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
        <meta name="description" content="CSS-only Responsive Layout with Smooth Transitions" />
 +
        <meta name="keywords" content="css3, transitions, animations, css-only, navigation, smooth scrolling, full width, full height, window width, window height" />
 +
        <meta name="author" content="Codrops" />
 +
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab:400,700' rel='stylesheet' type='text/css'>
 +
<style type="text/css">
 +
/* hiding the top section*/
 +
body{position:absolute; top:0px; width:100%; height:1480px;}
 +
#top-section{
 +
  height:0px;
 +
    border:none;
 +
    width:980px;
 +
    margin:0 auto;
 +
    padding:0 0 0 0;
 +
    background-color:transparent;
 +
    overflow:hide;
-
<html>
+
}
-
<div id="box" style="width: 700px; margin-left: 137px; padding: 5px; border: 3px solid #000; background-color: #fe2b33;">
+
#p-logo{display:none;}
-
<div id="template" style="text-align: center; font-weight: bold; font-size: large; color: #f6f6f6; padding: 5px;">
+
#search-controls{display:none;}
-
This is a template page. READ THESE INSTRUCTIONS.
+
#top{display:none;}
-
</div>
+
.firstHeading{display:none;}
-
<div id="instructions" style="text-align: center; font-weight: normal; font-size: small; color: #f6f6f6; padding: 5px;">
+
/* end of hiding the top section*/
-
You are provided with this team page template with which to start the iGEM season.  You may choose to personalize it to fit your team but keep the same "look." Or you may choose to take your team wiki to a different level and design your own wiki. You can find some examples <a href="https://2008.igem.org/Help:Template/Examples">HERE</a>.
+
-
</div>
+
-
<div id="warning" style="text-align: center; font-weight: bold; font-size: small; color: #f6f6f6; padding: 5px;">
+
-
You <strong>MUST</strong> have all of the pages listed in the menu below with the names specified.  PLEASE keep all of your pages within your teams namespace. 
+
-
</div>
+
-
</div>
+
-
</html>
+
-
<!-- *** End of the alert box *** -->
+
/* global setting*/
 +
#globalWrapper{position:absolute; top:0px;left:0px; width:100%; padding:0 0 0 0;margin:0 0 0 0;height:100%;font-family: calibri， Arial, Helvetica, sans-serif;}
 +
#content{
 +
    background-color:transparent;
 +
    border:none;
 +
    width:1200px;
 +
    height:700px;
 +
    marign:0 auto;
 +
    padding:0 0 0 0;
 +
    top:-40px;
 +
    }
 +
#bodyContent{
 +
    background-color:transparent;
 +
    border:none;
 +
   
 +
    }
 +
siteSub{
 +
    display:none;
 +
    border:none;
 +
    }
 +
contentSub{
 +
    display:none;
 +
    }
 +
/* end of global setting*/
 +
/*hiding the footer-box*/
 +
#footer-box{display:none;}
 +
#catlinks{display:none;}
 +
/*end of hiding the footer book*/
-
{| style="color:#1b2c8a;background-color:#0c6;" cellpadding="3" cellspacing="1" border="1" bordercolor="#fff" width="62%" align="center"
+
/* menu (page, edit ...) */
-
!align="center"|[[Team:NJU_China|Home]]
+
#menubar {
-
!align="center"|[[Team:NJU_China/Team|Team]]
+
    background-color:transparent;
-
!align="center"|[https://igem.org/Team.cgi?year=2013&team_name=NJU_China Official Team Profile]
+
    position: relative;
-
!align="center"|[[Team:NJU_China/Project|Project]]
+
    float:left;
-
!align="center"|[[Team:NJU_China/Parts|Parts Submitted to the Registry]]
+
    white-space: nowrap;
-
!align="center"|[[Team:NJU_China/Modeling|Modeling]]
+
    top:-6px;
-
!align="center"|[[Team:NJU_China/Notebook|Notebook]]
+
    width: 490px;
-
!align="center"|[[Team:NJU_China/Safety|Safety]]
+
    z-index: 5000;
-
!align="center"|[[Team:NJU_China/Attributions|Attributions]]
+
    font-family: sans-serif;
-
|}
+
    font-size: 95%;
 +
    line-height: 1em;
 +
    z-index:99;
 +
}
 +
.left-menu, .left-menu a {
 +
    text-align: left;
 +
    color:#999999;
 +
    text-transform: lowercase;
 +
}
 +
.left-menu:hover {
 +
    color: #D00000;
 +
    background-color: transparent;
 +
}
-
== '''Overall project''' ==
+
.right-menu{width:400px; float:right}
 +
.right-menu, .right-menu a {
 +
    right: 0px;
 +
    text-align: right;
 +
    color: #999999;
 +
}
 +
#menubar ul {
 +
    color: #999999;
 +
    list-style: none;
 +
}
 +
#menubar li {
 +
    display: inline;
 +
    position: relative;
 +
    cursor: pointer;
 +
    padding-left: 0px;
 +
    padding-right: 0px;
 +
}
 +
.left-menu li a {
 +
    padding: 0px 10px 0px 0px;
 +
}
 +
.left-menu .selected {
 +
#    color: #999999;
 +
}
 +
#.left-menu .selected:hover {
 +
#    color: #999999;
 +
#}
-
Tell us more about your project. Give us background.  Use this is the abstract of your project.  Be descriptive but concise (1-2 paragraphs)
+
.left-menu:hover a {
 +
    color: #999999;;
 +
}
 +
.left-menu li a:hover {
 +
    color: #D00000;
 +
    text-decoration: underline;
 +
}
 +
.right-menu li {
 +
#    background-color: transparent;
 +
}
 +
.right-menu li a {
 +
    padding: 0px 15px 0px 0px;
 +
    color: #999999;;
 +
    background-color: transparent;
 +
}
 +
.right-menu li a:hover {
 +
    color: #D00000;
 +
    text-decoration: underline;
 +
}
 +
/* end menu (edit, page ...) */
 +
/*! normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */
 +
/* =============================================================================
 +
  HTML5 display definitions
 +
  ========================================================================== */
 +
/*
 +
* Corrects block display not defined in IE6/7/8/9 & FF3
 +
*/
-
== Project Details==
+
article,
 +
aside,
 +
details,
 +
figcaption,
 +
figure,
 +
footer,
 +
header,
 +
hgroup,
 +
nav,
 +
section,
 +
summary {
 +
    display: block;
 +
}
 +
/*
 +
* Corrects inline-block display not defined in IE6/7/8/9 & FF3
 +
*/
 +
audio,
 +
canvas,
 +
video {
 +
    display: inline-block;
 +
    *display: inline;
 +
    *zoom: 1;
 +
}
 +
/*
 +
* Prevents modern browsers from displaying 'audio' without controls
 +
* Remove excess height in iOS5 devices
 +
*/
 +
audio:not([controls]) {
 +
    display: none;
 +
    height: 0;
 +
}
-
=== Part 2 ===
+
/*
 +
* Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
 +
* Known issue: no IE6 support
 +
*/
 +
[hidden] {
 +
    display: none;
 +
}
 +
/* =============================================================================
 +
  Base
 +
  ========================================================================== */
 +
/*
 +
* 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
 +
*    http://clagnut.com/blog/348/#c790
 +
* 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
 +
*    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
 +
*/
-
=== The Experiments ===
+
html {
 +
    font-size: 100%; /* 1 */
 +
    -webkit-text-size-adjust: 100%; /* 2 */
 +
    -ms-text-size-adjust: 100%; /* 2 */
 +
}
 +
/*
 +
* Addresses font-family inconsistency between 'textarea' and other form elements.
 +
*/
 +
html,
 +
button,
 +
input,
 +
select,
 +
textarea {
 +
    font-family: sans-serif;
 +
}
 +
/*
 +
* Addresses margins handled incorrectly in IE6/7
 +
*/
-
=== Part 3 ===
+
body {
 +
    margin: 0;
 +
}
 +
/* =============================================================================
 +
  Links
 +
  ========================================================================== */
 +
/*
 +
* Addresses outline displayed oddly in Chrome
 +
*/
-
== Results ==
+
a:focus {
 +
    outline: thin dotted;
 +
}
 +
 
 +
/*
 +
* Improves readability when focused and also mouse hovered in all browsers
 +
* people.opera.com/patrickl/experiments/keyboard/test
 +
*/
 +
 
 +
a:hover,
 +
a:active {
 +
    outline: 0;
 +
}
 +
 
 +
 
 +
/* =============================================================================
 +
  Typography
 +
  ========================================================================== */
 +
 
 +
/*
 +
* Addresses font sizes and margins set differently in IE6/7
 +
* Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5
 +
*/
 +
 
 +
h1 {
 +
    font-size: 2em;
 +
    margin: 0.67em 0;
 +
}
 +
 
 +
h2 {
 +
    font-size: 1.5em;
 +
    margin: 0.83em 0;
 +
}
 +
 
 +
h3 {
 +
    font-size: 1.17em;
 +
    margin: 1em 0;
 +
}
 +
 
 +
h4 {
 +
    font-size: 1em;
 +
    margin: 1.33em 0;
 +
}
 +
 
 +
h5 {
 +
    font-size: 0.83em;
 +
    margin: 1.67em 0;
 +
}
 +
 
 +
h6 {
 +
    font-size: 0.75em;
 +
    margin: 2.33em 0;
 +
}
 +
 
 +
/*
 +
* Addresses styling not present in IE7/8/9, S5, Chrome
 +
*/
 +
 
 +
abbr[title] {
 +
    border-bottom: 1px dotted;
 +
}
 +
 
 +
/*
 +
* Addresses style set to 'bolder' in FF3+, S4/5, Chrome
 +
*/
 +
 
 +
b,
 +
strong {
 +
    font-weight: bold;
 +
}
 +
 
 +
blockquote {
 +
    margin: 1em 40px;
 +
}
 +
 
 +
/*
 +
* Addresses styling not present in S5, Chrome
 +
*/
 +
 
 +
dfn {
 +
    font-style: italic;
 +
}
 +
 
 +
/*
 +
* Addresses styling not present in IE6/7/8/9
 +
*/
 +
 
 +
mark {
 +
    background: #ff0;
 +
    color: #000;
 +
}
 +
 
 +
/*
 +
* Addresses margins set differently in IE6/7
 +
*/
 +
 
 +
p,
 +
pre {
 +
    margin: 1em 0;
 +
}
 +
 
 +
/*
 +
* Corrects font family set oddly in IE6, S4/5, Chrome
 +
* en.wikipedia.org/wiki/User:Davidgothberg/Test59
 +
*/
 +
 
 +
pre,
 +
code,
 +
kbd,
 +
samp {
 +
    font-family: monospace, serif;
 +
    _font-family: 'courier new', monospace;
 +
    font-size: 1em;
 +
}
 +
 
 +
/*
 +
* Improves readability of pre-formatted text in all browsers
 +
*/
 +
 
 +
pre {
 +
    white-space: pre;
 +
    white-space: pre-wrap;
 +
    word-wrap: break-word;
 +
}
 +
 
 +
/*
 +
* 1. Addresses CSS quotes not supported in IE6/7
 +
* 2. Addresses quote property not supported in S4
 +
*/
 +
 
 +
/* 1 */
 +
 
 +
q {
 +
    quotes: none;
 +
}
 +
 
 +
/* 2 */
 +
 
 +
q:before,
 +
q:after {
 +
    content: '';
 +
    content: none;
 +
}
 +
 
 +
small {
 +
    font-size: 75%;
 +
}
 +
 
 +
/*
 +
* Prevents sub and sup affecting line-height in all browsers
 +
* gist.github.com/413930
 +
*/
 +
 
 +
sub,
 +
sup {
 +
    font-size: 75%;
 +
    line-height: 0;
 +
    position: relative;
 +
    vertical-align: baseline;
 +
}
 +
 
 +
sup {
 +
    top: -0.5em;
 +
}
 +
 
 +
sub {
 +
    bottom: -0.25em;
 +
}
 +
 
 +
 
 +
/* =============================================================================
 +
  Lists
 +
  ========================================================================== */
 +
 
 +
/*
 +
* Addresses margins set differently in IE6/7
 +
*/
 +
 
 +
dl,
 +
menu,
 +
ol,
 +
ul {
 +
    margin: 1em 0;
 +
}
 +
 
 +
dd {
 +
    margin: 0 0 0 40px;
 +
}
 +
 
 +
/*
 +
* Addresses paddings set differently in IE6/7
 +
*/
 +
 
 +
menu,
 +
ol,
 +
ul {
 +
    padding: 0 0 0 40px;
 +
}
 +
 
 +
/*
 +
* Corrects list images handled incorrectly in IE7
 +
*/
 +
 
 +
nav ul,
 +
nav ol {
 +
    list-style: none;
 +
    list-style-image: none;
 +
}
 +
 
 +
 
 +
/* =============================================================================
 +
  Embedded content
 +
  ========================================================================== */
 +
 
 +
/*
 +
* 1. Removes border when inside 'a' element in IE6/7/8/9, FF3
 +
* 2. Improves image quality when scaled in IE7
 +
*    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
 +
*/
 +
 
 +
img {
 +
    border: 0; /* 1 */
 +
    -ms-interpolation-mode: bicubic; /* 2 */
 +
}
 +
 
 +
/*
 +
* Corrects overflow displayed oddly in IE9
 +
*/
 +
 
 +
svg:not(:root) {
 +
    overflow: hidden;
 +
}
 +
 
 +
 
 +
/* =============================================================================
 +
  Figures
 +
  ========================================================================== */
 +
 
 +
/*
 +
* Addresses margin not present in IE6/7/8/9, S5, O11
 +
*/
 +
 
 +
figure {
 +
    margin: 0;
 +
}
 +
 
 +
 
 +
/* =============================================================================
 +
  Forms
 +
  ========================================================================== */
 +
 
 +
/*
 +
* Corrects margin displayed oddly in IE6/7
 +
*/
 +
 
 +
form {
 +
    margin: 0;
 +
}
 +
 
 +
/*
 +
* Define consistent border, margin, and padding
 +
*/
 +
 
 +
fieldset {
 +
    border: 1px solid #c0c0c0;
 +
    margin: 0 2px;
 +
    padding: 0.35em 0.625em 0.75em;
 +
}
 +
 
 +
/*
 +
* 1. Corrects color not being inherited in IE6/7/8/9
 +
* 2. Corrects text not wrapping in FF3
 +
* 3. Corrects alignment displayed oddly in IE6/7
 +
*/
 +
 
 +
legend {
 +
    border: 0; /* 1 */
 +
    padding: 0;
 +
    white-space: normal; /* 2 */
 +
    *margin-left: -7px; /* 3 */
 +
}
 +
 
 +
/*
 +
* 1. Corrects font size not being inherited in all browsers
 +
* 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
 +
* 3. Improves appearance and consistency in all browsers
 +
*/
 +
 
 +
button,
 +
input,
 +
select,
 +
textarea {
 +
    font-size: 100%; /* 1 */
 +
    margin: 0; /* 2 */
 +
    vertical-align: baseline; /* 3 */
 +
    *vertical-align: middle; /* 3 */
 +
}
 +
 
 +
/*
 +
* Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
 +
*/
 +
 
 +
button,
 +
input {
 +
    line-height: normal; /* 1 */
 +
}
 +
 
 +
/*
 +
* 1. Improves usability and consistency of cursor style between image-type 'input' and others
 +
* 2. Corrects inability to style clickable 'input' types in iOS
 +
* 3. Removes inner spacing in IE7 without affecting normal text inputs
 +
*    Known issue: inner spacing remains in IE6
 +
*/
 +
 
 +
button,
 +
input[type="button"],
 +
input[type="reset"],
 +
input[type="submit"] {
 +
    cursor: pointer; /* 1 */
 +
    -webkit-appearance: button; /* 2 */
 +
    *overflow: visible;  /* 3 */
 +
}
 +
 
 +
/*
 +
* Re-set default cursor for disabled elements
 +
*/
 +
 
 +
button[disabled],
 +
input[disabled] {
 +
    cursor: default;
 +
}
 +
 
 +
/*
 +
* 1. Addresses box sizing set to content-box in IE8/9
 +
* 2. Removes excess padding in IE8/9
 +
* 3. Removes excess padding in IE7
 +
      Known issue: excess padding remains in IE6
 +
*/
 +
 
 +
input[type="checkbox"],
 +
input[type="radio"] {
 +
    box-sizing: border-box; /* 1 */
 +
    padding: 0; /* 2 */
 +
    *height: 13px; /* 3 */
 +
    *width: 13px; /* 3 */
 +
}
 +
 
 +
/*
 +
* 1. Addresses appearance set to searchfield in S5, Chrome
 +
* 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
 +
*/
 +
 
 +
input[type="search"] {
 +
    -webkit-appearance: textfield; /* 1 */
 +
    -moz-box-sizing: content-box;
 +
    -webkit-box-sizing: content-box; /* 2 */
 +
    box-sizing: content-box;
 +
}
 +
 
 +
/*
 +
* Removes inner padding and search cancel button in S5, Chrome on OS X
 +
*/
 +
 
 +
input[type="search"]::-webkit-search-decoration,
 +
input[type="search"]::-webkit-search-cancel-button {
 +
    -webkit-appearance: none;
 +
}
 +
 
 +
/*
 +
* Removes inner padding and border in FF3+
 +
* www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
 +
*/
 +
 
 +
button::-moz-focus-inner,
 +
input::-moz-focus-inner {
 +
    border: 0;
 +
    padding: 0;
 +
}
 +
 
 +
/*
 +
* 1. Removes default vertical scrollbar in IE6/7/8/9
 +
* 2. Improves readability and alignment in all browsers
 +
*/
 +
 
 +
textarea {
 +
    overflow: auto; /* 1 */
 +
    vertical-align: top; /* 2 */
 +
}
 +
 
 +
 
 +
/* =============================================================================
 +
  Tables
 +
  ========================================================================== */
 +
 
 +
/*
 +
* Remove most spacing between table cells
 +
*/
 +
 
 +
table {
 +
    border-collapse: collapse;
 +
    border-spacing: 0;
 +
}
 +
/* Addition */
 +
/* apply a natural box layout model to all elements */
 +
/* By Paul Irish: http://paulirish.com/2012/box-sizing-border-box-ftw/ */
 +
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
 +
@font-face {
 +
font-family:'RaphaelIcons';
 +
    font-weight: normal;
 +
    font-style: normal;
 +
}
 +
/* General Demo Style */
 +
body{
 +
font-family: Georgia, serif;
 +
background: #ddd;
 +
font-weight: 400;
 +
font-size: 15px;
 +
color: #333;
 +
overflow: hidden;
 +
-webkit-font-smoothing: antialiased;
 +
}
 +
a{
 +
color: #555;
 +
text-decoration: none;
 +
}
 +
.clr{
 +
clear: both;
 +
padding: 0;
 +
height: 0;
 +
margin: 0;
 +
}
 +
/* Header Style */
 +
.codrops-top{
 +
line-height: 24px;
 +
font-size: 9px;
 +
text-transform: uppercase;
 +
z-index: 9999;
 +
position: relative;
 +
font-family: Cambria, Georgia, serif;
 +
}
 +
.codrops-top a{
 +
padding: 0px 10px;
 +
letter-spacing: 1px;
 +
color: #888;
 +
display: inline-block;
 +
text-shadow: 0 1px 1px rgba(255,255,255,0.4);
 +
}
 +
.codrops-top span.right{
 +
float: right;
 +
}
 +
.codrops-top span.right a{
 +
float: left;
 +
display: block;
 +
}
 +
@media screen and (max-width: 520px) {
 +
.codrops-top { display: none; }
 +
}
 +
</style>
 +
<style type="text/css">
 +
.st-container {
 +
position: absolute;
 +
width: 100%;
 +
height: 100%;
 +
top: 0;
 +
left: 0;
 +
font-family: 'Josefin Slab', 'Myriad Pro', Arial, sans-serif;
 +
}
 +
 
 +
.st-container > input,
 +
.st-container > a {
 +
position: fixed;
 +
bottom: 0px;
 +
width: 20%;
 +
cursor: pointer;
 +
font-size: 16px;
 +
height: 34px;
 +
line-height: 34px;
 +
}
 +
 
 +
.st-container > input {
 +
opacity: 0;
 +
z-index: 1000;
 +
}
 +
 
 +
.st-container > a {
 +
z-index: 10;
 +
font-weight: 700;
 +
background: #e23a6e;
 +
color: #fff;
 +
text-align: center;
 +
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
 +
}
 +
 
 +
/* "Fix" for percentage rounding: add a background bar pseudo element with the same color like the labels */
 +
.st-container:before {
 +
content: '';
 +
position: fixed;
 +
width: 100%;
 +
height: 34px;
 +
background: #e23a6e;
 +
z-index: 9;
 +
bottom: 0;
 +
}
 +
 
 +
#st-control-1, #st-control-1 + a {
 +
left: 0;
 +
}
 +
 
 +
#st-control-2, #st-control-2 + a {
 +
left: 20%;
 +
}
 +
 
 +
#st-control-3, #st-control-3 + a {
 +
left: 40%;
 +
}
 +
 
 +
#st-control-4, #st-control-4 + a {
 +
left: 60%;
 +
}
 +
 
 +
#st-control-5, #st-control-5 + a {
 +
left: 80%;
 +
}
 +
 
 +
.st-container > input:checked + a,
 +
.st-container > input:checked:hover + a{
 +
background: #821134;
 +
}
 +
 
 +
.st-container > input:checked + a:after,
 +
.st-container > input:checked:hover + a:after{
 +
bottom: 100%;
 +
border: solid transparent;
 +
content: '';
 +
height: 0;
 +
width: 0;
 +
position: absolute;
 +
pointer-events: none;
 +
border-bottom-color: #821134;
 +
border-width: 20px;
 +
left: 50%;
 +
margin-left: -20px;
 +
}
 +
 
 +
.st-container > input:hover + a{
 +
background: #AD244F;
 +
}
 +
 
 +
.st-container > input:hover + a:after {
 +
border-bottom-color: #AD244F;
 +
}
 +
 
 +
.st-scroll,
 +
.st-panel {
 +
position: relative;
 +
width: 100%;
 +
height: 100%;
 +
}
 +
 
 +
.st-scroll {
 +
top: 0;
 +
left: 0;
 +
-webkit-transition: all 0.6s ease-in-out;
 +
-moz-transition: all 0.6s ease-in-out;
 +
-o-transition: all 0.6s ease-in-out;
 +
-ms-transition: all 0.6s ease-in-out;
 +
transition: all 0.6s ease-in-out;
 +
 +
/* Let's enforce some hardware acceleration */
 +
-webkit-transform: translate3d(0, 0, 0);
 +
-webkit-backface-visibility: hidden;
 +
}
 +
 
 +
.st-panel{
 +
background: #fff;
 +
overflow: hidden;
 +
}
 +
 
 +
#st-control-1:checked ~ .st-scroll {
 +
-webkit-transform: translateY(0%);
 +
-moz-transform: translateY(0%);
 +
-o-transform: translateY(0%);
 +
-ms-transform: translateY(0%);
 +
transform: translateY(0%);
 +
}
 +
#st-control-2:checked ~ .st-scroll {
 +
-webkit-transform: translateY(-100%);
 +
-moz-transform: translateY(-100%);
 +
-o-transform: translateY(-100%);
 +
-ms-transform: translateY(-100%);
 +
transform: translateY(-100%);
 +
}
 +
#st-control-3:checked ~ .st-scroll {
 +
-webkit-transform: translateY(-200%);
 +
-moz-transform: translateY(-200%);
 +
-o-transform: translateY(-200%);
 +
-ms-transform: translateY(-200%);
 +
transform: translateY(-200%);
 +
}
 +
#st-control-4:checked ~ .st-scroll {
 +
-webkit-transform: translateY(-300%);
 +
-moz-transform: translateY(-300%);
 +
-o-transform: translateY(-300%);
 +
-ms-transform: translateY(-300%);
 +
transform: translateY(-300%);
 +
}
 +
#st-control-5:checked ~ .st-scroll {
 +
-webkit-transform: translateY(-400%);
 +
-moz-transform: translateY(-400%);
 +
-o-transform: translateY(-400%);
 +
-ms-transform: translateY(-400%);
 +
transform: translateY(-400%);
 +
}
 +
 
 +
 
 +
/* Content elements */
 +
 
 +
.st-deco{
 +
width: 200px;
 +
height: 200px;
 +
position: absolute;
 +
top: 0px;
 +
left: 50%;
 +
margin-left: -100px;
 +
background: #fa96b5;
 +
-webkit-transform: translateY(-50%) rotate(45deg);
 +
-moz-transform: translateY(-50%) rotate(45deg);
 +
-o-transform: translateY(-50%) rotate(45deg);
 +
-ms-transform: translateY(-50%) rotate(45deg);
 +
transform: translateY(-50%) rotate(45deg);
 +
}
 +
 
 +
[data-icon]:after {
 +
    content: attr(data-icon);
 +
    font-family: 'RaphaelIcons';
 +
    color: #fff;
 +
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
 +
position: absolute;
 +
width: 200px;
 +
height: 200px;
 +
line-height: 200px;
 +
text-align: center;
 +
font-size: 90px;
 +
top: 50%;
 +
left: 50%;
 +
margin: -100px 0 0 -100px;
 +
-webkit-transform: rotate(-45deg) translateY(25%);
 +
-moz-transform: rotate(-45deg) translateY(25%);
 +
-o-transform: rotate(-45deg) translateY(25%);
 +
-ms-transform: rotate(-45deg) translateY(25%);
 +
transform: rotate(-45deg) translateY(25%);
 +
}
 +
 
 +
.st-panel h2 {
 +
color: #e23a6e;
 +
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
 +
position: absolute;
 +
font-size: 54px;
 +
font-weight: 900;
 +
width: 80%;
 +
left: 10%;
 +
text-align: center;
 +
line-height: 50px;
 +
margin: -70px 0 0 0;
 +
padding: 0;
 +
top: 50%;
 +
-webkit-backface-visibility: hidden;
 +
}
 +
 
 +
#st-control-1:checked ~ .st-scroll #st-panel-1 h2,
 +
#st-control-2:checked ~ .st-scroll #st-panel-2 h2,
 +
#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
 +
#st-control-4:checked ~ .st-scroll #st-panel-4 h2,
 +
#st-control-5:checked ~ .st-scroll #st-panel-5 h2{
 +
-webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
 +
-moz-animation: moveDown 0.6s ease-in-out 0.2s backwards;
 +
-o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
 +
-ms-animation: moveDown 0.6s ease-in-out 0.2s backwards;
 +
animation: moveDown 0.6s ease-in-out 0.2s backwards;
 +
}
 +
@-webkit-keyframes moveDown{
 +
0% {
 +
-webkit-transform: translateY(-40px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-webkit-transform: translateY(0px); 
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@-moz-keyframes moveDown{
 +
0% {
 +
-moz-transform: translateY(-40px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-moz-transform: translateY(0px); 
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@-o-keyframes moveDown{
 +
0% {
 +
-o-transform: translateY(-40px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-o-transform: translateY(0px); 
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@-ms-keyframes moveDown{
 +
0% {
 +
-ms-transform: translateY(-40px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-ms-transform: translateY(0px); 
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@keyframes moveDown{
 +
0% {
 +
transform: translateY(-40px);
 +
opacity: 0;
 +
}
 +
100% {
 +
transform: translateY(0px); 
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
.st-panel p {
 +
position: absolute;
 +
text-align: center;
 +
font-size: 16px;
 +
line-height: 22px;
 +
color: #8b8b8b;
 +
z-index: 2;
 +
padding: 0;
 +
width: 50%;
 +
left: 25%;
 +
top: 50%;
 +
margin: 10px 0 0 0;
 +
-webkit-backface-visibility: hidden;
 +
}
 +
#st-control-1:checked ~ .st-scroll #st-panel-1 p,
 +
#st-control-2:checked ~ .st-scroll #st-panel-2 p,
 +
#st-control-3:checked ~ .st-scroll #st-panel-3 p,
 +
#st-control-4:checked ~ .st-scroll #st-panel-4 p,
 +
#st-control-5:checked ~ .st-scroll #st-panel-5 p{
 +
-webkit-animation: moveUp 0.6s ease-in-out 0.2s backwards;
 +
-moz-animation: moveUp 0.6s ease-in-out 0.2s backwards;
 +
-o-animation: moveUp 0.6s ease-in-out 0.2s backwards;
 +
-ms-animation: moveUp 0.6s ease-in-out 0.2s backwards;
 +
animation: moveUp 0.6s ease-in-out 0.2s backwards;
 +
}
 +
 
 +
@-webkit-keyframes moveUp{
 +
0% {
 +
-webkit-transform: translateY(40px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-webkit-transform: translateY(0px); 
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@-moz-keyframes moveUp{
 +
0% {
 +
-moz-transform: translateY(40px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-moz-transform: translateY(0px); 
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@-o-keyframes moveUp{
 +
0% {
 +
-o-transform: translateY(40px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-o-transform: translateY(0px); 
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@-ms-keyframes moveUp{
 +
0% {
 +
-ms-transform: translateY(40px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-ms-transform: translateY(0px); 
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@keyframes moveUp{
 +
0% {
 +
transform: translateY(40px);
 +
opacity: 0;
 +
}
 +
100% {
 +
transform: translateY(0px); 
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
/* Colored sections */
 +
 
 +
.st-color,
 +
.st-deco{
 +
background: #fa96b5;
 +
}
 +
.st-color [data-icon]:after {
 +
color: #fa96b5;
 +
}
 +
.st-color .st-deco {
 +
background: #fff;
 +
}
 +
.st-color h2 {
 +
color: #fff;
 +
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
 +
}
 +
.st-color p {
 +
color: #fff;
 +
color: rgba(255,255,255,0.8);
 +
}
 +
 
 +
@media screen and (max-width: 520px) {
 +
.st-panel h2 {
 +
font-size: 42px;
 +
}
 +
 +
.st-panel p {
 +
width: 90%;
 +
left: 5%;
 +
margin-top: 0;
 +
}
 +
 +
.st-container > a {
 +
font-size: 13px;
 +
}
 +
}
 +
@media screen and (max-width: 360px) {
 +
.st-container > a {
 +
font-size: 10px;
 +
}
 +
 +
.st-deco{
 +
width: 120px;
 +
height: 120px;
 +
margin-left: -60px;
 +
}
 +
 +
[data-icon]:after {
 +
font-size: 60px;
 +
-webkit-transform: rotate(-45deg) translateY(15%);
 +
-moz-transform: rotate(-45deg) translateY(15%);
 +
-o-transform: rotate(-45deg) translateY(15%);
 +
-ms-transform: rotate(-45deg) translateY(15%);
 +
transform: rotate(-45deg) translateY(15%);
 +
}
 +
}
 +
</style>
 +
<script language="Javascript">
 +
/* Modernizr 2.5.3 (Custom Build) | MIT & BSD
 +
* Build: http://www.modernizr.com/download/#-cssanimations-csstransforms-csstransforms3d-csstransitions-shiv-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes
 +
*/
 +
;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a)if(j[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.substr(1),e=(a+" "+o.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}var d="2.5.3",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w=function(a,c,d,e){var f,i,j,k=b.createElement("div"),l=b.body,m=l?l:b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),k.appendChild(j);return f=["&#173;","<style>",a,"</style>"].join(""),k.id=h,(l?k:m).innerHTML+=f,m.appendChild(k),l||(m.style.background="",g.appendChild(m)),i=c(k,a),l?k.parentNode.removeChild(k):m.parentNode.removeChild(m),!!i},x={}.hasOwnProperty,y;!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=u.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(u.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(u.call(arguments)))};return e});var G=function(a,c){var d=a.join(""),f=c.length;w(d,function(a,c){var d=b.styleSheets[b.styleSheets.length-1],g=d?d.cssRules&&d.cssRules[0]?d.cssRules[0].cssText:d.cssText||"":"",h=a.childNodes,i={};while(f--)i[h[f].id]=h[f];e.csstransforms3d=(i.csstransforms3d&&i.csstransforms3d.offsetLeft)===9&&i.csstransforms3d.offsetHeight===3},f,c)}([,["@media (",m.join("transform-3d),("),h,")","{#csstransforms3d{left:9px;position:absolute;height:3px;}}"].join("")],[,"csstransforms3d"]);q.cssanimations=function(){return F("animationName")},q.csstransforms=function(){return!!F("transform")},q.csstransforms3d=function(){var a=!!F("perspective");return a&&"webkitPerspective"in g.style&&(a=e.csstransforms3d),a},q.csstransitions=function(){return F("transition")};for(var H in q)y(q,H)&&(v=H.toLowerCase(),e[v]=q[H](),t.push((e[v]?"":"no-")+v));return z(""),i=k=null,function(a,b){function g(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function h(){var a=k.elements;return typeof a=="string"?a.split(" "):a}function i(a){var b={},c=a.createElement,e=a.createDocumentFragment,f=e();a.createElement=function(a){var e=(b[a]||(b[a]=c(a))).cloneNode();return k.shivMethods&&e.canHaveChildren&&!d.test(a)?f.appendChild(e):e},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+h().join().replace(/\w+/g,function(a){return b[a]=c(a),f.createElement(a),'c("'+a+'")'})+");return n}")(k,f)}function j(a){var b;return a.documentShived?a:(k.shivCSS&&!e&&(b=!!g(a,"article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio{display:none}canvas,video{display:inline-block;*display:inline;*zoom:1}[hidden]{display:none}audio[controls]{display:inline-block;*display:inline;*zoom:1}mark{background:#FF0;color:#000}")),f||(b=!i(a)),b&&(a.documentShived=b),a)}var c=a.html5||{},d=/^<|^(?:button|form|map|select|textarea)$/i,e,f;(function(){var a=b.createElement("a");a.innerHTML="<xyz></xyz>",e="hidden"in a,f=a.childNodes.length==1||function(){try{b.createElement("a")}catch(a){return!0}var c=b.createDocumentFragment();return typeof c.cloneNode=="undefined"||typeof c.createDocumentFragment=="undefined"||typeof c.createElement=="undefined"}()})();var k={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:j};a.html5=k,j(b)}(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return D([a])},e.testAllProps=F,e.testStyles=w,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}(this,this.document);
 +
</script>
 +
<!--[if lte IE 8]>
 +
<link rel="stylesheet" type="text/css" href="css/simple.css" />
 +
<![endif]-->
 +
    </head>
 +
    <body>
 +
        <div class="container">
 +
 +
<!-- Codrops top bar -->
 +
            <div class="codrops-top">
 +
                <a href="http://tympanus.net/Tutorials/CSS3ImageAccordion/">
 +
                    <strong>&laquo; Previous Demo: </strong>Image Accordion with CSS3
 +
                </a>
 +
                <span class="right">
 +
                    <a href="http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/">
 +
                        <strong>Back to the Codrops Article</strong>
 +
                    </a>
 +
                </span>
 +
                <div class="clr"></div>
 +
            </div><!--/ Codrops top bar -->
 +
 +
<div class="st-container">
 +
 +
<input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
 +
<a href="#st-panel-1">Serendipity</a>
 +
<input type="radio" name="radio-set" id="st-control-2"/>
 +
<a href="#st-panel-2">Happiness</a>
 +
<input type="radio" name="radio-set" id="st-control-3"/>
 +
<a href="#st-panel-3">Tranquillity</a>
 +
<input type="radio" name="radio-set" id="st-control-4"/>
 +
<a href="#st-panel-4">Positivity</a>
 +
<input type="radio" name="radio-set" id="st-control-5"/>
 +
<a href="#st-panel-5">Passion</a>
 +
 +
<div class="st-scroll">
 +
 +
<!-- Placeholder text from http://hipsteripsum.me/ -->
 +
 +
<section class="st-panel" id="st-panel-1">
 +
<div class="st-deco" data-icon="H"></div>
 +
<h2>Serendipity</h2>
 +
<p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>
 +
</section>
 +
 +
<section class="st-panel st-color" id="st-panel-2">
 +
<div class="st-deco" data-icon="2"></div>
 +
<h2>Happiness</h2>
 +
<p>Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.</p>
 +
</section>
 +
 +
<section class="st-panel" id="st-panel-3">
 +
<div class="st-deco" data-icon="B"></div>
 +
<h2>Tranquillity</h2>
 +
<p>Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.</p>
 +
</section>
 +
 +
<section class="st-panel st-color" id="st-panel-4">
 +
<div class="st-deco" data-icon="x"></div>
 +
<h2>Positivity</h2>
 +
<p>Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p>
 +
</section>
 +
 +
<section class="st-panel" id="st-panel-5">
 +
<div class="st-deco" data-icon="Ç"></div>
 +
<h2>Passion</h2>
 +
<p>Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.</p>
 +
</section>
 +
 
 +
</div><!-- // st-scroll -->
 +
 +
</div><!-- // st-container -->
 +
 +
        </div>
 +
</body>
 +
</html>

Revision as of 23:43, 24 September 2013

<!DOCTYPE html> CSS-Only Responsive Layout with Smooth Transitions

« Previous Demo: Image Accordion with CSS3 Back to the Codrops Article
Serendipity Happiness Tranquillity Positivity Passion

Serendipity

Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.

Happiness

Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.

Tranquillity

Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.

Positivity

Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.

Passion

Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.

Retrieved from "http://2013.igem.org/Team:NJU_China/Project"