inside out project STEP-701 to STEP-702 style.css Code Changes

Created Diff never expires
0 removals
120 lines
34 additions
154 lines
html {
html {
height: 100%;
height: 100%;
overflow: hidden
overflow: hidden
}
}
body {
body {
margin: 0;
margin: 0;
width: 100%;
width: 100%;
height: 100%;
height: 100%;
overflow: hidden;
overflow: hidden;
color: #fff;
color: #fff;
background-color: #9cf;
background-color: #9cf;
background-image: -webkit-gradient(linear, left top, left bottom, from(#6af), to(#bdf));
background-image: -webkit-gradient(linear, left top, left bottom, from(#6af), to(#bdf));
background-image: -webkit-linear-gradient(#6af, #bdf);
background-image: -webkit-linear-gradient(#6af, #bdf);
background-image: -moz-linear-gradient(#6af, #bdf);
background-image: -moz-linear-gradient(#6af, #bdf);
background-image: linear-gradient(#6af, #bdf)
background-image: linear-gradient(#6af, #bdf)
}
}
::-webkit-scrollbar {
::-webkit-scrollbar {
display: none
display: none
}
}
.snowman {
.snowman {
text-align: center;
text-align: center;
width: 250px;
width: 250px;
margin: auto;
margin: auto;
overflow: visible;
overflow: visible;
position: fixed;
position: fixed;
bottom: -300px;
bottom: -300px;
left: 40%
left: 40%
}
}
.smBody,
.smBody,
.smFeet,
.smFeet,
.smHead {
.smHead {
border: thin #000 solid;
border: thin #000 solid;
height: 150px;
height: 150px;
background-color: aliceblue;
background-color: aliceblue;
border-radius: 45%;
border-radius: 45%;
margin: auto auto
margin: auto auto
}
}
.smHead {
.smHead {
position: relative;
position: relative;
bottom: -60px;
bottom: -60px;
z-index: 10;
z-index: 10;
width: 50%
width: 50%
}
}
.hat {
.hat {
background-color: black;
background-color: black;
width: 80px;
width: 80px;
height: 80px;
height: 80px;
border-top-left-radius: 15%;
border-top-left-radius: 15%;
border-top-right-radius: 15%;
border-top-right-radius: 15%;
position: absolute;
position: absolute;
top: -70px;
top: -70px;
left: 20px
left: 20px
}
}
.rim {
.rim {
background-color: black;
background-color: black;
width: 120px;
width: 120px;
height: 30px;
height: 30px;
border-radius: 50%;
border-radius: 50%;
position: absolute;
position: absolute;
top: 70px;
top: 70px;
left: -20px
left: -20px
}
}
.face {
.face {
margin: 40px auto;
margin: 40px auto;
height: 30px;
height: 30px;
position: relative;
position: relative;
width: 50%
width: 50%
}
}
.eye,
.eye,
.nose,
.nose,
.mouth {
.mouth {
border: thin #000 solid;
border: thin #000 solid;
width: 20px;
width: 20px;
height: 15px;
height: 15px;
background-color: black;
background-color: black;
border-radius: 45%
border-radius: 45%
}
}
.leye {
.leye {
float: left
float: left
}
}
.reye {
.reye {
float: right
float: right
}
}
.nose,
.nose,
.mouth {
.mouth {
clear: both;
clear: both;
margin: auto
margin: auto
}
}
.nose {
.nose {
margin-top: 20px;
margin-top: 20px;
height: 30px
height: 30px
}
}
.mouth {
.mouth {
margin-top: 10px;
margin-top: 10px;
width: 50px
width: 50px
}
}
.smBody {
.smBody {
width: 70%;
width: 70%;
height: 200px;
height: 200px;
position: relative;
position: relative;
bottom: -40px;
bottom: -40px;
z-index: 9
z-index: 9
}
}
.smFeet {
.smFeet {
width: 250px;
width: 250px;
height: 300px;
height: 300px;
z-index: 8;
z-index: 8;
margin-bottom: -40px
margin-bottom: -40px
}
}
.hill {
.hill {
border-top: 2px solid #000;
border-top: 2px solid #000;
width: 300%;
width: 300%;
margin-left: -150%;
margin-left: -150%;
min-height: 100px;
min-height: 100px;
padding: 60%;
padding: 60%;
border-radius: 50%;
border-radius: 50%;
border-left-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
border-right-color: transparent;
background-color: #FFF
background-color: #FFF
}
}
.fir {
position: absolute;
margin: 0 auto;
width: 8em;
bottom: 0;
margin-bottom: -150px
}
.fir-item {
margin: 0 auto;
width: 0;
height: 0;
border-left: 2.3em solid transparent;
border-right: 2.3em solid transparent;
border-bottom: 3em solid #16850c
}
.fir-item:nth-child(2) {
margin-top: -1.3em;
border-left-width: 3em;
border-right-width: 3em;
border-bottom-width: 4em
}
.fir-item:nth-child(3) {
margin-top: -1.7em;
border-left-width: 4em;
border-right-width: 4em;
border-bottom-width: 5em
}
.fir-log {
margin: 0 auto;
width: 1.3em;
height: 1.3em;
background: #8c370f;
background: linear-gradient(#8c370f, #5c240a)
}