|
|
| (2 intermediate revisions by the same user not shown) |
| Line 2: |
Line 2: |
| | <html> | | <html> |
| | <head> | | <head> |
| − |
| + | |
| | <!--separatrix--> | | <!--separatrix--> |
| − |
| |
| − |
| |
| − | <!--<link rel="stylesheet" href="css/style.css">-->
| |
| − |
| |
| | <style> | | <style> |
| − | @font-face { | + | .main#attributions { |
| − | font-family: 'Glyphicons-Halflings'; | + | padding: 0 10vw; |
| − | src: url('resource/2/glyphicons-halflings-regular.eot'); | + | padding-bottom: 10vh; |
| − | src: url('resource/2/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('resource/2/glyphicons-halflings-regular.woff') format('woff'), url('resource/2/glyphicons-halflings-regular.ttf') format('truetype'), url('resource/2/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); | + | font-size: 1.15rem; |
| | } | | } |
| | | | |
| − | /* latin */ | + | .main div.h2 { |
| − | @font-face {
| + | color: cyan; |
| − | font-family: 'Arvo';
| + | text-align: left; |
| − | font-style: normal;
| + | font-size: 2rem; |
| − | font-weight: 400;
| + | padding-bottom: 1rem; |
| − | src: local('Arvo'), url(resource/font/J0GYVYTizO1mjpT3aOcSbQ.woff2) format('woff2');
| + | |
| − | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
| + | |
| − | }
| + | |
| − | /* latin */
| + | |
| − | @font-face {
| + | |
| − | font-family: 'Arvo';
| + | |
| − | font-style: normal;
| + | |
| − | font-weight: 700;
| + | |
| − | src: local('Arvo Bold'), local('Arvo-Bold'), url(resource/font/Ya11CJGBCnKoJHvb8B2EOw.woff2) format('woff2');
| + | |
| − | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
| + | |
| | } | | } |
| | | | |
| − | /* latin-ext */ | + | article { |
| − | @font-face {
| + | margin-bottom: 2.5rem; |
| − | font-family: 'Raleway';
| + | |
| − | font-style: normal;
| + | |
| − | font-weight: 300;
| + | |
| − | src: local('Raleway Light'), local('Raleway-Light'), url(resource/font/ZKwULyCG95tk6mOqHQfRBCEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
| + | |
| − | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
| + | |
| − | }
| + | |
| − | /* latin */
| + | |
| − | @font-face {
| + | |
| − | font-family: 'Raleway';
| + | |
| − | font-style: normal;
| + | |
| − | font-weight: 300;
| + | |
| − | src: local('Raleway Light'), local('Raleway-Light'), url(resource/font/-_Ctzj9b56b8RgXW8FArifk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
| + | |
| − | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
| + | |
| − | }
| + | |
| − | /* latin-ext */
| + | |
| − | @font-face {
| + | |
| − | font-family: 'Raleway';
| + | |
| − | font-style: normal;
| + | |
| − | font-weight: 400;
| + | |
| − | src: local('Raleway'), local('Raleway-Regular'), url(resource/font/yQiAaD56cjx1AooMTSghGfY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
| + | |
| − | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
| + | |
| − | }
| + | |
| − | /* latin */
| + | |
| − | @font-face {
| + | |
| − | font-family: 'Raleway';
| + | |
| − | font-style: normal;
| + | |
| − | font-weight: 400;
| + | |
| − | src: local('Raleway'), local('Raleway-Regular'), url(resource/font/0dTEPzkLWceF7z0koJaX1A.woff2) format('woff2');
| + | |
| − | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
| + | |
| − | }
| + | |
| − | /* latin-ext */
| + | |
| − | @font-face {
| + | |
| − | font-family: 'Raleway';
| + | |
| − | font-style: normal;
| + | |
| − | font-weight: 500;
| + | |
| − | src: local('Raleway Medium'), local('Raleway-Medium'), url(resource/font/Li18TEFObx_yGdzKDoI_ciEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
| + | |
| − | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
| + | |
| − | }
| + | |
| − | /* latin */
| + | |
| − | @font-face {
| + | |
| − | font-family: 'Raleway';
| + | |
| − | font-style: normal;
| + | |
| − | font-weight: 500;
| + | |
| − | src: local('Raleway Medium'), local('Raleway-Medium'), url(resource/font/CcKI4k9un7TZVWzRVT-T8_k_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
| + | |
| − | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
| + | |
| | } | | } |
| | | | |
| − | /* latin-ext */ | + | #nutshell { |
| − | @font-face {
| + | padding: 1rem 0; |
| − | font-family: 'Lato';
| + | |
| − | font-style: normal;
| + | |
| − | font-weight: 400;
| + | |
| − | src: local('Lato Regular'), local('Lato-Regular'), url(resource/font/UyBMtLsHKBKXelqf4x7VRQ.woff2) format('woff2');
| + | |
| − | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
| + | |
| − | }
| + | |
| − | /* latin */
| + | |
| − | @font-face {
| + | |
| − | font-family: 'Lato';
| + | |
| − | font-style: normal;
| + | |
| − | font-weight: 400;
| + | |
| − | src: local('Lato Regular'), local('Lato-Regular'), url(resource/font/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2');
| + | |
| − | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
| + | |
| − | }
| + | |
| − | /* latin-ext */
| + | |
| − | @font-face {
| + | |
| − | font-family: 'Lato';
| + | |
| − | font-style: normal;
| + | |
| − | font-weight: 700;
| + | |
| − | src: local('Lato Bold'), local('Lato-Bold'), url(resource/font/ObQr5XYcoH0WBoUxiaYK3_Y6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
| + | |
| − | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
| + | |
| − | }
| + | |
| − | /* latin */
| + | |
| − | @font-face {
| + | |
| − | font-family: 'Lato';
| + | |
| − | font-style: normal;
| + | |
| − | font-weight: 700;
| + | |
| − | src: local('Lato Bold'), local('Lato-Bold'), url(resource/font/H2DMvhDLycM56KNuAtbJYA.woff2) format('woff2');
| + | |
| − | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
| + | |
| | } | | } |
| | | | |
| − | main {
| + | #nutshell .article { |
| − | width:100vw;
| + | margin: 1rem 0.4rem; |
| − | }
| + | line-height: 1.6rem; |
| − | </style>
| + | |
| − | <style>
| + | |
| − | #slider1 { | + | |
| − | margin:8vh 8vw; | + | |
| − | letter-spacing:0.025rem;
| + | |
| − | line-height: 1.42857143; | + | |
| | } | | } |
| | | | |
| − | #slider1 > .h1 { | + | #nutshell .article div:first-child { |
| − | margin:1.5rem 0;
| + | font-weight: bold; |
| − | font-size:2rem;
| + | color: cyan; |
| − | font-family:'Arvo',serif; | + | text-indent: 0; |
| − | font-weight:400; | + | |
| − | line-height:1.1; | + | |
| − | color:rgb(44,62,80);
| + | |
| | } | | } |
| | | | |
| − | #slider1 > .p { | + | #details .p { |
| − | text-indent:0;
| + | line-height: 1.2; |
| − | text-align:center;
| + | |
| − | font-family:'Raleway',serif;
| + | |
| − | font-weight:300;
| + | |
| − | width:48vw;
| + | |
| − | margin:0 auto;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider1 > div:nth-child(3) {
| + | |
| − | margin:4rem auto;
| + | |
| − | display:flex;
| + | |
| − | justify-content: space-around;
| + | |
| − | align-content:space-around;
| + | |
| − | flex-wrap: wrap;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider1 > div:nth-child(3) div {
| + | |
| − | margin:auto;
| + | |
| − | width:10vw;
| + | |
| − | position:relative;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider1 > div:nth-child(3) div img {
| + | |
| − | width:100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider1 > div:nth-child(3) div img:nth-child(2) {
| + | |
| − | position:absolute;
| + | |
| − | top:3vw;
| + | |
| − | left:2vw;
| + | |
| − | width:6vw;
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − | <style>
| + | |
| − | #slider2 {
| + | |
| − | background-color:#2D6D7B;
| + | |
| − | width:100%;
| + | |
| − | padding:5vh 0;
| + | |
| − | color:white;
| + | |
| − | letter-spacing:0.025rem;
| + | |
| − | line-height: 1.42857143; | + | |
| − | }
| + | |
| − | | + | |
| − | #slider2 .h1, #slider2 h2 {
| + | |
| − | font-family:'Arvo',serif;
| + | |
| − | font-weight:400;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider2 .p {
| + | |
| − | font-family:'Raleway',serif;
| + | |
| − | font-weight:300;
| + | |
| − | text-indent:0;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider2 > .h1 {
| + | |
| − | font-size:2rem;
| + | |
| − | padding:2rem 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider2 > .p {
| + | |
| − | padding:0 27vw;
| + | |
| − | text-align:center;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider2 > div:last-child {
| + | |
| − | margin:10vh auto;
| + | |
| − | width:90vw;
| + | |
| − | display:flex;
| + | |
| − | justify-content: space-between;
| + | |
| − | align-content:space-around;
| + | |
| − | flex-wrap: wrap;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider2 > div:last-child > div {
| + | |
| − | padding:3rem 0;
| + | |
| − | position:relative;
| + | |
| − | width:25vw;
| + | |
| − | margin:auto;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider2 > div:last-child > div > div:first-child {
| + | |
| − | background-color:white;
| + | |
| − | width:3.3vw;
| + | |
| − | height:3.3vw;
| + | |
| − | border-radius:0.4rem;
| + | |
| − | position:absolute;
| + | |
| − | top:0.4rem;
| + | |
| − | left:0;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider2 > div:last-child > div > div:last-child {
| + | |
| − | position:absolute;
| + | |
| − | top:0;
| + | |
| − | left:3.3vw;
| + | |
| − | padding:0 0.5rem;
| + | |
| − | width:20.5vw;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider2 > div:last-child > div > div:last-child .h2 {
| + | |
| − | text-align:left;
| + | |
| − | font-size:1.25rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider2 > div:last-child > div > div:last-child .p {
| + | |
| − | font-size:0.95rem;
| + | |
| − | text-align:left;
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − | <style>
| + | |
| − | #slider3 {
| + | |
| − | line-height: 1.42857143;
| + | |
| − | padding:5vh 0 4vh 0;
| + | |
| − | background-color:white;
| + | |
| − | letter-spacing:0.025rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider3 .p {
| + | |
| − | font-family:'Raleway',serif;
| + | |
| − | font-weight:300;
| + | |
| − | text-indent:0;
| + | |
| − | text-align:center;
| + | |
| − | font-size:1rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider3 > div:first-child {
| + | |
| − | margin:0 24vw;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider3 > div:first-child .h2 {
| + | |
| − | line-height:1.1;
| + | |
| − | font-family:'Arvo',serif;
| + | |
| − | font-weight:400;
| + | |
| − | font-size:2rem;
| + | |
| − | margin:0.8rem 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider3 > div:nth-child(2) {
| + | |
| − | margin:5vh auto;
| + | |
| − | width:86vw;
| + | |
| − | height:28vw;
| + | |
| − | display:flex;
| + | |
| − | justify-content: space-around;
| + | |
| − | align-content:space-around;
| + | |
| − | flex-wrap: wrap;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider3 > div:nth-child(2) img {
| + | |
| − | border-radius:0.2rem;
| + | |
| − | display:block;
| + | |
| − | margin:auto;
| + | |
| − | width:18vw;
| + | |
| − | height:12vw;
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − | <style>
| + | |
| − | #slider4 {
| + | |
| − | background-image:url('resource/2/map-bottom.png');
| + | |
| − | width:100%;
| + | |
| − | height:40vh;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider4 div:first-child {
| + | |
| − | padding:5vh 16vw;
| + | |
| − | display:flex;
| + | |
| − | justify-content: space-around;
| + | |
| − | align-content:space-around;
| + | |
| − | flex-wrap: wrap;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider4 div:first-child img {
| + | |
| − | width:20vw;
| + | |
| − | height:7vw;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider4 .p {
| + | |
| − | padding:10vh 0 0 0;
| + | |
| − | text-align:center;
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − | <style>
| + | |
| − | #slider5 {
| + | |
| − | line-height: 1.42857143;
| + | |
| − | padding:7vh 0 0 0;
| + | |
| − | background-color:#EDEEF0;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider5 .h1, #slider5 .h2 {
| + | |
| − | font-family: "Lato", Arial, Verdana;
| + | |
| − | font-weight: 100;
| + | |
| − | color: #444649;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider5 .p {
| + | |
| − | text-indent:0;
| + | |
| − | color: #939393;
| + | |
| − | font-family: 'Open Sans',sans-serif;
| + | |
| − | font-weight:300;
| + | |
| − | font-size: 0.95rem;
| + | |
| − | text-align:center;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider5 > .h1 {
| + | |
| − | font-size:2rem;
| + | |
| − | padding:0.56rem 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #slider5 > .p {
| + | |
| − | padding:0 23vw;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider5 > div:last-child {
| + | |
| − | padding:2rem 0 20vh 0;
| + | |
| − | display:flex;
| + | |
| − | justify-content: space-between;
| + | |
| − | align-content:space-around;
| + | |
| − | flex-wrap: wrap;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider5 > div:last-child .h2 {
| + | |
| − | font-size:1.35rem;
| + | |
| − | margin:0.6rem 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider5 > div:last-child figure {
| + | |
| − | margin:0;
| + | |
| − | padding:0;
| + | |
| − | width:32vw;
| + | |
| − | height:21.3vw;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #slider5 > div:last-child > figure img {
| + | |
| − | width:100%;
| + | |
| − |
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider5 > div:last-child > figure:nth-child(1) img {
| + | |
| − | filter:brightness(25%);
| + | |
| − | -webkit-filter:brightness(25%);
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider5 > div:last-child > figure:nth-child(2) img {
| + | |
| − | filter:grayscale(90%);
| + | |
| − | -webkit-filter:grayscale(90%);
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider5 > div:last-child > figure:nth-child(3) img {
| + | |
| − | filter:invert(90%);
| + | |
| − | -webkit-filter:invert(80%);
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider5 > div:last-child > figure:hover img{
| + | |
| − | filter:none;
| + | |
| − | -webkit-filter:none;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider5 > div:last-child > figure figcaption {
| + | |
| − | visibility:hidden;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider5 > div:last-child > figure:hover figcaption {
| + | |
| − | visibility:visible;
| + | |
| − | }
| + | |
| − |
| + | |
| − | </style>
| + | |
| − | <style>
| + | |
| − | #slider6 {
| + | |
| − | line-height: 1.42857143;
| + | |
| − | padding:10vh 8vw;
| + | |
| − | display:flex;
| + | |
| − | justify-content: space-between;
| + | |
| − | align-content:space-around;
| + | |
| − | flex-wrap: wrap;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider6 .h1, #slider6 .h2 {
| + | |
| − | text-align:left;
| + | |
| − | font-family: "Lato", Arial, Verdana;
| + | |
| − | font-weight: 100;
| + | |
| − | color: #444649;
| + | |
| − | line-height:1.1;
| + | |
| − | text-transform:uppercase;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider6 .h1 {
| + | |
| − | font-size:2rem;
| + | |
| − | margin-bottom:2.5rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider6 > div {
| + | |
| − | width:26vw;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider6 > div:first-child .p {
| + | |
| − | color: #939393;
| + | |
| − | font-family: 'Open Sans',sans-serif;
| + | |
| − | font-weight:300;
| + | |
| − | font-size: 0.95rem;
| + | |
| − | margin-bottom:0.5rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider6 > div:nth-child(2) .ui-accordion-header {
| + | |
| − | padding:0;
| + | |
| − | border-radius:0;
| + | |
| − | background:#EDEEF0;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider6 > div:nth-child(2) .ui-accordion-header span {
| + | |
| − | display:none;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider6 > div:nth-child(2) .ui-accordion-content {
| + | |
| − | border-radius:0;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider6 > div:nth-child(2) > div:nth-child(2) div {
| + | |
| − | border-color:#ddd;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider6 > div:nth-child(2) > div:nth-child(2) .h2 {
| + | |
| − | color:rgb(51, 51, 51);
| + | |
| − | transition: all 0.4s ease 0s;
| + | |
| − | font-family: "Lato", Arial, Verdana;
| + | |
| − | font-weight: 300;
| + | |
| − | padding:0.55rem 0.95rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider6 > div:nth-child(2) > div:nth-child(2) .p {
| + | |
| − | font-size:0.95rem;
| + | |
| − | color:#333;
| + | |
| − | font-family:"Lato", Arial, Verdana;
| + | |
| − | background:white;
| + | |
| − | padding:0.95rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider6 > div:nth-child(3){
| + | |
| − |
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | #slider6 > div:nth-child(3) > div > div {
| + | |
| − | width:100%;
| + | |
| − | margin-bottom:2rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider6 > div:nth-child(3) > div > div >div {
| + | |
| − | position:relative;
| + | |
| − | height:1rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider6 > div:nth-child(3) > div > div > div span {
| + | |
| − | font-size: 1rem;
| + | |
| − | line-height: 1.9px;
| + | |
| − | font-family: "Lato", Arial, Verdana;
| + | |
| − | color: #333;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider6 > div:nth-child(3) > div > div > div span:first-child {
| + | |
| − | position: absolute;
| + | |
| − | top: 0;
| + | |
| − | left: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider6 > div:nth-child(3) > div > div > div span:last-child {
| + | |
| − | position: absolute;
| + | |
| − | top: 0;
| + | |
| − | right: 0;
| + | |
| − |
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider6 > div:nth-child(3) > div > div > progress {
| + | |
| − | width:100%;
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − | <style>
| + | |
| − | #slider7 {
| + | |
| − | line-height: 1.42857143;
| + | |
| − | margin:10vh auto;
| + | |
| − | width:83.4vw;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider7 .h1, #slider7 .h2 {
| + | |
| − | font-family:"Lato", Arial, Verdana;
| + | |
| − | font-weight:100;
| + | |
| − | color:#444649;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider7 .p {
| + | |
| − | text-indent:0;
| + | |
| − | color:#939393;
| + | |
| − | font-family:'Open Sans',sans-serif;
| + | |
| − | font-weight:300;
| + | |
| − | font-size:0.95rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider7 > div:first-child .h1 {
| + | |
| − | padding:0.6rem 0;
| + | |
| − | font-size:1.75rem;
| + | |
| − |
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider7 > div:first-child .p {
| + | |
| − | text-align:center;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider7 > div:nth-child(2) {
| + | |
| − | display:flex;
| + | |
| − | margin:2rem 0 3rem 0;
| + | |
| − | padding:0;
| + | |
| − | justify-content: space-between;
| + | |
| − | align-content:space-around;
| + | |
| − | flex-wrap: wrap;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider7 > div:nth-child(2) > div {
| + | |
| − | width:22vw;
| + | |
| − | border:1px solid #d5d8dd;
| + | |
| − | padding:2.5rem 1.25rem;
| + | |
| − | margin:auto;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider7 > div:nth-child(2) > div .h2 {
| + | |
| − | margin:1rem 0;
| + | |
| − | font-size:1.15rem;
| + | |
| − | font-weight:100;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider7 > div:nth-child(2) > div .p {
| + | |
| − |
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − | <style>
| + | |
| − | #slider8 {
| + | |
| − | padding:10vh 6vw 20vh 6vw;
| + | |
| − | background:#EDEEF0;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider8 .h1 {
| + | |
| − | font-family: "Lato", Arial, Verdana;
| + | |
| − | font-weight: 100;
| + | |
| − | color: #444649;
| + | |
| − | line-height:1.1;
| + | |
| − | font-size:1.75rem;
| + | |
| − | padding:1.25rem 0 0.625rem 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider8 .p {
| + | |
| − | color: #939393;
| + | |
| − | font-family: 'Open Sans',sans-serif;
| + | |
| − | font-weight:300;
| + | |
| − | line-height:1.42857;
| + | |
| − | font-size:1.1rem;
| + | |
| − | text-align:center;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider8 .carousel-indicators {
| + | |
| − | bottom:-3rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider8 .carousel-indicators li {
| + | |
| − | border-color:#33cccc;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider8 .carousel-indicators li.active {
| + | |
| − | background-color:#33cccc;
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − | <style>
| + | |
| − | #slider9 {
| + | |
| − | background-image: url(resource/1/bcg_slide-3.jpg);
| + | |
| − | background-attachment: fixed;
| + | |
| − | background-position: center center;
| + | |
| − | background-repeat: no-repeat;
| + | |
| − | background-size: cover;
| + | |
| − | width:100vw;
| + | |
| − | height:19.54vw;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider9 > div {
| + | |
| − | background-color: rgba(255,255,255,0.8);
| + | |
| − | padding:6.25rem 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider9 .p {
| + | |
| − | font-family: "Lato", Arial, Verdana;
| + | |
| − | font-weight: 100;
| + | |
| − | line-height:1.1;
| + | |
| − | text-align:center;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider9 .p:first-child {
| + | |
| − | font-size: 2.2rem;
| + | |
| − | color: #666;
| + | |
| − | font-weight: bold;
| + | |
| − | margin-top:1.25rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider9 .p:last-child {
| + | |
| − | color: #999;
| + | |
| − | font-size: 1.2rem;
| + | |
| − | padding:0.625rem 0;
| + | |
| | } | | } |
| | </style> | | </style> |
| | <script> | | <script> |
| − | var vw = 0;
| |
| − | var vh = 0;
| |
| − | function calibrate_ruler() {
| |
| − | vw = $('#ruler').width();
| |
| − | vh = $('#ruler').height();
| |
| − | };
| |
| − |
| |
| − | </script>
| |
| − | <script>
| |
| − |
| |
| | $(function () { | | $(function () { |
| − |
| + | //particles(); |
| − | | + | |
| | }) | | }) |
| | </script> | | </script> |
| | </head> | | </head> |
| − | <body> | + | <body id="dongzhuoer"> |
| − | <div id="ruler" style="display:none;width:1vw;height:1vh;"></div> | + | <div id="particles-js"></div> |
| − |
| + | <script> |
| − | <main> | + | particlesJS('particles-js', |
| − | <div id="slider1"> | + | { |
| − | <div class="h1">
| + | "particles": { |
| − | Amazing Features
| + | "number": { |
| − | </div>
| + | "value": 100, |
| − | <div class="p">
| + | "density": { |
| − | Product is packed with everything you may ever need. Product is packed with everything
| + | "enable": true, |
| − | you may ever need. Product is packed with everything you may ever need.
| + | "value_area": 800 |
| − | </div>
| + | } |
| − | <div>
| + | }, |
| − | <div>
| + | "color": { |
| − | <img src="resource/2/hex.png">
| + | "value": "#0ff" |
| − | <img src="resource/2/retina.png">
| + | }, |
| − | </div>
| + | "shape": { |
| − | <div>
| + | "type": "circle", |
| − | <img src="resource/2/hex.png">
| + | "stroke": { |
| − | <img src="resource/2/support.png">
| + | "width": 0, |
| − | </div>
| + | "color": "#000000" |
| − | <div>
| + | }, |
| − | <img src="resource/2/hex.png">
| + | "polygon": { |
| − | <img src="resource/2/speed.png">
| + | "nb_sides": 5 |
| − | </div>
| + | }, |
| − | <div>
| + | "image": { |
| − | <img src="resource/2/hex.png">
| + | "src": "img/github.svg", |
| − | <img src="resource/2/social.png">
| + | "width": 100, |
| − | </div>
| + | "height": 100 |
| − | <div>
| + | } |
| − | <img src="resource/2/hex.png">
| + | }, |
| − | <img src="resource/2/shopping.png">
| + | "opacity": { |
| − | </div>
| + | "value": 0.4, |
| − | <div>
| + | "random": false, |
| − | <img src="resource/2/hex.png">
| + | "anim": { |
| − | <img src="resource/2/cloud.png">
| + | "enable": false, |
| − | </div>
| + | "speed": 1, |
| − | </div>
| + | "opacity_min": 0, |
| − | </div>
| + | "sync": false |
| − | <hr>
| + | } |
| − | <div id="slider6">
| + | }, |
| − | <div>
| + | "size": { |
| − | <div class="h1">
| + | "value": 5, |
| − | About Us
| + | "random": true, |
| − | </div>
| + | "anim": { |
| − | <div class="p">
| + | "enable": false, |
| − | We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you.
| + | "speed": 40, |
| − | </div>
| + | "size_min": 0, |
| − | <div class="p">
| + | "sync": false |
| − | We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place.
| + | } |
| − | </div>
| + | }, |
| − | </div>
| + | "line_linked": { |
| − | <div>
| + | "enable": true, |
| − | <div class="h1">
| + | "distance": 150, |
| − | Our Goals
| + | "color": "#ff0", |
| − | </div>
| + | "opacity": 0.4, |
| − | <div>
| + | "width": 1 |
| − | <div class="h2">
| + | }, |
| − | IMPRESSIVE TEMPLATE
| + | "move": { |
| − | </div>
| + | "enable": true, |
| − | <div class="p">
| + | "speed": 6, |
| − | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
| + | "direction": "none", |
| − | </div>
| + | "random": false, |
| − | <div class="h2">
| + | "straight": false, |
| − | TONS OF FEATURES
| + | "out_mode": "out", |
| − | </div>
| + | "attract": { |
| − | <div class="p">
| + | "enable": true, |
| − | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
| + | "rotateX": 600, |
| − | </div>
| + | "rotateY": 1200 |
| − | <div class="h2">
| + | } |
| − | CREATIVE LAYOUT
| + | } |
| − | </div>
| + | }, |
| − | <div class="p">
| + | "interactivity": { |
| − | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
| + | "detect_on": "canvas", |
| − | </div>
| + | "events": { |
| − | </div>
| + | "onhover": { |
| − | <script>
| + | "enable": true, |
| − | $("#slider6 > div:nth-child(2) > div:nth-child(2)").accordion();
| + | "mode": ["grab", "bubble"] |
| − | </script>
| + | }, |
| − | </div>
| + | "onclick": { |
| − | <div>
| + | "enable": true, |
| − | <div class="h1">
| + | "mode": ["push", "repulse"] |
| − | Our Goals
| + | }, |
| − | </div>
| + | "resize": true |
| − | <div>
| + | }, |
| − | <div>
| + | "modes": { |
| − | <div><span>HTML</span><span>40%</span></div>
| + | "grab": { |
| − | <progress value="40" max="100"></progress>
| + | "distance": 100, |
| − | </div>
| + | "line_linked": { |
| − | <div>
| + | "opacity": 0.75 |
| − | <div><span>Graphic </span><span>20%</span></div>
| + | } |
| − | <progress value="20" max="100"></progress>
| + | }, |
| − | </div>
| + | "bubble": { |
| − | <div>
| + | "distance": 100, |
| − | <div><span>JS </span><span>60%</span></div>
| + | "size": 4, |
| − | <progress value="60" max="100"></progress>
| + | "duration": 2, |
| − | </div>
| + | "opacity": 8, |
| − | </div>
| + | "speed": 5 |
| | + | }, |
| | + | "repulse": { |
| | + | "distance": 200 |
| | + | }, |
| | + | "push": { |
| | + | "particles_nb": 4 |
| | + | }, |
| | + | "remove": { |
| | + | "particles_nb": 2 |
| | + | } |
| | + | } |
| | + | }, |
| | + | "retina_detect": true, |
| | + | "config_demo": { |
| | + | "hide_card": false, |
| | + | "background_color": "#b61924", |
| | + | "background_image": "", |
| | + | "background_position": "50% 50%", |
| | + | "background_repeat": "no-repeat", |
| | + | "background_size": "cover" |
| | + | } |
| | + | } |
| | | | |
| − | </div>
| + | ); |
| | + | </script> |
| | + | <div class="main" id="attributions"> |
| | + | <div class="p"> |
| | + | haha |
| | </div> | | </div> |
| − | <hr>
| + | </div> |
| − | <div id="slider5">
| + | |
| − | <div class="h1">
| + | |
| − | Creative Minds
| + | |
| − | </div>
| + | |
| − | <div class="p">
| + | |
| − | We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you.
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <figure>
| + | |
| − | <img src="resource/1/c-1.jpg">
| + | |
| − | <figcaption>
| + | |
| − | <div class="h2">
| + | |
| − | John Doe
| + | |
| − | </div>
| + | |
| − | <div class="p">
| + | |
| − | Graphic Designer
| + | |
| − | </div>
| + | |
| − | </figcaption>
| + | |
| − | </figure>
| + | |
| − | <figure>
| + | |
| − | <img src="resource/1/c-2.jpg">
| + | |
| − | <figcaption>
| + | |
| − | <div class="h2">
| + | |
| − | John Doe
| + | |
| − | </div>
| + | |
| − | <div class="p">
| + | |
| − | Graphic Designer
| + | |
| − | </div>
| + | |
| − | </figcaption>
| + | |
| − | </figure>
| + | |
| − | <figure>
| + | |
| − | <img src="resource/1/c-3.jpg">
| + | |
| − | <figcaption>
| + | |
| − | <div class="h2">
| + | |
| − | John Doe
| + | |
| − | </div>
| + | |
| − | <div class="p">
| + | |
| − | Graphic Designer
| + | |
| − | </div>
| + | |
| − | </figcaption>
| + | |
| − | </figure>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | </div>
| + | |
| − | <hr>
| + | |
| − | <div id="slider3">
| + | |
| − | <div>
| + | |
| − | <div class="h2">
| + | |
| − | Our Projects
| + | |
| − | </div>
| + | |
| − | <div class="p">
| + | |
| − | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div id="img-container">
| + | |
| − | <img src="resource/2/1.jpg">
| + | |
| − | <img src="resource/2/2.jpg">
| + | |
| − | <img src="resource/2/3.jpg">
| + | |
| − | <img src="resource/2/4.jpg">
| + | |
| − | <img src="resource/2/5.jpg">
| + | |
| − | <img src="resource/2/6.jpg">
| + | |
| − | <img src="resource/2/7.jpg">
| + | |
| − | <img src="resource/2/8.jpg">
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <hr>
| + | |
| − | <div id="slider4">
| + | |
| − | <div>
| + | |
| − | <img src="resource/img/Nankai_bottom1.jpg">
| + | |
| − | <img src="resource/img/Nankai_bottom3.jpg">
| + | |
| − | <img src="resource/img/Nankai_bottom4.jpg">
| + | |
| − | </div>
| + | |
| − | <div class="p">
| + | |
| − | Copyright © NKU_China IGEM Team 2016
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <hr>
| + | |
| − | <div id="slider2">
| + | |
| − | <div class="h1">
| + | |
| − | Awesome Story.
| + | |
| − | </div>
| + | |
| − | <div class="p">
| + | |
| − | Tell your projects awesome story. Tell your projects awesome story. Tell your projects awesome story. Tell your projects awesome story.
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <div>
| + | |
| − | <div></div>
| + | |
| − | <div>
| + | |
| − | <div class="h2">
| + | |
| − | Customer Support
| + | |
| − | </div>
| + | |
| − | <div class="p">
| + | |
| − | Lorem ipsum dolor sit amet, consectetur
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <div></div>
| + | |
| − | <div>
| + | |
| − | <div class="h2">
| + | |
| − | Customer Support
| + | |
| − | </div>
| + | |
| − | <div class="p">
| + | |
| − | Lorem ipsum dolor sit amet, consectetur
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <div></div>
| + | |
| − | <div>
| + | |
| − | <div class="h2">
| + | |
| − | Customer Support
| + | |
| − | </div>
| + | |
| − | <div class="p">
| + | |
| − | Lorem ipsum dolor sit, consectetur adip.
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <div></div>
| + | |
| − | <div>
| + | |
| − | <div class="h2">
| + | |
| − | Customer Support
| + | |
| − | </div>
| + | |
| − | <div class="p">
| + | |
| − | Lorem ipsum dolor sit, consectetur adip.
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <div></div>
| + | |
| − | <div>
| + | |
| − | <div class="h2">
| + | |
| − | Customer Support
| + | |
| − | </div>
| + | |
| − | <div class="p">
| + | |
| − | Lorem ipsum dolor sit amet, consectetur
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <div></div>
| + | |
| − | <div>
| + | |
| − | <div class="h2">
| + | |
| − | Customer Support
| + | |
| − | </div>
| + | |
| − | <div class="p">
| + | |
| − | Lorem sit amet, consectetur adip.
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <hr>
| + | |
| − | <div id="slider7">
| + | |
| − | <div>
| + | |
| − | <div class="h1">
| + | |
| − | Our Services
| + | |
| − | </div>
| + | |
| − | <div class="p">
| + | |
| − | We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you.
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <div>
| + | |
| − | <div class="h2">
| + | |
| − | Photography
| + | |
| − | </div>
| + | |
| − | <div class="p">
| + | |
| − | We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you.
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <div class="h2">
| + | |
| − | Creative Ideas
| + | |
| − | </div>
| + | |
| − | <div class="p">
| + | |
| − | We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you.
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <div class="h2">
| + | |
| − | Consulting
| + | |
| − | </div>
| + | |
| − | <div class="p">
| + | |
| − | We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you.
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <hr>
| + | |
| − | <div id="slider8">
| + | |
| − | <div class="h1">
| + | |
| − | Testimonial
| + | |
| − | </div>
| + | |
| − | <div id="carousel-demo" class="carousel slide" data-ride="carousel">
| + | |
| − | <ol class="carousel-indicators">
| + | |
| − | <li data-target="#carousel-demo" data-slide-to="0" class="active"></li>
| + | |
| − | <li data-target="#carousel-demo" data-slide-to="1"></li>
| + | |
| − | <li data-target="#carousel-demo" data-slide-to="2"></li>
| + | |
| − | </ol>
| + | |
| − | <div class="carousel-inner">
| + | |
| − | <div class="item active">
| + | |
| − |
| + | |
| − | <div class="p">
| + | |
| − | We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you. We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you.
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | </div>
| + | |
| − | <div class="item">
| + | |
| − |
| + | |
| − | <div class="p">
| + | |
| − | We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you. We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you.
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | </div>
| + | |
| − | <div class="item">
| + | |
| − |
| + | |
| − | <div class="p">
| + | |
| − | We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you. We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you.
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <script>
| + | |
| − | console.log($('#carousel-demo'))
| + | |
| − | $('#carousel-demo').carousel();
| + | |
| − | </script>
| + | |
| − | </div>
| + | |
| − | <div id="slider9">
| + | |
| − | <div>
| + | |
| − | <div class="p">
| + | |
| − | "You only live once, but if you do it right, once is enough."
| + | |
| − | </div>
| + | |
| − | <div class="p">
| + | |
| − | Mae West
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div style="width:100vw;height:100vh;background-color:lightcyan;vertical-align:middle;text-align:center">
| + | |
| − | placeholder;
| + | |
| − | </div>
| + | |
| − | </main>
| + | |
| − | | + | |
| − | | + | |
| | </body> | | </body> |
| | </html> | | </html> |
| | + | {{NKU_China/footer}} |
