462 lines
8.5 KiB
CSS
462 lines
8.5 KiB
CSS
/*Background color*/
|
|
html {
|
|
|
|
background-color: #4A245E;
|
|
|
|
}
|
|
|
|
/*HEAD & HAIR*/
|
|
|
|
/* Position, size, color, and shape of the head */
|
|
#head {
|
|
|
|
margin: 10em;
|
|
|
|
height: 775px;
|
|
width: 600px;
|
|
|
|
background-color: #d2a679;
|
|
|
|
border: 2px solid black;
|
|
border-radius: 90% 90% 100% 100%;
|
|
|
|
}
|
|
|
|
/*Position, size, color, and shape of the hair.*/
|
|
.hair {
|
|
|
|
position: relative;
|
|
bottom: 33px;
|
|
left: 13px;
|
|
|
|
}
|
|
|
|
#topHair {
|
|
|
|
width: 575px;
|
|
height: 170px;
|
|
|
|
background-color: #1a0d00;
|
|
|
|
border-radius: 10% 10% 0% 0% / 90% 90% 0% 0%;
|
|
|
|
}
|
|
|
|
#leftHair {
|
|
|
|
top: 170px;
|
|
left: 0;
|
|
|
|
width: 0;
|
|
height: 0;
|
|
|
|
border-bottom: 60px solid transparent;
|
|
|
|
border-left: 60px solid #1a0d00;
|
|
|
|
}
|
|
|
|
#rightHair {
|
|
|
|
top: 110px;
|
|
left: 515px;
|
|
|
|
width: 0;
|
|
height: 0;
|
|
|
|
border-bottom: 60px solid transparent;
|
|
|
|
border-right:60px solid #1a0d00;
|
|
|
|
}
|
|
|
|
/*HEADPHONES*/
|
|
|
|
/*Position, size, and shape of headphone headband.*/
|
|
#headrest {
|
|
|
|
position: relative;
|
|
bottom: 2em;
|
|
height: 5em;
|
|
|
|
background-color: black;
|
|
|
|
border: 1px solid black;
|
|
border-radius: 130% 130% 40% 40%;
|
|
|
|
}
|
|
|
|
/*Position of the headphone's stems.*/
|
|
#leftStem, #rightStem {
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
/*Position, size, color, and shape of the left headphone stem.*/
|
|
#leftStem {
|
|
|
|
right: 2.3em;
|
|
float: left;
|
|
|
|
height: 500px;
|
|
width: 50px;
|
|
|
|
background-color: black;
|
|
|
|
border-radius: 200% 10% 70% 25%;
|
|
|
|
}
|
|
|
|
/*Position, size, color, and shape of the left headphone's ear-cup.*/
|
|
#leftEar {
|
|
|
|
position: relative;
|
|
top: 17.05em;
|
|
right: 5em;
|
|
|
|
height: 225px;
|
|
width: 100px;
|
|
|
|
background-color: black;
|
|
|
|
border: 1px solid black;
|
|
border-radius: 45% 0% 0% 45%;
|
|
|
|
|
|
|
|
}
|
|
|
|
/*Position, size, color, and shape of the right headphone stem.*/
|
|
#rightStem {
|
|
|
|
left: 2.4em;
|
|
bottom: 5em;
|
|
float: right;
|
|
|
|
height: 500px;
|
|
width: 50px;
|
|
|
|
background-color: black;
|
|
|
|
border-radius: 10% 200% 25% 70%;
|
|
|
|
}
|
|
|
|
/*Position, size, color, and shape of the right headphone's ear-cup.*/
|
|
#rightEar {
|
|
|
|
position: relative;
|
|
top: 17.05em;
|
|
left: 2em;
|
|
|
|
height: 225px;
|
|
width: 100px;
|
|
|
|
background-color: black;
|
|
|
|
border: 1px solid black;
|
|
border-radius: 0% 45% 45% 0%;
|
|
|
|
}
|
|
|
|
/*EYEBROWS*/
|
|
|
|
/*Position and size of the eyebrow container.*/
|
|
.eyebrowContainer {
|
|
|
|
margin-top: 10%;
|
|
|
|
height: 1.3em;
|
|
width: 600px;
|
|
|
|
}
|
|
|
|
/*Size and color of the eyebrows.*/
|
|
#leftBrow, #rightBrow {
|
|
|
|
width: 12em;
|
|
height: 1.5em;
|
|
|
|
background-color: #261a0d;
|
|
|
|
}
|
|
|
|
/*Position and shape of the left eyebrow.*/
|
|
#leftBrow {
|
|
|
|
float: left;
|
|
|
|
border-radius: 180% 20% 30% 45%;
|
|
|
|
}
|
|
|
|
/*Position and shape of the right eyebrow.*/
|
|
#rightBrow {
|
|
|
|
float: right;
|
|
|
|
border-radius: 20% 180% 45% 30%;
|
|
|
|
}
|
|
|
|
/*EYES*/
|
|
|
|
/* Positioning the eyes relative to the head */
|
|
#eyeArea {
|
|
|
|
margin-top: 5%;
|
|
margin-left: 20%;
|
|
margin-right: 20%;
|
|
|
|
}
|
|
|
|
/*Positioning all contents of the eye class to the center of (x,y), and making the size, color, and shape of the eye.*/
|
|
.eye {
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
height: 100px;
|
|
width: 100px;
|
|
|
|
background-color: #d9d9d9;
|
|
|
|
border-radius: 50%;
|
|
|
|
}
|
|
|
|
/*Position, size, color, and shape of the eye-color.*/
|
|
.eyeColor {
|
|
|
|
position: absolute;
|
|
|
|
height: 40px;
|
|
width: 40px;
|
|
|
|
background-color: #392613;
|
|
|
|
border-radius: 50%;
|
|
|
|
}
|
|
|
|
/*Center of the eye class, the pupil is the smallest circle within the eye. Position in z-index,
|
|
size, color, and shape of the pupil.*/
|
|
.pupil {
|
|
|
|
position: absolute;
|
|
|
|
height: 13px;
|
|
width: 13px;
|
|
|
|
background-color: black;
|
|
|
|
border-radius: 50%;
|
|
|
|
}
|
|
|
|
.topLid {
|
|
|
|
position: relative;
|
|
bottom: 25px;
|
|
|
|
height: 25px;
|
|
width: 100px;
|
|
|
|
background-color: #cc9966;
|
|
border: 1px solid #d2a679;
|
|
|
|
border-radius: 125px 125px 0 0;
|
|
|
|
}
|
|
|
|
.bottomLid {
|
|
|
|
position: relative;
|
|
top: 25px;
|
|
|
|
height: 30px;
|
|
width: 100px;
|
|
background-color: #cc9966;
|
|
border: 1px solid #d2a679;
|
|
|
|
border-radius: 0 0 200px 200px ;
|
|
|
|
}
|
|
|
|
/*Position of the left eye.*/
|
|
#leftEye {
|
|
|
|
float: left;
|
|
|
|
}
|
|
|
|
/*Position of the right eye.*/
|
|
#rightEye {
|
|
|
|
float: right;
|
|
|
|
}
|
|
|
|
/*GLASSES*/
|
|
|
|
/*Position, size, color, and shape of the glasses.*/
|
|
.glasses {
|
|
|
|
position: absolute;
|
|
z-index: 50;
|
|
|
|
height: 140px;
|
|
width: 200px;
|
|
|
|
border: 4px solid black;
|
|
border-radius: 35%;
|
|
border-width: 5px;
|
|
|
|
}
|
|
|
|
/*Position, size, and color of the glasses' ear hooks. Also applied to the nose bridge part of the
|
|
glasses.*/
|
|
.earHook, #bridge {
|
|
|
|
display: inline-block;
|
|
|
|
position: relative;
|
|
|
|
height: 4px;
|
|
width: 150px;
|
|
|
|
background-color: black;
|
|
|
|
}
|
|
|
|
/*Positions the glasses' left ear hook.*/
|
|
#leftEarHook {
|
|
|
|
float: left;
|
|
left: 100px;
|
|
position: absolute;
|
|
|
|
}
|
|
|
|
/*Positions and re-sizes the glasses' nose bridge.*/
|
|
#bridge {
|
|
|
|
left: 50px;
|
|
|
|
width: 60px;
|
|
|
|
}
|
|
|
|
/*Positions the glasses' right ear hook.*/
|
|
#rightEarHook {
|
|
|
|
float: right;
|
|
right: 70px;
|
|
position: absolute;
|
|
|
|
}
|
|
|
|
/*NOSE*/
|
|
|
|
/*Position and size of the nose container.*/
|
|
.nose {
|
|
|
|
position: relative;
|
|
display: inline-block;
|
|
left: 21px;
|
|
|
|
width: 115px;
|
|
height: 150px;
|
|
|
|
}
|
|
|
|
/*Position, size, color, and shape of the nose's ridge.*/
|
|
#noseRidge {
|
|
|
|
position: relative;
|
|
left: 25px;
|
|
z-index: 1;
|
|
|
|
height: 140px;
|
|
width: 60px;
|
|
|
|
background-color: #d2a679;
|
|
border: 3px solid #cc9966;
|
|
|
|
border-radius: 100% 100% 75% 75%;
|
|
|
|
}
|
|
|
|
/*Common position, size, color, and shape of the left and right nostril.*/
|
|
#leftNostril, #rightNostril {
|
|
|
|
position: relative;
|
|
bottom: 50px;
|
|
|
|
height: 40px;
|
|
width: 40px;
|
|
|
|
border: 4px solid #cc9966;
|
|
|
|
border-radius: 50%;
|
|
|
|
}
|
|
|
|
/*Left nostril's specific positioning.*/
|
|
#leftNostril {
|
|
|
|
float: left;
|
|
left: 10px;
|
|
|
|
}
|
|
|
|
/*Left nostril's specific positioning.*/
|
|
#rightNostril {
|
|
|
|
float: right;
|
|
right: 10px;
|
|
|
|
}
|
|
|
|
/*MOUTH*/
|
|
|
|
/*Position and size of the mouth container.*/
|
|
.mouthContainer {
|
|
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
bottom: 20px;
|
|
left: 125px;
|
|
|
|
width: 350px;
|
|
height: 200px;
|
|
|
|
}
|
|
|
|
/*Size, color, and shape of the mouth.*/
|
|
#mouth {
|
|
|
|
height: 70px;
|
|
width: 220px;
|
|
|
|
background-color: #cc9966;
|
|
|
|
border-radius: 60px 60px 175px 175px;
|
|
|
|
}
|
|
|
|
/*Size, color, and shape of the mouth's lips together.*/
|
|
#lips {
|
|
|
|
height: 30px;
|
|
|
|
border-top: none;
|
|
border-bottom: 3px solid #bf8040;
|
|
|
|
border-radius: 60px 60px 175px 175px;
|
|
|
|
} |