Pingüino

Abrir en el editor Publica tu código

Recomendado

12 December 2025

Ubicación de la hermana de FNAF

10 February 2025

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./styles.css" />
    <title>Penguin</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>

CSS

:root {
    --penguin-face: white;
    --penguin-picorna: orange;
    --penguin-skin: gray;
  }
  
  body {
    background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }
  
  .left-mountain {
    width: 300px;
    height: 300px;
    background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
    position: absolute;
    transform: skew(0deg, 44deg);
    z-index: 2;
    margin-top: 100px;
  }
  
  .back-mountain {
    width: 300px;
    height: 300px;
    background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
    position: absolute;
    z-index: 1;
    transform: rotate(45deg);
    left: 110px;
    top: 225px;
  }
  
  .sun {
    width: 200px;
    height: 200px;
    background-color: yellow;
    position: absolute;
    border-radius: 50%;
    top: -75px;
    right: -75px;
  }
  
  .penguin {
    width: 300px;
    height: 300px;
    margin: auto;
    margin-top: 75px;
    z-index: 4;
    position: relative;
    transition: transform 1s ease-in-out 0ms;
  }
  
  .penguin * {
    position: absolute;
  }
  
  .penguin:active {
    transform: scale(1.5);
    cursor: not-allowed;
  }
  
  .penguin-head {
    width: 50%;
    height: 45%;
    background: linear-gradient(
      45deg,
      var(--penguin-skin),
      rgb(239, 240, 228)
    );
    border-radius: 70% 70% 65% 65%;
    top: 10%;
    left: 25%;
    z-index: 1;
  }
  
  .face {
    width: 60%;
    height: 70%;
    background-color: var(--penguin-face);
    border-radius: 70% 70% 60% 60%;
    top: 15%;
  }
  
  .face.left {
    left: 5%;
  }
  
  .face.right {
    right: 5%;
  }
  
  .chin {
    width: 90%;
    height: 70%;
    background-color: var(--penguin-face);
    top: 25%;
    left: 5%;
    border-radius: 70% 70% 100% 100%;
  }
  
  .eye {
    width: 15%;
    height: 17%;
    background-color: black;
    top: 45%;
    border-radius: 50%;
  }
  
  .eye.left {
    left: 25%;
  }
  
  .eye.right {
    right: 25%;
  }
  
  .eye-lid {
    width: 150%;
    height: 100%;
    background-color: var(--penguin-face);
    top: 25%;
    left: -23%;
    border-radius: 50%;
  }
  
  .blush {
    width: 15%;
    height: 10%;
    background-color: pink;
    top: 65%;
    border-radius: 50%;
  }
  
  .blush.left {
    left: 15%;
  }
  
  .blush.right {
    right: 15%;
  }
  
  .beak {
    height: 10%;
    background-color: var(--penguin-picorna);
    border-radius: 50%;
  }
  
  .beak.top {
    width: 20%;
    top: 60%;
    left: 40%;
  }
  
  .beak.bottom {
    width: 16%;
    top: 65%;
    left: 42%;
  }
  
  .shirt {
    font: bold 25px Helvetica, sans-serif;
    top: 165px;
    left: 127.5px;
    z-index: 1;
    color: #6a6969;
  }
  
  .shirt div {
    font-weight:  initial;
    top: 22.5px;
    left: 12px;
  }
  
  .penguin-body {
    width: 53%;
    height: 45%;
    background: linear-gradient(
      45deg,
      rgb(134, 133, 133) 0%,
      rgb(234, 231, 231) 25%,
      white 67%
    );
    border-radius: 80% 80% 100% 100%;
    top: 40%;
    left: 23.5%;
  }
  
  .penguin-body::before {
    content: "";
    position: absolute;
    width: 50%;
    height: 45%;
    background-color: var(--penguin-skin);
    top: 10%;
    left: 25%;
    border-radius: 0% 0% 100% 100%;
    opacity: 70%;
  }
  
  .arm {
    width: 30%;
    height: 60%;
    background: linear-gradient(
      90deg,
      var(--penguin-skin),
      rgb(209, 210, 199)
    );
    border-radius: 30% 30% 30% 120%;
    z-index: -1;
  }
  
  .arm.left {
    top: 35%;
    left: 5%;
    transform-origin: top left; 
    transform: rotate(130deg) scaleX(-1);
    animation: 3s linear infinite wave;
  }
  
  .arm.right {
    top: 0%;
    right: -5%;
    transform: rotate(-45deg);
  }
  
  @keyframes wave {
    10% {
      transform: rotate(110deg) scaleX(-1);
    }
    20% {
      transform: rotate(130deg) scaleX(-1);
    }
    30% {
      transform: rotate(110deg) scaleX(-1);
    }
    40% {
      transform: rotate(130deg) scaleX(-1);
    }
  }
  
  .foot {
    width:  15%;
    height: 30%;
    background-color: var(--penguin-picorna);
    top: 85%;
    border-radius: 50%;
    z-index: -1;
  }
  
  .foot.left {
    left: 25%;
    transform: rotate(80deg);
  }
  
  .foot.right {
    right: 25%;
    transform: rotate(-80deg);
  }
  
  .ground {
    width: 100vw;
    height: 400px;
    background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
    z-index: 3;
    position: absolute;
    margin-top: -58px;
    height:calc(100vh - 300px);
  }

Pingüino

Recomendado

Ubicación de la hermana de FNAF

Un código de bachir123

Metehan

HTML

CSS

JS

Recomendado

Ubicación de la hermana de FNAF

Un código de bachir123

Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS