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/12
Recursos

Aportes 54

Preguntas 5

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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!

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

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

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

![](

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

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>

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


I think it’s looking great

Asi va por ahora

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);
}

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?

Mi resultado
![](

Reto cumplido:)

Así va quedando mi maquetación.

Demore un poco pero lo logré.

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

Muy buena la clase , aqui les dejo mis conejos

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

mi reto:

Cada día amo más a esta profe !!

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

Mi aporte

![](

Así va mi proyecto. Acabo de hacer los Digletts en CSS. Más adelante va a ir cogiendo más forma. 😃

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…png)

Ojímetro
Coloquial
Palabra que se utiliza en la locución adverbial a ojímetro, que significa ‘de 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>