rearrange many breakpoints
This commit is contained in:
parent
a1c7ed1b51
commit
6f0186dd0f
521
css/sprint_4.css
521
css/sprint_4.css
@ -12685,7 +12685,7 @@ main nav {
|
||||
color: white;
|
||||
text-shadow: 0 0 1em black;
|
||||
height: 50vh;
|
||||
margin-top: 5vh;
|
||||
margin-top: 10vw;
|
||||
padding-top: 50vh;
|
||||
}
|
||||
@media screen and (max-width: 1023px) {
|
||||
@ -12728,7 +12728,7 @@ main nav {
|
||||
flipping part
|
||||
*/
|
||||
#flipping_zone {
|
||||
margin-top: -120vh;
|
||||
margin-top: -100vh;
|
||||
position: static;
|
||||
}
|
||||
.flip-container {
|
||||
@ -12736,7 +12736,7 @@ main nav {
|
||||
}
|
||||
|
||||
.flip-container + .flip-container {
|
||||
margin-top: -5vh;
|
||||
margin-top: 40vh;
|
||||
}
|
||||
.flip-container .container-text {
|
||||
z-index: 1;
|
||||
@ -12769,6 +12769,9 @@ main nav {
|
||||
#popover {
|
||||
margin-top: 100vh;
|
||||
}
|
||||
#popover .phone-container, #portfolio .phone-container {
|
||||
width: 39vw;
|
||||
}
|
||||
/**
|
||||
exemples sliders
|
||||
*/
|
||||
@ -12880,6 +12883,7 @@ main img {
|
||||
}
|
||||
main .credits {
|
||||
margin-top: 10vh;
|
||||
padding-bottom: 10vh;
|
||||
}
|
||||
#sprint_4 {
|
||||
background: #fff;
|
||||
@ -12949,18 +12953,6 @@ main .credits {
|
||||
font-size: 1.5rem;
|
||||
line-height: 130%;
|
||||
}
|
||||
@media screen and (max-width: 1300px) {
|
||||
#transactionnal_webdesign {
|
||||
min-height: 100vh;
|
||||
padding-top: 5vh;
|
||||
}
|
||||
#transactionnal_webdesign .title {
|
||||
font-size: 4rem;
|
||||
}
|
||||
#transactionnal_webdesign .description {
|
||||
font-size: 10rem !important;
|
||||
}
|
||||
}
|
||||
#carry {
|
||||
position: static;
|
||||
background: white;
|
||||
@ -13063,92 +13055,8 @@ main .credits {
|
||||
left: 0;
|
||||
top: -97em;
|
||||
}
|
||||
@media all and (max-width: 1600px) {
|
||||
section#carry {
|
||||
min-height: 120rem;
|
||||
}
|
||||
section#carry .description {
|
||||
margin-top: 3vh;
|
||||
font-size: 8rem;
|
||||
}
|
||||
section#carry .gradient-bg {
|
||||
top: -40rem;
|
||||
}
|
||||
section#carry .gradient-bg-yellow {
|
||||
top: 10rem;
|
||||
}
|
||||
section#carry .computer-block {
|
||||
width: 70%;
|
||||
height: 1080px;
|
||||
left: 0;
|
||||
top: -110em;
|
||||
background-size: contain;
|
||||
margin: 0 auto;
|
||||
}
|
||||
section#carry .bubbles {
|
||||
position: relative;
|
||||
left: -5vw;
|
||||
}
|
||||
section#carry .bubbles p :nth-of-type(1) {
|
||||
top: -75vh;
|
||||
}
|
||||
section#carry .bubbles p :nth-of-type(2) {
|
||||
left: 70%;
|
||||
}
|
||||
section#carry .bubbles p :nth-of-type(3) {
|
||||
left: 50%;
|
||||
}
|
||||
section#carry .bubbles p :nth-of-type(4) {
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
@media all and (max-width: 1100px) {
|
||||
section#carry {
|
||||
padding-left: 10vw;
|
||||
padding-right: 10vw;
|
||||
min-height: 115rem;
|
||||
}
|
||||
section#carry .title {
|
||||
font-size: 4rem;
|
||||
}
|
||||
section#carry .description {
|
||||
margin-top: 3vh;
|
||||
font-size: 10rem;
|
||||
}
|
||||
section#carry .computer-block {
|
||||
background-size: contain;
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
margin-top: -15rem;
|
||||
}
|
||||
section#carry .gradient-bg {
|
||||
margin-top: 0;
|
||||
}
|
||||
section#carry .gradient-bg-yellow {
|
||||
margin-top: 0;
|
||||
}
|
||||
section#carry .bubbles {
|
||||
position: static;
|
||||
}
|
||||
section#carry .bubbles p {
|
||||
margin-top: 2rem;
|
||||
left: 0;
|
||||
}
|
||||
section#carry .bubbles p :nth-of-type(1) {
|
||||
left: 10%;
|
||||
}
|
||||
section#carry .bubbles p :nth-of-type(2) {
|
||||
left: 70%;
|
||||
}
|
||||
section#carry .bubbles p :nth-of-type(3) {
|
||||
left: 4vw;
|
||||
margin-left: -60%;
|
||||
}
|
||||
section#carry .bubbles p :nth-of-type(4) {
|
||||
left: -10%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#kyc {
|
||||
font-family: "GT Walsheim Pro";
|
||||
background: white;
|
||||
@ -13327,7 +13235,7 @@ main .credits {
|
||||
}
|
||||
#china {
|
||||
background-color: #141373;
|
||||
height: 1060px;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
padding-bottom: 20rem;
|
||||
border-radius: 5rem;
|
||||
@ -13567,36 +13475,6 @@ main .credits {
|
||||
#we_develop .rotated {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
@media all and (max-width: 1500px) {
|
||||
#we_develop .circle.circle-right {
|
||||
right: 10vw;
|
||||
}
|
||||
#we_develop .circle.circle-left {
|
||||
right: 90vw;
|
||||
}
|
||||
#we_develop .quick {
|
||||
left: 3rem;
|
||||
top: 77rem;
|
||||
}
|
||||
#we_develop .long_term {
|
||||
margin-right: 5rem;
|
||||
}
|
||||
#we_develop .data {
|
||||
text-align: left;
|
||||
padding-left: 6rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
#we_develop .ar {
|
||||
text-align: right;
|
||||
padding-right: 6rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
@media all and (max-width: 1100px) {
|
||||
#we_develop .ar {
|
||||
margin-top: -3rem;
|
||||
}
|
||||
}
|
||||
#full_creative {
|
||||
background: white;
|
||||
min-height: 120vh;
|
||||
@ -13637,26 +13515,8 @@ main .credits {
|
||||
#full_creative img {
|
||||
max-width: 80vw;
|
||||
}
|
||||
@media all and (max-width: 1500px) {
|
||||
#full_creative {
|
||||
padding-bottom: 20rem;
|
||||
}
|
||||
#full_creative .title {
|
||||
padding: 2rem;
|
||||
}
|
||||
#full_creative .column {
|
||||
padding: 2rem;
|
||||
}
|
||||
#full_creative .column p {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
#full_creative .column, #full_creative .columns {
|
||||
display: block;
|
||||
}
|
||||
#full_creative img {
|
||||
margin-bottom: 15rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#our_team {
|
||||
background: white;
|
||||
padding-top: 5rem;
|
||||
@ -13696,26 +13556,8 @@ main .credits {
|
||||
padding: 0 2em;
|
||||
background: white;
|
||||
}
|
||||
@media screen and (max-width: 1500px) {
|
||||
#our_team {
|
||||
margin-top: 30rem;
|
||||
padding-bottom: 20rem;
|
||||
}
|
||||
#our_team img {
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#our_team .columns, #our_team .colmumn {
|
||||
display: block;
|
||||
position: static;
|
||||
}
|
||||
#our_team .name {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
#our_team .sub-category {
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#china_achievements {
|
||||
margin-top: 30rem;
|
||||
background: white;
|
||||
@ -13747,35 +13589,6 @@ main .credits {
|
||||
#china_achievements .offset-left-columns {
|
||||
margin-left: -10rem;
|
||||
}
|
||||
@media screen and (max-width: 1500px) {
|
||||
#china_achievements {
|
||||
margin-top: 895vw;
|
||||
}
|
||||
#china_achievements p {
|
||||
font-size: 2rem;
|
||||
}
|
||||
#china_achievements .column, #china_achievements .columns {
|
||||
position: static;
|
||||
display: block;
|
||||
}
|
||||
#china_achievements .offset-left-columns {
|
||||
margin-left: 0;
|
||||
}
|
||||
#china_achievements .text-description {
|
||||
font-size: 2rem;
|
||||
}
|
||||
#china_achievements .big-number {
|
||||
font-size: 10rem;
|
||||
text-align: center;
|
||||
}
|
||||
#china_achievements .picture {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
#china_achievements .title {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
#baozun_group {
|
||||
margin-top: 150px;
|
||||
background: url("/img/baozun.jpg") no-repeat;
|
||||
@ -13792,16 +13605,6 @@ main .credits {
|
||||
letter-spacing: -0.04em;
|
||||
padding-top: 464px;
|
||||
}
|
||||
@media screen and (max-width: 1500px) {
|
||||
#baozun_group {
|
||||
margin-top: 605vw;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1200px) {
|
||||
#baozun_group {
|
||||
margin-top: 650vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.counter-block .big-number {
|
||||
@ -13828,9 +13631,52 @@ main .credits {
|
||||
|
||||
|
||||
/**
|
||||
smaller screen
|
||||
responsive land
|
||||
*/
|
||||
@media screen and (min-width: 1024px) {
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 950px) {
|
||||
|
||||
#baozun_group , #coming_soon, .credits{
|
||||
margin: 0 0;
|
||||
position: relative;
|
||||
top: 900vw;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 900px) {
|
||||
|
||||
#unlock,
|
||||
#unlock_white img{
|
||||
height: 10rem;
|
||||
}
|
||||
.button.is-responsive.is-small {
|
||||
font-size: 0.5625rem;
|
||||
}
|
||||
|
||||
.button.is-responsive,
|
||||
.button.is-responsive.is-normal {
|
||||
font-size: 0.65625rem;
|
||||
}
|
||||
|
||||
.button.is-responsive.is-medium {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.button.is-responsive.is-large {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#content_all h2, #welcome h2{
|
||||
font-size: 4em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media all and (max-width: 1100px) {
|
||||
#we_develop .ar {
|
||||
margin-top: -3rem;
|
||||
}
|
||||
.section {
|
||||
padding: 3rem 3rem;
|
||||
}
|
||||
@ -13842,6 +13688,220 @@ smaller screen
|
||||
.section.is-large {
|
||||
padding: 18rem 6rem;
|
||||
}
|
||||
|
||||
section#carry {
|
||||
padding-left: 10vw;
|
||||
padding-right: 10vw;
|
||||
min-height: 115rem;
|
||||
margin-top: 15vh;
|
||||
}
|
||||
section#carry .title {
|
||||
font-size: 4rem;
|
||||
}
|
||||
section#carry .description {
|
||||
margin-top: 3vh;
|
||||
font-size: 10rem;
|
||||
}
|
||||
section#carry .computer-block {
|
||||
background-size: contain;
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
margin-top: 50vh;
|
||||
}
|
||||
section#carry .gradient-bg {
|
||||
margin-top: 0;
|
||||
}
|
||||
section#carry .gradient-bg-yellow {
|
||||
margin-top: 0;
|
||||
}
|
||||
section#carry .bubbles {
|
||||
position: static;
|
||||
}
|
||||
section#carry .bubbles p {
|
||||
margin-top: 2rem;
|
||||
left: 0;
|
||||
}
|
||||
section#carry .bubbles p :nth-of-type(1) {
|
||||
left: 10%;
|
||||
}
|
||||
section#carry .bubbles p :nth-of-type(2) {
|
||||
left: 70%;
|
||||
}
|
||||
section#carry .bubbles p :nth-of-type(3) {
|
||||
left: 4vw;
|
||||
margin-left: -60%;
|
||||
}
|
||||
section#carry .bubbles p :nth-of-type(4) {
|
||||
left: -10%;
|
||||
top: -100vh;
|
||||
}
|
||||
#popover , #portfolio{
|
||||
height: 120vw;
|
||||
}
|
||||
#popover .phone-container, #portfolio .phone-container {
|
||||
width: 410px;
|
||||
left: 15vw;
|
||||
}
|
||||
#kyc .bubbles{
|
||||
margin-top: -100vw;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1200px) {
|
||||
#baozun_group {
|
||||
margin-top: 650vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px) {
|
||||
#transactionnal_webdesign {
|
||||
min-height: 100vh;
|
||||
padding-top: 5vh;
|
||||
}
|
||||
#transactionnal_webdesign .title {
|
||||
font-size: 4rem;
|
||||
}
|
||||
#transactionnal_webdesign .description {
|
||||
font-size: 9rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media all and (max-width: 1500px) {
|
||||
#we_develop .circle.circle-right {
|
||||
right: 10vw;
|
||||
}
|
||||
#we_develop .circle.circle-left {
|
||||
right: 90vw;
|
||||
}
|
||||
#we_develop .quick {
|
||||
left: 3rem;
|
||||
top: 77rem;
|
||||
}
|
||||
#we_develop .long_term {
|
||||
margin-right: 5rem;
|
||||
}
|
||||
#we_develop .data {
|
||||
text-align: left;
|
||||
padding-left: 6rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
#we_develop .ar {
|
||||
text-align: right;
|
||||
padding-right: 6rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
#full_creative {
|
||||
padding-bottom: 20rem;
|
||||
}
|
||||
#full_creative .title {
|
||||
padding: 2rem;
|
||||
}
|
||||
#full_creative .column {
|
||||
padding: 2rem;
|
||||
}
|
||||
#full_creative .column p {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
#full_creative .column, #full_creative .columns {
|
||||
display: block;
|
||||
}
|
||||
#full_creative img {
|
||||
margin-bottom: 15rem;
|
||||
}
|
||||
|
||||
#our_team {
|
||||
margin-top: 70vw;
|
||||
padding-bottom: 20rem;
|
||||
}
|
||||
#our_team img {
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#our_team .columns, #our_team .colmumn {
|
||||
display: block;
|
||||
position: static;
|
||||
}
|
||||
#our_team .name {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
#our_team .sub-category {
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
#china_achievements {
|
||||
margin-top: 895vw;
|
||||
}
|
||||
#china_achievements p {
|
||||
font-size: 2rem;
|
||||
}
|
||||
#china_achievements .column, #china_achievements .columns {
|
||||
position: static;
|
||||
display: block;
|
||||
}
|
||||
#china_achievements .offset-left-columns {
|
||||
margin-left: 0;
|
||||
}
|
||||
#china_achievements .text-description {
|
||||
font-size: 2rem;
|
||||
}
|
||||
#china_achievements .big-number {
|
||||
font-size: 10rem;
|
||||
text-align: center;
|
||||
}
|
||||
#china_achievements .picture {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
#china_achievements .title {
|
||||
width: 100%;
|
||||
}
|
||||
#baozun_group , #coming_soon, .credits{
|
||||
margin: 0 0;
|
||||
position: relative;
|
||||
top: 700vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 1600px) {
|
||||
section#carry {
|
||||
min-height: 120rem;
|
||||
}
|
||||
section#carry .description {
|
||||
margin-top: 3vh;
|
||||
font-size: 8rem;
|
||||
}
|
||||
section#carry .gradient-bg {
|
||||
top: -40rem;
|
||||
}
|
||||
section#carry .gradient-bg-yellow {
|
||||
top: 10rem;
|
||||
}
|
||||
section#carry .computer-block {
|
||||
width: 100%;
|
||||
height: 1080px;
|
||||
left: 0;
|
||||
top: -154vw;
|
||||
background-size: contain;
|
||||
margin: 0 auto;
|
||||
}
|
||||
section#carry .bubbles {
|
||||
position: relative;
|
||||
left: -5vw;
|
||||
}
|
||||
section#carry .bubbles p :nth-of-type(1) {
|
||||
top: -75vh;
|
||||
}
|
||||
section#carry .bubbles p :nth-of-type(2) {
|
||||
left: 70%;
|
||||
}
|
||||
section#carry .bubbles p :nth-of-type(3) {
|
||||
left: 20%;
|
||||
top: -200vw;
|
||||
}
|
||||
section#carry .bubbles p :nth-of-type(4) {
|
||||
left: 10%;
|
||||
top: -319vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
@ -13859,7 +13919,7 @@ smaller screen
|
||||
max-width: 100vw;
|
||||
}
|
||||
.flip-container + .flip-container {
|
||||
margin-top: 37vh;
|
||||
margin-top: 40vh !important;
|
||||
}
|
||||
#transactionnal_webdesign .title {
|
||||
font-size: 2rem;
|
||||
@ -13955,38 +14015,23 @@ smaller screen
|
||||
}
|
||||
#china_achievements{
|
||||
padding: 1rem;
|
||||
margin-top: 950vw;
|
||||
}
|
||||
#china_achievements .big-number {
|
||||
font-size: 8rem;
|
||||
}
|
||||
|
||||
#baozun_group {
|
||||
margin-top: 1126vw;
|
||||
}
|
||||
#baozun_group .title {
|
||||
padding-top: 25vh;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
|
||||
#unlock,
|
||||
#unlock_white img{
|
||||
height: 10rem;
|
||||
}
|
||||
.button.is-responsive.is-small {
|
||||
font-size: 0.5625rem;
|
||||
#baozun_group , #coming_soon, .credits{
|
||||
margin: 0 0;
|
||||
position: relative;
|
||||
top: 1200vw;
|
||||
}
|
||||
|
||||
.button.is-responsive,
|
||||
.button.is-responsive.is-normal {
|
||||
font-size: 0.65625rem;
|
||||
}
|
||||
|
||||
.button.is-responsive.is-medium {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.button.is-responsive.is-large {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#content_all h2, #welcome h2{
|
||||
font-size: 4em;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user