<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>

<div class="antenna">
      <div class="antenna-light"></div>
      <div class="antenna-stick"></div>
    </div>

<div class="head">

</div>

<div class="neck"></div>

<div class="body">

<div class="chest-panel">

</div>

</div>

<div class="arm arm-left">
      <div class="upper-arm"></div>
      <div class="joint"></div>
      <div class="lower-arm"></div>
      <div class="hand"></div>
    </div>

<div class="leg leg-left">
      <div class="upper-leg"></div>
      <div class="knee"></div>
      <div class="lower-leg"></div>
      <div class="foot"></div>
    </div>

</div>

</div>

</body>
</html>

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  min-height: 100vh;

display: flex;
  align-items: center;
  justify-content: center;

overflow: hidden;

font-family: Arial, Helvetica, sans-serif;

background:
    radial-gradient(
      circle at 50% 40%,
      #253654 0%,
      #111a2b 45%,
      #070b12 100%
    );
}

/* =================================
   SCENE
================================= */

.scene {
  position: relative;

width: 420px;
  height: 600px;
}

/* subtle floor glow */

.scene::before {
  content: "";

position: absolute;

width: 320px;
  height: 120px;

left: 50%;
  bottom: 20px;

transform: translateX(-50%);

background:
    radial-gradient(
      ellipse,
      rgba(64, 218, 255, .13),
      transparent 70%
    );
}

/* =================================
   ROBOT
================================= */

.robot {
  position: absolute;

width: 220px;
  height: 430px;

left: 50%;
  top: 65px;

transform: translateX(-50%);

animation:
    robotFloat 3s ease-in-out infinite;

z-index: 5;
}

/* =================================
   ANTENNA
================================= */

.antenna {
  position: absolute;

left: 50%;
  top: -54px;

width: 30px;
  height: 65px;

transform-origin: bottom center;

animation:
    antennaMove 2.2s ease-in-out infinite;
}

.antenna-stick {
  position: absolute;

width: 6px;
  height: 50px;

left: 12px;
  bottom: 0;

border-radius: 5px;

background:
    linear-gradient(
      90deg,
      #59697a,
      #d5e0e7,
      #59697a
    );
}

.antenna-light {
  position: absolute;

left: 5px;
  top: 0;

width: 20px;
  height: 20px;

border-radius: 50%;

background: #5ee7ff;

border:
    3px solid #a8f4ff;

box-shadow:
    0 0 8px #45ddff,
    0 0 20px #45ddff,
    0 0 40px rgba(69, 221, 255, .7);

animation:
    antennaGlow 1.2s ease-in-out infinite;
}

/* =================================
   HEAD
================================= */

.head {
  position: absolute;

left: 50%;
  top: 0;

width: 160px;
  height: 120px;

transform: translateX(-50%);

border-radius:
    38px 38px 30px 30px;

background:
    linear-gradient(
      145deg,
      #e5edf2 0%,
      #9eabb5 52%,
      #6d7a84 100%
    );

border:
    3px solid #56636e;

box-shadow:
    inset 8px 8px 10px rgba(255,255,255,.55),
    inset -8px -8px 12px rgba(35,45,55,.25),
    0 10px 20px rgba(0,0,0,.35);
}

/* forehead shine */

.head::before {
  content: "";

position: absolute;

left: 24px;
  top: 10px;

width: 85px;
  height: 8px;

border-radius: 50%;

background:
    rgba(255,255,255,.35);

filter: blur(3px);
}

/* =================================
   EARS
================================= */

.ear {
  position: absolute;

top: 37px;

width: 20px;
  height: 50px;

background:
    linear-gradient(
      #8998a4,
      #56636e
    );

border:
    3px solid #4a5660;
}

.ear-left {
  left: -18px;

border-radius:
    10px 3px 3px 10px;
}

.ear-right {
  right: -18px;

border-radius:
    3px 10px 10px 3px;
}

/* =================================
   FACE SCREEN
================================= */

.face {
  position: absolute;

left: 17px;
  top: 28px;

width: 120px;
  height: 70px;

border-radius: 22px;

background:
    linear-gradient(
      180deg,
      #172936,
      #08131c
    );

border:
    3px solid #53636e;

box-shadow:
    inset 0 5px 14px rgba(0,0,0,.7),
    0 1px 0 rgba(255,255,255,.3);
}

/* =================================
   EYES
================================= */

.eye {
  position: absolute;

top: 20px;

width: 22px;
  height: 13px;

border-radius: 10px;

background: #6cecff;

box-shadow:
    0 0 7px #5ceaff,
    0 0 15px rgba(92,234,255,.8);

animation:
    blink 4.5s infinite;
}

.eye-left {
  left: 25px;
}

