Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @import 'https://fonts.googleapis.com/css?family=Lato:100,300,400,700';
- $color-fur-edge: #BFB48C;
- $color-eye: #260F02;
- $color-body: #C49152;
- $color-body-dark: #9D7442;
- $color-body-light: #cca069;
- $color-ear: #6a3c1c;
- $color-fur: #EFE1AF;
- $easing: cubic-bezier(0.645, 0.045, 0.355, 1);
- $total-kf: 13;
- $duration: 10s;
- $k-bounce-down: (0, 1, 2, 3, 4,
- 6, 7, 8, 9,
- $total-kf);
- $k-bounce-up: (0.5, 1.5, 2.5, 3.5,
- 6.5, 7.5, 8.5, 9.5,);
- $k-attack-prep: 10;
- $kap: $k-attack-prep; // I'm being lazy
- $k-attack: (10.3, $total-kf - 1);
- $kf-head: (
- $k-bounce-down: translateY(4%),
- $k-bounce-up: translateY(0),
- 4.5: translateY(2%) rotate(-3deg),
- 5: translateY(-5%) rotate(7deg),
- $k-attack-prep: translateY(7%) rotate(-3deg),
- ($k-attack-prep + 1): translateY(-7%) rotate(3deg),
- );
- $kf-head-shadow: (
- $k-bounce-down: translateY(-2%),
- $k-bounce-up: translateY(1%),
- 4.5: translateY(-5%),
- 5: translateY(5%),
- $k-attack-prep: translateY(-4%),
- ($k-attack-prep + 1): translateY(10%) scale(0.9)
- );
- $kf-eyes: (
- $k-bounce-down: rotateX(-7deg) translateZ(10px),
- $k-bounce-up: rotateX(7deg) translateZ(10px),
- $k-attack-prep: translateY(5%) rotateX(-20deg) translateZ(10px),
- ($k-attack-prep + 1): rotateX(20deg) translateZ(10px),
- );
- $kf-nose: (
- $k-bounce-down: translateY(30%),
- $k-bounce-up: translateY(-20%),
- $k-attack-prep: translateY(70%),
- ($k-attack-prep + 1): translateY(-60%),
- );
- $kf-mouth-move: (
- $k-bounce-down: translateY(15%),
- $k-bounce-up: translateY(-5%),
- $k-attack-prep: translateY(30%),
- ($k-attack-prep + 1): translateY(-10%),
- );
- $kf-body: (
- $k-bounce-down: translateY(1%),
- $k-bounce-up: translateY(0),
- 4.5: translateY(4%),
- 5: translateY(0),
- $k-attack-prep: translateY(3%),
- $k-attack: translateY(-5%),
- );
- $kf-eyelid: (
- (0,
- 3, 3.2,
- 10,
- $total-kf - 0.6,
- ): translateY(-120%) rotate(-30deg) ,
- (
- 3.05, 3.18,
- 10.05,
- $total-kf - 0.8,
- ): translateY(0) rotate(0) ,
- $k-attack: translateY(-85%) rotate(30deg),
- );
- $kf-mouth: (
- (0, $total-kf - 0.9): (
- width: 12%,
- height: 6%,
- bottom: 13%,
- left: 33%,
- border-radius: 50%,
- box-shadow: 0 -2px $color-eye,
- border: none,
- background: transparent,
- ),
- $k-attack: (
- height: 10%,
- background: #B37B7E,
- border-top-left-radius: 50% 60%,
- border-top-right-radius: 50% 60%,
- border-bottom-left-radius: 50% 40%,
- border-bottom-right-radius: 50% 40%,
- box-shadow: inset 0 5px $color-eye,
- border: 2px solid $color-eye,
- ),
- );
- $kf-mouth-side: (
- (0, $total-kf - 0.9): (opacity: 1),
- 10.3: (opacity: 0),
- );
- $kf-leg: (
- $k-bounce-down: rotate(-12deg),
- $k-bounce-up: rotate(-6deg),
- 4.5: rotate(-16deg),
- 5: rotate(9deg),
- $k-attack-prep: translateY(-10%) rotate(-18deg),
- $k-attack: translateY(5%) rotate(0),
- );
- $kf-leg-inner: (
- $k-bounce-down: rotate(28deg),
- $k-bounce-up: rotate(16deg),
- 4.5: rotate(40deg),
- 5: rotate(-10deg),
- $k-attack-prep: rotate(32deg),
- $k-attack: rotate(0),
- );
- $kf-paw-inner: (
- $k-bounce-down: rotate(-16deg),
- $k-bounce-up: rotate(-10deg),
- 4.5: rotate(-20deg),
- 5: rotate(0deg),
- $k-attack-prep: rotate(-14deg),
- $k-attack: rotate(0),
- );
- $kf-ear: (
- $k-bounce-up: rotateX(-20deg) rotate(-15deg),
- $k-bounce-down: rotateX(20deg) rotate(-5deg),
- (4.7,4.9,5.1,5.3): rotate(-20deg),
- (4.8,5.0,5.2,5.6): rotate(-10deg),
- $k-attack-prep: rotateX(20deg) rotate(-5deg),
- ($kap+0.4, $kap+0.8, $kap+1.2, $kap+1.6, $kap+2.0): rotateX(-30deg) rotate(-30deg),
- ($kap+0.6, $kap+1.0, $kap+1.4, $kap+1.8, $kap+2.2): rotateX(-20deg) rotate(-20deg),
- );
- $kf-tail: (
- all: scale(0.9),
- $k-bounce-down: rotate(-5deg),
- $k-bounce-up: rotate(5deg),
- 4.4: rotate(10deg),
- (4.6, 5, 5.4): rotate(-2deg),
- (4.8, 5.2, 5.6): rotate(4deg),
- $k-attack-prep: rotate(-7deg),
- ($k-attack-prep + 1): rotate(15deg),
- );
- $kf-tail-end: (
- all: scale(0.9),
- $k-bounce-down: rotate(-12deg),
- $k-bounce-up: rotate(9deg),
- 4.4: rotate(10deg),
- (4.6, 5, 5.4): rotate(-4deg),
- (4.8, 5.2, 5.6): rotate(12deg),
- $k-attack-prep: rotate(7deg),
- ($kap+0.6, $kap + 1, $kap+1.4, $kap+1.8): rotate(-10deg),
- ($kap+0.8, $kap + 1.2, $kap+1.6, $kap+2.0): rotate(2deg),
- );
- $kf-chest: (
- (0, 4, $total-kf): translateY(0),
- 4.5: rotate(-2deg) translateY(2%) ,
- 5: rotate(2deg) translateY(-2%) ,
- ($k-attack-prep - 1): translateY(0),
- $k-attack-prep: translateY(2%),
- ($k-attack-prep + 1): translateY(0),
- );
- $kf-fur-center: (
- $k-bounce-down: translateY(0),
- $k-bounce-up: translateY(2%),
- );
- $kf-fur-center-patch-left: (
- $k-bounce-down: rotate(65deg) skewX(15deg),
- $k-bounce-up: rotate(60deg) skewX(15deg),
- );
- $kf-fur-center-patch-right: (
- $k-bounce-down: rotate(35deg) skewX(15deg),
- $k-bounce-up: rotate(30deg) skewX(15deg),
- );
- $kf-fur-right: (
- $k-bounce-down: translateY(0),
- $k-bounce-up: translateY(2%),
- );
- $kf-fur-right-patch: (
- $k-bounce-down: translateY(0) rotate(50deg),
- $k-bounce-up: translateY(2%) rotate(56deg),
- );
- @mixin effect($name, $kf) {
- $all: '';
- @keyframes #{$name} {
- @each $intervals, $transform in $kf {
- @each $interval in $intervals {
- @if ($interval == 'all') {
- $all: $transform;
- } @else {
- #{percentage($interval/$total-kf)} {
- @if type-of($transform) == 'map' {
- @each $key, $val in $transform {
- #{$key}: $val;
- }
- } @else {
- transform: unquote($all) $transform;
- }
- }
- }
- }
- }
- }
- $all: '';
- }
- @function a($name, $delay: 0s) {
- @return $name $duration $delay $easing both infinite;
- }
- @include effect(head, $kf-head);
- @include effect(head-shadow, $kf-head-shadow);
- @include effect(eyes, $kf-eyes);
- @include effect(eyelid, $kf-eyelid);
- @include effect(nose, $kf-nose);
- @include effect(mouth-move, $kf-mouth-move);
- @include effect(mouth, $kf-mouth);
- @include effect(mouth-side, $kf-mouth-side);
- @include effect(ear, $kf-ear);
- @include effect(tail, $kf-tail);
- @include effect(tail-end, $kf-tail-end);
- @include effect(chest, $kf-chest);
- @include effect(fur-center, $kf-fur-center);
- @include effect(fur-center-patch-left, $kf-fur-center-patch-left);
- @include effect(fur-center-patch-right, $kf-fur-center-patch-right);
- @include effect(fur-right, $kf-fur-right);
- @include effect(fur-right-patch, $kf-fur-right-patch);
- @include effect(body, $kf-body);
- @include effect(leg, $kf-leg);
- @include effect(leg-inner, $kf-leg-inner);
- @include effect(paw-inner, $kf-paw-inner);
- .eevee {
- height: 325px;
- width: 410px;
- @media (max-width: 600px) {
- transform: scale(0.8);
- }
- @media (max-width: 300px) {
- transform: scale(0.5);
- }
- * {
- position: absolute;
- }
- }
- .body {
- animation: a(body);
- height: 100px;
- position: absolute;
- width: 125px;
- top: 164px;
- left: 140px;
- background: $color-body;
- border-top-right-radius: 30%;
- border-bottom-right-radius: 50%;
- border-bottom-left-radius: 70%;
- box-shadow:
- inset -15px 0 0 $color-body-dark;
- }
- .chest {
- animation: a(chest, 0.05s);
- height: 110%;
- width: 130px;
- left: -30px;
- z-index: 1;
- }
- .fur {
- height: 80px;
- width: 80px;
- top: 0;
- border-radius: 50%;
- background: linear-gradient(to top,
- $color-fur,
- white 40%,
- white 50%,
- $color-fur 75%
- );
- &:first-child {
- animation: a(fur-center, 0.1s);
- height: 110px;
- width: 110px;
- left: calc(50% - 55px);
- z-index: 1;
- box-shadow:
- inset 0 0 0 2px rgba(black, 0.2),
- 3px 0 15px rgba(black, 0.2);
- > .patch {
- height: 50%;
- width: 50%;
- left: 50% - 25%;
- transform-style: none;
- bottom: 8%;
- &:before {
- animation: a(fur-center-patch-left);
- left: 25%;
- top: 0;
- transform: rotate(65deg) skewX(15deg);
- box-shadow:
- 2px 0 $color-fur-edge;
- background: linear-gradient(-45deg,
- $color-fur-edge,
- $color-fur 9%,
- transparent 20%);
- border-top-right-radius: 60%;
- border-bottom-right-radius: 8%;
- }
- &:after {
- animation: a(fur-center-patch-right, 0.07s);
- left: initial;
- right: 25%;
- top: 0;
- transform: rotate(35deg) skewX(15deg);
- box-shadow:
- 0 3px $color-fur-edge;
- background: linear-gradient(-37deg,
- $color-fur-edge,
- $color-fur 9%,
- transparent 20%);
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- border-bottom-left-radius: 60%;
- border-bottom-right-radius: 8%;
- }
- }
- }
- &:nth-child(2) {
- left: -3px;
- }
- &:nth-child(3) {
- animation: a(fur-right, 0.15s);
- right: -20px;
- }
- > .patch {
- &:before, &:after {
- content: '';
- display: block;
- position: absolute;
- width: 100%;
- height: 100%;
- border-bottom-left-radius: 100%;
- }
- &:before {
- background: linear-gradient(-30deg,
- $color-fur-edge,
- $color-fur 6%,
- white 55%,
- transparent
- );
- }
- &:after {
- background: linear-gradient(-30deg,
- $color-fur-edge,
- $color-fur 6%,
- white 55%,
- transparent
- );
- }
- }
- &:not(:first-child) > .patch {
- height: 35%;
- width: 35%;
- bottom: 10%;
- left: 30%;
- &:before, &:after {
- animation: a(fur-right-patch);
- top: -15%;
- left: 110%;
- transform-origin: top left;
- box-shadow:
- 2px 0 $color-fur-edge;
- border-top-right-radius: 75%;
- border-bottom-right-radius: 10%;
- }
- &:before {
- left: 150%;
- top: -25%;
- }
- &:after {
- animation-delay: 0.1s;
- left: 100%;
- top: 0%;
- }
- }
- }
- .head {
- height: 149px;
- width: 144px;
- top: -110px;
- left: -35px;
- z-index: 10;
- animation: a(head);
- transform-style: preserve-3d;
- perspective: 1000px;
- &:before {
- content: '';
- position: absolute;
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- }
- &:after {
- content: '';
- position: absolute;
- display: block;
- height: 20%;
- width: 20%;
- background: green;
- transform: skewX(30deg) rotate(40deg);
- left: 50%;
- top: -2%;
- background: $color-body;
- box-shadow:
- -15px 8px #ca9d65,
- -25px 22px #cca069,
- -35px 50px #cda36f
- ;
- z-index: -1;
- }
- }
- .face {
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- background: linear-gradient(to top left,
- $color-body-dark,
- $color-body 60%,
- $color-body 70%,
- lighten($color-body, 15%) 100%
- );
- &, &:before {
- border-top-left-radius: 40% 50%;
- border-top-right-radius: 40% 50%;
- border-bottom-left-radius: 50% 30%;
- border-bottom-right-radius: 50% 30%;
- }
- &:before {
- animation: a(head-shadow);
- content: '';
- display: block;
- position: absolute;
- height: 100%;
- width: 100%;
- background: radial-gradient(farthest-side,
- rgba(black, 0.6),
- transparent
- );
- z-index: -1;
- top: 20%;
- left: 0%;
- }
- }
- .ears {
- width: 100%;
- height: 54px;
- z-index: -2;
- }
- .ear {
- width: 160px;
- height: 70px;
- left: 50%;
- bottom: 10%;
- transform-origin: bottom left;
- transform: translateX(40px);
- &:before, &:after {
- animation: a(ear, 0.1s);
- animation-delay: 50ms;
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- transform: skewX(-25deg) skewY(5deg);
- background: radial-gradient(farthest-side, $color-ear, darken($color-ear, 4%));
- transform-origin: bottom left;
- border: 12px solid $color-eye;
- border-top-left-radius: 100%;
- border-bottom-right-radius: 100%;
- }
- &:after {
- border: 8px solid $color-body-dark;
- background: transparent;
- }
- + .ear {
- transform: translateX(-40px) rotateY(180deg);
- }
- > .lobe {
- height: 20%;
- width: 20%;
- background: $color-body-dark;
- bottom: 25%;
- left: -5%;
- transform: skewX(-50deg);
- border-top-right-radius: 15%;
- box-shadow: 9px 6px 0 $color-body-dark;
- }
- }
- .eyes {
- width: 77%;
- height: 33%;
- left: 5%;
- top: 35%;
- animation: a(eyes);
- }
- .eye {
- height: 100%;
- width: 28%;
- border-top-left-radius: 50% 65%;
- border-top-right-radius: 50% 65%;
- border-bottom-left-radius: 50% 35%;
- border-bottom-right-radius: 50% 35%;
- background-color: $color-eye;
- box-shadow:
- inset 0 0 0 3px $color-eye;
- background-image:
- radial-gradient(ellipse 5px 10px at 50% 65%,
- $color-eye 0%,
- $color-eye 99%,
- transparent 100%),
- radial-gradient(ellipse 10px 20px at 50% 90%,
- #955D27 0%,
- #955D27 99%,
- transparent 100%),
- radial-gradient(ellipse 4px 6px at 55% 20%,
- white 0%,
- white 99%,
- transparent 100%)
- ;
- &:last-child {
- right: 10%;
- transform: rotateY(180deg);
- // &:before {
- // border-left: 3px solid $color-eye;
- // border-right: 1px solid transparent;
- // border-top: 1px solid transparent;
- // border-bottom: 1px solid transparent;
- // transform: rotate(38deg);
- // left: 2px;
- // }
- }
- &:before {
- content: '';
- display: block;
- position: absolute;
- height: 30%;
- width: 30%;
- background: transparent;
- border-radius: 50%;
- border-right: 3px solid $color-eye;
- border-left: 1px solid transparent;
- border-top: 1px solid transparent;
- border-bottom: 1px solid transparent;
- z-index: -1;
- transform: rotate(-38deg);
- top: -4px;
- left: initial;
- right: 2px;
- opacity: 0.6;
- z-index: 1;
- }
- > .eyelid {
- height: 102%;
- width: 102%;
- left: -1%;
- top: -1%;
- overflow: hidden;
- &:before {
- animation: a(eyelid);
- content: '';
- position: absolute;
- display: block;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- background: $color-body;
- border-bottom: 3px solid $color-eye;
- transform-origin: center bottom;
- transform: translateY(-100%);
- border-radius: 50% 50% 15% 15%;
- }
- }
- }
- .mouth {
- animation: a(mouth), a(mouth-move);
- animation-timing-function: step-end, $easing;
- animation-fill-mode: none;
- width: 12%;
- height: 6%;
- bottom: 13%;
- left: 33%;
- border-radius: 50%;
- box-shadow: 0 -2px $color-eye;
- &:before, &:after {
- animation: a(mouth-side);
- animation-timing-function: step-end;
- content: '';
- display: block;
- position: absolute;
- width: 60%;
- height: 100%;
- border-radius: 50%;
- bottom: 53%;
- border-bottom: 2px solid $color-eye;
- }
- &:before {
- right: 87%;
- }
- &:after {
- left: 87%;
- }
- }
- .nose {
- animation: a(nose);
- width: 6%;
- height: 4%;
- background: $color-eye;
- border-bottom-left-radius: 50% 65%;
- border-bottom-right-radius: 50% 65%;
- border-top-left-radius: 50% 35%;
- border-top-right-radius: 50% 35%;
- bottom: 26%;
- left: 35%;
- }
- .tail {
- height: 120px;
- width: 120px;
- z-index: -1;
- animation: a(tail);
- &:before, &:after {
- content: '';
- display: block;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
- &:after {
- background: $color-body;
- border-radius: 50%;
- transform: rotate(-135deg);
- }
- .body > & {
- z-index: -2;
- right: -40px;
- top: -70px;
- &:after {
- background: linear-gradient(to bottom right,
- $color-body-dark,
- $color-body-dark 20%,
- $color-body,
- $color-body);
- }
- }
- .tail {
- top: -35px;
- transform-origin: center bottom;
- transform: scale(0.85);
- }
- > .tail .tail {
- z-index: 1
- }
- &.-end {
- top: -60px;
- &:after {
- background: $color-fur;
- background: linear-gradient(to bottom right, $color-fur, white);
- // box-shadow: 0 0 0 6px $color-fur;
- border-radius: initial;
- border-bottom-left-radius: 100% 50%;
- border-top-right-radius: 50% 100%;
- border-top-left-radius: 50%;
- }
- &:before {
- content: '';
- display: block;
- position: absolute;
- background: $color-body;
- height: 40%;
- width: 40%;
- z-index: 1;
- border-radius: 50% 50% 0 0;
- top: initial;
- bottom: -15%;
- left: 30%;
- box-shadow:
- -20px -5px $color-body,
- 20px -5px $color-body;
- }
- }
- > .tail > .tail * {
- animation: a(tail-end);
- }
- }
- .legs {
- animation: a(legs);
- top: 70%;
- width: 100%;
- height: 100%;
- }
- @mixin bend-leg($deg) {
- > .inner-leg {
- transform: skewX($deg);
- &:before {
- transform: skewX(-$deg);
- }
- }
- }
- .leg {
- top: 0;
- background: linear-gradient(to left, $color-body-dark, $color-body, $color-body-light);
- transform-origin: center top;
- animation: a(leg);
- &, > .inner-leg {
- height: 40px;
- width: 30px;
- border-radius: 35%;
- }
- &:before, &:after {
- content: '';
- display: block;
- position: absolute;
- }
- > .inner-leg {
- top: 50%;
- transform-origin: center 10%;
- animation: a(leg-inner);
- &:before {
- animation: a(paw-inner);
- }
- }
- &:nth-child(1) {
- left: 20px;
- top: -2px;
- }
- &:nth-child(2) {
- left: 70px;
- ~ * {
- z-index: -1;
- &, & > .inner-leg, & > .inner-leg:before {
- animation-delay: 0.07s;
- }
- }
- }
- &:nth-child(3) {
- left: 35px;
- top: -10px;
- }
- &:nth-child(4) {
- left: 90px;
- top: -10px;
- }
- }
- .inner-leg {
- background: linear-gradient(to left, $color-body-dark, $color-body, $color-body-light);
- &:before {
- content: '';
- display: block;
- position: absolute;
- bottom: -10%;
- width: 105%;
- height: 50%;
- border-top-left-radius: 40% 40%;
- border-top-right-radius: 40% 40%;
- border-bottom-left-radius: 20%;
- border-bottom-right-radius: 20%;
- background-image:
- linear-gradient(
- to bottom,
- $color-body 0%,
- $color-body 50%,
- transparent 100%
- ),
- linear-gradient(
- to right,
- transparent 0%,
- transparent 25%,
- rgba(black, 0.5) 26%,
- rgba(black, 0.5) 35%,
- transparent 36%,
- transparent 65%,
- rgba(black, 0.5) 66%,
- rgba(black, 0.5) 75%,
- transparent 76%
- ),
- linear-gradient(to top,
- $color-body-dark,
- $color-body,
- $color-body-light
- );
- }
- }
- html body {
- display: flex;
- flex-direction: row;
- justify-content: center;
- min-height: 100%;
- height: auto;
- align-items: center;
- $light: rgba(white, 0.6);
- $lighter: rgba(white, 0.3);
- background-image:
- repeating-linear-gradient(120deg,
- $light,
- $light 1px,
- transparent 1px,
- transparent 30px,
- $lighter 30px,
- $lighter 31px,
- transparent 31px,
- transparent 60px
- ),
- repeating-linear-gradient(60deg,
- $light,
- $light 1px,
- transparent 1px,
- transparent 30px,
- $lighter 30px,
- $lighter 31px,
- transparent 31px,
- transparent 60px
- ),
- repeating-linear-gradient(to bottom,
- $lighter,
- $lighter 1px,
- transparent 1px,
- transparent 30px);
- background-size: 70px 120px;
- @media (max-width: 600px) {
- flex-direction: column;
- .dex {
- max-width: 100%;
- }
- }
- }
- .dex {
- font-family: Lato, sans-serif;
- max-width: 40%;
- font-size: 14px;
- color: white;
- font-weight: 300;
- padding: 1rem 2rem;
- }
- .heading {
- font-size: 24px;
- text-transform: uppercase;
- margin-bottom: 14px;
- letter-spacing: 0.25ch;
- > span {
- font-weight: 100;
- margin-right: 0.5ch;
- }
- > strong {
- font-size: 28px;
- font-weight: 300;
- }
- }
- .pokeball {
- display: inline-block;
- width: 1rem;
- height: 1rem;
- background: radial-gradient(0.4rem, white, white 50%, transparent 50%);
- margin-right: 1rem;
- &:before, &:after {
- content: '';
- display: block;
- position: absolute;
- bottom: -0.063rem;
- left: 0;
- height: 50%;
- width: 100%;
- border-radius: 0 0 1rem 1rem;
- box-shadow:
- inset 0 -0.09rem 0 0.09rem white,
- inset 0.09rem -0.09rem 0 0.09rem white,
- inset -0.09rem -0.09rem 0 0.09rem white
- ;
- }
- &:after {
- transform-origin: top center;
- transform: rotateX(180deg);
- bottom: 0.063rem;
- }
- }
- .info {
- display: inline-block;
- margin-right: 1rem;
- margin-bottom: 14px;
- }
- .subheading {
- font-size: 18px;
- line-height: 28px;
- }
- p {
- line-height: 18px;
- margin: 0;
- margin-bottom: 1rem;
- }
- a {
- transition: opacity 0.3s $easing;
- &, &:active, &:visited {
- color: white;
- }
- &:hover {
- opacity: 0.8;
- }
- }
- html {
- background: radial-gradient(50vmin 50vmin, #FEB4FF, #A3A3EC);
- background-position: -20vw center;
- background-repeat: no-repeat;
- background-color: #a3a3ec;
- @media (max-width: 600px) {
- background-position: center -20vw;
- }
- @media (max-width: 300px) {
- background-position: center -30vw;
- }
- }
- html, body {
- width: 100%;
- height: 100%;
- margin: 0;
- padding: 0;
- font-size: 14px;
- }
- *, *:before, *:after {
- box-sizing: border-box;
- position: relative;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement