|
|
Line 11: |
Line 11: |
| <script src="js/modernizr.js"></script> <!-- Modernizr --> | | <script src="js/modernizr.js"></script> <!-- Modernizr --> |
| | | |
− | <title>3D Curtain Template | Codyhouse</title>
| |
− | /* --------------------------------
| |
− |
| |
− | Primary style
| |
− |
| |
− | -------------------------------- */
| |
− | *, *::after, *::before {
| |
− | -webkit-box-sizing: border-box;
| |
− | -moz-box-sizing: border-box;
| |
− | box-sizing: border-box;
| |
− | }
| |
− |
| |
− | html {
| |
− | font-size: 62.5%;
| |
− | }
| |
− |
| |
− | body {
| |
− | font-size: 1.6rem;
| |
− | font-family: "Slabo 27px", serif;
| |
− | color: #ffffff;
| |
− | background-color: #131d20;
| |
− | }
| |
− | body::before {
| |
− | /* never visible - this is used in jQuery to check the current MQ */
| |
− | content: 'mobile';
| |
− | display: none;
| |
− | }
| |
− | @media only screen and (min-width: 1170px) {
| |
− | body::before {
| |
− | /* never visible - this is used in jQuery to check the current MQ */
| |
− | content: 'desktop';
| |
− | }
| |
− | }
| |
− |
| |
− | a {
| |
− | color: #e3ca76;
| |
− | text-decoration: none;
| |
− | }
| |
− |
| |
− | /* --------------------------------
| |
− |
| |
− | Main Components
| |
− |
| |
− | -------------------------------- */
| |
− | @media only screen and (min-width: 1170px) {
| |
− | .cd-section {
| |
− | height: 100vh;
| |
− | }
| |
− | }
| |
− | .cd-section h1 {
| |
− | position: relative;
| |
− | top: 50%;
| |
− | -webkit-transform: translateY(-50%);
| |
− | -moz-transform: translateY(-50%);
| |
− | -ms-transform: translateY(-50%);
| |
− | -o-transform: translateY(-50%);
| |
− | transform: translateY(-50%);
| |
− | -webkit-font-smoothing: antialiased;
| |
− | -moz-osx-font-smoothing: grayscale;
| |
− | text-align: center;
| |
− | font-size: 2.6rem;
| |
− | }
| |
− | @media only screen and (min-width: 768px) {
| |
− | .cd-section h1 {
| |
− | font-size: 3.2rem;
| |
− | }
| |
− | }
| |
− | @media only screen and (min-width: 1170px) {
| |
− | .cd-section h1 {
| |
− | font-size: 4.2rem;
| |
− | }
| |
− | }
| |
− |
| |
− | .cd-block, .cd-half-block {
| |
− | -webkit-transform: translateZ(0);
| |
− | -moz-transform: translateZ(0);
| |
− | -ms-transform: translateZ(0);
| |
− | -o-transform: translateZ(0);
| |
− | transform: translateZ(0);
| |
− | -webkit-backface-visibility: hidden;
| |
− | backface-visibility: hidden;
| |
− | }
| |
− |
| |
− | .cd-block {
| |
− | -webkit-transform-origin: center center;
| |
− | -moz-transform-origin: center center;
| |
− | -ms-transform-origin: center center;
| |
− | -o-transform-origin: center center;
| |
− | transform-origin: center center;
| |
− | }
| |
− | .cd-section:first-of-type .cd-block {
| |
− | visibility: visible;
| |
− | height: 100vh;
| |
− | background-color: #263b40;
| |
− | }
| |
− | @media only screen and (min-width: 1170px) {
| |
− | .cd-block {
| |
− | position: fixed;
| |
− | width: 100%;
| |
− | min-height: 100vh;
| |
− | top: 0;
| |
− | left: 0;
| |
− | height: 100vh;
| |
− | box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
| |
− | visibility: hidden;
| |
− | }
| |
− | .cd-section:first-of-type .cd-block {
| |
− | visibility: visible;
| |
− | }
| |
− | .cd-block > * {
| |
− | visibility: visible;
| |
− | }
| |
− | }
| |
− |
| |
− | .cd-half-block {
| |
− | background: #ffffff;
| |
− | color: #263b40;
| |
− | }
| |
− | .cd-half-block:nth-of-type(1) {
| |
− | height: 60vh;
| |
− | background-color: #263b40;
| |
− | background-position: center center;
| |
− | background-repeat: no-repeat;
| |
− | }
| |
− | .cd-half-block:nth-of-type(2) {
| |
− | padding: 4em 10%;
| |
− | }
| |
− | .cd-half-block p {
| |
− | font-size: 1.8rem;
| |
− | line-height: 1.8;
| |
− | }
| |
− | .cd-section:nth-of-type(2) .cd-half-block:first-of-type {
| |
− | background-image: url("../img/T--DUT_China_B--bcgimg-1.jpg");
| |
− | background-size: cover;
| |
− | }
| |
− | .cd-section:nth-of-type(3) .cd-half-block:first-of-type {
| |
− | background-image: url("../img/T--DUT_China_B--bcgimg-2.jpg");
| |
− | background-size: cover;
| |
− | }
| |
− | .cd-section:nth-of-type(4) .cd-half-block:first-of-type {
| |
− | background-image: url("../img/T--DUT_China_B--bcgimg-3.jpg");
| |
− | background-size: cover;
| |
− | }
| |
− | @media only screen and (min-width: 1170px) {
| |
− | .cd-half-block {
| |
− | height: 100vh !important;
| |
− | width: 50%;
| |
− | position: absolute;
| |
− | top: 0;
| |
− | }
| |
− | .cd-half-block p {
| |
− | position: absolute;
| |
− | left: 50%;
| |
− | top: 50%;
| |
− | bottom: auto;
| |
− | right: auto;
| |
− | -webkit-transform: translateX(-50%) translateY(-50%);
| |
− | -moz-transform: translateX(-50%) translateY(-50%);
| |
− | -ms-transform: translateX(-50%) translateY(-50%);
| |
− | -o-transform: translateX(-50%) translateY(-50%);
| |
− | transform: translateX(-50%) translateY(-50%);
| |
− | width: 100%;
| |
− | padding: 0 30%;
| |
− | font-size: 2.4rem;
| |
− | }
| |
− | .cd-section:nth-of-type(even) .cd-half-block:first-of-type, .cd-section:nth-of-type(odd) .cd-half-block:nth-of-type(2) {
| |
− | left: 0;
| |
− | -webkit-transform: translateX(-100%);
| |
− | -moz-transform: translateX(-100%);
| |
− | -ms-transform: translateX(-100%);
| |
− | -o-transform: translateX(-100%);
| |
− | transform: translateX(-100%);
| |
− | }
| |
− | .cd-section:nth-of-type(odd) .cd-half-block:first-of-type, .cd-section:nth-of-type(even) .cd-half-block:nth-of-type(2) {
| |
− | right: 0;
| |
− | -webkit-transform: translateX(100%);
| |
− | -moz-transform: translateX(100%);
| |
− | -ms-transform: translateX(100%);
| |
− | -o-transform: translateX(100%);
| |
− | transform: translateX(100%);
| |
− | }
| |
− | }
| |
− |
| |
− | .cd-vertical-nav {
| |
− | position: fixed;
| |
− | z-index: 1;
| |
− | right: 3%;
| |
− | top: 50%;
| |
− | bottom: auto;
| |
− | -webkit-transform: translateY(-50%);
| |
− | -moz-transform: translateY(-50%);
| |
− | -ms-transform: translateY(-50%);
| |
− | -o-transform: translateY(-50%);
| |
− | transform: translateY(-50%);
| |
− | display: none;
| |
− | }
| |
− | .cd-vertical-nav a {
| |
− | display: block;
| |
− | height: 40px;
| |
− | width: 40px;
| |
− | /* image replace */
| |
− | overflow: hidden;
| |
− | text-indent: 100%;
| |
− | white-space: nowrap;
| |
− | background: transparent url(../img/T--DUT_China_B--cd-icon-arrow.svg) no-repeat center center;
| |
− | -webkit-transition: opacity 0.2s 0s, visibility 0.2s 0s;
| |
− | -moz-transition: opacity 0.2s 0s, visibility 0.2s 0s;
| |
− | transition: opacity 0.2s 0s, visibility 0.2s 0s;
| |
− | }
| |
− | .cd-vertical-nav a.cd-prev {
| |
− | -webkit-transform: rotate(180deg);
| |
− | -moz-transform: rotate(180deg);
| |
− | -ms-transform: rotate(180deg);
| |
− | -o-transform: rotate(180deg);
| |
− | transform: rotate(180deg);
| |
− | margin-bottom: 10px;
| |
− | }
| |
− | .cd-vertical-nav a.inactive {
| |
− | visibility: hidden;
| |
− | opacity: 0;
| |
− | -webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s;
| |
− | -moz-transition: opacity 0.2s 0s, visibility 0s 0.2s;
| |
− | transition: opacity 0.2s 0s, visibility 0s 0.2s;
| |
− | }
| |
− | @media only screen and (min-width: 1170px) {
| |
− | .cd-vertical-nav {
| |
− | display: block;
| |
− | }
| |
− | }
| |
− |
| |
| </head> | | </head> |
| <body> | | <body> |