Difference between revisions of "Team:DUT China B"
| Line 1: | Line 1: | ||
{{DUT_China_B}} | {{DUT_China_B}} | ||
| − | |||
<html lang="en" class="no-js"> | <html lang="en" class="no-js"> | ||
<head> | <head> | ||
| Line 13: | Line 12: | ||
<title>3D Curtain Template | Codyhouse</title> | <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> | ||
Revision as of 09:53, 28 June 2019
3D Curtain Template
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores eos labore ratione illum excepturi neque sunt blanditiis ducimus soluta quae!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores eos labore ratione illum excepturi neque sunt blanditiis ducimus soluta quae!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores eos labore ratione illum excepturi neque sunt blanditiis ducimus soluta quae!