agrege la luna y mejore el color del tallo

jaenfigueroa · Nov 1, 2022 · 8849b21 · 8849b21
1 parent 4a31e4f
commit 8849b21
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 21 deletions.
diff --git a/index.html b/index.html
@@ -14,6 +14,7 @@
 
   <body>
     <main>
+      <div class="luna"></div>
       <div class="contenedor sombra">
         <div></div>
       </div>
@@ -24,7 +25,7 @@
           <div></div>
           <div></div>
         </div>
-        <div class="contenedor rabo">
+        <div class="contenedor tallo">
           <div></div>
           <div></div>
         </div>

diff --git a/style.css b/style.css
@@ -2,7 +2,10 @@
   --cafe-claro: rgb(113, 73, 63);
   --cafe-oscuro: rgb(67, 42, 36);
   --naranja-claro: rgb(255, 89, 0);
-  --naranja-oscuro: rgb(255, 55, 0);
+  --naranja-oscuro: rgb(255, 47, 0);
+  --amarillo: rgb(249, 255, 165);
+  /* --amarillo: rgb(255, 226, 10); */
+  /* --amarillo: rgb(98, 255, 67); */
 }
 
 * {
@@ -16,11 +19,11 @@ html {
 }
 /*/////////////////////////*/
 body {
-  /* background: linear-gradient(
+  background: linear-gradient(
     rgb(2, 2, 136) 10%,
     rgb(0, 238, 255) 55%,
     rgb(46, 36, 36) 20%
-  ); */
+  );
 
   background: linear-gradient(#082c0c 10%, #abc841 55%, #001400 20%);
 }
@@ -181,10 +184,10 @@ main {
 }
 
 /* /////////////////////////////////////// */
-.rabo {
+.tallo {
   position: absolute;
 }
-.rabo > div:nth-child(1) {
+.tallo > div:nth-child(1) {
   position: absolute;
   display: flex;
   /* background-color: rgba(4, 42, 255, 0.652); */
@@ -196,7 +199,7 @@ main {
   left: 6.2rem;
 }
 
-.rabo > div:nth-child(1) {
+.tallo > div:nth-child(1) {
   position: absolute;
   display: flex;
   background-color: var(--cafe-claro);
@@ -208,7 +211,7 @@ main {
   box-shadow: 0 0.2rem 0.5rem 0.3rem var(--cafe-oscuro) inset;
 }
 
-.rabo > div:nth-child(1):before {
+.tallo > div:nth-child(1):before {
   content: '';
   background-color: var(--cafe-claro);
   width: 2.3rem;
@@ -220,7 +223,7 @@ main {
   border-radius: 35% 25% 0 45%;
   box-shadow: 0 0.2rem 0.5rem 0.3rem var(--cafe-oscuro) inset;
 }
-.rabo > div:nth-child(1):after {
+.tallo > div:nth-child(1):after {
   content: '';
   background-color: var(--cafe-claro);
   width: 3rem;
@@ -231,14 +234,22 @@ main {
   box-shadow: 0 0rem 0.5rem 0.3rem var(--cafe-oscuro) inset;
 }
 
-.rabo > div:nth-child(2) {
+.tallo > div:nth-child(2) {
   background-color: var(--cafe-claro);
   width: 0.3rem;
   height: 1.8rem;
   position: absolute;
   left: 15.1rem;
   top: 5rem;
   box-shadow: 0rem 0rem 0.4rem 0.9rem var(--cafe-claro);
+  border-radius: 100%;
+}
+
+.tallo > div:nth-child(2):after {
+  content: '';
+  box-shadow: 0 0 15px 15px var(--cafe-oscuro);
+  top: 35px;
+  position: absolute;
 }
 /* ///////////////////////// */
 .cara {
@@ -247,48 +258,46 @@ main {
   /* background-color: rgba(0, 0, 255, 0.296); */
 }
 .ojo-izquierdo {
-  background-color: rgb(0, 255, 26);
+  background-color: var(--amarillo);
   position: absolute;
   width: 6.5rem;
   height: 3.5rem;
   top: 12.8rem;
   left: 17rem;
 
-  border-top: 0rem solid red;
   border-right: 1.5rem solid rgb(17, 0, 255);
   border-bottom: 1rem solid rgb(69, 171, 255);
-  border-left: 0rem solid rgb(34, 255, 0);
+
+  border-right: 1.5rem solid rgb(17, 0, 255);
+  border-bottom: 1rem solid rgb(69, 171, 255);
 
   clip-path: polygon(84% 0, 0 91%, 100% 98%);
   transform: rotate(-10deg);
 }
 
 .ojo-derecho {
-  background-color: rgb(0, 255, 26);
+  background-color: var(--amarillo);
   position: absolute;
   width: 6.5rem;
   height: 3.5rem;
   top: 12.8rem;
   left: 7.5rem;
 
-  border-top: 0rem solid red;
   border-left: 1.5rem solid rgb(0, 4, 255);
   border-bottom: 1rem solid rgb(69, 171, 255);
-  border-right: 0rem solid rgb(34, 255, 0);
 
   clip-path: polygon(5% 0, 100% 90%, 0 98%);
   transform: rotate(10deg);
 }
 
 .nariz {
-  background-color: rgb(0, 255, 26);
+  background-color: var(--amarillo);
   position: absolute;
   width: 5rem;
   height: 3.5rem;
   top: 16.5rem;
   left: 13rem;
 
-  border-top: 0rem solid red;
   border-left: 1.3rem solid rgb(0, 38, 255);
   border-bottom: 0.7rem solid rgb(253, 108, 255);
   border-right: 1.3rem solid rgb(51, 0, 255);
@@ -322,8 +331,8 @@ main {
   width: 5em;
   height: 4em;
   top: 19rem;
-  left: 7rem;
-  border-bottom: 1.7em solid rgb(255, 255, 255);
+  left: 7.1rem;
+  border-bottom: 1.7em solid var(--amarillo);
   border-radius: 0 0 0 100%;
 }
 
@@ -335,7 +344,7 @@ main {
   height: 4em;
   top: 19rem;
   left: 15rem;
-  border-bottom: 1.7em solid rgb(255, 255, 255);
+  border-bottom: 1.7em solid var(--amarillo);
   border-radius: 0 0 100% 0;
 }
 .contenedor-dientes {
@@ -397,6 +406,16 @@ main {
   animation: sombra 1s linear infinite alternate-reverse;
 }
 
+.luna {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  box-shadow: 30px 10px 0 #ffffff;
+
+  position: absolute;
+  top: 10%;
+  right: 15%;
+}
 /* ///////////////////////////////// */
 @keyframes sombra {
   to {