PROCESS INFOGRAPHIC
How do I make an process infographic?
What is a process infographic? How do you make a process infographic? This script and codes were developed by Elena on 17 December 2022, Saturday.
PROCESS INFOGRAPHIC Previews
PROCESS INFOGRAPHIC - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>PROCESS INFOGRAPHIC</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ img, iframe, video { max-width: 100%; width: 100%; vertical-align: middle; border: 0; display: block; margin: 0 auto; } ol, ul, dl { margin: 0; padding: 0; } li { list-style-type: none; } /* ---- Link ---- */ a { text-decoration: none; } a:active, a:hover, a:focus { outline: 0; text-decoration: none; } a:link { -webkit-tap-highlight-color: #000; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .process__list, .process__item, .item__inner { display: -webkit-box; display: -moz-box; display: -ms-flex; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; justify-content: space-around; align-items: center; } .wrap { max-width: 1270px; width: 100%; padding: 0 15px; margin: 0 auto; } .process__list { width: 95%; } .process { background: #F0F0F0; overflow: hidden; padding: 20px; width: 1500px; } .process__title { text-transform: uppercase; color: #049BF7; font-family: 'Roboto', sans-serif; } .process__title span { color: #333; } .process__item_blue { background: #72D4DF; } .process__item_yellow { background: #FFCD64; } .process__item_orange { background: #FD912C; } .process__item_pink { background: #E34856; } .process__item_green { background: #B5DE39; } .item__content { font-size: 10px; display: inline-block; vertical-align: middle; } .process__item svg { fill: #fff; } .step { display: inline-block; vertical-align: middle; margin: 0; font-size: 50px; font-weight: bold; position: absolute; top: 50%; margin-top: -30px; right: -30px; z-index: 15; } .item__icon { display: inline-block; vertical-align: middle; width: 30px; position: absolute; top: 50%; z-index: 15; left: 55px; margin-top: -10px; } .process__item { cursor: pointer; color: #fff; width: 19.8%; font-family: 'Roboto', sans-serif; -webkit-transition: all .52s ease-in-out; -o-transition: all .52s ease-in-out; transition: all .52s ease-in-out; } .item__inner{ position: relative; padding: 5px 35px 5px 90px; height: 120px; } .item__inner:after { content: ''; display: block; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-left: 50px solid #72D4DF; position: absolute; right: -49.5px; z-index: 13; top: 0; } .process__item_blue .item__inner:after { border-left: 50px solid #72D4DF; } .process__item_yellow .item__inner:after { border-left: 50px solid #FFCD64; } .process__item_orange .item__inner:after { border-left: 50px solid #FD912C; } .process__item_pink .item__inner:after { border-left: 50px solid #E34856; } .process__item_green .item__inner:after { border-left: 50px solid #B5DE39; } .item__inner:before { content: ''; display: block; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-left: 50px solid #F0F0F0; position: absolute; left: -1px; z-index: 10; top: 0; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<html lang="en">
<head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable='no'"> <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700,300' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body> <div class="wrap"> <div class="process"> <h3 class="process__title">Process <span>infographic</span></h3> <ul class="process__list"> <li class="process__item process__item_blue"> <div class="item__inner"> <svg xmlns="http://www.w3.org/2000/svg" class="item__icon" width="24" height="24" viewBox="0 0 24 24"><path d="M14 19h-4c-.276 0-.5.224-.5.5s.224.5.5.5h4c.276 0 .5-.224.5-.5s-.224-.5-.5-.5zm0 2h-4c-.276 0-.5.224-.5.5s.224.5.5.5h4c.276 0 .5-.224.5-.5s-.224-.5-.5-.5zm.25 2h-4.5l1.188.782c.154.138.38.218.615.218h.895c.234 0 .461-.08.615-.218l1.187-.782zm3.75-13.799c0 3.569-3.214 5.983-3.214 8.799h-1.989c-.003-1.858.87-3.389 1.721-4.867.761-1.325 1.482-2.577 1.482-3.932 0-2.592-2.075-3.772-4.003-3.772-1.925 0-3.997 1.18-3.997 3.772 0 1.355.721 2.607 1.482 3.932.851 1.478 1.725 3.009 1.72 4.867h-1.988c0-2.816-3.214-5.23-3.214-8.799 0-3.723 2.998-5.772 5.997-5.772 3.001 0 6.003 2.051 6.003 5.772zm4-.691v1.372h-2.538c.02-.223.038-.448.038-.681 0-.237-.017-.464-.035-.69h2.535zm-10.648-6.553v-1.957h1.371v1.964c-.242-.022-.484-.035-.726-.035-.215 0-.43.01-.645.028zm-3.743 1.294l-1.04-1.94 1.208-.648 1.037 1.933c-.418.181-.822.401-1.205.655zm10.586 1.735l1.942-1.394.799 1.115-2.054 1.473c-.191-.43-.423-.827-.687-1.194zm-3.01-2.389l1.038-1.934 1.208.648-1.041 1.941c-.382-.254-.786-.473-1.205-.655zm-10.068 3.583l-2.054-1.472.799-1.115 1.942 1.393c-.264.366-.495.763-.687 1.194zm13.707 6.223l2.354.954-.514 1.271-2.425-.982c.21-.397.408-.812.585-1.243zm-13.108 1.155l-2.356 1.06-.562-1.251 2.34-1.052c.173.433.371.845.578 1.243zm-1.178-3.676h-2.538v-1.372h2.535c-.018.226-.035.454-.035.691 0 .233.018.458.038.681z"/></svg> <p class="item__content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, eos? </p> <span class="step">01</span> </div> </li> <li class="process__item process__item_yellow"> <div class="item__inner"> <i class="fa fa-graduation-cap item__icon"></i> <p class="item__content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, deserunt. </p> <span class="step">02</span> </div> </li> <li class="process__item process__item_orange"> <div class="item__inner"> <i class="fa fa-line-chart item__icon"></i> <p class="item__content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, possimus. </p> <span class="step">03</span> </div> </li> <li class="process__item process__item_pink"> <div class="item__inner"> <i class="fa fa-cogs item__icon"></i> <p class="item__content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, doloribus! </p> <span class="step">04</span> </div> </li> <li class="process__item process__item_green"> <div class="item__inner"> <i class="fa fa-flask item__icon"></i> <p class="item__content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, perferendis! </p> <span class="step">05</span> </div> </li> </ul> </div> </div>
</body>
</html>
</body>
</html>
PROCESS INFOGRAPHIC - Script Codes CSS Codes
img, iframe, video { max-width: 100%; width: 100%; vertical-align: middle; border: 0; display: block; margin: 0 auto; } ol, ul, dl { margin: 0; padding: 0; } li { list-style-type: none; } /* ---- Link ---- */ a { text-decoration: none; } a:active, a:hover, a:focus { outline: 0; text-decoration: none; } a:link { -webkit-tap-highlight-color: #000; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .process__list, .process__item, .item__inner { display: -webkit-box; display: -moz-box; display: -ms-flex; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; justify-content: space-around; align-items: center; } .wrap { max-width: 1270px; width: 100%; padding: 0 15px; margin: 0 auto; } .process__list { width: 95%; } .process { background: #F0F0F0; overflow: hidden; padding: 20px; width: 1500px; } .process__title { text-transform: uppercase; color: #049BF7; font-family: 'Roboto', sans-serif; } .process__title span { color: #333; } .process__item_blue { background: #72D4DF; } .process__item_yellow { background: #FFCD64; } .process__item_orange { background: #FD912C; } .process__item_pink { background: #E34856; } .process__item_green { background: #B5DE39; } .item__content { font-size: 10px; display: inline-block; vertical-align: middle; } .process__item svg { fill: #fff; } .step { display: inline-block; vertical-align: middle; margin: 0; font-size: 50px; font-weight: bold; position: absolute; top: 50%; margin-top: -30px; right: -30px; z-index: 15; } .item__icon { display: inline-block; vertical-align: middle; width: 30px; position: absolute; top: 50%; z-index: 15; left: 55px; margin-top: -10px; } .process__item { cursor: pointer; color: #fff; width: 19.8%; font-family: 'Roboto', sans-serif; -webkit-transition: all .52s ease-in-out; -o-transition: all .52s ease-in-out; transition: all .52s ease-in-out; } .item__inner{ position: relative; padding: 5px 35px 5px 90px; height: 120px; } .item__inner:after { content: ''; display: block; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-left: 50px solid #72D4DF; position: absolute; right: -49.5px; z-index: 13; top: 0; } .process__item_blue .item__inner:after { border-left: 50px solid #72D4DF; } .process__item_yellow .item__inner:after { border-left: 50px solid #FFCD64; } .process__item_orange .item__inner:after { border-left: 50px solid #FD912C; } .process__item_pink .item__inner:after { border-left: 50px solid #E34856; } .process__item_green .item__inner:after { border-left: 50px solid #B5DE39; } .item__inner:before { content: ''; display: block; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-left: 50px solid #F0F0F0; position: absolute; left: -1px; z-index: 10; top: 0; }
| Developer | Elena |
| Username | semenchenko |
| Uploaded | December 17, 2022 |
| Rating | 3 |
| Size | 4,623 Kb |
| Views | 8,096 |
Do you need developer help for PROCESS INFOGRAPHIC?
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!
Elena (semenchenko) Script Codes
| Name | Size |
| Pricing Table | 6,784 Kb |
| Slider CSS Only | 8,018 Kb |
| A Pen by Elena | 3,573 Kb |
| 3d css cube | 4,578 Kb |
| Walking skeleton only css | 9,064 Kb |
| Responsive HTML Email template | 4,246 Kb |
| Zen cube | 2,083 Kb |
| Css piramide | 2,681 Kb |
| Business card mockup | 4,866 Kb |
| Card | 3,220 Kb |
Create amazing love letters 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!
Similar Scripts & Codes
| Name | Username | Size |
| Freecodecamp - Tribute Page | Samoht513 | 3,583 Kb |
| Bubble animation | Ftabor | 6,565 Kb |
| Incremental game | Eprouver | 5,868 Kb |
| CSS3 Snow Animation | NickyCDK | 1,695 Kb |
| CSS Colors | Alexpate | 2,232 Kb |
| A Pen by Dalton Liu | Liudalton | 12,437 Kb |
| Long Shadow Button | Uixcrazy | 3,550 Kb |
| Filtering with shuffle.js | Deyand | 2,712 Kb |
| Text Blocks Over Image, Updated | KatieK2 | 3,122 Kb |
| Mega Menu by Joni | Asakasinsky | 3,171 Kb |
Do you want hide your ip address?
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!