scrimba
The Weekly Web Dev Challenge
The Weekly Web Dev Challenge: Color Change Rabbit ๐Ÿฐ
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

The Weekly Web Dev Challenge: Color Change Rabbit ๐Ÿฐ
AboutCommentsNotes
The Weekly Web Dev Challenge: Color Change Rabbit ๐Ÿฐ
Expand for more info
index.css
run
preview
console
html, body {
margin: 0;
padding: 0;
}

:root {
--base: #99bbff;
--base2: #ffccd5;
--base3: #808080;
}

body {
background: #ccccff;
font: 25px 'Arial', sans-serif;
}

.container {
display: flex;
}

.controls {
order: -1;
padding: 30px;
}

.head {
background: white;
height: 10em;
width: 10em;
border-radius: 50%;
margin: 5em;
}

.ears {
display: flex;
}

.ear {
background: white;
height: 7em;
width: 2.5em;
border-radius: 50%;
z-index: -2;
margin: -4em 1.2em
}

.inner-ear {
background: var(--base2);
height: 4em;
width: 2em;
border-radius: 50%;
z-index: 1;
margin: 50px 5px;
}

.eyes {
display: flex;
}

.eye {
border-top-left-radius: 75px;
border-top-right-radius: 75px;
height: 1em;
width: 1em;
background: var(--base);
margin: 2.5em 2em 0;
}

.pupil {
border-top-left-radius: 75px;
border-top-right-radius: 75px;
height: 0.5em;
width: 0.5em;
background: black;
margin: 0.5em 0.25em;
}

.nose {
height: 0.75em;
width: 0.75em;
background: var(--base3);
border-radius: 50%;
margin: 2em 4.5em;
}

.mouth {
height: 0.25em;
width: 2em;
background: #ffccd5;
border-radius: 50%;
margin: 2em 4em;
}
Console
/index.html
-1:48