Alfons Åberg
How do I make an alfons Åberg?
What is a alfons Åberg? How do you make a alfons Åberg? This script and codes were developed by Veronika on 30 November 2022, Wednesday.
Alfons Åberg - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Alfons Åberg</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="alfons"> <div class="hair hair-leftleftleft"></div> <div class="hair hair-leftleft"></div> <div class="hair hair-left"></div> <div class="hair hair-middle"></div> <div class="hair hair-right"></div> <div class="hair hair-rightright"></div> <div class="hair hair-rightrightright"></div> <div class="head skin"> <div class="ear ear-left skin"></div> <div class="ear ear-right skin"></div> <div class="eye eye-left"> <div class="pupil pupil-left"></div> </div> <div class="eye eye-right"> <div class="pupil pupil-right"></div> </div> <div class="nose skin"></div> <div class="mouth skin"></div> </div>
</div>
</body>
</html>
Alfons Åberg - Script Codes CSS Codes
.alfons { width: 350px; margin: 100px auto; position: relative;
}
.hair { position: absolute; height: 60px; background-image: -webkit-repeating-linear-gradient(right, black 0px, black 2px, white 3px, white 15px); background-image: repeating-linear-gradient(to left, black 0px, black 2px, white 3px, white 15px);
}
.hair-middle { width: 120px; top: -17px; left: 50%; margin-left: -60px;
}
.hair-left { width: 40px; top: -10px; left: 74px; -webkit-transform: rotate(-15deg); transform: rotate(-15deg);
}
.hair-leftleft { width: 40px; top: 5px; left: 30px; -webkit-transform: rotate(-20deg); transform: rotate(-20deg);
}
.hair-leftleftleft { width: 22px; top: 25px; left: 10px; -webkit-transform: rotate(-30deg); transform: rotate(-30deg);
}
.hair-right { width: 40px; top: -10px; right: 74px; -webkit-transform: rotate(15deg); transform: rotate(15deg);
}
.hair-rightright { width: 40px; top: 5px; right: 30px; -webkit-transform: rotate(20deg); transform: rotate(20deg);
}
.hair-rightrightright { width: 22px; top: 25px; right: 10px; -webkit-transform: rotate(30deg); transform: rotate(30deg);
}
.head { border-radius: 40%; border: 3px solid; width: 350px; height: 250px; position: relative;
}
.ear { width: 40px; height: 40px; border-radius: 20px 20px 0 0; border-top: 3px solid; border-left: 3px solid; border-right: 3px solid; position: absolute; top: 75px; z-index: -1;
}
.ear-left { left: -23px; -webkit-transform: rotate(-86deg); transform: rotate(-86deg);
}
.ear-right { right: -23px; -webkit-transform: rotate(86deg); transform: rotate(86deg);
}
.eye { width: 80px; height: 30px; border: 2px solid; position: absolute; top: 40px; background-color: white;
}
.eye-left { border-radius: 80px 60px 20px 5px; left: 45px; -webkit-transform: rotate(-5deg); transform: rotate(-5deg);
}
.eye-right { border-radius: 60px 80px 5px 20px; right: 45px; -webkit-transform: rotate(5deg); transform: rotate(5deg);
}
.pupil { width: 50px; height: 32px; background-color: black; margin-left: 15px; margin-top: -1px
}
.pupil-left { border-radius: 25px 20px 10px 10px;
}
.pupil-right { border-radius: 20px 25px 10px 10px;
}
.pupil::after { content: ''; display: block; position: absolute; height: 7px; width: 10px; background-color: white; border-radius: 50%; left: 30px; top: 2px;
}
.mouth { position: absolute; width: 120px; height: 20px; border-radius: 0 0 120px 120px; border-bottom: 3px solid; border-left: 2px solid; border-right: 2px solid; top: 100px; left: 50%; margin-left: -60px;
}
.nose { position: absolute; height: 15px; width: 20px; border-bottom: 3px solid; border-left: 2px solid; border-right: 2px solid; border-radius: 0 0 15px 15px; top: 60px; left: 50%; margin-left: -10px;
}
.skin { background-color: rgb(249, 222, 185);
}
Developer | Veronika |
Username | ivhed |
Uploaded | November 30, 2022 |
Rating | 3 |
Size | 2,136 Kb |
Views | 24,288 |
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!
Name | Size |
FreeCodeCamp - Tic Tac Toe Game | 4,469 Kb |
CSS Course - Fixed layout | 2,721 Kb |
FreeCodeCamp - Markdown Previewer | 3,759 Kb |
Background blend mode | 1,610 Kb |
CSS Baby | 1,923 Kb |
FreeCodeCamp - Twitch.tv | 3,285 Kb |
CSS Course - Build-a-Kitty Workshop | 3,183 Kb |
Space Game Button | 3,321 Kb |
FreeCodeCamp - Local Weather | 3,926 Kb |
SVG Snowflakes | 2,929 Kb |
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!
Name | Username | Size |
SVG Transform vs CSS Transform | AmeliaBR | 4,175 Kb |
Guage | Roygwells | 5,653 Kb |
Border image | JohnRiordan | 2,120 Kb |
Spin | Elalemanyo | 8,262 Kb |
CSS Grid Test | Ajaykarwal | 2,377 Kb |
A Pen by Jason Kinney | Jason-kinney | 1,980 Kb |
Tab Menus | Zephyr | 3,180 Kb |
Caputre Cam with JS | KimmoCommit | 2,795 Kb |
Simple jQuery Slider | Jurbank | 2,874 Kb |
Wikipedia API | Coderpilot | 2,802 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!