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 - Twitch.tv | 3,285 Kb |
FreeCodeCamp - Pomodoro Clock | 4,937 Kb |
FreeCodeCamp - Simon Game | 8,481 Kb |
FreeCodeCamp - Tic Tac Toe Game | 4,469 Kb |
CSS Course - Fluid layout | 2,740 Kb |
CSS Baby | 1,923 Kb |
CSS Course - Build-a-Kitty Workshop | 3,183 Kb |
FreeCodeCamp - Markdown Previewer | 3,759 Kb |
CSS Course - Fixed layout | 2,721 Kb |
FreeCodeCamp - Tribute Page | 2,599 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 |
Revolving Text Landing Page Trial | TimRuby | 2,976 Kb |
Learning canvas drawing | Aurer | 2,204 Kb |
Sample Profile Screen | OurDailyBread | 5,375 Kb |
Force Counter | Kenlauguico | 2,732 Kb |
A Pen by Stan Williams | Stanssongs | 6,706 Kb |
Barber Shop | Bhlaird | 6,270 Kb |
Kut D3 | Jellevrswk | 3,687 Kb |
Angular Route | Arun_v606 | 1,837 Kb |
Retina canvas w. resize | Erikterwan | 1,882 Kb |
Project -Show the Local Weather | Luciano_Britis | 2,583 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!