Fix in style.css file
This commit is contained in:
Paweł Kawczyński
parent
45ac47cf40
commit
31c5a623ef
237
css/style.css
237
css/style.css
@ -2,6 +2,9 @@
|
||||
font-family: headersFont;
|
||||
src: url(fonts/ARCADE.TTF);
|
||||
}
|
||||
*{
|
||||
1rem = 16px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: headersFont;
|
||||
@ -18,158 +21,158 @@ html {
|
||||
|
||||
#char-container {
|
||||
position: absolute;
|
||||
top: 300px;
|
||||
left: 400px;
|
||||
top: 20rem;
|
||||
left: 48rem;
|
||||
}
|
||||
|
||||
#char-head {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
width: 12rem;
|
||||
height: 9.5rem;
|
||||
background-color: #ffc993;
|
||||
border-radius: 50px 50px;
|
||||
border-radius: 3.125rem 3.125rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#char-ear-left {
|
||||
position: absolute;
|
||||
top: 124px;
|
||||
left: -22px;
|
||||
width: 42px;
|
||||
height: 66px;
|
||||
top: 4rem;
|
||||
left: -1rem;
|
||||
width: 1.3rem;
|
||||
height: 2rem;
|
||||
border-color: #ffc993;
|
||||
border-radius: 33px / 42px;
|
||||
border-radius: 2.0625rem / 2.625rem;
|
||||
background-color: #ffc993;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#char-ear-right {
|
||||
position: absolute;
|
||||
top: 124px;
|
||||
left: 380px;
|
||||
width: 42px;
|
||||
height: 66px;
|
||||
top: 4rem;
|
||||
left: 12rem;
|
||||
width: 1.3rem;
|
||||
height: 2rem;
|
||||
border-color: #ffc993;
|
||||
border-radius: 33px / 42px;
|
||||
border-radius: 2.0625rem / 2.625rem;
|
||||
background-color: #ffc993;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#char-hair {
|
||||
width: 400px;
|
||||
height: 90px;
|
||||
width: 12rem;
|
||||
height: 3rem;
|
||||
background-color: #000000;
|
||||
border-radius: 45px 45px;
|
||||
border-radius: 2.8125rem 2.8125rem;
|
||||
}
|
||||
|
||||
#char-eyebrown-left {
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
left: 90px;
|
||||
top: 5rem;
|
||||
left: 2.5rem;
|
||||
border-style: solid;
|
||||
border-width: 20px 0 0 50px;
|
||||
border-width: 0.6rem 0 0 1.5rem;
|
||||
border-color: transparent transparent transparent #ca815e;
|
||||
}
|
||||
|
||||
#char-eyebrown-right {
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
left: 270px;
|
||||
top: 5rem;
|
||||
left: 8.5rem;
|
||||
border-style: solid;
|
||||
border-width: 0 0 20px 50px;
|
||||
border-width: 0 0 0.6rem 1.5rem;
|
||||
border-color: transparent transparent #ca815e transparent;
|
||||
}
|
||||
|
||||
#char-eye-left {
|
||||
position: absolute;
|
||||
top: 176px;
|
||||
left: 108px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
top: 5.5rem;
|
||||
left: 3.5rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 50%;
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
#char-pupil-left {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 0.25rem;
|
||||
left: 0.25rem;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
#char-eye-right {
|
||||
position: absolute;
|
||||
top: 176px;
|
||||
left: 264px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
top: 5.5rem;
|
||||
left: 8rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 50%;
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
#char-pupil-right {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 0.5rem;
|
||||
left: 0.5rem;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
#char-mouth {
|
||||
position: absolute;
|
||||
top: 228px;
|
||||
left: 164px;
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
border-radius: 0 0 80px 80px;
|
||||
top: 14.25rem;
|
||||
left: 10.25rem;
|
||||
width: 5rem;
|
||||
height: 1.875rem;
|
||||
border-radius: 0 0 5rem 5rem;
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
#char-tooth-left {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 24px;
|
||||
width: 12px;
|
||||
height: 14px;
|
||||
left: 1.5rem;
|
||||
width: 0.75rem;
|
||||
height: 0.875rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
#char-tooth-right {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 44px;
|
||||
width: 12px;
|
||||
height: 14px;
|
||||
left: 2.75rem;
|
||||
width: 0.75rem;
|
||||
height: 0.875rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
#char-main-body {
|
||||
position: absolute;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
width: 25rem;
|
||||
height: 25rem;
|
||||
}
|
||||
|
||||
#char-body {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 110px;
|
||||
width: 180px;
|
||||
height: 200px;
|
||||
border-radius: 20px;
|
||||
top: 0rem;
|
||||
left: 6.875rem;
|
||||
width: 11.25rem;
|
||||
height: 12.5rem;
|
||||
border-radius: 1.25rem;
|
||||
background-color: #632e90;
|
||||
}
|
||||
|
||||
#char-arm-left {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 70px;
|
||||
width: 50px;
|
||||
height: 124px;
|
||||
border-radius: 53px 53px;
|
||||
top: 2.5rem;
|
||||
left: 4.375rem;
|
||||
width: 3.125rem;
|
||||
height: 7.75rem;
|
||||
border-radius: 3.5rem 3.5rem;
|
||||
background-color: #632e90;
|
||||
transform: rotate(310deg);
|
||||
z-index: 1;
|
||||
@ -177,30 +180,30 @@ html {
|
||||
|
||||
#char-arm-right {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 280px;
|
||||
width: 50px;
|
||||
height: 124px;
|
||||
border-radius: 53px 53px;
|
||||
top: 2.5rem;
|
||||
left: 17.5rem;
|
||||
width: 3.125rem;
|
||||
height: 7.75rem;
|
||||
border-radius: 3.5rem 3.5rem;
|
||||
background-color: #632e90;
|
||||
transform: rotate(50deg);
|
||||
}
|
||||
|
||||
#char-forearm-left {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
width: 50px;
|
||||
height: 90px;
|
||||
border-radius: 53px 53px;
|
||||
top: -2.5rem;
|
||||
width: 3.125rem;
|
||||
height: 5.625rem;
|
||||
border-radius: 3.5rem 3.5rem;
|
||||
background-color: #ffc993;
|
||||
}
|
||||
|
||||
#char-forearm-right {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
width: 50px;
|
||||
height: 90px;
|
||||
border-radius: 53px 53px;
|
||||
top: -2.5rem;
|
||||
width: 3.125rem;
|
||||
height: 5.625rem;
|
||||
border-radius: 3.5rem 3.5rem;
|
||||
background-color: #ffc993;
|
||||
}
|
||||
|
||||
@ -210,86 +213,86 @@ html {
|
||||
|
||||
#char-pants-middle {
|
||||
position: absolute;
|
||||
width: 170px;
|
||||
height: 48px;
|
||||
top: 200px;
|
||||
left: 115px;
|
||||
border-radius: 10px 10px;
|
||||
width: 10.625rem;
|
||||
height: 3.5rem;
|
||||
top: 12.5rem; /*sprawdzic!*/
|
||||
left: 7.25rem;
|
||||
border-radius: 0.625rem 0.625rem;
|
||||
background-color: #e31e5e;
|
||||
}
|
||||
|
||||
#char-pants-left {
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
left: 114px;
|
||||
width: 70px;
|
||||
height: 100px;
|
||||
border-radius: 10px 10px;
|
||||
top: 12.5rem;
|
||||
left: 7.125rem;
|
||||
width: 4.375rem;
|
||||
height: 6.25rem;
|
||||
border-radius: 0.625rem 0.625rem;
|
||||
background-color: #e31e5e;
|
||||
}
|
||||
|
||||
#char-pants-right {
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
left: 220px;
|
||||
width: 70px;
|
||||
height: 100px;
|
||||
border-radius: 10px 10px;
|
||||
top: 12.5rem;
|
||||
left: 13.75rem;
|
||||
width: 4.375rem;
|
||||
height: 6.25rem;
|
||||
border-radius: 0.625rem 0.625rem;
|
||||
background-color: #e31e5e;
|
||||
}
|
||||
|
||||
#char-leg-left {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 13px;
|
||||
width: 44px;
|
||||
height: 40px;
|
||||
top: 6.25rem;
|
||||
left: 1rem;
|
||||
width: 2.75rem;
|
||||
height: 2.5rem;
|
||||
background-color: #ffc993;
|
||||
}
|
||||
|
||||
#char-leg-right {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 13px;
|
||||
width: 44px;
|
||||
height: 40px;
|
||||
top: 6.25rem;
|
||||
left: 0.625rem;
|
||||
width: 2.75rem;
|
||||
height: 2.5rem;
|
||||
background-color: #ffc993;
|
||||
}
|
||||
|
||||
#char-sock-left {
|
||||
position: absolute;
|
||||
top: 140px;
|
||||
left: 13px;
|
||||
width: 44px;
|
||||
height: 20px;
|
||||
top: 8.75rem;
|
||||
left: 1rem;
|
||||
width: 2.75rem;
|
||||
height: 1.5rem;
|
||||
background-color: #0072bb;
|
||||
}
|
||||
|
||||
#char-sock-right {
|
||||
position: absolute;
|
||||
top: 140px;
|
||||
left: 13px;
|
||||
width: 44px;
|
||||
height: 20px;
|
||||
top: 8.75rem;
|
||||
left: 0.625rem;
|
||||
width: 2.75rem;
|
||||
height: 1.5rem;
|
||||
background-color: #0072bb;
|
||||
}
|
||||
|
||||
#char-shoe-left {
|
||||
position: absolute;
|
||||
top: 160px;
|
||||
left: -27px;
|
||||
width: 84px;
|
||||
height: 34px;
|
||||
border-radius: 25px 0 0 0;
|
||||
top: 10rem;
|
||||
left: -1.5rem;
|
||||
width: 5.25rem;
|
||||
height: 2.125rem;
|
||||
border-radius: 1.5rem 0 0 0;
|
||||
background-color: #8e8e8e;
|
||||
}
|
||||
|
||||
#char-shoe-right {
|
||||
position: absolute;
|
||||
top: 160px;
|
||||
left: 13px;
|
||||
width: 84px;
|
||||
height: 34px;
|
||||
border-radius: 0 25px 0 0;
|
||||
top: 10rem;
|
||||
left: 0.625rem;
|
||||
width: 5.25rem;
|
||||
height: 2.125rem;
|
||||
border-radius: 0 1.5rem 0 0;
|
||||
background-color: #8e8e8e;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user