434 lines
5.2 KiB
SCSS
434 lines
5.2 KiB
SCSS
/**
|
|
responsive land custom
|
|
*/
|
|
|
|
|
|
@media all and (max-width: 600px) {
|
|
main {
|
|
img {
|
|
max-width: 95vw;
|
|
}
|
|
}
|
|
.column {
|
|
padding-left: 1rem;
|
|
}
|
|
.burger-menu > span:nth-of-type(2),
|
|
.circle-right,
|
|
.circle-left,
|
|
.arrow-left,
|
|
.arrow-right {
|
|
display: none;
|
|
}
|
|
|
|
#cover {
|
|
.button {
|
|
top: 10rem;
|
|
width: 7rem;
|
|
height: 7rem;
|
|
}
|
|
|
|
#main_title_container {
|
|
.title-container {
|
|
margin-top: 5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
#open {
|
|
padding-left: 1rem;
|
|
img, #unlock, #unlock_white {
|
|
height: 120px;
|
|
}
|
|
|
|
#unlock_white {
|
|
margin-top: -34rem;
|
|
}
|
|
}
|
|
|
|
#transactionnal_webdesign .title,
|
|
#content_first,
|
|
#for_all_your {
|
|
font-size: 2rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
#for_all_your_2{
|
|
padding: 0 2rem;
|
|
}
|
|
#content_all .text,
|
|
.container-text-md {
|
|
width: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
#welcome h2 {
|
|
font-size: 4rem;
|
|
line-height: 1em;
|
|
}
|
|
|
|
#content_all .columns {
|
|
max-width: 100vw;
|
|
margin-left: 0;
|
|
padding-left: 0;
|
|
}
|
|
#content-2 {
|
|
margin-top: 0;
|
|
padding-top: 0;
|
|
}
|
|
#popover {
|
|
margin-top: 132vw;
|
|
}
|
|
|
|
/**
|
|
flipping part
|
|
*/
|
|
|
|
#flipping_zone {
|
|
margin-top: 0;
|
|
position: static;
|
|
|
|
|
|
.flip-container {
|
|
position: relative;
|
|
height: 1300px;
|
|
|
|
.flip-handle {
|
|
height: 10vh;
|
|
}
|
|
|
|
+ .flip-container {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.container-text {
|
|
width: 100%;
|
|
margin: 0;
|
|
top: 0;
|
|
padding-left: 7vw;
|
|
min-height: 25rem;
|
|
}
|
|
|
|
.text-description {
|
|
width: 100%;
|
|
}
|
|
|
|
.container-text {
|
|
z-index: 1;
|
|
left: 1rem;
|
|
}
|
|
|
|
.text-title {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.phone-container {
|
|
margin: 2rem auto;
|
|
margin-left: auto;
|
|
position: static;
|
|
width: 335px;
|
|
margin-left: 9.5vw;
|
|
}
|
|
|
|
&.flip-from-left {
|
|
.container-text {
|
|
left: 1rem;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.phone-container {
|
|
left: 1rem;
|
|
top: 2rem;
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
#popover, #portfolio {
|
|
margin-top: 0;
|
|
height: 1500px;
|
|
}
|
|
.slider-screen {
|
|
.phone-container {
|
|
left: 2vw;
|
|
width: 95vw;
|
|
}
|
|
|
|
.text {
|
|
left: 7vw;
|
|
position: relative;
|
|
text-align: left;
|
|
top: 19rem;
|
|
width: 90vw;
|
|
}
|
|
}
|
|
#transactionnal_webdesign {
|
|
min-height: 1600px;
|
|
|
|
.columns {
|
|
max-width: 85vw;
|
|
}
|
|
|
|
.description {
|
|
font-size: 5rem !important;
|
|
padding-top: 4rem;
|
|
}
|
|
|
|
.sub-title {
|
|
font-weight: 600;
|
|
font-size: 5rem;
|
|
text-shadow: 0 0 1rem #333;
|
|
line-height: 4rem;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.second {
|
|
text-shadow: 0 0 1rem #fff;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
#carry {
|
|
.description {
|
|
margin-top: 3vh;
|
|
font-size: 5rem;
|
|
text-shadow: 0 0 1rem #ccc;
|
|
}
|
|
|
|
.computer-block {
|
|
margin-top: -85px;
|
|
width: 97vw;
|
|
}
|
|
|
|
.bubbles {
|
|
margin-top: 0;
|
|
|
|
p {
|
|
&:nth-of-type(1) {
|
|
left: -19%;
|
|
top: -89rem;
|
|
}
|
|
|
|
&:nth-of-type(2) {
|
|
left: 36%;
|
|
top: -112rem;
|
|
}
|
|
|
|
&:nth-of-type(3) {
|
|
left: -10vw;
|
|
}
|
|
|
|
&:nth-of-type(4) {
|
|
height: 322px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.gradient-bg {
|
|
width: 96vw;
|
|
height: 58vh;
|
|
left: 0;
|
|
top: -41rem;
|
|
}
|
|
|
|
.gradient-bg-yellow {
|
|
width: 96vw;
|
|
height: 58vh;
|
|
left: 0;
|
|
top: -10rem;
|
|
}
|
|
}
|
|
|
|
|
|
#kyc {
|
|
.left-column {
|
|
padding-left: 3rem;
|
|
}
|
|
.description2 {
|
|
font-size: 3rem;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.title {
|
|
font-size: 5rem;
|
|
line-height: 1em;
|
|
}
|
|
|
|
.bubbles {
|
|
.bubble {
|
|
span {
|
|
margin-left: 0;
|
|
}
|
|
|
|
&:nth-of-type(1) {
|
|
left: 1rem;
|
|
top: -7rem;
|
|
}
|
|
|
|
&:nth-of-type(2) {
|
|
margin-left: -6rem;
|
|
}
|
|
|
|
&:nth-of-type(3) {
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
margin-top: -200vw;
|
|
}
|
|
}
|
|
|
|
|
|
#china {
|
|
height: 90rem;
|
|
padding: 1rem;
|
|
|
|
.top {
|
|
font-size: 3rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.cols {
|
|
.columns {
|
|
text-align: center;
|
|
display: block;
|
|
margin-top: 1rem;
|
|
padding: 0 1rem 0 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
#we_develop {
|
|
height: 1400px;
|
|
|
|
.title {
|
|
padding: 1rem;
|
|
padding-top: 8rem;
|
|
font-size: 3rem;
|
|
}
|
|
|
|
.phone-container-2 {
|
|
width: 90vw;
|
|
}
|
|
|
|
.picture {
|
|
width: 97.5%;
|
|
height: 570px;
|
|
|
|
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.circle {
|
|
&.circle-left {
|
|
left: 1vw;
|
|
}
|
|
|
|
&.circle-right {
|
|
right: 1vw;
|
|
}
|
|
}
|
|
|
|
.long_term {
|
|
margin-right: 10vw;
|
|
margin-top: -23rem;
|
|
}
|
|
|
|
.quick {
|
|
left: 10vw;
|
|
top: 1130px;
|
|
}
|
|
}
|
|
|
|
|
|
#full_creative {
|
|
padding: 2rem;
|
|
height: 1600px;
|
|
|
|
.title {
|
|
padding: 2rem;
|
|
font-size: 4rem;
|
|
line-height: 1em;
|
|
}
|
|
}
|
|
|
|
|
|
#our_team {
|
|
padding-bottom: 20rem;
|
|
|
|
.title {
|
|
font-size: 10rem;
|
|
line-height: 7rem;
|
|
}
|
|
|
|
.sub-category {
|
|
margin-bottom: 10rem;
|
|
padding-left: 0rem;
|
|
}
|
|
}
|
|
|
|
#china_achievements {
|
|
padding: 1rem;
|
|
margin-top: 950vw;
|
|
height: auto;
|
|
|
|
.title {
|
|
font-size: 4rem;
|
|
line-height: 1em;
|
|
}
|
|
|
|
.big-number {
|
|
font-size: 6rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.counter-block {
|
|
.text-description {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
img {
|
|
margin-left: 0;
|
|
border-radius: 80px;
|
|
max-width: 100vw;
|
|
width: 87vw;
|
|
}
|
|
}
|
|
|
|
.tiles-box {
|
|
margin: 0;
|
|
|
|
.column {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.offset-left-columns {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
#baozun_group {
|
|
margin-top: 10rem;
|
|
margin-bottom: 10rem;
|
|
position: static;
|
|
|
|
.title {
|
|
padding: 25vh 1rem 1rem;
|
|
font-size: 4rem;
|
|
}
|
|
}
|
|
|
|
#coming_soon, .credits {
|
|
margin: 0 0;
|
|
position: static;
|
|
padding-bottom: 10rem;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|