CSS Baby

Developer
Veronika
Size
1,923 Kb
Views
26,312
  1. CSS Baby Previews
  2. CSS Baby HTML Codes
  3. CSS Baby CSS Codes

How do I make an css baby?

What is a css baby? How do you make a css baby? This script and codes were developed by Veronika on 30 November 2022, Wednesday.

CSS Baby Previews
IQ Test

CSS Baby - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Baby</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="head"></div> <div class="hair"></div> <div class="eye eye-left"></div> <div class="eye eye-right"></div> <div class="ear ear-left"></div> <div class="ear ear-right"></div> <div class="cheek cheek-left"></div> <div class="cheek cheek-right"></div> <div class="pacifier"> <div class="pacifier-side pacifier-side-left"></div> <div class="pacifier-side pacifier-side-right"></div> <div class="pacifier-middle"></div> </div>
</div>
</body>
</html>

CSS Baby - Script Codes CSS Codes

body { background-color: #BFFFFB;
}
.container { background-color: #29D5C9; height: 300px; width: 300px; border-radius: 50%; margin: 30px auto; position: relative;
}
.head { background-color: #FDE9DA; height: 50%; width: 60%; border-radius: 50%; position: absolute; top: 26%; left: 20%;
}
.eye { background-color: #222; height: 4%; width: 4%; border-radius: 50%; position: absolute; top: 54%; animation: blink 2s alternate infinite;
}
@keyframes blink { 0%, 95% { transform: scaleY(1); } 100% { transform: scaleY(0.1); }
}
.eye-left { left: 35%;
}
.eye-right { left: 59%;
}
.ear { background-color: #FDE9DA; height: 10%; width: 8%; border-radius: 50%; position: absolute; top: 48%;
}
.ear-left { left: 16%;
}
.ear-right { left: 76%;
}
.cheek { background-color: #FFB7BF; height: 6%; width: 8%; border-radius: 50%; position: absolute; top: 60%;
}
.cheek-left { left: 30%;
}
.cheek-right { left: 60%;
}
.hair { background-color: transparent; position: absolute; top: 25%; left: 44%; width: 10%; height: 10%; border-radius: 50%; border-left: 10px solid #663322; border-bottom: 5px solid #663322;
}
.pacifier { height: 8%; width: 8%; position: absolute; top: 63%; left: 45%; animation: move 250ms linear infinite alternate;
}
@keyframes move { to { transform: translateY(-1px) scale(0.98); }
}
.pacifier-middle { position: absolute; height: 100%; width: 100%; background-color: #BFFFFB; border-radius: 50%;
}
.pacifier-side { position: absolute; top: -5%; height: 110%; width: 120%; background-color: #29D5C9; border-radius: 50%;
}
.pacifier-side-left { left: -60%;
}
.pacifier-side-right { left: 46%;
}
CSS Baby - Script Codes
CSS Baby - Script Codes
Home Page Home
Developer Veronika
Username ivhed
Uploaded November 30, 2022
Rating 3
Size 1,923 Kb
Views 26,312
Do you need developer help for CSS Baby?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Veronika (ivhed) Script Codes
Name
FreeCodeCamp - Tic Tac Toe Game
FreeCodeCamp - Tribute Page
Space Game Button
CSS Course - Build-a-Kitty Workshop
CSS Filter Blur
FreeCodeCamp - Twitch.tv
SVG Snowflakes
CSS Course - Fixed layout
FreeCodeCamp - Pomodoro Clock
MorphSVG Fruit
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!