No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Dibujando a nuestros conejitos con CSS en Animationland

4/13
Recursos

Para este art铆culo, ya debemos tener la siguiente vista lista. Una vez hayas llegado a esta vista, comenzamos con los conejitos 馃惏.

Foto del dise帽o avanzado.jpeg

Empezando a maquetar nuestro primer conejito 馃悋

Empezamos con el primer layer, con clase layer-1. Primero, cambiaremos el color de su fondo, por uno diferente a blanco 猬, para que podamos visualizar los cambios que realizaremos con un mayor contraste. Y dentro de la etiqueta, colocaremos las siguientes etiquetas \<div> para las partes del cuerpo. As铆 como en la siguiente imagen.

Maquetando nuestro primer conejo.jpeg

Estilando a nuestro primer conejito 馃巿

Estilando la oreja izquierda 馃帄

Dentro de nuestra etiqueta \<style>, colocaremos el estilo de las clases agregadas hace un momento. En este caso, usaremos las etiquetas \<div> con clases left-ear--outer y left-ear--inner. Ingresando las siguientes propiedades.

Propiedades de CSS para la oreja izquierda.jpeg

Para left-ear--outer, le damos un fondo blanco, un border redondeado, un ancho y altura, le cambiamos su posici贸n a absolute para poder indicarle la propiedad left.

Si todo ha salido bien, conseguiremos el siguiente resultado 鉁.

Resultado de maquetar la oreja izquierda.jpeg

Una vez hayas conseguido lo mismo, te reto a hacer la oreja derecha por tu cuenta. De igual forma, podr谩s compararlo con nuestro resultado, pero intenta realizarlo por tu cuenta primero. 隆Conf铆o en ti! 馃挌

Estilando la oreja derecha 馃帄

Debajo de las clases d贸nde estilamos la oreja izquierda, colocamos el siguiente c贸digo, que ser铆a muy parecido a excepci贸n de algunos puntos. Como en lugar de la propiedad left, colocamos right.

Propiedades para la oreja derecha.jpeg

Con las siguientes propiedades, conseguiremos formar la oreja derecha. As铆 tendr铆amos las dos orejas como se muestra a continuaci贸n 馃帀.

Resultado de maquetar la oreja derecha.jpeg

Estilando la cabeza 馃惏

En cuanto hayamos conseguido realizar las orejas satisfactoriamente. Lo que haremos, ser谩 estilar la etiqueta \<div> con clase head, con las siguiente propiedades. En donde la daremos un color de fondo, un borde redondeado, un ancho y alto, un margen para colocarlo al centro y las propiedades left, right y top con ayuda de la propiedades position con valor en absolute.

Propiedades para la cabeza.jpeg

Con dichas propiedades, conseguiremos lo siguiente mostrado en el navegador 馃帄.

Resultado de maquetar la cabeza.jpeg

Estilando los ojos 馃憖

Para los ojos, lo que haremos ser谩 modificar las etiquetas \<div> con las clases head__eye, head__eye--left y head__eye--right.

Empezaremos modificando la clase head__eye 馃帹. Colocaremos propiedades para definir el color de fondo, borde redondeado, un ancho y alto, y la posici贸n en absolute.

Maquetando c贸digo de los ojos.jpeg

Ahora, ver谩s un solo punto dentro del conejo 馃惏. Esto se debe a que tenemos dos ojos, pero uno est谩 encima de otro, por eso tenemos el efecto de que solo hay uno. As铆 que nos faltar铆a modificar ahora las clases head__eye--left y head__eye--right para poder posicionar ambos ojos.

Maquetando c贸digo de los ojos.jpeg

Con ello, estar铆amos logrando visualizar correctamente ambos ojos de nuestro primer conejo, como lo muestra la siguiente imagen 鉁.

Resultado de modificar los ojos.jpeg

Idea como realizar el efecto de zigzag 馃搷

Si queremos lograr un efecto de zigzag para el fondo o los bloques, podemos guiarnos del siguiente link haciendo click aqu铆{target="_blank"}.

En d贸nde, el art铆culo nos explica c贸mo entender la l贸gica para el mismo, dividiendo desde peque帽as cuadr铆culas para que una vez unidas logremos el efecto.

Y esto ser铆a todo por aqu铆, en el siguiente art铆culo veremos animation name y keyframes. 隆Te esperamos! 馃З

Contribuci贸n creada con los aportes de:Angel David Osorio Leyva

Aportes 92

Preguntas 10

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Ojala nintendo no me demande
Los Goombas y demas los hice en Aseprite pixel por pixel y luego lo export茅 a formato .svg para poder escalarlo y no tener problemas con las medidas de anchura y altura.

Hice mi dise帽o bas谩ndome en el polo norte, as铆 me qued贸 xd:

Intente darle un toque 3D, ahora a ponerle los conejitos

Hola compa帽eros. Quise hacer el m铆o estilo Zelda, buscando rupias en los jarrones :3

https://codepen.io/Londrack/full/abJrewx

Hice un poquito de trampa pero aqu铆 les dejo como me quedo.

馃槃

Les comparto el c贸digo, por si alguien se quiere guiar:
Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./main.css">
</head>
<body>
    <div class="phone">
        <div class="layer-1">
            <div class="left-ear--outer">
                <div class="left-ear--inner"></div>
            </div>
            <div class="right-ear--outer">
                <div class="right-ear--inner"></div>
            </div>
            <div class="head">
                <div class="head__eye head__eye-left"></div>
                <div class="head__eye head__eye-right"></div>
            </div>
        </div>
        <div class="layer-2">
            <div class="left-ear--outer">
                <div class="left-ear--inner"></div>
            </div>
            <div class="right-ear--outer">
                <div class="right-ear--inner"></div>
            </div>
            <div class="head">
                <div class="head__eye head__eye-left"></div>
                <div class="head__eye head__eye-right"></div>
            </div>
        </div>
        <div class="layer-3">
            <div class="capaVerde"></div>
        </div>
        <div class="layer-4">
            <div class="left-ear--outer">
                <div class="left-ear--inner"></div>
            </div>
            <div class="right-ear--outer">
                <div class="right-ear--inner"></div>
            </div>
            <div class="head">
                <div class="head__eye head__eye-left"></div>
                <div class="head__eye head__eye-right"></div>
            </div>
        </div>
        <div class="layer-5">
            <div class="capaVerde"></div>
        </div>
        <div class="layer-6">
            <div class="left-ear--outer">
                <div class="left-ear--inner"></div>
            </div>
            <div class="right-ear--outer">
                <div class="right-ear--inner"></div>
            </div>
            <div class="head">
                <div class="head__eye head__eye-left"></div>
                <div class="head__eye head__eye-right"></div>
            </div>
        </div>
        <div class="layer-7">
            <div class="capaVerde"></div>
        </div>
        <div class="layer-8">
            <div class="grass"></div>
        </div>
        <div class="layer-9"></div>
        <div class="layer-10"></div>
    </div>
</body>
</html>

Css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    font-size: 62.5%;
}
body{
    background: #fff;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
}


.phone{
    position: relative;
    border: 8px solid black;
    border-radius: 20px;
    width: 80%;
    height: 80%;
    background: rgb(159, 185, 252);
    box-shadow: 10px 12px 10px 0px rgba(0,0,0,0.5); 

}

