Alfons Åberg

Developer
Size
2,136 Kb
Views
24,288

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 Previews

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);
}
Alfons Åberg - Script Codes
Alfons Åberg - Script Codes
Home Page Home
Developer Veronika
Username ivhed
Uploaded November 30, 2022
Rating 3
Size 2,136 Kb
Views 24,288
Do you need developer help for Alfons Åberg?

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
Create amazing Facebook ads 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!