.eye-right {
  right: 25px;
}

/* =================================
   MOUTH
================================= */

.mouth {
  position: absolute;

left: 50%;
  bottom: 10px;

transform: translateX(-50%);

display: flex;
  gap: 4px;
}

.mouth span {
  width: 5px;
  height: 3px;

border-radius: 2px;

background: #53cce3;

box-shadow:
    0 0 4px #53cce3;

animation:
    talk 1.2s ease-in-out infinite;
}

.mouth span:nth-child(2) {
  animation-delay: -.4s;
}

.mouth span:nth-child(3) {
  animation-delay: -.8s;
}

/* =================================
   NECK
================================= */

.neck {
  position: absolute;

left: 50%;
  top: 116px;

width: 50px;
  height: 35px;

transform: translateX(-50%);

background:
    repeating-linear-gradient(
      to bottom,
      #56636d 0px,
      #56636d 6px,
      #8997a1 7px,
      #8997a1 11px
    );

border:
    2px solid #47535c;

z-index: -1;
}

/* =================================
   BODY
================================= */

.body {
  position: absolute;

left: 50%;
  top: 140px;

width: 180px;
  height: 165px;

transform: translateX(-50%);

border-radius:
    35px 35px 50px 50px;

background:
    linear-gradient(
      145deg,
      #dce5eb,
      #8d9ba5 60%,
      #65727c
    );

border:
    3px solid #53606a;

box-shadow:
    inset 9px 8px 12px rgba(255,255,255,.45),
    inset -10px -10px 14px rgba(30,40,50,.22),
    0 14px 25px rgba(0,0,0,.35);
}

/* =================================
   SHOULDERS
================================= */

.shoulder {
  position: absolute;

top: 18px;

width: 28px;
  height: 55px;

background:
    linear-gradient(
      #9aa8b2,
      #64717a
    );
}

.shoulder-left {
  left: -16px;

border-radius:
    16px 5px 5px 16px;
}

.shoulder-right {
  right: -16px;

border-radius:
    5px 16px 16px 5px;
}

/* =================================
   CHEST
================================= */

.chest-panel {
  position: absolute;

width: 110px;
  height: 100px;

left: 50%;
  top: 26px;

transform: translateX(-50%);

border-radius: 18px;

background:
    linear-gradient(
      145deg,
      #263846,
      #111d26
    );

border:
    3px solid #697985;

box-shadow:
    inset 0 6px 14px rgba(0,0,0,.55);
}

/* =================================
   ENERGY CORE
================================= */

.core {
  position: absolute;

left: 50%;
  top: 13px;

width: 55px;
  height: 55px;

transform: translateX(-50%);

border-radius: 50%;

border:
    3px solid #4b6470;

background:
    #102630;

box-shadow:
    inset 0 0 12px #000;
}

.core::before {
  content: "";

position: absolute;

inset: 5px;

border-radius: 50%;

border:
    2px dashed #60e7ff;

animation:
    coreRotate 4s linear infinite;
}

.core-center {
  position: absolute;

width: 22px;
  height: 22px;

left: 50%;
  top: 50%;

transform:
    translate(-50%, -50%);

border-radius: 50%;

background: #8af2ff;

box-shadow:
    0 0 8px #59e6ff,
    0 0 18px #59e6ff,
    0 0 30px rgba(89,230,255,.8);

animation:
    corePulse 1.4s ease-in-out infinite;
}

/* =================================
   STATUS LIGHTS
================================= */

.status {
  position: absolute;

bottom: 10px;
  left: 50%;

transform: translateX(-50%);

display: flex;
  gap: 8px;
}

.status span {
  width: 6px;
  height: 6px;

border-radius: 50%;

background: #64eaff;

box-shadow:
    0 0 5px #64eaff;
}

.status span:nth-child(2) {
  background: #ffcb58;

box-shadow:
    0 0 5px #ffcb58;
}

.status span:nth-child(3) {
  background: #6df19c;

box-shadow:
    0 0 5px #6df19c;
}

/* =================================
   ARMS
================================= */

.arm {
  position: absolute;

top: 165px;

width: 45px;
  height: 170px;

transform-origin:
    center 15px;
}

.arm-left {
  left: -3px;

animation:
    armLeft 2.5s ease-in-out infinite;
}

.arm-right {
  right: -3px;

animation:
    armRight 2.5s ease-in-out infinite;
}

.upper-arm {
  position: absolute;

left: 9px;

width: 27px;
  height: 72px;

border-radius: 15px;

background:
    linear-gradient(
      90deg,
      #65737d,
      #bec8cf,
      #687680
    );

border:
    2px solid #4e5b65;
}