.layer-1{
    position: absolute;
    z-index: 1;
    width: 70px;
    height: 80%;
    /* background: grey; */
    bottom: 0;
    left: 20%;
}
.layer-2{
    position: absolute;
    z-index: 2;
    position: absolute;
    z-index: 1;
    width: 70px;
    height: 80%;
    /* background: grey; */
    bottom: 0;
    right: 20%;
}
.layer-3{
    position: absolute;
    z-index: 3;
    width: 80%;
    height: 70%;
    background: #BB6D50;
    border-radius: 20px;
    /* 67A167 
    A2533A*/
    bottom: 0;
    left: 10%;
}
.capaVerde:after{
    content: "";
    width: 100%;
    height: 20px;
    position: absolute;
    top: 0;
    height: 30px;
    background: linear-gradient(135deg, #67A167 25%, transparent 25%) -50px 0,
                linear-gradient(-135deg, #67A167 25%, transparent 25%) -50px 0,
                linear-gradient(45deg, #67A167 25%, transparent 25%),
                linear-gradient(-45deg, #67A167 25%, transparent 25%);
    background-size: 30px 80px;
    border-radius: 20px;
}
.capaVerde::before {
    content: "";
    position: absolute; 
    /* left: -0px; */
    top: 15px;
    width: 100%;
    height: 40px;
    background: linear-gradient(135deg, #a6543d 25%, transparent 25%) -50px 0,
                linear-gradient(-135deg, #a6543d 25%, transparent 25%) -50px 0,
                linear-gradient(45deg, #a6543d 25%, transparent 25%),
                linear-gradient(-45deg, #a6543d 25%, transparent 25%);
    background-size: 30px 100px;
    background-position: 140px 0 0 30px 0;
}
.layer-4{
    position: absolute;
    z-index: 4;
    width: 70px;
    height: 60%;
    /* background: grey; */
    bottom: 0;
    left: 5%;
}
.layer-5{
    position: absolute;
    z-index: 5;
    width: 70%;
    height: 50%;
    background: #BB6D50;
    border-radius: 20px;
    box-shadow: 5px 0px 10px 0 rgba(0,0,0,0.5);
    bottom: 0;
    left: 0;
}
.layer-6{
    position: absolute;
    z-index: 6;
    width: 70px;
    height: 40%;
    /* background: grey; */
    bottom: 0;
    right: 8%;
}
.layer-7{
    position: absolute;
    z-index: 7;
    width: 55%;
    height: 30%;
    background: #BB6D50;
    border-radius: 20px;
    box-shadow: -5px 0px 10px 0 rgba(0,0,0,0.5);
    bottom: 0;
    right: 0;
}
.layer-8{
    position: absolute;
    z-index: 8;
    width: 60%;
    height: 20%;
    bottom: 0;
    right: 20%;
}
.layer-8::before{
    position: absolute;
    content: "";
    width: 40%;
    height: 70%;
    bottom: 0;
    left: 0;
    background: #67A167;
    border-radius: 100px 100px 10px 20px;
}
.layer-8::after{
    position: absolute;
    content: "";
    width: 40%;
    height: 70%;
    bottom: 0;
    right: 0;
    background: #67A167;
    border-radius: 100px 100px 10px 20px;
}
.grass{
    position: absolute;
    width: 40%;
    height: 90%;
    bottom: 0;
    left: 30%;
    background: #67A167;
    border-radius: 100px 100px 10px 20px;
}
.layer-9{
    position: absolute;
    z-index: 9;
    width: 40%;
    height: 17%;
    /* background: rosybrown; */
    bottom: 0;
    left: 0%;
}
.layer-9::before{
    position: absolute;
    content: "";
    width: 75%;
    height: 100%;
    background: white;
    border-radius: 100px 100px 10px 20px;
}
.layer-9::after{
    position: absolute;
    content: "";
    width: 80%;
    height: 60%;
    bottom: 0;
    right: 0;
    background: white;
    border-radius: 100px;
}
.layer-10{
    position: absolute;
    z-index: 10;
    width: 40%;
    height: 17%;
    bottom: 0;
    right: 0;
}
.layer-10::before{
    position: absolute;
    content: "";
    width: 75%;
    height: 100%;
    right: 0;
    background: white;
    border-radius: 100px 100px 30px 20px;
}
.layer-10::after{
    position: absolute;
    content: "";
    width: 80%;
    height: 60%;
    bottom: 0;
    left: 0;
    background: white;
    border-radius: 100px;
}

.left-ear--outer{
    position: absolute;
    display: inline-block;
    background: white;
    border-radius: 90%;
    width: 20px;
    height: 50px;
    left: 15%;
}
.left-ear--inner{
    position: absolute;
    background: rosybrown;
    border-radius: 90%;
    width: 10px;
    height: 25px;
    left: 5px;
    top: 5px;
}
.right-ear--outer{
    position: absolute;
    display: inline-block;
    background: white;
    border-radius: 90%;
    width: 20px;
    height: 50px;
    right: 15%;
}
.right-ear--inner{
    position: absolute;
    background: rosybrown;
    border-radius: 90%;
    width: 10px;
    height: 25px;
    left: 5px;
    top: 5px;
}
.head{
    position: absolute;
    background: white;
    border-radius: 90%;
    width: 100%;
    height: 50px;
    top: 25px;
}

.head__eye{
    position: absolute;
    border-radius: 100%;
    width: 8px;
    height: 8px;
    background: lightblue;
    box-shadow: inset 0 0 0 2px black;
    top: 25%;
}
.head__eye-left{
    left: 30%;
}
.head__eye-right{
    right: 30%;
}


No se que me pas贸 pero quise hacer otro tipo de animalito seg煤n el escenario que me saliera y como qued贸 en las nubes yo quise hacer cerditos voladores como por practicar jeje

Usando los pseudo elementos ::after y ::before

HTML

<div class="phone">
        <div class="layer_1">
            <div class="ear_left"></div>
            <div class="ear_right"></div>
            <div class="head"></div>
        </div>
        <div class="layer_2">
            <div class="ear_left"></div>
            <div class="ear_right"></div>
            <div class="head"></div>
        </div>
        <div class="layer_3"></div>
        <div class="layer_4">
            <div class="ear_left"></div>
            <div class="ear_right"></div>
            <div class="head"></div>
        </div>
        <div class="layer_5"></div>
        <div class="layer_6">
            <div class="ear_left"></div>
            <div class="ear_right"></div>
            <div class="head"></div>
        </div>
        <div class="layer_7"></div>
        <div class="layer_8">
            <div class="grass"></div>
        </div>
        <div class="layer_9"></div>
        <div class="layer_10"></div>
    </div>

CSS

        .phone {
            position: relative;
            width: 375px;
            height: 700px;
            border: solid black 8px;
            border-radius: 50px;
            box-shadow: 7px 8px 20px 0 #868686;
            background-color: #ccefff;
            overflow: hidden;
        }

        .layer_1 {
            position: absolute;
            z-index: 1;
            width: 80px;
            height: 520px;
            bottom: 0;
            left: 70px;
        }

        .layer_2 {
            position: absolute;
            z-index: 2;
            width: 80px;
            height: 520px;
            bottom: 0;
            right: 70px;
        }
        .layer_3 {
            position: absolute;
            z-index: 3;
            width: 280px;
            height: 460px;
            background: #bb6d50;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 0 auto;
            border-radius: 20px;
            box-shadow: 7px 8px 20px 0 #868686;
            overflow: hidden;
        }

        .layer_4 {
            position: absolute;
            z-index: 4;
            width: 80px;
            height: 380px;
            bottom: 0;
            left: 50px;
        }
        .layer_5 {
            position: absolute;
            z-index: 5;
            width: 280px;
            height: 320px;
            background: #bb6d50;
            bottom: 0;
            border-radius: 20px;
            box-shadow: 7px 8px 20px 0 #000000af;
            overflow: hidden;
        }

        .layer_6 {
            position: absolute;
            z-index: 6;
            width: 80px;
            height: 250px;
            bottom: 0;
            right: 50px;
        }
        .layer_7 {
            position: absolute;
            z-index: 7;
            width: 180px;
            height: 190px;
            background: #bb6d50;
            bottom: 0;
            right: 0;
            border-radius: 20px;
            box-shadow: 7px 8px 20px 0 #000000af;
            overflow: hidden;
        }

        .layer_8 {
            position: absolute;
            z-index: 8;
            width: 240px;
            height: 130px;
            background: #66a167;
            bottom: -30px;
            left: 0;
            right: 0;
            margin: 0 auto;
            border-radius: 50px;
        }

        .grass {
            width: 120px;
            height: 120px;
            background-color: #66a167;
            border-radius: 50%;
            position: absolute;
            left: 70px;
            top: -40px;
        }

        .grass::after {
            content: "";
            width: 90px;
            height: 90px;
            background-color: #66a167;
            border-radius: 50%;
            position: absolute;
            left: 90px;
            top: 30px;
        }

        .grass::before {
            content: "";
            width: 90px;
            height: 90px;
            background-color: #66a167;
            border-radius: 50%;
            position: absolute;
            left: -70px;
            top: 30px;
        }




        .layer_9 {
            position: absolute;
            z-index: 9;
            width: 180px;
            height: 80px;
            border-radius: 50px;
            background: white;
            bottom: 0;
            left: -50px;
        }
        .layer_10 {
            position: absolute;
            z-index: 10;
            width: 180px;
            height: 80px;
            border-radius: 50px;
            background: white;
            bottom: 0;
            right: -50px;
        }

        .layer_9::before,
        .layer_10::before {
            content: "";
            position: absolute;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: white;
            top: -40px;
            left: 50px;
        }


        /* //////////////////////////////////////////////////////// */
        .layer_3::after,
        .layer_5::after,
        .layer_7::after {
            content: "";
            position: absolute; 
            left: -0px;
            top: 0px;
            width: 100%;
            height: 40px;
            background: linear-gradient(135deg, #6aa067 25%, transparent 25%) -50px 0,
                        linear-gradient(-135deg, #6aa067 25%, transparent 25%) -50px 0,
                        linear-gradient(45deg, #6aa067 25%, transparent 25%),
                        linear-gradient(-45deg, #6aa067 25%, transparent 25%);
            background-size: 40px 100px;
            background-position: 140px 0 0 30px 0;
        }

        .layer_3::before,
        .layer_5::before,
        .layer_7::before {
            content: "";
            position: absolute; 
            left: -0px;
            top: 15px;
            width: 100%;
            height: 40px;
            background: linear-gradient(135deg, #a6543d 25%, transparent 25%) -50px 0,
                        linear-gradient(-135deg, #a6543d 25%, transparent 25%) -50px 0,
                        linear-gradient(45deg, #a6543d 25%, transparent 25%),
                        linear-gradient(-45deg, #a6543d 25%, transparent 25%);
            background-size: 40px 100px;
            background-position: 140px 0 0 30px 0;
        }





        /* //////////////////////////////////////////////////////// */

        .ear_left {
            position: absolute;
            background-color: white;
            border-radius: 90%;
            width: 25px;
            height: 60px;
            left: 5px;
        }

        .ear_left::before {
            content: "";
            position: absolute;
            background-color: #f9c7d1;
            width: 15px;
            height: 50px;
            left: 5px;
            top: 4px;
            border-radius: 90%;

        }

        .ear_right {
            position: absolute;
            background-color: white;
            border-radius: 90%;
            width: 25px;
            height: 60px;
            right: 5px;
        }

        .ear_right::before {
            content: "";
            position: absolute;
            background-color: #f9c7d1;
            width: 15px;
            height: 50px;
            left: 5px;
            top: 4px;
            border-radius: 90%;

        }

        .head {
            position: absolute;
            background-color: white;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            top: 30px;
        }

        .head::before {
            content: "";
            position: absolute;
            background-color: black;
            border-radius: 50%;
            width: 5px;
            height: 5px;
            left: 25px;
            top: 20px;
        }

        .head::after {
            content: "";
            position: absolute;
            background-color: black;
            border-radius: 50%;
            width: 5px;
            height: 5px;
            right: 25px;
            top: 20px;
        }

Hay va tomando algo de forma!

Este fue mi resultado, hice un intento del Pato Lucas, fue bastante complicado darle forma al pico, pero dio resultado al final.

https://codepen.io/garzonsergio/pen/yLXxvNo

![](

Como algunos compa帽eros, yo tambi茅n tom茅 inspiraci贸n de Mario para hacer mi dise帽o. Hice las im谩genes pixel por pixel y luego las exporte como SVG

As铆 va quedando por el momento

Asi esta quedando el proyecto, les comparto el codigo por si alguien quiere chequearlo GitHub.
recibo Feedback

mi reto:

se podria agrupar las clases ear para tener las porpiedades que tienen en comun y luego solo aplicar las propiedades de posicion a cada clase, para ahorrarse un par de lineas de css

Aqu铆 les dejo al forma de como hice la parte de las capas triangulares 馃槂

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        body{
            margin: 0;
            height: 100vh;
            width: 100%;
            display: grid;
            place-items: center;
        }

        .phone{
            position: relative;
            border: 9px solid black;
            border-radius: 40px;
            height: 600px;
            width: 300px;
            background: #ccefff;
            box-shadow: 0 19px 38px rgb(0, 0, 0,0.30), 
            0 15px 12px rgb(0, 0, 0,0.22);
            box-sizing: border-box;
            
        }
        .layer-1{
            position: absolute;
            z-index: 1;
            height: 450px;
            width: 80px;
            /* background: papayawhip; */
            bottom: 0;
            right: 60px;

        }
        .layer-2{
            position: absolute;
            z-index: 2;
            height: 450px;
            width: 80px;
            /* background: papayawhip; */
            bottom: 0;
            left: 60px;  
        }
        .layer-3{
            position: absolute;
            z-index: 3;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 220px;
            height: 400px;
            background: #804000;
            bottom: 0;

    
        }

        .capaVerde{
            width: 100%;
            height: 20px;
            position: absolute;
            top: 0;
            height: 30px;
            background: linear-gradient(135deg, rgb(0, 255, 30) 25%, transparent 25%) -50px 0,
            linear-gradient(-135deg, rgb(0, 255, 30)  25%, transparent 25%) -50px 0,
            linear-gradient(45deg, teal 25%, transparent 25%),
            linear-gradient(-45deg, teal 25%, transparent 25%);
            background-size: 30px 50px;
        }


        .layer-4{
            position: absolute;
            z-index: 4;
            height: 340px;
            width: 80px;
            /* background: papayawhip; */
            bottom: 0;
            left: 50px;
        }
        .layer-5{
            position: absolute;
            z-index: 5;
            left: 0;
            width: 220px;
            height: 290px;
            background: #804000;
            padding-left: ;
            border-bottom-left-radius: 30px;
            bottom: 0;
        }
        .layer-6{
            position: absolute;
            z-index: 6;
            height: 230px;
            width: 80px;
            /* background: papayawhip; */
            bottom: 0;
            right: 40px;
        }
        .layer-7{
            position: absolute;
            z-index: 7;
            right: 0;
            width: 170px;
            height: 180px;
            background: #804000;
            border-bottom-right-radius: 30px;
            bottom: 0;
        }
        .layer-8{
            position: absolute;
            z-index: 8;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 170px;
            height: 90px;
            background: rgb(0, 255, 30);
            bottom: 0;
        }
        .layer-9{
            position: absolute;
            z-index: 9;
            left: 0;
            width: 100px;
            height: 100px;
            background: white;
            border-bottom-left-radius: 30px;
            bottom: 0;
        }
        .layer-10{
            position: absolute;
            z-index: 10;
            right: 0;
            width: 100px;
            height: 70px;
            background: white;
            border-bottom-right-radius: 30px;
            bottom: 0;
        }

        .left-ear--outer{
            background: white;
            border-radius: 90%;
            width: 20px;
            height: 50px;
            position: absolute;
            left: 10px;
        }

        .left-ear--inner{
            background: rgb(91, 91, 91);
            border-radius: 90%;
            width: 10px;
            height: 50px;
            position: absolute;
            left: 15px;
            top: 8px;
        }

        .right-ear--outer{
            background: white;
            border-radius: 90%;
            width: 20px;
            height: 50px;
            position: absolute;
            right: 10px;
        }

        .right-ear--inner{
            background: rgb(91, 91, 91);
            border-radius: 90%;
            width: 10px;
            height: 50px;
            position: absolute;
            right: 15px;
            top: 8px;
        }

        .head{
            position: absolute;
            width: 70px;
            height: 70px;
            left: 7px;
            border-radius: 100px;
            background: white; 
            top: 25px;
        }

        .head__eye{
            background: gray;
            border-radius: 50%;
            width: 4px;
            height: 4px;
            position: absolute;
            top: 15px;
        }

        .head__eye--left{
            left: 40px;
        }

        .head__eye--right{
            right: 35px;
        }





    </style>
</head>
<body>
    <div class="phone">
        <div class="layer-1">
            <div class="left-ear--outer"></div>
            <div class="left-ear--inner"></div>
            <div class="right-ear--outer"></div>
            <div class="right-ear--inner"></div>
            <div class="head">
                <div class="head__eye head__eye--left">

                </div>
                <div class="head__eye head__eye--right">

                </div>
            </div>
        </div>
        <div class="layer-2">
            <div class="left-ear--outer"></div>
            <div class="left-ear--inner"></div>
            <div class="right-ear--outer"></div>
            <div class="right-ear--inner"></div>
            <div class="head">
                <div class="head__eye head__eye--left">

                </div>
                <div class="head__eye head__eye--right">

                </div>
            </div>
        </div>
        <div class="layer-3">
            <div class="capaVerde">

            </div>
        </div>
        <div class="layer-4">
            <div class="left-ear--outer"></div>
            <div class="left-ear--inner"></div>
            <div class="right-ear--outer"></div>
            <div class="right-ear--inner"></div>
            <div class="head">
                <div class="head__eye head__eye--left">

                </div>
                <div class="head__eye head__eye--right">

                </div>
            </div>
        </div>
        <div class="layer-5">
            <div class="capaVerde">

            </div>
        </div>
        <div class="layer-6">
            <div class="left-ear--outer"></div>
            <div class="left-ear--inner"></div>
            <div class="right-ear--outer"></div>
            <div class="right-ear--inner"></div>
            <div class="head">
                <div class="head__eye head__eye--left">

                </div>
                <div class="head__eye head__eye--right">

                </div>
            </div>
        </div>
        <div class="layer-7">
            <div class="capaVerde">

            </div>
        </div>
        <div class="layer-8">
            
        </div>
        <div class="layer-9"></div>
        <div class="layer-10"></div>
    </div>
</body>
</html>

Peko



termine haciendo un Nousagi XD me encanto si quieren checarlo o agregarlo a sus proyectos se los dejo aqui adem谩s es responsive

Mi reto, aunque no soy muy bueno con la creatividad, pero para eso est谩 la practica (son lobos, tengo que hacerle mejoras)

Hola, comparto mi proyecto.

POR EL MOMENTO PINTA BIEN 馃檵馃徎鈥嶁檪锔

Lo hice casi igual solo que en vez de conejos utilice monos.

Dibujando a nuestros conejitos con CSS en Animationland

Lo que hice fue tratar de imitar lo que la profesora hizo,
con el background y el dise帽o del pasto.
Link: https://codepen.io/paolojoaquin/pen/PopOjxd

Aqui les dejo mi dise帽o, yo quise agregarle pandas 馃榿
Aqui se puede visualizar mejor:
https://stivenbautista1998.github.io/pandaland/

Asi va por ahora

As铆 va mi proyecto. Acabo de hacer los Digletts en CSS. M谩s adelante va a ir cogiendo m谩s forma. 馃槂

Mi resultado
![](


I think it鈥檚 looking great

Demore un poco pero lo logr茅.

Termine mis conejitos en las monta帽as!!!, solo me quede con una duda 驴C贸mo hago para que no se salga la nubecita del cuadro del tel茅fono?

Yo en las clases anteriores: de seguro en la pr贸ximas clases est谩n subidos en la secci贸n de recursos los sprites en SVG.
La profe Estefany: no hay pedo, los dibujamos con CSS

Justo estoy mirando esta serie. Intente reutilizar muchas piezas鈥
Git

Cada d铆a amo m谩s a esta profe !!

Ense帽a cosas que te hacen boom ! en la cabeza.

Mi aporte

![](

Muy buena la clase , aqui les dejo mis conejos

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>contexto-de-apilamiento</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            width: 100%;
            display: grid;
            place-items: center;
        }
        .phone {
            position: relative;
            border: 8px solid black;
            border-radius: 40px;
            height: 600px;
            width: 300px;
            background: #CCEFFF;
            box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
        }
        .layer-1 {
            position: absolute;
            z-index: 1;
            height: 450px;
            width: 80px;    
            background: rgba(225, 255, 255, 0.5);
            bottom: 0;
            right: 60px;
        }
        .layer-2 {
            position: absolute;
            z-index: 2;
            height: 450px;
            width: 80px;    
            background: rgba(225, 255, 255, 0.5);
            bottom: 0;
            left: 60px;
        }
        .layer-3 {
            position: absolute;
            z-index: 3;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 220px;
            height: 400px;
            background: chocolate;
            bottom: 0;
            border-radius: 30px;
            border: 1px solid rgb(103, 60, 60);
        }
        .layer-4 {
            position: absolute;
            z-index: 4;
            height: 350px;
            width: 80px;    
            background: rgba(225, 255, 255, 0.5);
            bottom: 0;
            left: 20px;
        }
        .layer-5 {
            position: absolute;
            z-index: 5; 
            width: 220px;
            height: 300px;
            background: chocolate;
            border-radius: 30px;
            bottom: 0;
            border: 1px solid rgb(103, 60, 60);
        }
        .layer-6 {
            position: absolute;
            z-index: 6;
            height: 250px;
            width: 80px;    
            background: rgba(225, 255, 255, 0.5);;
            bottom: 0;
            right: 30px;
        }
        .layer-7 {
            position: absolute;
            z-index: 7;
            width: 150px;
            height: 200px;
            background: chocolate;
            right: 0px;
            bottom: 0;
            border: 1px solid rgb(103, 60, 60);
            border-radius: 30px;
        }
        .layer-8 {
            position: absolute;
            z-index: 8;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 220px;
            height: 100px;
            background: green;
            bottom: 0;
        }
        .layer-9 {
            position: absolute;
            z-index: 9;
            height: 100px;
            width: 100px;    
            background: white;
            bottom: 0;
            right: 0px;
        }
        .layer-10 {
            position: absolute;
            z-index: 10;
            height: 100px;
            width: 100px;    
            background: white;
            bottom: 0;
            left: 0px;
        }
        .left-ear--outer {
            background: white;
            border-radius: 90%;
            width: 20px;
            height: 50px;
            position: absolute;
            left: 10px;
        }
        .left-ear--inner {
            background: pink;
            border-radius: 90%;
            width: 10px;
            height: 50px;
            position: absolute;
            left: 15px;
            top: 10px;
        }
        .right-ear--outer {
            background: white;
            border-radius: 90%;
            width: 20px;
            height: 50px;
            position: absolute;
            right: 10px;
        }
        .right-ear--inner {
            background: pink;
            border-radius: 90%;
            width: 10px;
            height: 50px;
            position: absolute;
            right: 15px;
            top: 10px;
        }
        .head {
            background: white;
            border-radius: 50px;
            left: 0;
            right: 0;
            margin:  0 auto;
            position: absolute;
            width: 80px;
            height: 80px;
            top: 30px;
        }
        .head__eye {
            background: gray;
            border-radius: 50%;
            width: 4px;
            height: 4px;
            position: absolute;
            top: 12px;
        
        }
        .head__eye--left {
            left: 30px;
        }
        .head__eye--right {
            right: 30px;
        }
        .left-ear--outer2 {
            background: white;
            border-radius: 90%;
            width: 20px;
            height: 50px;
            position: absolute;
            left: 10px;
        }
        .left-ear--inner2 {
            background: pink;
            border-radius: 90%;
            width: 10px;
            height: 50px;
            position: absolute;
            left: 15px;
            top: 10px;
        }
        .right-ear--outer2 {
            background: white;
            border-radius: 90%;
            width: 20px;
            height: 50px;
            position: absolute;
            right: 10px;
        }
        .right-ear--inner2 {
            background: pink;
            border-radius: 90%;
            width: 10px;
            height: 50px;
            position: absolute;
            right: 15px;
            top: 10px;
        }
        .head2 {
            background: white;
            border-radius: 50px;
            left: 0;
            right: 0;
            margin:  0 auto;
            position: absolute;
            width: 80px;
            height: 80px;
            top: 30px;
        }
        .head__eye2 {
            background: gray;
            border-radius: 50%;
            width: 4px;
            height: 4px;
            position: absolute;
            top: 12px;
        
        }
        .head__eye--left2 {
            left: 30px;
        }
        .head__eye--right2 {
            right: 30px;
        }
        .left-ear--outer4 {
            background: white;
            border-radius: 90%;
            width: 20px;
            height: 50px;
            position: absolute;
            left: 10px;
        }
        .left-ear--inner4 {
            background: pink;
            border-radius: 90%;
            width: 10px;
            height: 50px;
            position: absolute;
            left: 15px;
            top: 10px;
        }
        .right-ear--outer4 {
            background: white;
            border-radius: 90%;
            width: 20px;
            height: 50px;
            position: absolute;
            right: 10px;
        }
        .right-ear--inner4 {
            background: pink;
            border-radius: 90%;
            width: 10px;
            height: 50px;
            position: absolute;
            right: 15px;
            top: 10px;
        }
        .head4 {
            background: white;
            border-radius: 50px;
            left: 0;
            right: 0;
            margin:  0 auto;
            position: absolute;
            width: 80px;
            height: 80px;
            top: 30px;
        }
        .head__eye4 {
            background: gray;
            border-radius: 50%;
            width: 4px;
            height: 4px;
            position: absolute;
            top: 12px;
        }
        .head__eye--left4 {
            left: 30px;
        }
        .head__eye--right4 {
            right: 30px;
        }
        .left-ear--outer6 {
            background: white;
            border-radius: 90%;
            width: 20px;
            height: 50px;
            position: absolute;
            left: 10px;
        }
        .left-ear--inner6 {
            background: pink;
            border-radius: 90%;
            width: 10px;
            height: 50px;
            position: absolute;
            left: 15px;
            top: 10px;
        }
        .right-ear--outer6 {
            background: white;
            border-radius: 90%;
            width: 20px;
            height: 50px;
            position: absolute;
            right: 10px;
        }
        .right-ear--inner6 {
            background: pink;
            border-radius: 90%;
            width: 10px;
            height: 50px;
            position: absolute;
            right: 15px;
            top: 10px;
        }
        .head6 {
            background: white;
            border-radius: 50px;
            left: 0;
            right: 0;
            margin:  0 auto;
            position: absolute;
            width: 80px;
            height: 80px;
            top: 30px;
        }
        .head__eye6 {
            background: gray;
            border-radius: 50%;
            width: 4px;
            height: 4px;
            position: absolute;
            top: 12px;
        
        }
        .head__eye--left6 {
            left: 30px;
        }
        .head__eye--right6 {
            right: 30px;
        }
        .ground-3 {
            width: 220px;
            height: 40px;
            border-radius: 30px 30px 0 0;
            top: 0px;
            position: absolute;
            background: #51af5e;
        }
        .ground-5 {
            width: 220px;
            height: 40px;
            border-radius: 30px 30px 0 0;
            top: 0px;
            position: absolute;
            background: #51af5e;
        }
        .ground-7 {
            width: 150px;
            height: 40px;
            border-radius: 30px 30px 0 0;
            top: 0px;
            position: absolute;
            background: #51af5e;
        }
        .zigzag-3 {
            position: absolute;
            background: linear-gradient(
            135deg
            , #51af5e 25%, transparent 25%) -50px 0, linear-gradient(
            -135deg
            , #51af5e 25%, transparent 25%) -50px 0, linear-gradient(
            45deg
            , chocolate 25%, transparent 25%), linear-gradient(
            -45deg
            , transparent 25%, #a54a38 25%);
            background-size: 33px 30px;
            height: 30px;
            width: 100%;
            top: 29px   
        }
        .zigzag-5 {
            position: absolute;
            background: linear-gradient(
            135deg
            , #51af5e 25%, transparent 25%) -50px 0, linear-gradient(
            -135deg
            , #51af5e 25%, transparent 25%) -50px 0, linear-gradient(
            45deg
            , chocolate 25%, transparent 25%), linear-gradient(
            -45deg
            , transparent 25%, #a54a38 25%);
            background-size: 33px 30px;
            height: 30px;
            width: 100%;
            top: 29px   
        }
        .zigzag-7 {
            position: absolute;
            background: linear-gradient(
            135deg
            , #51af5e 25%, transparent 25%) -50px 0, linear-gradient(
            -135deg
            , #51af5e 25%, transparent 25%) -50px 0, linear-gradient(
            45deg
            , chocolate 25%, transparent 25%), linear-gradient(
            -45deg
            , transparent 25%, #a54a38 25%);
            background-size: 33px 30px;
            height: 30px;
            width: 100%;
            top: 29px   
        }
    </style>
</head>
<body>
    <div class="phone">
        <div class="layer-1">
            <div>
                <div class="left-ear--outer"></div>
                <div class="left-ear--inner"></div>
                <div class="right-ear--outer"></div>
                <div class="right-ear--inner"></div>
                <div class="head">
                    <div class="head__eye head__eye--left"></div>
                    <div class="head__eye head__eye--right"></div>
                </div>
            </div>
        </div>
        <div class="layer-2">
            <div>
                <div class="left-ear--outer2"></div>
                <div class="left-ear--inner2"></div>
                <div class="right-ear--outer2"></div>
                <div class="right-ear--inner2"></div>
                <div class="head2">
                    <div class="head__eye2 head__eye--left2"></div>
                    <div class="head__eye2 head__eye--right2"></div>
                </div>
            </div>
        </div>
        <div class="layer-3">
            <div>
               <div class="ground-3"></div>
               <div class="zigzag-3"></div>
            </div>

        </div>
        <div class="layer-4">
            <div>
                <div class="left-ear--outer4"></div>
                <div class="left-ear--inner4"></div>
                <div class="right-ear--outer4"></div>
                <div class="right-ear--inner4"></div>
                <div class="head4">
                    <div class="head__eye4 head__eye--left4"></div>
                    <div class="head__eye4 head__eye--right4"></div>
                </div>
            </div>
        </div>
        <div class="layer-5">
            <div>
                <div class="ground-5"></div>
                <div class="zigzag-5"></div>
             </div>
        </div>
        <div class="layer-6">
            <div>
                <div class="left-ear--outer6"></div>
                <div class="left-ear--inner6"></div>
                <div class="right-ear--outer6"></div>
                <div class="right-ear--inner6"></div>
                <div class="head6">
                    <div class="head__eye4 head__eye--left6"></div>
                    <div class="head__eye4 head__eye--right6"></div>
                </div>
            </div>
        </div>
        <div class="layer-7">
            <div>
                <div class="ground-7"></div>
                <div class="zigzag-7"></div>
             </div>
        </div>
        <div class="layer-8"></div>
        <div class="layer-9"></div>
        <div class="layer-10"></div>
    </div>
</body>
</html>



Tengo mucho por mejorar pero quiero mostrar mi avance

.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <main>
        <div class="phone">
            <div class="layer-1 conejo">
                <div class="left-ear--outer ear--outer"></div>
                <div class="left-ear--inner ear--inner"></div>
                <div class="right-ear--outer ear--outer"></div>
                <div class="right-ear--inner ear--inner"></div>
                <div class="head">
                    <div class="head__eye head__eye--left"></div>
                    <div class="head__eye head__eye--right"></div>
                </div>
            </div>
            <div class="layer-2 conejo">
                <div class="left-ear--outer ear--outer"></div>
                <div class="left-ear--inner ear--inner"></div>
                <div class="right-ear--outer ear--outer"></div>
                <div class="right-ear--inner ear--inner"></div>
                <div class="head">
                    <div class="head__eye head__eye--left"></div>
                    <div class="head__eye head__eye--right"></div>
                </div>
            </div>
            <div class="layer-3 terreno">
                <div class="cesped">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="layer-4 conejo">
                <div class="left-ear--outer ear--outer"></div>
                <div class="left-ear--inner ear--inner"></div>
                <div class="right-ear--outer ear--outer"></div>
                <div class="right-ear--inner ear--inner"></div>
                <div class="head">
                    <div class="head__eye head__eye--left"></div>
                    <div class="head__eye head__eye--right"></div>
                </div>
            </div>
            <div class="layer-5 terreno">
                <div class="cesped">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="layer-6 conejo">
                <div class="left-ear--outer ear--outer"></div>
                <div class="left-ear--inner ear--inner"></div>
                <div class="right-ear--outer ear--outer"></div>
                <div class="right-ear--inner ear--inner"></div>
                <div class="head">
                    <div class="head__eye head__eye--left"></div>
                    <div class="head__eye head__eye--right"></div>
                </div>
            </div>
            <div class="layer-7 terreno">
                <div class="cesped">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="layer-8 ">
                <div class="cesped-central">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="layer-9">
                <div class="nube nube-left">
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="layer-10">
                <div class="nube nube-right">
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
    </main>
</body>
</html>

CSS

/*
    1. Posicionamiento
    2. Modelo de caja
    3. Tipografia
    4. Visuales
    5. Otros
*/

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");

html{
    font-size: 62.2%;
    font-family: "Roboto", sans-serif;
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    width: 100%;
    height: 100vh;
    display: grid;
    place-content: center;
    font-size: 1.5rem;
}
body{
    background: gray;
}
/* REUTILIZACION GENERACION DE CONEJO */
.conejo{
    width: 80px;
}
.ear--outer{
    position: absolute;
    width: 20px;
    height: 50px;
    border-radius: 90%;
    background: white;
}
.ear--inner{
    position: absolute;
    width: 10px;
    height: 40px;
    border-radius: 90%;
    background: pink;
}
.left-ear--outer{    
    left: 10px;
}
.left-ear--inner{    
    top: 8px;
    left: 15px;

}
.right-ear--outer{
    right: 10px;
}
.right-ear--inner{
    top: 8px;
    right: 15px;
}
.head{
    position: absolute;
    width: 70px;
    height: 60px;
    border-radius: 55%;
    background: white;
    left: 5px;
    top: 30px;

}
.head__eye{
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 3px solid black;
    background: white;
    
}
.head__eye--left{
    left: 18px;
    top: 20px;
}
.head__eye--right{
    left: 40px;
    top: 10px;
}
/* REUTILIZACION GENERACION DE TERRENO */
.terreno{
    bottom: 0;
    border: 1px solid black;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    overflow: hidden;    
    background: #a52a2a;
}
/* REUTILIZACION GENERACION DE CESPED */
.cesped{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 55px;
    
}
.cesped div{
    width: 100%;
    height: 100%;
    background: linear-gradient(-135deg, #008000 25%, transparent 25%) -15px 0,
    linear-gradient(135deg, #008000 25%, transparent 25%) -15px 0;
}
/* .cesped div:nth-child(2n+1){
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, #008000 25%,#a52a2a 25%);
} */
/* FORMA DEL PHONE */
.phone{
    width: 300px;
    height: 600px;
    position: relative;
    border: 8px solid black;
    border-radius: 40px;
    /* background: #CCEEFF; */
    background: linear-gradient(100deg, #405DE6, #5B51D8, #833AB4, #C13584, #E1306C, #FD1D1D, #F56040, #F77737, #FCAF45, #FFDC80);
    box-shadow: 0 19px 38px rgb(255, 255, 255, 0.4),0 15px 12px rgb(255, 255, 255, 0.4);
}
/* POSICIONAMIENTO DE ELEMENTOS */
.layer-1,.layer-2,.layer-3,.layer-4,.layer-5,.layer-6,.layer-7,.layer-8,.layer-9,.layer-10{
    position: absolute;
}
.layer-1{
    height: 470px;
    bottom: 0;
    right: 55px;
    z-index: 2;
}
.layer-2{
    height: 470px;
    bottom: 0;
    left: 55px;
    z-index: 2;
}
.layer-3{
    width: 220px;
    height: 400px;
    margin: 0 auto;
    left: 0;
    right: 0;    
    z-index: 4;
}
.layer-4{
    height: 370px;
    bottom: 0;
    left: 35px;
    z-index: 6;
}
.layer-5{
    width: 150px;
    height: 300px;
    left: 0;  
    border-bottom-left-radius: 30px;
    z-index: 8;
}
.layer-6{
    height: 270px;
    bottom: 0;
    right: 35px;
    z-index: 10;
}
.layer-7{
    width: 150px;
    height: 200px;
    right: 0; 
    border-bottom-right-radius: 30px;
    z-index: 12;
}
.layer-8{
    width: 284px;
    height: 100px;
    bottom: 0;
    z-index: 14;
}
.layer-9{
    bottom: 0;
    z-index: 16;
}
.layer-10{
    right: 0;
    bottom: 0;
    z-index: 16;
}

/* GENERACION DE CESPED CENTRAL */
.cesped-central{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}
.cesped-central div:nth-child(1){
    width: 70px;
    height: 70px;
    position: absolute;
    background: #008000;
    border-radius: 50%;
    bottom: 0;
    left: 50px;
}
.cesped-central div:nth-child(2){
    width: 100px;
    height: 100px;
    position: absolute;
    background: #008000;
    border-radius: 50%;
    bottom: 0;
    left: 90px;
}
.cesped-central div:nth-child(3){
    width: 70px;
    height: 70px;
    position: absolute;
    background: #008000;
    border-radius: 50%;
    bottom: 0;
    right: 50px;
}
.cesped-central div:nth-child(4){
    width: 284px;
    height: 30px;
    position: absolute;
    background: #008000;
    bottom: 0;
}

/* GENERACION DE NUBES */
.nube{
    width: 100px;
    height: 80px;    
    position: relative;
    overflow: hidden;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}
.nube div:nth-child(1){
    position: absolute;
    width: 70px;
    height: 60px;
    border-radius: 50%;
    background: #CCEEFF;
}
.nube div:nth-child(2){
    position: absolute;
    width: 100%;
    height: 55px;
    border-radius: 40px;
    background: #CCEEFF;
    bottom: 0;
}
/* UBICACION DE NUBES */
.nube-left div:nth-child(1){
    left: 4px;
}
.nube-right div:nth-child(1){
    right: 0;
}

Bueno, yo quer铆a que de cada hoyo saliera un topo, pero parece mas un bot贸n
.

.
HTML

<body>
  <main class="phone">
    Animationland
    <div class="row">
      <div class="hole">
        <div></div>
      </div>
      <div class="hole">
        <div></div>
      </div>
      <div class="hole">
        <div></div>
      </div>
    </div>
    <div class="row">
      <div class="hole">
        <div></div>
      </div>
      <div class="hole">
        <div></div>
      </div>
      <div class="hole">
        <div></div>
      </div>
    </div>
    <div class="row">
      <div class="hole">
        <div></div>
      </div>
      <div class="hole">
        <div></div>
      </div>
      <div class="hole">
        <div></div>
      </div>
    </div>
    <div class="row">
      <div class="hole">
        <div></div>
      </div>
      <div class="hole">
        <div></div>
      </div>
      <div class="hole">
        <div></div>
      </div>
    </div>
  </main>
</body>

CSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  width: 100%;
  height: 600px;
}
.phone{
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  position: relative;
  left: calc(50% - 205px);
  top: calc(50% - 225px);
  width: 410px;
  height: 450px;
  border: 3px solid black;
  border-radius: 25px;
  box-shadow: 0 10px 15px rgba(0,0,0,0.8);
  text-align: center;
  font-size: 22px;
}
.row{
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 90%;
  height: 60px;
  box-shadow: 0 17px 20px rgba(0,0,0,0.5);
  border-radius: 15px;
}
.hole{
  position: relative;
  width: 65px;
  height: 65px;
  border-radius: 30px;
  transform: rotateX(250deg);
  box-shadow: inset 1px 1px 10px;
}
.hole div{
  position:absolute;
  left: 5%;
  width: 58.5px;
  height: 117px;
  background-color: rgb(52, 152, 219);
  border-radius: 30px;
  box-shadow: inset 5px -7px 20px rgba(255, 255, 255, 0.8);
}

Reto cumplido:)

As铆 va quedando mi maquetaci贸n.

Ha costado, pero ah铆 vamos![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202023-09-28%20152542-e475317a-6f43-4a09-a15f-0e427c869aca.jpg)

Las Dev Tools de Internet explorer son muy buenas para debuggear el contexto de apilamiento.
.
.

So far

Aqu铆 dejo el m铆o

gg

Ejemplo 1.-

Para los ojos del conejo, en CSS, solo us茅 el tama帽o del border para darle el tama帽o sin width ni height.

Ejemplo 2.-

Ah铆 vamos gente 鉁岋笍馃惏

Listisimo el pollo 鉂わ笍

Hola le agregue unos assets para darle un estilo mas retro.

En vez de .left-ear鈥搃nner .left-ear鈥搊uter y poner dise帽o a cada uno se puede hacer solo con border white de este modo:

      .ear-l {
        position: relative;
        top: -28px;
        height: 60px;
        width: 20px;
        border: 6px solid #fdfdfd;
        border-radius: 44%;
        background: #f2b7e6;
        transform: rotate(-8deg);
        z-index: -2;
      }
      .ear-r {
        position: relative;
        top: -28px;
        height: 60px;
        width: 20px;
        border: 6px solid #fdfdfd;
        border-radius: 44%;
        background: #f2b7e6;
        transform: rotate(8deg);
        z-index: -2;
      }

As铆 va mi avance

Por ahora tengo esto. 驴Alguien me podr铆a decir como hacer las nubes o arbustos que est谩n debajo en donde me quedaron los cuadrados verdes y blanco? Es lo 煤nico que no me sale.

Reto completado, yo decidi hacer mi juego con fantasmas

Les comparto lo que llevo hasta ahora.

![](

Mi dise帽o hasta el momento

Me parece que el ejercicio est谩 bueno pero siento que no tiene una buena explicaci贸n. Va muy r谩pido para mi, y aqui deber铆a explicar c贸mo hizo el ejercicio. Continuar no creo que est茅 bien cuando no explic贸 como lleg贸 a lo que hizo.

![](
Aqu铆 va el avance, aprendiendo鈥

ya termine la parte anterior鈥 creo que debo redondear los bordes, ya que layer-9 y layer-10 sobresalen del cuerpo del tel茅fono鈥

As铆 va quedando el mio, toma inspiracion en esos juegos de pegarle al topo y por eso el aspecto de el entorno

hasta el momento me a funcionado bien

As铆 me qued贸 mi maquetaci贸n!!
.
.
.

Mi humilde aporte, quise hacer algo mejor, pero creo que me falta resto por aprender

Hice unas cabritas bravas, me demore pero me gusto hacerlo, una locura dibujar en Css.

En esta clase me quise adelantar a la jugada y quise ver si podia llegar al resultado final de la maquetacion, no me quedo igualita pero creo que para ser mi primera vez dibujando en css quedo bastante bien jajaj.

asi me quedo despues de probar muchos estilos
despues le agrego nubes en la parte de atras 馃槃

Despues de un gran esfuerzo haciendo los gatos y los hongos este es mi resultado hasta el momento.

https://codepen.io/camisilvita/pen/rNdbOwd

![](

As铆 va el m铆o !

Bueno, aqu铆 va mi aporte, jugando un poquito con los patrones de background

De esta forma realice los arbustos.

<code> 
html 
 <div class="layer-8">
                <div class="plant__green-1 plant__green plant"></div>
                <div class="plant__green-2 plant__green plant"></div>
                <div class="plant__green-3 plant__green plant"></div>
                <div class="plant__green-4 plant__green plant"></div>
                <div class="plant__white-1 plant__white plant"></div>
                <div class="plant__white-2 plant__white plant"></div>
                <div class="plant__white-3 plant__white plant"></div>
                <div class="plant__white-4 plant__white plant"></div>
                <div class="plant__white-5 plant__white plant"></div>
                <div class="plant__white-6 plant__white plant"></div>
            </div>
css
 .layer-8 .plant{
                position: absolute;
                width: 80px;
                height: 80px;
                border-radius: 50%;
            }
            .layer-8 .plant__green{
                background-color: var(--light--green);
            }
            .layer-8 .plant__white{
                background-color: whitesmoke;
            }
            .layer-8 .plant__green-1{
                left: 110px;
            }
            .layer-8 .plant__green-2{
                left: 45px;
                top: 35px;
            }
            .layer-8 .plant__green-3{
                right: 45px;
                top: 25px;
            }
            .layer-8 .plant__green-4{
                left: 100px;
                bottom: 0;
                border-radius: 0;
                width: 100px;
            }
            .layer-8 .plant__white-1{
                top: 15;
            }
            .layer-8 .plant__white-2{
                bottom: 0;
                left: 61;
                width: 60px;
                height: 60px;
                border-radius: 50% 50% 50% 0;
            }
            .layer-8 .plant__white-3{
                bottom: 0;
                border-radius: 0 50% 0 0;
                height: 70px;
                width: 70px;
            }
            .layer-8 .plant__white-4{
                top: 20;
                right: 0;
            }
            .layer-8 .plant__white-5{
                right: 61;
                bottom: 0;
                width: 60px;
                height: 60px;
                border-radius: 50% 50% 0 50%;
            }
            .layer-8 .plant__white-6{
                bottom: 0;
                right: 0;
                height: 70px;
                width: 70px;
                border-radius: 50% 8px 0 0;

![](

Aqu铆 les dejo el c贸digo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            height: 100vh;
            width: 100vw;
            display: grid;
            place-items: center;
        }
        .phone{
            width: 300px;
            height: 600px;
            position: relative;
            border: 8px solid black;
            border-radius: 40px;
            background: #CCEFFF;
            overflow: hidden;
            box-shadow: 0px 19px 38px rgba(0, 0, 0, 0.3), 0px 15px 12px rgba(0, 0, 0, 0.22);
        }
        .layer{
            position: absolute;
        }
        .wall{
            border: 1px solid black;
            border-top-left-radius: 16px;
            border-top-right-radius: 16px;
            background: #bb6d50;
            overflow: hidden;
        }
        .zig-zag{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 100%;
            height: 25px;
            background: linear-gradient(135deg, #66a167 25%, transparent 25%) -17px 0,
            linear-gradient(-135deg, #66a167 25%, transparent 25%) -17px 0,
            linear-gradient(45deg, #66a16700 25%, #a1553c 25%),
            linear-gradient(-45deg, #66a16700 25%, #a1553c 25%);
            background-size: 35px 35px;
        }
        .rabbit{
            /* background: peachpuff; */
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
        }
        .left-ear--outer{
            background: white;
            border-radius: 90%;
            width: 20px;
            height: 50px;
            position: absolute;
            left: 10px;
        }
        .left-ear--inner{
            background: pink;
            border-radius: 90%;
            width: 10px;
            height: 50px;
            position: absolute;
            left: 15px;
            top: 8px;
        }
        .right-ear--outer{
            background: white;
            border-radius: 90%;
            width: 20px;
            height: 50px;
            position: absolute;
            right: 10px;
        }
        .right-ear--inner{
            background: pink;
            border-radius: 90%;
            width: 10px;
            height: 50px;
            position: absolute;
            right: 15px;
            top: 8px;
        }
        .head{
            width: 100%;
            height: 80px;
            border-radius: 50%;
            background: white;
            position: absolute;
            top: 30px;
            left: 0;
            right: 0;
            margin: 0 auto;
        }
        .head__eye{
            background: gray;
            width: 4px;
            height: 4px;
            border-radius: 2px;
            position: absolute;
            top: 12px
        }
        .head__eye--left{
            left: 30px;
        }
        .head__eye--right{
            right: 30px;
        }
        .layer-1{
            z-index: 1;
            height: 450px;
            width: 80px;
            bottom: 0;
            right: 60px;
        }
        .layer-2{
            z-index: 2;
            height: 450px;
            width: 80px;;
            bottom: 0;
            left: 60px;
        }
        .layer-3{
            z-index: 3;
            width: 200px;
            height: 400px;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 0 auto;
        }
        .layer-4{
            z-index: 4;
            height: 330px;
            width: 80px;
            bottom: 0;
            left: 40px;
        }
        .layer-5{
            z-index: 5;
            width: 180px;
            height: 280px;
            bottom: 0;
        }
        .layer-6{
            z-index: 6;
            height: 230px;
            width: 80px;
            bottom: 0;
            right: 40px;
        }
        .layer-7{
            z-index: 7;
            width: 180px;
            height: 180px;
            bottom: 0;
            right: 0;
        }
        .layer-8{
            z-index: 8;
            width: 180px;
            height: 120px;
            /* background: whitesmoke; */
            bottom: 0;
            left: 0;
            right: 0;
            margin: 0 auto;
            overflow: hidden;
        }
        .layer-9{
            z-index: 9;
            width: 100px;
            height: 100px;
            /* background: palevioletred; */
            bottom: 0;
            left: 0;
            overflow: hidden;
        }
        .layer-10{
            z-index: 10;
            width: 100px;
            height: 100px;
            /* background: palevioletred; */
            bottom: 0;
            right: 0;
            overflow: hidden;
        }
        .tree{
            height: 100%;
            width: 75px;
            background: #66a167;
            position: absolute;
            bottom: 0;
            border-top-left-radius: 64px;
            border-top-right-radius: 64px;
            left: 0;
            right: 0;
            margin: 0 auto;
        }
        .tree1{
            height: 100%;
        }
        .tree2{
            height: 70%;
            transform-origin: bottom;
            transform: rotate(-45deg);
            bottom: 10px;
        }
        .tree3{
            height: 70%;
            transform-origin: bottom;
            transform: rotate(45deg);
            bottom: 10px;
        }
        .tree4{
            height: 70%;
            transform-origin: bottom;
            transform: rotate(-90deg);
            bottom: 0px;
        }
        .tree5{
            height: 70%;
            transform-origin: bottom;
            transform: rotate(90deg);
            bottom: 0px;
        }
        .nube{
            background-color: white;
            position: absolute;
            border-top-left-radius: 64px;
            border-top-right-radius: 64px;
        }
        .nube1{
            height: 100%;
            width: 75px;
        }
        .nube2{
            height: 64px;
            width: 64px;
            transform: rotate(45deg);
            left: 35px;
            bottom: 0;
        }
        .nube3{
            height: 100%;
            width: 75px;
            right: 0;
        }
        .nube4{
            height: 64px;
            width: 64px;
            transform: rotate(-45deg);
            left: 0px;
            bottom: 0;
        }

    </style>
</head>
<body>
    <div class="phone">
        <div class="layer rabbit layer-1">
            <div class="left-ear--outer"></div>
            <div class="left-ear--inner"></div>
            <div class="right-ear--outer"></div>
            <div class="right-ear--inner"></div>
            <div class="head">
                <div class="head__eye head__eye--left"></div>
                <div class="head__eye head__eye--right"></div>
            </div>
        </div>
        <div class="layer rabbit layer-2">
            <div class="left-ear--outer"></div>
            <div class="left-ear--inner"></div>
            <div class="right-ear--outer"></div>
            <div class="right-ear--inner"></div>
            <div class="head">
                <div class="head__eye head__eye--left"></div>
                <div class="head__eye head__eye--right"></div>
            </div>
        </div>
        <div class="layer wall layer-3">
            <div class="zig-zag"></div>
        </div>
        <div class="layer rabbit layer-4">
            <div class="left-ear--outer"></div>
            <div class="left-ear--inner"></div>
            <div class="right-ear--outer"></div>
            <div class="right-ear--inner"></div>
            <div class="head">
                <div class="head__eye head__eye--left"></div>
                <div class="head__eye head__eye--right"></div>
            </div>
        </div>
        <div class="layer wall layer-5">
            <div class="zig-zag"></div>
        </div>
        <div class="layer rabbit layer-6">
            <div class="left-ear--outer"></div>
            <div class="left-ear--inner"></div>
            <div class="right-ear--outer"></div>
            <div class="right-ear--inner"></div>
            <div class="head">
                <div class="head__eye head__eye--left"></div>
                <div class="head__eye head__eye--right"></div>
            </div>
        </div>
        <div class="layer wall layer-7">
            <div class="zig-zag"></div>
        </div>
        <div class="layer arbusto layer-8">
            <div class="tree tree1"></div>
            <div class="tree tree2"></div>
            <div class="tree tree3"></div>
            <div class="tree tree4"></div>
            <div class="tree tree5"></div>
        </div>
        <div class="layer layer-9">
            <div class="nube nube1"></div>
            <div class="nube nube2"></div>
        </div>
        <div class="layer layer-10">
            <div class="nube nube3"></div>
            <div class="nube nube4"></div>
        </div>
    </div>
</body>
</html>

Asi quedo el mio 馃槂

No es el mejor pero creo que me sali贸 bien, le quise meter un poco del curso de transiciones

No se por que aparecen esas lineas extra帽as al usar el background para el zigzag.

Me va gustando como va quedando el resultado 馃ぉ

PD: Los conejos no los dise帽茅, los consegu铆 en Flaticon 馃惏

Me cost贸 un poco, pero lo logr茅.
Tengo que estudiar m谩s lo de los patrones, porque no entiendo muy bien a煤n lo de los porcentajes del linear gradient

Reto鈥

Me ha gustado mucho hacer este dibujo :3

![](file:///Users/dparraabad/Desktop/Captura%20de%20Pantalla%202021-06-30%20a%20la(s)%209.01.36%20p.%C2%A0m鈥ng)

Oj铆metro
Coloquial
Palabra que se utiliza en la locuci贸n adverbial a oj铆metro, que significa 鈥榙e manera aproximada, sin realizar ning煤n c谩lculo ni medici贸n exactos鈥.

S煤per!!, as铆 vamos

Les recomiendo esto. Use 3 etiquetas para hacer la cabeza, orejas y ojos del conejo. Dos etiquetas para cada parte interna de las orejas del conejo y le di un box-shadow de color blanco para que simulara el exterior de la oreja, para otra etiqueta la use para la cabeza, con los pseudoelementos before y after realice los ojos.

C贸digo HTML:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animationland</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="phone">
    <div class="layer layer-1">
      <div class="ear ear--left"></div>
      <div class="ear ear--right"></div>
      <div class="head"></div>
    </div>
    <div class="layer layer-2">
      <div class="ear ear--left"></div>
      <div class="ear ear--right"></div>
      <div class="head"></div>
    </div>
    <div class="layer layer-3"></div>
    <div class="layer layer-4">
      <div class="ear ear--left"></div>
      <div class="ear ear--right"></div>
      <div class="head"></div>
    </div>
    <div class="layer layer-5"></div>
    <div class="layer layer-6">
      <div class="ear ear--left"></div>
      <div class="ear ear--right"></div>
      <div class="head"></div>
    </div>
    <div class="layer layer-7"></div>
    <div class="layer layer-8"></div>
    <div class="layer layer-9"></div>
    <div class="layer layer-10"></div>
  </div>
</body>

</html>

Codigo CSS:

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
  background: aliceblue;
}

.phone {
  width: 300px;
  height: 600px;
  border: 8px solid #000;
  border-radius: 40px;
  position: relative;

  background-color: #CCEFFF;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5), 0 0 30px 5px rgba(0, 0, 0, .3);
  overflow: hidden;
}

.layer {
  position: absolute;
}

.layer-1 {
  width: 80px;
  height: 450px;
  right: 60px;
  bottom: 0;
  z-index: 1;
}

.layer-2 {
  width: 80px;
  height: 450px;
  left: 60px;
  bottom: 0;
  z-index: 2;
}

.layer-3 {
  width: 220px;
  height: 400px;
  border-radius: 20px 20px 0;
  margin: 0 auto;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;

  background: brown;
}

.layer-4 {
  width: 80px;
  height: 350px;
  bottom: 0;
  left: 20px;
  z-index: 4;
}

.layer-5 {
  width: 200px;
  height: 300px;
  border-radius: 0 20px 0;
  bottom: 0;
  left: 0;
  z-index: 5;

  background-color: chocolate;
}

.layer-6 {
  width: 80px;
  height: 250px;
  right: 29px;
  bottom: 0;
  z-index: 6;
}

.layer-7 {
  width: 150px;
  height: 200px;
  border-radius: 20px 0 0;
  right: 0;
  bottom: 0;
  z-index: 7;
  
  background-color: burlywood;
}

.layer-8 {
  width: 200px;
  height: 110px;
  margin: 0 auto;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 8;

  background-color: yellowgreen;
}

.layer-9 {
  width: 120px;
  height: 90px;
  left: 0;
  bottom: 0;
  z-index: 9;

  background-color: aliceblue;
}

.layer-10 {
  width: 120px;
  height: 90px;
  right: 0;
  bottom: 0;
  z-index: 10;

  background-color: aliceblue;  
}

.ear {
  width: 10px;
  height: 50px;
  border-radius: 90%;
  position: absolute;
  top: 10px;

  background: pink;
  box-shadow: 0 -5px 0 5px #FFF;
}

.ear--left {
  left: 15px;
}

.ear--right {
  right: 15px;
}

.head {
  width: 100%;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  top: 30px;

  background-color: #FFF;
}

.head::before, 
.head::after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  position: absolute;
  top: 15px;

  background-color: gray;
}

.head::before {
  right: 30px;
}

.head::after {
  left: 30px;
}

Utilizando pseudo-elementos 馃槃

Les comparto mi avance.

As铆 va mi proyecto:

Y as铆 vamos鈥

.
HTML

<body>
        <div class="phone">
            <!-- bunny 1 -->
            <div class="layer-1">
                <div class="left-ear--outer"></div>
                <div class="left-ear--inner"></div>
                <div class="right-ear--outer"></div>
                <div class="right-ear--inner"></div>
                <div class="head">
                    <div class="head__eye head__eye--left"></div>
                    <div class="head__eye head__eye--right"></div>
                </div>
            </div>
            <!-- bunny 2 -->
            <div class="layer-2">
                <div class="left-ear--outer"></div>
                <div class="left-ear--inner"></div>
                <div class="right-ear--outer"></div>
                <div class="right-ear--inner"></div>
                <div class="head">
                    <div class="head__eye head__eye--left"></div>
                    <div class="head__eye head__eye--right"></div>
                </div>
            </div>
            <!-- wall 1 -->
            <div class="layer-3 wall">
                <div class="wall-surface"></div>
                <div class="border-patter"></div>
            </div>
            <!-- bunny 3 -->
            <div class="layer-4">
                <div class="left-ear--outer"></div>
                <div class="left-ear--inner"></div>
                <div class="right-ear--outer"></div>
                <div class="right-ear--inner"></div>
                <div class="head">
                    <div class="head__eye head__eye--left"></div>
                    <div class="head__eye head__eye--right"></div>
                </div>
            </div>
            <!-- wall 2 -->
            <div class="layer-5 wall">
                <div class="wall-surface"></div>
                <div class="border-patter"></div>
            </div>
            <!-- bunny 4 -->
            <div class="layer-6">
                <div class="left-ear--outer"></div>
                <div class="left-ear--inner"></div>
                <div class="right-ear--outer"></div>
                <div class="right-ear--inner"></div>
                <div class="head">
                    <div class="head__eye head__eye--left"></div>
                    <div class="head__eye head__eye--right"></div>
                </div>
            </div>
            <!-- wall 3 -->
            <div class="layer-7 wall">
                <div class="wall-surface"></div>
                <div class="border-patter"></div>
            </div>
            <!-- lawn 1 -->
            <div class="layer-8">
                <div class="lawn-center lawn-center--1"></div>
                <div class="lawn-center lawn-center--2"></div>
                <div class="lawn-center lawn-center--3"></div>
                <div class="lawn-center lawn-center--base"></div>
            </div>
            <!-- lawn 2 -->
            <div class="layer-9">
                <div class="lawn-rl lawn-rl--top-left"></div>
                <div class="lawn-rl lawn-rl--botton-right"></div>
                <div class="lawn-rl lawn-rl--base-left"></div>
            </div>
            <!-- lawn 3 -->
            <div class="layer-10">
                <div class="layer-9">
                    <div class="lawn-rl lawn-rl--top-right"></div>
                    <div class="lawn-rl lawn-rl--botton-left"></div>
                    <div class="lawn-rl lawn-rl--base-right"></div>
                </div>
            </div>
        </div>
    </body>

.
CSS

        <style>
            body {
                margin: 0;
                width: 100%;
                height: 100vh;
                display: grid;
                place-content: center;
            }
            .phone {
                position: relative;
                border: 8px solid black;
                border-radius: 40px;
                width: 300px;
                height: 600px;
                background-color: #CCEFFF;
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.2);
            }
            .layer-1 {
                position: absolute;
                z-index: 1;
                width: 80px;
                height: 450px;
                bottom: 0;
                right: 60px;
            }
            .layer-2 {
                position: absolute;
                z-index: 2;
                width: 80px;
                height: 450px;
                bottom: 0;
                left: 60px;
            }
            .layer-3 {
                position: absolute;
                z-index: 3;
                width: 220px;
                height: 400px;
                background-color: wheat;
                left: 0;
                right: 0;
                margin: 0 auto;
                bottom: 0;
            }
            .layer-4 {
                position: absolute;
                z-index: 4;
                height: 350px;
                bottom: 0;
                left: 15px;
                width: 80px;
            }
            .layer-5 {
                position: absolute;
                z-index: 5;
                background: papayawhip;
                width: 200px;
                height: 300px;
                bottom: 0;
            }
            .layer-6 {
                position: absolute;
                z-index: 6;
                width: 80px;
                height: 250px;
                bottom: 0;
                right: 30px;
            }
            .layer-7 {
                position: absolute;
                z-index: 7;
                background: pink;
                width: 150px;
                height: 200px;
                bottom: 0;
                right: 0;
            }
            .layer-8 {
                position: absolute;
                z-index: 8;
                width: 200px;
                height: 120px;
                bottom: 0;
                left: 0;
                margin: 0 auto;
                right: 0;
            }
            .layer-9 {
                position: absolute;
                z-index: 9;
                width: 120px;
                height: 100px;
                bottom: 0;
            }
            .layer-10 {
                position: absolute;
                z-index: 10;
                width: 120px;
                height: 100px;
                bottom: 0;
                right: 0;
            }
            .left-ear--outer {
                background-color: white;
                border-radius: 90%;
                width: 20px;
                height: 50px;
                position: absolute;
                left: 10px;
            }
            .left-ear--inner {
                background-color: pink;
                border-radius: 90%;
                width: 10px;
                height: 50px;
                position: absolute;
                left: 15px;
                top: 8px;
            }
            .right-ear--outer {
                background-color: white;
                border-radius: 90%;
                width: 20px;
                height: 50px;
                position: absolute;
                right: 10px;
            }
            .right-ear--inner {
                background-color: pink;
                border-radius: 90%;
                width: 10px;
                height: 50px;
                position: absolute;
                right: 15px;
                top: 8px;
            }
            .head {
                background-color: white;
                border-radius: 50%;
                width: 100%;
                height: 80px;
                position: absolute;
                top: 30px;
                left: 0;
                right: 0;
                margin: 0 auto;
            }
            .head__eye {
                background-color: gray;
                border-radius: 50%;
                width: 6px;
                height: 6px;
                position: absolute;
                top: 12px;
            }
            .head__eye--left {
                left: 25px;
            }
            .head__eye--right {
                right: 25px;
            }
            .wall {
                background-color: #ac4459;
                border-radius: 20px;
                box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3), 0px 5px 15px rgba(0, 0, 0, 0.3);
                border-bottom-left-radius: 30px;
                border-bottom-right-radius: 30px;
            }

            .wall-surface {
                background-color: #539e53;
                width: 100%;
                height: 25px;
                position: absolute;
                border-top-left-radius: inherit;
                border-top-right-radius: inherit;
            }
            .border-patter {
                width: 100%;
                height: 30px;
                position: absolute;
                top: 25px;
                /* Patr贸n del borde superior */
                background-color: #ac4459;
                opacity: 0.8;
                background-image:  linear-gradient(135deg, #531320 25%, transparent 25%), linear-gradient(225deg, #531320 25%, transparent 25%), linear-gradient(45deg, #531320 25%, transparent 25%), linear-gradient(315deg, #531320 25%, #ac4459 25%);
                background-position:  14px 0, 14px 0, 0 0, 0 0;
                background-size: 14px 14px;
                background-repeat: repeat;
            }
            .lawn-center {
                background-color: #539e53;
                position: absolute;
            }
            .lawn-center--1 {
                width: 80px;
                height: 100px;
                border-radius: 80%;
                left: 0;
                right: 0;
                margin: 0 auto;
            }
            .lawn-center--2 {
                width: 100px;
                height: 90px;
                border-radius: 50%;
                top: 30px;
                right: 0;
            }
            .lawn-center--3 {
                width: 100px;
                height: 90px;
                border-radius: 50%;
                top: 30px;
                left: 0;
            }
            .lawn-center--base {
                width: 100%;
                height: 40%;
                bottom: 0;
            }
            .lawn-rl {
                background-color: white;
                position: absolute;
            }
            .lawn-rl--top-left {
                width: 80px;
                height: 90px;
                border-radius: 50%;
                top: 0;
                left: 0;
            }
            .lawn-rl--botton-right {
                width: 80px;
                height: 80px;
                border-radius: 50%;
                right: 0;
                bottom: 0;
            }
            .lawn-rl--base-left {
                width: 70%;
                height: 50%;
                border-bottom-left-radius: 30px;
                left: 0;
                bottom: 0;
            }

            .lawn-rl--top-right {
                width: 80px;
                height: 90px;
                border-radius: 50%;
                top: 0;
                right: 0;
            }
            .lawn-rl--botton-left {
                width: 80px;
                height: 80px;
                border-radius: 50%;
                left: 0;
                bottom: 0;
            }
            .lawn-rl--base-right {
                width: 70%;
                height: 50%;
                border-bottom-right-radius: 30px;
                right: 0;
                bottom: 0;
            }
        </style>