|
|
(177 intermediate revisions not shown) |
Line 1: |
Line 1: |
- |
| |
- | <!DOCTYPE html>
| |
| <html lang="en"> | | <html lang="en"> |
- | <head>
| + | <head> |
- | <meta charset="UTF-8" />
| + | <meta charset="UTF-8" /> |
- | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | + | <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="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"> | | <style type="text/css"> |
| | | |
| /* hiding the top section*/ | | /* hiding the top section*/ |
- | body{position:absolute; top:0px; width:100%; height:1480px;} | + | body{position:absolute; top:0px; width:100%; height:100%;} |
| #top-section{ | | #top-section{ |
| height:0px; | | height:0px; |
Line 35: |
Line 27: |
| #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;} | | #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{ | | #content{ |
- | background-color:transparent; | + | background-color:white; |
| border:none; | | border:none; |
- | width:1360px; | + | width:1340px; |
- | height:800px;
| + | /* height:700px;*/ |
| marign:0 auto; | | marign:0 auto; |
| padding:0 0 0 0; | | padding:0 0 0 0; |
Line 72: |
Line 64: |
| z-index: 5000; | | z-index: 5000; |
| font-family: sans-serif; | | font-family: sans-serif; |
- | font-size: 95%; | + | font-size: 55%; |
| line-height: 1em; | | line-height: 1em; |
| z-index:99; | | z-index:99; |
Line 78: |
Line 70: |
| | | |
| | | |
- | .left-menu, .left-menu a {
| + | #aa{ |
- | text-align: left;
| + | width:100%; |
- | color:#999999;
| + | height:100%; |
- | text-transform: lowercase;
| + | margin:0 0 0 0; |
- | }
| + | padding:0 0 0 0; |
| + | float:left; |
| + | position:absolute; |
| | | |
- | .left-menu:hover {
| + | |
- | color: #D00000;
| + | |
- | background-color: transparent;
| + | |
| } | | } |
| | | |
- | .right-menu{width:400px; float:right}
| + | #b{ |
- | .right-menu, .right-menu a {
| + | width:100%; |
- | right: 0px;
| + | height:100%; |
- | text-align: right;
| + | margin:0 0 0 0; |
- | color: #999999;
| + | padding:0 0 0 0; |
- | }
| + | float:left; |
- | #menubar ul {
| + | display:none; |
- | 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;
| + | |
- | #}
| + | |
- | | + | |
- | .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
| + | |
- | */
| + | |
- | | + | |
- | 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;
| + | |
- | }
| + | |
- | | + | |
- | /*
| + | |
- | * 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/
| + | |
- | */
| + | |
- | | + | |
- | 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
| + | |
- | */
| + | |
- | | + | |
- | body {
| + | |
- | margin: 0;
| + | |
- | }
| + | |
- | | + | |
- | | + | |
- | /* =============================================================================
| + | |
- | Links
| + | |
- | ========================================================================== */
| + | |
- | | + | |
- | /*
| + | |
- | * Addresses outline displayed oddly in Chrome
| + | |
- | */
| + | |
- | | + | |
- | 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';
| + | |
- | src: url('file:///F|/桌面临时文件夹/IGEM/demo/选中/重要SmoothTransitionsResponsiveLayout/raphaelicons-webfont.eot');
| + | |
- | src: local('☺'),
| + | |
- | url('file:///F|/桌面临时文件夹/IGEM/demo/选中/重要SmoothTransitionsResponsiveLayout/fonts/raphaelicons-webfont.woff') format('woff'),
| + | |
- | url('file:///F|/桌面临时文件夹/IGEM/demo/选中/重要SmoothTransitionsResponsiveLayout/fonts/raphaelicons-webfont.ttf') format('truetype'),
| + | |
- | url('file:///F|/桌面临时文件夹/IGEM/demo/选中/重要SmoothTransitionsResponsiveLayout/fonts/raphaelicons-webfont.svgwebfontKOf9F4sx') format('svg');
| + | |
- | 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> |
- | <style type="text/css"> | + | <script language="javascript"> |
- | .st-container {
| + | function changemodel() |
- | position: absolute;
| + | { |
- | width: 100%;
| + | document.getElementById("image").src = "https://static.igem.org/mediawiki/2013/2/27/Nju-home-Model.png"; |
- | height: 100%;
| + | document.getElementById("b").style.display="block"; |
- | top: 0;
| + | |
- | left: 0;
| + | |
- | font-family: 'Josefin Slab', 'Myriad Pro', Arial, sans-serif;
| + | |
| } | | } |
- | | + | function changeproject() |
- | .st-container > input,
| + | { |
- | .st-container > a { | + | document.getElementById("image").src = "https://static.igem.org/mediawiki/2013/c/c6/Nju-home-Project.png"; |
- | position: fixed;
| + | document.getElementById("b").style.display="block"; |
- | bottom: 0px;
| + | |
- | width: 20%;
| + | |
- | cursor: pointer;
| + | |
- | font-size: 16px;
| + | |
- | height: 34px;
| + | |
- | line-height: 34px;
| + | |
| } | | } |
- | | + | function changehuman() |
- | .st-container > input {
| + | { |
- | opacity: 0;
| + | document.getElementById("image").src = "https://static.igem.org/mediawiki/2013/9/94/Human1111.png"; |
- | z-index: 1000;
| + | document.getElementById("b").style.display="block"; |
| } | | } |
- | | + | function changesafety() |
- | .st-container > a {
| + | { |
- | z-index: 10;
| + | document.getElementById("image").src = "https://static.igem.org/mediawiki/2013/f/f0/Nju-home-Safety.png"; |
- | font-weight: 700;
| + | document.getElementById("b").style.display="block"; |
- | background: #e23a6e;
| + | |
- | color: #fff;
| + | |
- | text-align: center;
| + | |
- | text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
| + | |
| } | | } |
- | | + | function changewetlab() |
- | /* "Fix" for percentage rounding: add a background bar pseudo element with the same color like the labels */
| + | { |
- | .st-container:before { | + | document.getElementById("image").src = "https://static.igem.org/mediawiki/2013/e/ed/Nju-logo-Wet_lab.png"; |
- | content: '';
| + | document.getElementById("b").style.display="block"; |
- | position: fixed;
| + | |
- | width: 100%;
| + | |
- | height: 34px;
| + | |
- | background: #e23a6e;
| + | |
- | z-index: 9;
| + | |
- | bottom: 0;
| + | |
| } | | } |
- | | + | function changeteam() |
- | #st-control-1, #st-control-1 + a {
| + | { |
- | left: 0;
| + | document.getElementById("image").src = "https://static.igem.org/mediawiki/2013/5/55/Nju-home-Team.png"; |
| + | document.getElementById("b").style.display="block"; |
| } | | } |
- | | + | function changeextras() |
- | #st-control-2, #st-control-2 + a {
| + | { |
- | left: 20%;
| + | document.getElementById("image").src = "https://static.igem.org/mediawiki/2013/6/68/Nju-home-Extras.png"; |
| + | document.getElementById("b").style.display="block"; |
| } | | } |
- | | + | function home() |
- | #st-control-3, #st-control-3 + a {
| + | { |
- | left: 40%;
| + | document.getElementById("b").style.display="none"; |
| } | | } |
| + | </script> |
| | | |
- | #st-control-4, #st-control-4 + a {
| + | </head> |
- | left: 60%;
| + | |
- | }
| + | |
| | | |
- | #st-control-5, #st-control-5 + a {
| + | <body style="margin:0px;padding:0px; "> |
- | left: 80%;
| + | <div style="float:left; position:absolute; z-index:1; display:block; "> |
- | }
| + | </br></br> |
| + | <a href="https://2013.igem.org"><img src="https://static.igem.org/mediawiki/2013/2/26/NJU-Miniminilogo.png" ></a> |
| + | </div> |
| + | <div id="aa"> |
| | | |
- | .st-container > input:checked + a, | + | <img src="https://static.igem.org/mediawiki/2013/0/0b/NJU_home_Index.png" usemap="#Map"/> |
- | .st-container > input:checked:hover + a{ | + | <map name="Map" id="Map"> |
- | background: #821134;
| + | <area shape="rect" coords="400,590,970,679" onmouseover="home();" href="#"onfocus="blur(this);"> |
- | }
| + | <area shape="circle" coords="400,122,82" onmouseover="changemodel();" href="https://2013.igem.org/Team:NJU_China/Modeling" onfocus="blur(this);"/> |
| + | <area shape="circle" coords="236,432,116" onmouseover="changeproject();" href="https://2013.igem.org/Team:NJU_China/Project" onfocus="blur(this);"/> |
| + | <area shape="circle" coords="530,315,110" onmouseover="changehuman();" href="https://2013.igem.org/Team:NJU_China/Human Practice" onfocus="blur(this);"/> |
| + | <area shape="circle" coords="875,173,105" onmouseover="changesafety();" href="https://2013.igem.org/Team:NJU_China/Safety" onfocus="blur(this);"/> |
| + | <area shape="circle" coords="762,388,105" onmouseover="changewetlab();" href="https://2013.igem.org/Team:NJU_China/Wet lab" onfocus="blur(this);"/> |
| + | <area shape="circle" coords="995,362,78" onmouseover="changeteam();" href="https://2013.igem.org/Team:NJU_China/Team" onfocus="blur(this);"/> |
| + | <area shape="circle" coords="1138,490,71" onmouseover="changeextras();" href="https://2013.igem.org/Team:NJU_China/Extras" onfocus="blur(this);"/> |
| + | </map> |
| + | </div> |
| + | <div id ="b"> |
| + | <img id = "image" src="https://static.igem.org/mediawiki/2013/6/68/Nju-home-Extras.png"> |
| + | </div> |
| | | |
- | .st-container > input:checked + a:after,
| + | </body> |
- | .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=["­","<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">
| + | |
- |
| + | |
- | <span class="right">
| + | |
- |
| + | |
- | </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>=========调试中=========</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> | | </html> |