.joint {
  position: absolute;

top: 64px;
  left: 7px;

width: 31px;
  height: 31px;

border-radius: 50%;

background:
    radial-gradient(
      circle,
      #aab6bf 25%,
      #53616b 28%,
      #303d46 65%
    );

border:
    2px solid #4c5963;

z-index: 2;
}

.lower-arm {
  position: absolute;

top: 84px;
  left: 10px;

width: 25px;
  height: 65px;

border-radius: 13px;

background:
    linear-gradient(
      90deg,
      #596872,
      #aebbc4,
      #596872
    );

border:
    2px solid #4b5862;
}

.hand {
  position: absolute;

top: 142px;
  left: 6px;

width: 34px;
  height: 31px;

border-radius:
    12px 12px 16px 16px;

background:
    linear-gradient(
      #aab7c0,
      #64727c
    );

border:
    2px solid #4b5862;
}

/* =================================
   LEGS
================================= */

.leg {
  position: absolute;

top: 294px;

width: 60px;
  height: 155px;
}

.leg-left {
  left: 46px;
}

.leg-right {
  right: 46px;
}

.upper-leg {
  position: absolute;

left: 14px;

width: 32px;
  height: 64px;

border-radius: 12px;

background:
    linear-gradient(
      90deg,
      #63717b,
      #bac5cc,
      #5a6872
    );

border:
    2px solid #4d5962;
}

.knee {
  position: absolute;

top: 56px;
  left: 10px;

width: 40px;
  height: 34px;

border-radius: 13px;

background:
    radial-gradient(
      circle,
      #33434e,
      #798892
    );

border:
    2px solid #4a5861;

z-index: 2;
}

.lower-leg {
  position: absolute;

top: 81px;
  left: 15px;

width: 30px;
  height: 60px;

border-radius: 10px;

background:
    linear-gradient(
      90deg,
      #596771,
      #aebac2,
      #56646e
    );

border:
    2px solid #48555f;
}

.foot {
  position: absolute;

top: 132px;
  left: 8px;

width: 52px;
  height: 25px;

border-radius:
    10px 18px 8px 8px;

background:
    linear-gradient(
      #87959f,
      #4d5b65
    );

border:
    2px solid #44515b;
}

/* =================================
   SHADOW
================================= */

.shadow {
  position: absolute;

left: 50%;
  bottom: 47px;

width: 190px;
  height: 30px;

transform:
    translateX(-50%);

border-radius: 50%;

background:
    rgba(0,0,0,.5);

filter: blur(9px);

animation:
    shadowPulse 3s ease-in-out infinite;
}

/* =================================
   LABEL
================================= */

.label {
  position: absolute;

left: 50%;
  bottom: 0;

transform:
    translateX(-50%);

text-align: center;

color: white;
}

.label strong {
  display: block;

font-size: 14px;

letter-spacing: 8px;
}

.label span {
  display: block;

margin-top: 5px;

font-size: 8px;

letter-spacing: 4px;

color:
    rgba(150,220,235,.55);
}

/* =================================
   ANIMATIONS
================================= */

@keyframes robotFloat {

0%,
  100% {
    transform:
      translateX(-50%)
      translateY(0);
  }

50% {
    transform:
      translateX(-50%)
      translateY(-14px);
  }
}

@keyframes shadowPulse {

0%,
  100% {
    transform:
      translateX(-50%)
      scaleX(1);

opacity: .6;
  }

50% {
    transform:
      translateX(-50%)
      scaleX(.8);

opacity: .35;
  }
}

@keyframes antennaMove {

0%,
  100% {
    transform:
      translateX(-50%)
      rotate(-6deg);
  }

50% {
    transform:
      translateX(-50%)
      rotate(7deg);
  }
}

@keyframes antennaGlow {

0%,
  100% {
    opacity: .65;
  }

50% {
    opacity: 1;
  }
}

@keyframes blink {

0%,
  45%,
  50%,
  100% {
    transform: scaleY(1);
  }

47%,
  48% {
    transform: scaleY(.08);
  }
}

@keyframes talk {

0%,
  100% {
    height: 3px;
  }

50% {
    height: 8px;
  }
}

@keyframes coreRotate {

from {
    transform: rotate(0deg);
  }

to {
    transform: rotate(360deg);
  }
}

@keyframes corePulse {

0%,
  100% {
    transform:
      translate(-50%, -50%)
      scale(.85);
  }

50% {
    transform:
      translate(-50%, -50%)
      scale(1.15);
  }
}

@keyframes armLeft {

0%,
  100% {
    transform: rotate(7deg);
  }

50% {
    transform: rotate(-10deg);
  }
}

@keyframes armRight {

0%,
  100% {
    transform: rotate(-7deg);
  }

50% {
    transform: rotate(10deg);
  }
}

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground