Flexgrow illustration

Developer
Sasha
Size
3,503 Kb
Views
101,200
  1. Flexgrow illustration Previews
  2. Flexgrow illustration HTML Codes
  3. Flexgrow illustration CSS Codes

How do I make an flexgrow illustration?

Based on the Dribbble shot by Hamza Erbay, https://dribbble.com/shots/3265678-FlexboxI'm having some problem with the facial structure, . What is a flexgrow illustration? How do you make a flexgrow illustration? This script and codes were developed by Sasha on 12 June 2022, Sunday.

Flexgrow illustration Previews
IQ Test

Flexgrow illustration - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexgrow illustration</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="text-wrapper"> <div>flex-grow: 2</div> <div>flex-grow: 3</div> <div>flex-grow: 1</div> </div>
<div class="container"> <div class="first"> <div class="facial"> <div class="eye"></div> <div class="mouth"></div> </div> </div> <div class="second"> <div class="facial"> <div class="eye"></div> <div class="mouth"> <div class="tongue"></div> </div> </div> </div> <div class="third"> <div class="facial"><div class="eye"></div> <div class="eye right"></div> <div class="mouth"><div class="tongue"></div></div> </div> </div>
</div>
</div>
<div class="text">Inspired from dribbble shot by <a href="https://dribbble.com/hamzaerbay" target="_blank">hamza erbay</a></div>
</body>
</html>

Flexgrow illustration - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400");
.wrapper { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; font-family: 'Source Sans Pro', sans-serif;
}
.text-wrapper { width: 50%; display: flex; justify-content: center; font-size: 13px; letter-spacing: 2px;
}
.text-wrapper div { display: flex; justify-content: center; height: 30px;
}
.text-wrapper div:nth-child(1) { flex-grow: 2;
}
.text-wrapper div:nth-child(2) { flex-grow: 3;
}
.text-wrapper div:nth-child(3) { flex-grow: 1;
}
.container { width: 50%; display: flex; justify-content: center;
}
.container > div { height: 70px; border: 3px solid #3E1940; border-radius: 5px;
}
.container .first { background: #F7F8F9; flex-grow: 2; position: relative;
}
.container .first .facial { display: flex; justify-content: center; width: 80%;
}
.container .first .facial .mouth { position: absolute; width: 35px; height: 3px; background: #3E1940; margin: 45px 25px;
}
.container .first .eye:before, .container .first .eye:after { position: absolute; content: '';
}
.container .first .eye:before { top: 20px; border-radius: 100%; width: 10px; height: 10px; background: #3E1940; box-shadow: 45px 0 0 #3E1940;
}
.container .first .eye:after { width: 23px; height: 3px; background: #3E1940; top: 20px; margin: 0 -10px; box-shadow: 45px 0 0 #3E1940;
}
.container .second { background: #FFE8A9; position: relative; flex-grow: 3; display: flex; justify-content: center;
}
.container .second .facial { width: 70%; display: flex; justify-content: center; align-items: center; height: 40px;
}
.container .second .eye { width: 20%;
}
.container .second .eye:before, .container .second .eye:after { position: absolute; content: '';
}
.container .second .eye:before { border-radius: 100%; width: 12px; height: 12px; background: #3E1940; box-shadow: 45px 0 0 #3E1940;
}
.container .second .mouth { position: absolute; width: 15px; height: 7px; background: #3E1940; border-radius: 0 0 100px 100px; margin: 20px 10px; overflow: hidden;
}
.container .tongue { position: absolute; width: 25px; height: 15px; background: #EF6A6A; top: 3.5px; left: 4px; border-radius: 100px;
}
.container .third { background: #EF6A6A; flex-grow: 1; position: relative;
}
.container .third .facial { display: flex; justify-content: center; align-items: center; height: 40px; width: 55%; flex-grow: 1;
}
.container .third .eye { position: relative;
}
.container .third .eye:before, .container .third .eye:after { position: absolute; content: '';
}
.container .third .eye:before { border-radius: 100%; width: 12px; height: 12px; background: #3E1940;
}
.container .third .eye:after { width: 25px; height: 3px; background: #3E1940; transform: rotate(25deg); margin: -2px -5px;
}
.container .third .eye.right { left: 40px;
}
.container .third .eye.right:after { margin: -3px -5px; transform: rotate(-25deg);
}
.container .third .mouth { position: absolute; width: 40px; height: 20px; background: #3E1940; border-radius: 5px; overflow: hidden; margin: 30px 25px;
}
.container .third .mouth:before, .container .third .mouth:after { position: absolute; content: '';
}
.container .third .mouth:before { width: 40px; height: 4px; background: white;
}
.container .third .tongue { background: #C3423F; top: 13px; left: 10px; width: 20px;
}
.text { position: absolute; top: 10px; font-family: 'Source Sans Pro', sans-serif; font-size: 13px; letter-spacing: 1px; color: #333;
}
.text a { color: #333;
}
Flexgrow illustration - Script Codes
Flexgrow illustration - Script Codes
Home Page Home
Developer Sasha
Username sashatran
Uploaded June 12, 2022
Rating 4.5
Size 3,503 Kb
Views 101,200
Do you need developer help for Flexgrow illustration?

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!

Sasha (sashatran) Script Codes
Name
CSS Gallery Hover Effect
CSS Girl
Animated CSS Tooltip
Moving head with Parallax.js
CSS Shop
Input UI Animation
Pages of 2017
Button with Hover Effect
Svg Stars Experiment
SVG Filter Gooey Share, Social Media Button
Create amazing blog posts 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!