Picasso Painting

--- id: 60b69a66b6ddb80858c515c4 title: Step 86 challengeType: 0 dashedName: step-86 --- # --description-- È tempo di pensare allo stile degli elementi `eyes`. Usa un selettore per l'attributo `class` impostando `width` a `35px`, `height` a `20px`, `background-color` su `#8B4513` e `border-radius` su `20px 50%`. # --hints-- Dovresti creare un selettore `.eyes`. ```js assert(new __helpers.CSSHelp(document).getStyle('.eyes')); ``` Il selettore `.eyes` dovrebbe avere una proprietà `width` impostata a `35px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.width === '35px'); ``` Il selettore `.eyes` dovrebbe avere una proprietà `height` impostata a `20px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.height === '20px'); ``` Il selettore `.eyes` dovrebbe avere una proprietà `background-color` impostata su `#8B4513`. ```js assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.backgroundColor === 'rgb(139, 69, 19)'); ``` Il selettore `.eyes` dovrebbe avere una proprietà `border-radius` impostata su `20px 50%`. ```js assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.borderRadius === '20px 50%'); ``` # --seed-- ## --seed-contents-- ```html Picasso Painting

``` ```css body { background-color: rgb(184, 132, 46); } #back-wall { background-color: #8B4513; width: 100%; height: 60%; position: absolute; top: 0; left: 0; z-index: -1; } #offwhite-character { width: 300px; height: 550px; background-color: GhostWhite; position: absolute; top: 20%; left: 17.5%; } #white-hat { width: 0; height: 0; border-style: solid; border-width: 0 120px 140px 180px; border-top-color: transparent; border-right-color: transparent; border-bottom-color: GhostWhite; border-left-color: transparent; position: absolute; top: -140px; left: 0; } #black-mask { width: 100%; height: 50px; background-color: rgb(45, 31, 19); position: absolute; top: 0; left: 0; z-index: 1; } #gray-instrument { width: 15%; height: 40%; background-color: rgb(167, 162, 117); position: absolute; top: 50px; left: 125px; z-index: 1; } .black-dot { width: 10px; height: 10px; background-color: rgb(45, 31, 19); border-radius: 50%; display: block; margin: auto; margin-top: 65%; } #tan-table { width: 450px; height: 140px; background-color: #D2691E; position: absolute; top: 275px; left: 15px; z-index: 1; } #black-character { width: 300px; height: 500px; background-color: rgb(45, 31, 19); position: absolute; top: 30%; left: 59%; } #black-hat { width: 0; height: 0; border-style: solid; border-width: 150px 0 0 300px; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: rgb(45, 31, 19); position: absolute; top: -150px; left: 0; } #gray-mask { width: 150px; height: 150px; background-color: rgb(167, 162, 117); position: absolute; top: -10px; left: 70px; } #white-paper { width: 400px; height: 100px; background-color: GhostWhite; position: absolute; top: 250px; left: -150px; z-index: 1; } .fa-music { display: inline-block; margin-top: 8%; margin-left: 13%; } .blue { background-color: #1E90FF; } #blue-left { width: 500px; height: 300px; position: absolute; top: 20%; left: 20%; } #blue-right { width: 400px; height: 300px; position: absolute; top: 50%; left: 40%; } #orange-character { width: 250px; height: 550px; background-color: rgb(240, 78, 42); position: absolute; top: 25%; left: 40%; } #black-round-hat { width: 180px; height: 150px; background-color: rgb(45, 31, 19); border-radius: 50%; position: absolute; top: -100px; left: 5px; z-index: -1; } #eyes-div { width: 180px; height: 50px; position: absolute; top: -40px; left: 20px; z-index: 3; } #triangles { width: 250px; height: 550px; } .triangle { width: 0; height: 0; border-style: solid; border-width: 42px 45px 45px 0; border-top-color: transparent; border-right-color: Gold; /* yellow */ border-bottom-color: transparent; border-left-color: transparent; display: inline-block; } #guitar { width: 100%; height: 100px; position: absolute; top: 120px; left: 0px; z-index: 3; } .guitar { width: 150px; height: 120px; background-color: Goldenrod; border-radius: 50%; } #guitar-left { position: absolute; left: 0px; } #guitar-right { position: absolute; left: 100px; } .fa-bars { display: block; margin-top: 30%; margin-left: 40%; } #guitar-neck { width: 200px; height: 30px; background-color: #D2691E; position: absolute; top: 45px; left: 200px; z-index: 3; } --fcc-editable-region-- --fcc-editable-region-- ```