People Graphic
How do I make an people graphic?
What is a people graphic? How do you make a people graphic? This script and codes were developed by Tina Anastopoulos on 31 August 2022, Wednesday.
People Graphic - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>People Graphic</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='graphic'> <div class='container animated slideInLeft'> <div class='person1 animated pulse'> <div class='torso'> <div class='pocket'></div> </div> <div class='hat'></div> <div class='face'> <div class='eye r'></div> <div class='eye l'></div> <div class='nose'></div> <div class='mouth'></div> <div class='neck'></div> </div> <div class='bowtie'></div> </div> </div> <div class='container animated slideInUp'> <div class='person2 animated pulse'> <div class='torso'></div> <div class='shorthair'></div> <div class='face'> <div class='eye r'></div> <div class='eye l'></div> <div class='nose'></div> <div class='mouth'></div> <div class='neck'></div> </div> <div class='collar'></div> <div class='buttons'></div> </div> </div> <div class='container animated slideInRight'> <div class='person3 animated pulse'> <div class='torso'> <div class='stripes'></div> </div> <div class='longhair-2'></div> <div class='longhair'></div> <div class='face'> <div class='eye r'></div> <div class='eye l'></div> <div class='nose'></div> <div class='mouth'></div> <div class='neck'></div> </div> </div> </div>
</div>
</body>
</html>
People Graphic - Script Codes CSS Codes
.face, .face:before, .face:after,
.eye,
.hat,
.shorthair, .shorthair:after,
.longhair, .longhair-2,
.nose,
.mouth,
.neck,
.torso,
.bowtie,
.pocket, .pocket:before, .pocket:after,
.stripes, .stripes:before, .stripes:after,
.collar, .collar:before, .collar:after,
.buttons, .buttons:before, .buttons:after { position: absolute;
}
body { background: #1D1F20;
}
.graphic { width: 75%; height: 300px; display: -webkit-box; display: -ms-flexbox; display: flex; margin: auto; margin-top: 50px;
}
.container { width: 33%; padding-top: 15px;
}
.container:nth-child(1) { background: #47D9BF;
}
.container:nth-child(2) { background: #00ACEB;
}
.container:nth-child(3) { background: #F2EC3B;
}
.person1, .person2, .person3 { width: 120px; height: 270px; margin: auto; position: relative;
}
.torso { width: 100px; height: 145px; top: 125px; left: 10px;
}
.person1 .torso { background: #F2594B; border-radius: 40px 40px 0 0;
}
.person2 .torso { background: #003056; -webkit-clip-path: polygon(25% 0, 75% 0, 100% 10%, 100% 100%, 0 100%, 0 10%); clip-path: polygon(25% 0, 75% 0, 100% 10%, 100% 100%, 0 100%, 0 10%);
}
.person3 .torso { background: #EFAE0F; border-radius: 30px 30px 0 0;
}
.face { width: 100px; height: 100px; top: 20px; left: 10px; border-radius: 50%;
}
.face:before, .face:after { content: " "; width: 10px; height: 20px; top: 35px; border-radius: 20px;
}
.face:before { left: -8px;
}
.face:after { right: -8px;
}
.neck { width: 30px; height: 30px; left: 35px; top: 95px; border-radius: 0 0 50% 50%;
}
.person1 .neck, .person1 .face, .person1 .face:before, .person1 .face:after { background: #00A1D9;
}
.person2 .neck, .person2 .face, .person2 .face:before, .person2 .face:after { background: #47D9BF;
}
.person3 .neck, .person3 .face, .person3 .face:before, .person3 .face:after { background: #DE5051;
}
.hat { width: 100px; height: 50px; left: 10px; background: #F2EC3B; border-radius: 50px 50px 0 0; z-index: 1;
}
.eye { width: 10px; height: 10px; background: #fff; border-radius: 50%;
}
.eye.r { top: 40px; left: 20px;
}
.eye.l { top: 40px; right: 20px;
}
.person2 .eye.r, .person2 .eye.l { background: none; border-top: 9px solid white;
}
.person1 .nose { width: 11px; height: 20px; top: 40px; right: 50px; -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%); clip-path: polygon(100% 0, 0% 100%, 100% 100%); background: #F2D03B;
}
.person2 .nose { width: 10px; height: 20px; top: 40px; left: 45px; -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); background: #F2836B;
}
.person3 .nose { width: 12px; height: 11px; top: 45px; left: 44px; -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); background: #FFEB79;
}
.mouth { width: 50px; height: 52px; top: 20px; left: 25px; border-radius: 50px; border-bottom: 10px solid #fff;
}
.bowtie { width: 40px; height: 27px; background: #F2D03B; top: 132px; left: 40px; -webkit-clip-path: polygon(50% 50%, 100% 0, 100% 100%, 50% 50%, 0 100%, 0 0); clip-path: polygon(50% 50%, 100% 0, 100% 100%, 50% 50%, 0 100%, 0 0);
}
.pocket { width: 25px; height: 8px; top: 57px; left: 10px; background: #F2D03B;
}
.pocket:before, .pocket:after { content: ""; width: 25px; height: 8px;
}
.pocket:before { top: -10px; background: #E5901A;
}
.pocket:after { top: 10px; background: #FFEB79;
}
.collar { width: 10px; height: 35px; top: 125px; left: 55px;
}
.collar:before { content: " "; width: 20px; height: 35px; left: -20px; background: #F2594B; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 40%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 40%);
}
.collar:after { content: ""; width: 20px; height: 35px; left: 10px; background: #F2594B; -webkit-clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%);
}
.buttons { left: 56px; top: 190px;
}
.buttons, .buttons:before, .buttons:after { width: 8px; height: 8px; border-radius: 50%; background: #F2594B;
}
.buttons:before { content: ""; top: -14px;
}
.buttons:after { content: ""; top: 14px;
}
.shorthair { width: 38px; height: 34px; top: 22px; left: 12px; background: #E5901A; border-radius: 50px 0px; z-index: 1;
}
.shorthair:after { content: ""; width: 65px; height: 30px; left: 33px; -webkit-transform: rotate(8deg); transform: rotate(8deg); border-radius: 0px 40px; background: #E5901A;
}
.longhair { width: 100px; height: 40px; top: 15px; left: 10px; background: #47D9BF; border-radius: 100px 100px 0 0; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 90% 80%, 80% 100%, 65% 80%, 50% 100%, 35% 80%, 20% 100%, 10% 80%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 90% 80%, 80% 100%, 65% 80%, 50% 100%, 35% 80%, 20% 100%, 10% 80%, 0 100%); z-index: 1;
}
.longhair-2 { width: 100px; height: 65px; background: #47D9BF; top: 50px; left: 10px;
}
.stripes { width: 30px; height: 8px; top: 43px; left: 35px; -webkit-transform: rotate(45deg); transform: rotate(45deg); background: #F2594B;
}
.stripes:before, .stripes:after { content: ""; width: 30px; height: 8px;
}
.stripes:before { top: 15px; left: -15px; background: #F2836B;
}
.stripes:after { top: -15px; left: 15px; background: #CD2C24;
}
/* Animation Timing */
.person1 { -webkit-animation-delay: 2s; animation-delay: 2s;
}
.person2 { -webkit-animation-delay: 3s; animation-delay: 3s;
}
.person3 { -webkit-animation-delay: 2.5s; animation-delay: 2.5s;
}
![People Graphic - Script Codes](http://shots.codepen.io/TWAIN/pen/wgQEzJ-512.jpg)
Developer | Tina Anastopoulos |
Username | TWAIN |
Uploaded | August 31, 2022 |
Rating | 3.5 |
Size | 4,620 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 |
Web Spiral - p5.js | 2,183 Kb |
Smoke Portal | 2,701 Kb |
Fan Loader | 2,190 Kb |
Weight a Minute - Error 404 | 55,097 Kb |
Donut | 7,169 Kb |
Cone Illusion | 2,732 Kb |
Mandala Outline | 2,157 Kb |
Year of the Rooster | 4,403 Kb |
Dash Holiday Tree | 3,094 Kb |
Spinner | 6,488 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 |
A Pen by Oliver Schafeld | Schafeld | 1,720 Kb |
Simple search using AngularJS | Haykou | 1,802 Kb |
Responsive scrolling text | Ashdurham | 2,259 Kb |
Velocity.js custom stagger | Tommiehansen | 4,805 Kb |
Web Spiral - p5.js | TWAIN | 2,183 Kb |
Glitchy Text Effect | Kescoe | 2,208 Kb |
Reviews and Ratings Star | Zbnmstry | 1,591 Kb |
Commuter Line Tokyu 8500 | Pedox | 7,031 Kb |
Spin | Elalemanyo | 8,262 Kb |
Flat design iframe | Damienpm | 1,819 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!