Level 1 monster

Developer
Takane Ichinose
Size
3,123 Kb
Views
18,216
  1. Level 1 monster Previews
  2. Level 1 monster HTML Codes
  3. Level 1 monster CSS Codes

How do I make an level 1 monster?

Inspired by a MMORPG game, Ragnarok Online's Poring.2D Flat style responsive (size adjusts as the window width adjusts) drawing with minimal (or no) gradients.. What is a level 1 monster? How do you make a level 1 monster? This script and codes were developed by Takane Ichinose on 10 November 2022, Thursday.

Level 1 monster Previews
IQ Test

Level 1 monster - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Level 1 monster</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="head"> <div class="eyes"> <div class="eye left"></div> <div class="eye right"></div> </div> <div class="blushes"> <div class="blush left"></div> <div class="blush right"></div> </div> <div class="mouth"> <div class="lip left"></div> <div class="lip right"></div> </div>
</div>
<div class="shadow"></div>
</body>
</html>

Level 1 monster - Script Codes CSS Codes

* { padding: 0; margin: 0;
}
body { background: #26ad00;
}
.head { background: #ff8cb2; width: 70vw; height: 50vw; position: absolute; top: calc(50% - 25vw); left: calc(50% - 35vw); z-index: 2; border-radius: 90% 90% 80% 80% / 120% 120% 60% 60%; animation: monster 1s infinite;
}
.head:after { content: ""; background: #ffa1c7; width: 25%; height: 20%; position: absolute; top: 18%; right: 15%; border-radius: 100%; transform: rotate(30deg);
}
.head > .eyes { width: 100%; height: 10vw; position: absolute; top: 45%;
}
.head > .eyes > .eye { background: black; width: 10vw; height: 10vw; border-radius: 100%; position: absolute;
}
.head > .eyes > .eye:after { content: ""; background: white; width: 2.5vw; height: 2.5vw; position: absolute; top: 20%; right: 20%; border-radius: 100%;
}
.head > .eyes > .eye.left { left: 25%;
}
.head > .eyes > .eye.right { right: 25%;
}
.head > .blushes { width: 100%; height: 10vw; position: absolute; top: 65%;
}
.head > .blushes > .blush { background: #ff4a86; width: 15vw; height: 5vw; border-radius: 100%; position: absolute;
}
.head > .blushes > .blush.left { left: 5%;
}
.head > .blushes > .blush.right { right: 5%;
}
.head .mouth { width: 25vw; height: 7vw; position: absolute; bottom: 10%; left: calc(50% - 12.5vw);
}
.head .mouth > .lip { width: calc(12.5vw - 2.25vw); height: calc(7vw - 1.5vw); border: solid 1.5vw black; border-top: none; position: absolute; border-radius: 0 0 100% 100% / 0 0 180% 180%;
}
.head .mouth > .lip.right { right: 0;
}
.shadow { background: #2f2f2f; width: 70vw; height: 20vw; position: absolute; top: calc(50% - 10vw + 25vw); left: calc(50% - 35vw); z-index: 1; border-radius: 100%; animation: shadow 1s infinite;
}
@keyframes monster { 0% { width: 70vw; height: 50vw; left: calc(50% - 35vw); border-radius: 90% 90% 80% 80% / 120% 120% 60% 60%; } 50% { width: 62vw; height: 53vw; margin-top: -10vw; top: calc(50% - 26.5vw); left: calc(50% - 31vw); border-radius: 100% 100% 80% 80% / 150% 150% 60% 60%; }
}
@keyframes shadow { 0% { width: 70vw; height: 20vw; top: calc(50% - 10vw + 25vw); left: calc(50% - 35vw); } 50% { width: 58.33333333vw; height: 16.66666667vw; top: calc(50% - 8.33333333vw + 25vw); left: calc(50% - 29.16666667vw); }
}
Level 1 monster - Script Codes
Level 1 monster - Script Codes
Home Page Home
Developer Takane Ichinose
Username takaneichinose
Uploaded November 10, 2022
Rating 3.5
Size 3,123 Kb
Views 18,216
Do you need developer help for Level 1 monster?

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!

Takane Ichinose (takaneichinose) Script Codes
Name
Blog sample design with Bootstrap
CRUD Table with JSON
Flickering Fluorescent Lamp
Pure CSS Off-Canvas with Bootstrap
Tabs
Mario
Responsive Full-page Parallax Slider
Spinning star
Hangman game
Responsive alert box
Create amazing marketing copy 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!