add style to fix sizes of 1980px W +
This commit is contained in:
parent
d9dbf690db
commit
d53ad46486
@ -690,11 +690,16 @@ responsive land custom
|
||||
}
|
||||
|
||||
#china_achievements {
|
||||
margin-top: 0;
|
||||
margin-top: 32rem;
|
||||
padding: 1rem 172px 0;
|
||||
}
|
||||
|
||||
#full_creative {
|
||||
min-height: 100vh;
|
||||
}
|
||||
#our_team{
|
||||
.title{
|
||||
margin-top: 18rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,7 +10,24 @@ html {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#hand {
|
||||
.large-texts {
|
||||
font-size: 60px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 110%;
|
||||
}
|
||||
|
||||
|
||||
#cover {
|
||||
background: url("/assets/img/BG 1.png") center no-repeat;
|
||||
background-size: cover;
|
||||
#cover-handle {
|
||||
float: left;
|
||||
height: 25vh;
|
||||
top: 25vh;
|
||||
}
|
||||
#hand {
|
||||
background: url("/assets/img/hand 1.png") center;
|
||||
background-size: cover;
|
||||
height: 100vh;
|
||||
@ -19,31 +36,11 @@ html {
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#main_title_container {
|
||||
backdrop-filter: blur(3px);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#cover {
|
||||
background: url("/assets/img/BG 1.png") center no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
}
|
||||
.title-container {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
#cover-handle {
|
||||
float: left;
|
||||
height: 25vh;
|
||||
top: 25vh;
|
||||
}
|
||||
|
||||
#cover {
|
||||
h2 {
|
||||
color: #fffdfc;
|
||||
font-family: "GT Walsheim Pro";
|
||||
@ -58,6 +55,32 @@ html {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#main_title_container {
|
||||
backdrop-filter: blur(3px);
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
top: -95vh;
|
||||
|
||||
#main_title {
|
||||
background: url("/assets/img/sesame.png") no-repeat;
|
||||
background-size: contain;
|
||||
box-sizing: border-box;
|
||||
font-weight: 500;
|
||||
min-height: 35vw;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
top: 4rem;
|
||||
width: 95vw;
|
||||
|
||||
h2 {
|
||||
margin-top: 5vh;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.button {
|
||||
backdrop-filter: blur(3px);
|
||||
background: linear-gradient(329.49deg, rgba(255, 216, 244, 0) 34.06%, rgba(255, 207, 242, 0.2) 77.26%);
|
||||
@ -78,30 +101,8 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
#main_title_container {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
top: -95vh;
|
||||
}
|
||||
|
||||
#main_title {
|
||||
background: url("/assets/img/sesame.png") no-repeat;
|
||||
background-size: contain;
|
||||
box-sizing: border-box;
|
||||
font-weight: 500;
|
||||
min-height: 35vw;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
top: 4rem;
|
||||
width: 95vw;
|
||||
}
|
||||
|
||||
#main_title_container h2 {
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
#welcome {
|
||||
#welcome {
|
||||
background: #000;
|
||||
position: absolute;
|
||||
text-shadow: 0 0 1rem #333;
|
||||
@ -131,47 +132,49 @@ html {
|
||||
background: url("/assets/img/section2_phone.png");
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.phones-land {
|
||||
.phones-land {
|
||||
float: left;
|
||||
position: static;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#phone-watches-1 {
|
||||
#phone-watches-1 {
|
||||
height: 690px;
|
||||
left: -137px;
|
||||
position: absolute;
|
||||
top: 1531px;
|
||||
width: 345px;
|
||||
}
|
||||
}
|
||||
|
||||
#phone-watches-2 {
|
||||
#phone-watches-2 {
|
||||
filter: blur(2px);
|
||||
height: 176px;
|
||||
left: -200px;
|
||||
top: 470px;
|
||||
width: 88px;
|
||||
}
|
||||
}
|
||||
|
||||
#phone-watches-3 {
|
||||
#phone-watches-3 {
|
||||
filter: blur(4px);
|
||||
height: 342px;
|
||||
left: 916px;
|
||||
top: 475px;
|
||||
width: 171px;
|
||||
}
|
||||
}
|
||||
|
||||
#phone-watches-4 {
|
||||
#phone-watches-4 {
|
||||
filter: blur(6px);
|
||||
height: 550px;
|
||||
left: 1222px;
|
||||
top: 523px;
|
||||
width: 275px;
|
||||
}
|
||||
}
|
||||
|
||||
#open {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#open {
|
||||
box-sizing: border-box;
|
||||
color: rgba(248, 243, 241, 0.1);
|
||||
font-size: 200px;
|
||||
@ -190,32 +193,32 @@ html {
|
||||
margin-bottom: 400px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#unlock, unlock_white {
|
||||
#unlock, unlock_white {
|
||||
min-height: 20%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
min-height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
#unlock {
|
||||
#unlock {
|
||||
top: -499px;
|
||||
}
|
||||
}
|
||||
|
||||
#unlock_white {
|
||||
#unlock_white {
|
||||
opacity: 0.2;
|
||||
margin-top: -54vh;
|
||||
height: 37vh;
|
||||
}
|
||||
}
|
||||
|
||||
#open-handle {
|
||||
#open-handle {
|
||||
float: left;
|
||||
height: 20vh;
|
||||
}
|
||||
}
|
||||
|
||||
#content {
|
||||
#content {
|
||||
height: 100vh;
|
||||
min-height: 200px;
|
||||
top: 50vh;
|
||||
@ -224,26 +227,26 @@ html {
|
||||
h2 {
|
||||
margin-top: 33vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#content_all {
|
||||
#content_all {
|
||||
color: #fffdfc;
|
||||
padding-top: 50vh;
|
||||
position: relative;
|
||||
top: 0;
|
||||
width: 120%;
|
||||
}
|
||||
}
|
||||
|
||||
#content_all_img {
|
||||
#content_all_img {
|
||||
background: url("/assets/img/bg_content.png");
|
||||
background-size: cover;
|
||||
height: 150vh;
|
||||
left: 0;
|
||||
margin-top: -50vh;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
#content_all {
|
||||
#content_all {
|
||||
.columns {
|
||||
font-size: 100px;
|
||||
margin: 0 auto;
|
||||
@ -271,10 +274,10 @@ html {
|
||||
.text {
|
||||
text-shadow: 0 0 1rem #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#content_all {
|
||||
#content_all {
|
||||
.columns > .column:nth-of-type(1) {
|
||||
font-size: 1em;
|
||||
letter-spacing: -0.04em;
|
||||
@ -284,9 +287,9 @@ html {
|
||||
.color-emphasis {
|
||||
color: #1e33da;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#content_first {
|
||||
#content_first {
|
||||
backdrop-filter: blur(5px);
|
||||
color: #e77064;
|
||||
flex: none;
|
||||
@ -308,9 +311,9 @@ html {
|
||||
font-size: 3rem;
|
||||
max-width: 100vw;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#content_second {
|
||||
#content_second {
|
||||
width: 50%;
|
||||
right: -20vw;
|
||||
backdrop-filter: blur(5px);
|
||||
@ -329,17 +332,17 @@ html {
|
||||
text-align: center;
|
||||
max-width: 100vw;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.flip-handle {
|
||||
.flip-handle {
|
||||
background: transparent;
|
||||
height: 20vh;
|
||||
position: relative;
|
||||
top: -20vh;
|
||||
width: 2vw;
|
||||
}
|
||||
}
|
||||
|
||||
.flip-container {
|
||||
.flip-container {
|
||||
color: #fffdfc;
|
||||
padding-top: 15vh;
|
||||
transform-origin: right;
|
||||
@ -439,39 +442,46 @@ html {
|
||||
width: 198px;
|
||||
transition: all ease-in 1.5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#content-2 {
|
||||
#content-2 {
|
||||
margin-top: 50vh;
|
||||
}
|
||||
}
|
||||
|
||||
#flipping_zone {
|
||||
#flipping_zone {
|
||||
margin-top: -100vh;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
#popover {
|
||||
#popover {
|
||||
background: url("/assets/img/bg_pink.png") no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
|
||||
.text-title{
|
||||
.text-title {
|
||||
font-family: "GT Walsheim Pro";
|
||||
@extend .large-texts;
|
||||
|
||||
font-size: 60px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 110%;
|
||||
}
|
||||
|
||||
.dark-emphasis {
|
||||
color: #3b3b49;
|
||||
}
|
||||
|
||||
.color-emphasis {
|
||||
color: #e77064;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.slider-screen {
|
||||
.slider-screen {
|
||||
.text {
|
||||
left: 55vw;
|
||||
position: relative;
|
||||
@ -483,9 +493,9 @@ html {
|
||||
.text-title {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.phone-container {
|
||||
.phone-container {
|
||||
border-radius: 1rem;
|
||||
width: 411px;
|
||||
|
||||
@ -511,9 +521,9 @@ html {
|
||||
height: 700px;
|
||||
width: 350px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slider-screen .phone-container {
|
||||
.slider-screen .phone-container {
|
||||
background: url("/assets/img/phone_cream.png") no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
@ -522,16 +532,16 @@ html {
|
||||
position: relative;
|
||||
top: 20vh;
|
||||
width: 411px;
|
||||
}
|
||||
}
|
||||
|
||||
.close-button {
|
||||
.close-button {
|
||||
float: right;
|
||||
position: relative;
|
||||
right: 40px;
|
||||
top: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-left {
|
||||
.arrow-left {
|
||||
backdrop-filter: blur(5px);
|
||||
background: linear-gradient(310.41deg, rgba(255, 255, 255, 0.3) 10.9%, rgba(255, 255, 255, 0) 81.35%);
|
||||
border: solid 2px #1e33da;
|
||||
@ -539,9 +549,9 @@ html {
|
||||
cursor: pointer;
|
||||
padding: 1.5rem;
|
||||
transform: matrix(-1, 0, 0, 1, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-right {
|
||||
.arrow-right {
|
||||
backdrop-filter: blur(5px);
|
||||
background: linear-gradient(310.41deg, rgba(255, 255, 255, 0.3) 10.9%, rgba(255, 255, 255, 0) 81.35%);
|
||||
border: solid 2px #1e33da;
|
||||
@ -553,16 +563,16 @@ html {
|
||||
position: relative;
|
||||
top: 50vh;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-left {
|
||||
.arrow-left {
|
||||
float: left;
|
||||
left: 40px;
|
||||
position: relative;
|
||||
top: 50vh;
|
||||
}
|
||||
}
|
||||
|
||||
.bullets {
|
||||
.bullets {
|
||||
left: 0;
|
||||
position: relative;
|
||||
top: 30vh;
|
||||
@ -570,16 +580,22 @@ html {
|
||||
img {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#portfolio {
|
||||
#portfolio {
|
||||
background: url("/assets/img/bg_grey.jpg") no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
color: white;
|
||||
.text-title{
|
||||
|
||||
.text-title {
|
||||
font-family: "GT Walsheim Pro";
|
||||
@extend .large-texts;
|
||||
|
||||
font-size: 60px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 110%;
|
||||
}
|
||||
|
||||
.color-emphasis {
|
||||
@ -593,9 +609,9 @@ html {
|
||||
height: 776px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
#coming_soon {
|
||||
#coming_soon {
|
||||
background: #2b74b1;
|
||||
z-index: 10;
|
||||
color: white;
|
||||
@ -603,23 +619,24 @@ html {
|
||||
height: 50vh;
|
||||
margin-top: 0;
|
||||
padding-top: 50vh;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
background: #fff;
|
||||
padding-bottom: 50vh;
|
||||
overflow-x: hidden;
|
||||
font-family: "GT Walsheim Pro", Arial;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
main {
|
||||
section {
|
||||
font-family: "GT Walsheim Pro", Arial;
|
||||
height: 120vh;
|
||||
min-height: 120vh;
|
||||
width: 100vw;
|
||||
|
||||
h2 {
|
||||
color: #fffdfc;
|
||||
font-size: 60px;
|
||||
@ -637,25 +654,25 @@ main {
|
||||
.credits {
|
||||
margin-top: 10vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#sprint_4 {
|
||||
#sprint_4 {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.primary-color {
|
||||
.primary-color {
|
||||
color: #1e33da !important;
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-color {
|
||||
.secondary-color {
|
||||
color: #e77064 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dark-color {
|
||||
.dark-color {
|
||||
color: #020225 !important;
|
||||
}
|
||||
}
|
||||
|
||||
#transactionnal_webdesign {
|
||||
#transactionnal_webdesign {
|
||||
background: url("/assets/img/header_webdesign.png"), linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 74.66%);
|
||||
background-size: cover;
|
||||
font-family: "GT Walsheim Pro";
|
||||
@ -715,9 +732,9 @@ main {
|
||||
font-size: 1.5rem;
|
||||
line-height: 130%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px) {
|
||||
@media screen and (max-width: 1300px) {
|
||||
#transactionnal_webdesign {
|
||||
min-height: 100vh;
|
||||
padding-top: 5vh;
|
||||
@ -730,9 +747,9 @@ main {
|
||||
font-size: 10rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#carry {
|
||||
#carry {
|
||||
position: relative;
|
||||
background: white;
|
||||
padding-top: 20vh;
|
||||
@ -845,9 +862,9 @@ main {
|
||||
left: 0;
|
||||
top: -141vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#kyc {
|
||||
#kyc {
|
||||
font-family: "GT Walsheim Pro";
|
||||
background: white;
|
||||
padding-top: 25vh;
|
||||
@ -1024,12 +1041,12 @@ main {
|
||||
width: 288px;
|
||||
height: 360px;
|
||||
left: 1124px;
|
||||
top: 10 vh;
|
||||
top: 10vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#china {
|
||||
#china {
|
||||
background-color: #141373;
|
||||
height: 1060px;
|
||||
width: 100vw;
|
||||
@ -1146,9 +1163,9 @@ main {
|
||||
.hide-on-medium {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px) {
|
||||
@media screen and (max-width: 1300px) {
|
||||
#china {
|
||||
.show-on-medium {
|
||||
display: none;
|
||||
@ -1182,9 +1199,9 @@ main {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#we_develop {
|
||||
#we_develop {
|
||||
height: 150vh;
|
||||
width: 100vw;
|
||||
display: block;
|
||||
@ -1313,9 +1330,9 @@ main {
|
||||
.rotated {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#full_creative {
|
||||
#full_creative {
|
||||
background: white;
|
||||
min-height: 120vh;
|
||||
|
||||
@ -1359,9 +1376,9 @@ main {
|
||||
img {
|
||||
max-width: 80vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#our_team {
|
||||
#our_team {
|
||||
background: white;
|
||||
padding-top: 5rem;
|
||||
padding-left: 2rem;
|
||||
@ -1404,9 +1421,9 @@ main {
|
||||
padding: 0 2em;
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#china_achievements {
|
||||
#china_achievements {
|
||||
margin-top: 5rem;
|
||||
background: white;
|
||||
min-height: 50vh;
|
||||
@ -1441,9 +1458,9 @@ main {
|
||||
.offset-left-columns {
|
||||
margin-left: -10rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#baozun_group {
|
||||
#baozun_group {
|
||||
margin-top: 150px;
|
||||
background: url("/assets/img/baozun.jpg") no-repeat;
|
||||
background-size: cover;
|
||||
@ -1459,9 +1476,9 @@ main {
|
||||
letter-spacing: -0.04em;
|
||||
padding-top: 464px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.counter-block {
|
||||
.counter-block {
|
||||
.big-number {
|
||||
font-weight: 600;
|
||||
font-size: 140px;
|
||||
@ -1483,6 +1500,9 @@ main {
|
||||
margin-left: 80px;
|
||||
border-radius: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 601px) {
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Loading…
Reference in New Issue
Block a user