HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URL's added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import
usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<girl>
<face>
<hair></hair>
<hair1></hair1><hair2></hair2><hair3></hair3><hair4></hair4><hair5></hair5><hair6></hair6><hair7></hair7><hair8></hair8><hair9></hair9><hair10></hair10><hair11></hair11><hair12></hair12><hair13></hair13><hair14></hair14><hair15></hair15><hair16></hair16><hair17></hair17><hair18></hair18><hair19></hair19><hair20></hair20><hair21></hair21><hair22></hair22><hair23></hair23><hair24></hair24><hair25></hair25><hair26></hair26><hair27></hair27><hair28></hair28><hair29></hair29><hair30></hair30><hair31></hair31><hair32></hair32><hair33></hair33><hair34></hair34><hair35></hair35><hair36></hair36><hair37></hair37><hair38></hair38><hair39></hair39><hair40></hair40><hair41></hair41><hair42></hair42><hair43></hair43><hair44></hair44><hair44></hair44><hair45></hair45><hair46></hair46><hair47></hair47><hair48></hair48><hair49></hair49><hair50></hair50><hair51></hair51><hair52></hair52><hair53></hair53><hair54></hair54><hair55></hair55><hair56></hair56><hair57></hair57><hair58></hair58><hair59></hair59><hair60></hair60><hair61></hair61><hair62></hair62><hair63></hair63><hair64></hair64><hair65></hair65><hair66></hair66><hair67></hair67><hair68></hair68><hair69></hair69><hair70></hair70><hair71></hair71><hair72></hair72>
<forehead></forehead>
<foreheadshadow></foreheadshadow>
<foreheadshadow2></foreheadshadow2>
<noseup></noseup>
<nosebtw></nosebtw>
<nose></nose>
<nshadow></nshadow>
<nosehole></nosehole>
<afternose></afternose>
<lipshadow></lipshadow>
<lipup></lipup>
<lipbtw></lipbtw>
<lipdown></lipdown>
<lipshadow2></lipshadow2>
<lipshadow3></lipshadow3>
<chinup></chinup>
<chin></chin>
<jawline></jawline>
<contour1></contour1>
<contour2></contour2>
<contour3></contour3>
<contour4></contour4>
<chinshadow></chinshadow>
<neck></neck>
<neckleft></neckleft>
<neckshadow></neckshadow>
<neckshadow2></neckshadow2>
<eyebrow1></eyebrow1>
<brow1></brow1><brow2></brow2><brow3></brow3><brow4></brow4><brow5></brow5><brow6></brow6><brow7></brow7><brow8></brow8><brow9></brow9><brow10></brow10><brow11></brow11><brow12></brow12><brow13></brow13><brow14></brow14><brow15></brow15><brow16></brow16><brow17></brow17><brow18></brow18><brow19></brow19><brow20></brow20><brow21></brow21><brow22></brow22><brow23></brow23><brow24></brow24><brow25></brow25><brow26></brow26><brow27></brow27><brow28></brow28><brow29></brow29><brow30></brow30><brow31></brow31><brow32></brow32><brow33></brow33><brow34></brow34><brow35></brow35><brow36></brow36><brow37></brow37><brow38></brow38><brow39></brow39><brow40></brow40><brow41></brow41><brow42></brow42><brow43></brow43><brow44></brow44><brow45></brow45><brow46></brow46><brow47></brow47><brow48></brow48><brow49></brow49><brow50></brow50><brow51></brow51><brow52></brow52><brow53></brow53><brow54></brow54><brow55></brow55><brow56></brow56><brow57></brow57><brow58></brow58><brow59></brow59><brow60></brow60><brow61></brow61><brow62></brow62><brow63></brow63><brow64></brow64><brow65></brow65><brow66></brow66><brow67></brow67><brow68></brow68><brow69></brow69>
<eyebrow2></eyebrow2>
<brow2-1></brow2-1><brow2-2></brow2-2><brow2-3></brow2-3><brow2-4></brow2-4><brow2-5></brow2-5><brow2-6></brow2-6><brow2-7></brow2-7><brow2-8></brow2-8><brow2-9></brow2-9><brow2-10></brow2-10><brow2-11></brow2-11><brow2-12></brow2-12>
<eyebackground></eyebackground>
<eye2></eye2>
<eye2shadow></eye2shadow>
<lash1-2></lash1-2><lash2-2></lash2-2><lash3-2></lash3-2><lash4-2></lash4-2><lash5-2></lash5-2><lash6-2></lash6-2><lash7-2></lash7-2><lash8-2></lash8-2><lash9-2></lash9-2><lash10-2></lash10-2><lash11-2></lash11-2><lash12-2></lash12-2><lash13-2></lash13-2>
<eyelid></eyelid>
<undereye></undereye>
<lash0></lash0><lash1></lash1><lash2></lash2><lash3></lash3><lash4></lash4><lash5></lash5><lash6></lash6><lash7></lash7><lash8></lash8><lash9></lash9><lash10></lash10><lash11></lash11><lash12></lash12><lash13></lash13><lash14></lash14><lash15></lash15><lash16></lash16><lash17></lash17><lash18></lash18><lash19></lash19><lash20></lash20><lash21></lash21><lash22></lash22>
<lash-d1></lash-d1>
<lash-d2></lash-d2><lash-d3></lash-d3>
<lash-d4></lash-d4><lash-d5></lash-d5><lash-d6></lash-d6>
<lash-d7></lash-d7>
<eye1></eye1>
<eyeball></eyeball>
<shadowoneye></shadowoneye>
<eyelashtop2></eyelashtop2>
<eyelashtop></eyelashtop>
<lashbody></lashbody>
<eyelashbottom></eyelashbottom>
<eyecorner></eyecorner>
<eyecorner1></eyecorner1>
</face>
</girl>
body{
background: #ffffff;
}
girl{
position: absolute;
left: 40%;
}
hair{
background:#fefbef;
height: 630px;
border-radius: 50% 0 0 0;
width:310px;
top: 0px;
left: -195px;
position: absolute;
z-index: 999;
filter:blur(4px);
}
hair::after{
content:"";
transform: rotate(25deg);
background:#fefbef;
height: 240px;
width:110px;
top: -5px;
left: 240px;
position: absolute;
z-index: 999;
filter:blur(4px);
}
hair1{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: 110px;
position: absolute;
z-index: 999;
filter:blur(2px);
border-left: 3px solid #fefbef;
}
hair2{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: 105px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e2e2d7;
}
hair3{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: 100px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #fbfdef;
}
hair4{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: 95px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e0d9d1;
}
hair5{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: 90px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #fbfdef;
}
hair6{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: 85px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e0d9d1;
}
hair7{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: 80px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #fbfdef;
}
hair8{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: 75px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e0d9d1;
}
hair9{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: 70px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #fbfdef;
}
hair10{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: 65px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e0d9d1;
}
hair11{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: 60px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #fbfdef;
}
hair12{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: 55px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e0d9d1;
}
hair13{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: 50px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #fbfdef;
}
hair14{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: 45px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e0d9d1;
}
hair15{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: 40px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #fbfdef;
}
hair16{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: 35px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e0d9d1;
}
hair17{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: 30px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #fbfdef;
}
hair18{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: 25px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e0d9d1;
}
hair19{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: 20px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #fbfdef;
}
hair20{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: 15px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e0d9d1;
}
hair21{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: 10px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #fbfdef;
}
hair22{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: 5px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e0d9d1;
}
hair23{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: 0px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #fbfdef;
}
hair24{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -5px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e0d9d1;
}
hair25{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -10px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #fbfdef;
}
hair26{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -15px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e0d9d1;
}
hair27{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -20px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #fbfdef;
}
hair28{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -25px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e0d9d1;
}
hair29{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -30px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #fbfdef;
}
hair30{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -35px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e0d9d1;
}
hair31{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -40px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #fbfdef;
}
hair32{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -45px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e0d9d1;
}
hair33{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -50px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #fbfdef;
}
hair34{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -55px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e0d9d1;
}
hair35{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -60px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #fbfdef;
}
hair36{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -65px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e0d9d1;
}
hair37{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -70px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #fbfdef;
}
hair38{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -75px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e0d9d1;
}
hair39{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -80px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #fbfdef;
}
hair40{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -85px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e0d9d1;
}
hair41{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -90px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #fbfdef;
}
hair42{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -95px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e0d9d1;
}
hair43{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -100px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #fbfdef;
}
hair44{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -105px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e0d9d1;
}
hair45{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -110px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #fbfdef;
}
hair46{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -115px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e0d9d1;
}
hair47{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -120px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #fbfdef;
}
hair48{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -125px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e0d9d1;
}
hair49{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -130px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #fbfdef;
}
hair50{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -135px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e0d9d1;
}
hair51{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -140px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #fbfdef;
}
hair52{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -145px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e0d9d1;
}
hair53{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -150px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #fbfdef;
}
hair54{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -155px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e0d9d1;
}
hair55{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -160px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #fbfdef;
}
hair56{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -165px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e0d9d1;
}
hair57{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -170px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #fbfdef;
}
hair58{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -175px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e0d9d1;
}
hair59{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -180px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #fbfdef;
}
hair60{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: 0px;
left: -185px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e0d9d1;
}
hair61{
background:#876b5d;
height: 100px;
width:60px;
top: -10px;
left: -105px;
transform: rotate(40deg);
position: absolute;
z-index: 999999;
filter:blur(40px);
}
hair62{
background:#533626;
height: 100px;
width:60px;
top: -10px;
left: -50px;
transform: rotate(40deg);
position: absolute;
z-index: 999999;
filter:blur(40px);
}
hair63{
background:#3c2116;
height: 150px;
width:60px;
top: -20px;
left: 10px;
transform: rotate(40deg);
position: absolute;
z-index: 999999;
filter:blur(40px);
}
hair64{
background:#2f1a0c;
height: 150px;
width:60px;
top: -20px;
left: 100px;
transform: rotate(40deg);
position: absolute;
z-index: 999999;
filter:blur(40px);
}
hair65{
background:#6d4234;
height: 150px;
width:10px;
top: -20px;
left: 180px;
transform: rotate(40deg);
position: absolute;
z-index: 999999;
filter:blur(20px);
}
hair66{
background:#6d4234;
height: 150px;
width:10px;
top: -20px;
left: -110px;
transform: rotate(40deg);
position: absolute;
z-index: 999999;
filter:blur(20px);
}
hair67{
background:#9d877c;
height: 100px;
width:300px;
top: 500px;
left: -190px;
position: absolute;
z-index: 999999;
filter:blur(60px);
}
hair68{
background:#9d877c;
height: 400px;
width:30px;
top: 200px;
left: -190px;
position: absolute;
z-index: 999999;
filter:blur(30px);
}
hair69{
background:transparent;
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: -10px;
left: 125px;
transform: rotate(2deg);
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e0d9d1;
}
hair70{
background:transparent;
transform: rotate(6deg);
border-radius: 50% 0 0 0;
height: 630px;
width:400px;
top: -20px;
left: 145px;
position: absolute;
z-index: 999999;
filter:blur(2px);
border-left: 3px solid #e0d9d1;
}
hair71{
background:#fffcea;
height: 100px;
width:200px;
top: -55px;
left: 138px;
transform: rotate(-200deg);
position: absolute;
z-index: 9999;
filter: blur(4px);
border-radius: 0% 100% 0% 100%;
}
hair71::after{
content:"";
background:#fffcea;
height: 100px;
width:200px;
top: 20px;
left: 143px;
transform: rotate(-190deg);
position: absolute;
z-index: 9999;
filter: blur(4px);
border-radius: 0% 100% 0% 100%;
}
hair72{
background:#68483b;
height: 70px;
width:270px;
top: -45px;
left: 90px;
border-radius: 100%;
position: absolute;
z-index: 999999;
filter: blur(20px);
}
forehead{
clip-path: polygon(84% 1%, 91% 22%, 93% 32%, 97% 78%, 0 79%, 0 0);
background:#eedac1;
position: absolute;
width: 440px;
height: 250px;
left: -40px;
}
foreheadshadow::after{
content:"";
background:#f7ebdb;
width: 150px;
height: 200px;
position: absolute;
left:130px;
border-radius: 100%;
filter: blur(20px);
}
foreheadshadow2::before{
content:"";
background: #cca98d;
position: absolute;
width: 120px;
height: 300px;
left: -30px;
filter: blur(40px);
top:-30px;
border-radius: 200px;
z-index:99;
opacity: 2;
}
foreheadshadow::before{
content:"";
background: #cca98d;
position: absolute;
width: 100px;
height: 300px;
left: 250px;
filter: blur(40px);
transform: rotate(-20deg);
top:-30px;
border-radius: 200px;
z-index:2;
opacity: 2;
}
noseup{
clip-path: polygon(64% 0, 43% 20%, 39% 25%, 38% 31%, 38% 37%, 0 37%, 0 36%, 0 0);
width: 180px;
height: 200px;
background:#f2dabe;
position: absolute;
top: 192.5px;
left: 274px;
z-index: -2;
box-shadow:inset -150px 0px 50px #f0d5b7;
}
nosebtw{
clip-path: polygon(50% 0%, 73% 0, 80% 27%, 93% 56%, 91% 66%, 78% 69%, 59% 68%, 46% 69%);
background:#f1dcbf;
position: absolute;
width: 270px;
height: 180px;
top: 250px;
left: 140px;
z-index: -2;
box-shadow:inset -100px 0px 100px #f0d5b7;
}
nshadow{
background:#c99d80;
width: 50px;
border-radius: 100%/100%;
height: 55px;
top: 340px;
left: 280px;
border-left:7px solid #8e4228;
border-bottom:4px solid #8e4228;
filter: blur(10px);
transform: rotate(20deg);
position: absolute;
}
nshadow::after{
content:"";
background:#f5e8d7;
width: 13px;
height: 45px;
transform: rotate(55deg);
top: -18px;
left: 60px;
position: absolute;
}
nosehole{
background:#d2a48d;
border-radius: 50%;
border-top: 2px solid #73261e;
width: 50px;
transform: rotate(-15deg);
height: 10px;
filter: blur(1px);
top: 380px;
left: 300px;
opacity: 0.6;
position: absolute;
}
nosehole::after{
content:"";
background:#5c110c;
position: absolute;
width: 30px;
height: 5px;
border-radius: 100%;
left: 20px;
filter: blur(2px);
opacity: 2;
top: -0.8;
transform:rotate(10deg);
}
nosehole::before{
content:"";
background: #9f6452;
position: absolute;
width: 30px;
height: 7px;
border-radius: 100%;
left: 20px;
opacity: 2;
top: 5px;
filter:blur(2px);
}
afternose{
background: #eedac1;
position: absolute;
width: 300px;
height: 200px;
left: 45px;
top:300px;
z-index:-2;
opacity: 2;
border-radius: 0 0 60px 0px;
}
afternose::after{
content:"";
background:#ffffff;
position: absolute;
width: 25px;
height: 65px;
border-radius: 100%;
left: 290px;
top: 85px;
filter: blur(2px);
box-shadow: -20px 0px #ebccb7;
}
nose{
width: 120px;
height: 50px;
position: absolute;
background:#f1dcbf;
top: 340px;
left: 275px;
border-radius:200px;
transform: rotate(-10deg);
box-shadow:inset -100px 0px 100px #f0d5b7;
}
nose::after{
content:"";
background:#c99d80;
width: 40px;
border-radius: 100%/ 60%;
height: 150px;
top: -120px;
left: 25px;
z-index:99;
filter: blur(20px);
transform: rotate(-20deg);
position: absolute;
}
nose::before{
content:"";
background:#c99d80;
width: 110px;
height: 40px;
top: -1px;
z-index:99;
border-radius: 100%/200%;
filter: blur(20px);
position: absolute;
}
lipup{
filter: blur(2px);
background: #eb5b64;
width: 20px;
height: 35px;
top: 445px;
left: 325px;
position: absolute;
border-radius: 200% 20% 200% 0%;
}
lipup::after{
background: #eb5b64;
width: 35px;
height: 35px;
top: -3px;
left: -25px;
position: absolute;
border-radius: 200%;
content:"";
}
lipup::before{
content:"";
clip-path: polygon(73% 7%, 91% 0, 94% 14%, 92% 13%, 88% 13%, 80% 13%, 75% 13%, 57% 14%);
background: #eb5b64;
width: 200px;
height: 250px;
top: 1px;
left: -200px;
position: absolute;
}
lipdown{
background: #eb5b64;
width: 50px;
height: 45px;
top: 475px;
left: 293px;
filter: blur(2px);
position: absolute;
border-radius: 100%;
box-shadow: -15px 5px 10px #c39385;
}
lipdown::before{
content:"";
clip-path: polygon(66% 0, 65% 13%, 64% 22%, 56% 18%, 46% 13%, 36% 7%, 24% 0);
background: #eb5b64;
width: 180px;
height: 180px;
top: 5px;
left: -99px;
position: absolute;
}
lipbtw{
clip-path: polygon(74% 5%, 81% 5%, 81% 8%, 20% 9%, 31% 6%, 40% 3%, 49% 1%, 56% 3%, 63% 4%);
background: #944a4b;
width: 142px;
height: 100px;
top: 472px;
z-index: 2;
left: 220px;
position: absolute;
opacity: 0.6;
}
lipshadow{
background: #ebd9cb;
filter: blur(5px);
width: 90px;
transform: rotate(-30deg);
height: 10px;
top: 446px;
left: 230px;
position: absolute;
box-shadow: 0px 13px 10px #d79386;
z-index:2;
}
lipshadow::after{
content:"";
background: #ebd9cb;
filter: blur(10px);
width: 22px;
transform: rotate(-30deg);
height: 20px;
top: 10px;
left: 80px;
position: absolute;
box-shadow: 0px 13px 10px #d79386;
z-index:2;
}
lipshadow2{
background: #ebd9cb;
width: 60px;
transform: rotate(30deg);
height: 10px;
top: 495px;
left: 230px;
filter: blur(5px);
position: absolute;
z-index:2;
}
lipshadow2::after{
content:"";
background: #f9eff0;
width: 40px;
transform: rotate(-30deg);
height: 10px;
top: -30px;
left: 60px;
filter: blur(4px);
position: absolute;
z-index:4;
}
lipshadow2::before{
content:"";
background: #f9eff0;
width: 10px;
transform: rotate(-30deg);
height: 15px;
top: -20px;
left: 40px;
filter: blur(2px);
position: absolute;
z-index:4;
}
lipshadow3{
background: #810e13;
filter: blur(8px);
width: 40px;
height: 15px;
top:465px;
left: 300px;
position: absolute;
border-radius: 100%;
z-index:4;
}
lipshadow::before{
content:"";
background: #ff9696;
width: 32px;
transform: rotate(-30deg);
height: 30px;
top: 40px;
left: 50px;
filter: blur(10px);
position: absolute;
z-index:4;
}
chinup{
background: #eedac1;
position: absolute;
width: 300px;
height: 135px;
left: 35px;
top:430px;
z-index:-2;
opacity: 2;
border-radius: 0 0 10px 100px;
}
chinup::after{
content:"";
background:#ffffff;
position: absolute;
width: 35px;
height: 55px;
border-radius: 200%;
left: 285px;
top: 80px;
filter: blur(2px);
}
chin{
background: #eedac1;
position: absolute;
width: 300px;
height: 100px;
left: 39px;
top:506px;
z-index:-2;
filter: blur(2px);
opacity: 2;
transform: rotate(15deg);
border-radius: 0 200px 200px 200px;
}
jawline{
clip-path: polygon(49% 0, 100% 0, 100% 43%, 100% 83%, 55% 70%, 41% 64%, 22% 46%, 13% 36%, 0 0);
background: #eedac1;
position: absolute;
width: 200px;
height: 200px;
left: -40px;
top:430px;
z-index:-2;
opacity: 2;
}
contour1{
background: #eedac1;
position: absolute;
width: 220px;
height: 250px;
left: -38px;
top:190px;
z-index:2;
opacity: 2;
}
contour1::after{
content:"";
background: #cca98d;
position: absolute;
width: 200px;
height: 520px;
left: -0px;
top:-100px;
border-radius: 200px;
z-index:2;
transform: rotate(-20deg);
opacity: 2;
filter: blur(100px);
}
contour2{
background: #d38c6e;
position: absolute;
width: 50px;
height: 400px;
left: 30px;
top:100px;
border-radius: 200px;
z-index:2;
filter: blur(40px);
transform: rotate(-30deg);
opacity: 2;
box-shadow: 10px 0px 100px #f9d6c2, -50px 10px 100px #b3714f, -130px 100px 100px #c0805c;
}
contour3{
background: #b3846a;
position: absolute;
width: 200px;
height: 20px;
left: 140px;
top:580px;
border-radius: 200px;
z-index:2;
filter: blur(30px);
opacity: 2;
transform: rotate(20deg);
}
contour4{
filter:blur(1px);
background:#eedac1;
width: 200px;
height: 100px;
position: absolute;
top: 440px;
transform: rotate(50deg);
left: -64px;
border-radius: 50%;
z-index: -2;
}
contour4::after{
content:"";
filter:blur(1px);
background:#eedac1;
width: 100px;
height: 400px;
position: absolute;
top: -250px;
transform: rotate(-50deg);
left: -150px;
border-radius: 50%;
z-index: -2;
}
chinshadow{
background:#f7e8d7;
width: 150px;
height: 100px;
position: absolute;
top: 520px;
transform: rotate(20deg);
left: 170px;
border-radius: 50%;
filter: blur(10px);
}
chinshadow::after{
content:"";
background:#a1725e;
width: 300px;
height: 20px;
position: absolute;
top: 80px;
left: -130px;
border-radius: 50%;
filter: blur(20px);
}
neck{
width: 300px;
height: 130px;
position: absolute;
background:#ccae8c;
top: 550px;
left: -90px;
z-index:-99;
bottom: 0;
}
neckleft{
width: 30px;
height: 90px;
position: absolute;
background:#ffffff;
top: 600px;
left: 200px;
border-radius: 100%;
z-index:-99;
bottom: 0;
}
neckshadow{
width: 200px;
height: 40px;
position: absolute;
background:#673729;
top: 600px;
left: 10px;
border-radius: 100%;
z-index:-99;
bottom: 0;
filter:blur(20px);
transform: rotate(20deg);
}
neckshadow2{
width: 200px;
height: 40px;
position: absolute;
background:#e0c5a7;
top: 620px;
left: -50px;
border-radius: 100%;
z-index:-99;
bottom: 0;
filter:blur(20px);
}
neckshadow2::after{
content:"";
width: 300px;
height: 40px;
position: absolute;
background:#492c24;
top: -20px;
left: -40px;
border-radius: 100%;
z-index:-99;
bottom: 0;
filter:blur(2px);
}
eye2{
position: absolute;
width: 10px;
height: 30px;
background:#b49d8f;
top: 210px;
filter: blur(2px);
border-radius: 200% 0% 200% 0;
transform: rotate(20deg);
z-index: 3;
left: 30px;
}
eye2shadow{
position: absolute;
width: 20px;
height: 20px;
background:#332932;
top: 220px;
filter: blur(1px);
transform: rotate(-40deg);
z-index: -3;
left: 335px;
}
eyebackground{
background:#eedac1;
width:150px;
height: 150px;
z-index:-99;
position: absolute;
top: 195px;
left: 130px;
z-index:-1;
}
eyebrow1{
position: absolute;
top: 165px;
left: 210px;
filter: blur(4px);
border-radius: 100% 0% 0 0;
background: #704b39;
width: 100px;
z-index: 2;
height: 25px;
transform: rotate(20deg);
}
eyebrow1::after{
content:"";
position: absolute;
left: -60px;
top: 42px;
filter: blur(2px);
border-radius: 100% 0% 0 0;
background: #704b39;
width: 80px;
height: 15px;
transform: rotate(-50deg);
}
brow1{
position: absolute;
width: 10px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-right: 1px solid #7a533f;
background: transparent;
top: 180px;
z-index:9999;
transform: rotate(20deg);
left:300px;
}
brow2{
position: absolute;
width: 10px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-right: 1px solid #7a533f;
background: transparent;
top: 179.5px;
z-index:9999;
transform: rotate(20deg);
left:298px;
}
brow3{
position: absolute;
width: 20px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-right: 1px solid #7a533f;
background: transparent;
top: 179px;
z-index:9999;
transform: rotate(10deg);
left:284px;
}
brow4{
position: absolute;
width: 10px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-right: 1px solid #7a533f;
background: transparent;
top: 178px;
z-index:9999;
transform: rotate(20deg);
left:298px;
}
brow5{
position: absolute;
width: 10px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-right: 1px solid #7a533f;
background: transparent;
top: 177px;
z-index:9999;
transform: rotate(20deg);
left:296px;
}
brow6{
position: absolute;
width: 10px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-right: 1px solid #7a533f;
background: transparent;
top: 177px;
z-index:9999;
transform: rotate(20deg);
left:294px;
}
brow7{
position: absolute;
width: 10px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-right: 1px solid #7a533f;
background: transparent;
top: 176px;
z-index:9999;
transform: rotate(20deg);
left:292px;
}
brow8{
position: absolute;
width: 10px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-right: 1px solid #7a533f;
background: transparent;
top: 176px;
z-index:9999;
transform: rotate(20deg);
left:290px;
}
brow9{
position: absolute;
width: 10px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-right: 1px solid #7a533f;
background: transparent;
top: 176px;
z-index:9999;
transform: rotate(20deg);
left:288px;
}
brow10{
position: absolute;
width: 10px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-right: 1px solid #7a533f;
background: transparent;
top: 175px;
z-index:9999;
transform: rotate(20deg);
left:286px;
}
brow11{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 176px;
z-index:9999;
transform: rotate(160deg);
left:284px;
}
brow12{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 176px;
z-index:9999;
transform: rotate(160deg);
left:282px;
}
brow13{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 175px;
z-index:9999;
transform: rotate(160deg);
left:276px;
}
brow14{
position: absolute;
width: 15px;
height: 26px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 173px;
z-index:9999;
transform: rotate(160deg);
left:286px;
}
brow15{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 175px;
z-index:9999;
transform: rotate(160deg);
left:278px;
}
brow16{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 175px;
z-index:9999;
transform: rotate(160deg);
left:292px;
}
brow17{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 175px;
z-index:9999;
transform: rotate(160deg);
left:282px;
}
brow18{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 175px;
z-index:9999;
transform: rotate(160deg);
left:276px;
}
brow19{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 173px;
z-index:9999;
transform: rotate(160deg);
left:272px;
}
brow20{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 175px;
z-index:9999;
transform: rotate(160deg);
left:269px;
}
brow21{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 175px;
z-index:9999;
transform: rotate(160deg);
left:273px;
}
brow22{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 174px;
z-index:9999;
transform: rotate(160deg);
left:268px;
}
brow23{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 173px;
z-index:9999;
transform: rotate(160deg);
left:266px;
}
brow24{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 172px;
z-index:9999;
transform: rotate(160deg);
left:263px;
}
brow25{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 171px;
z-index:9999;
transform: rotate(150deg);
left:261px;
}
brow26{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 170px;
z-index:9999;
transform: rotate(150deg);
left:258px;
}
brow27{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 170px;
z-index:9999;
transform: rotate(150deg);
left:256px;
}
brow28{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 169px;
z-index:9999;
transform: rotate(150deg);
left:253px;
}
brow29{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 169px;
z-index:9999;
transform: rotate(150deg);
left:250px;
}
brow30{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 169px;
z-index:9999;
transform: rotate(150deg);
left:248px;
}
brow31{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 167px;
z-index:9999;
transform: rotate(150deg);
left:245px;
}
brow32{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 166px;
z-index:9999;
transform: rotate(150deg);
left:243px;
}
brow33{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 166px;
z-index:9999;
transform: rotate(150deg);
left:240px;
}
brow34{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 165px;
z-index:9999;
transform: rotate(150deg);
left:238px;
}
brow35{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 164px;
z-index:9999;
transform: rotate(150deg);
left:236px;
}
brow36{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 164px;
z-index:9999;
transform: rotate(150deg);
left:234px;
}
brow37{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 163px;
z-index:9999;
transform: rotate(150deg);
left:232px;
}
brow38{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 163px;
z-index:9999;
transform: rotate(150deg);
left:229px;
}
brow39{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 162px;
z-index:9999;
transform: rotate(150deg);
left:226px;
}
brow40{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 161px;
z-index:9999;
transform: rotate(150deg);
left:224px;
}
brow41{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 160px;
z-index:9999;
transform: rotate(150deg);
left:221px;
}
brow42{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 160px;
z-index:9999;
transform: rotate(150deg);
left:218px;
}
brow43{
position: absolute;
width: 15px;
height: 25px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 158px;
z-index:9999;
transform: rotate(120deg);
left:217px;
}
brow44{
position: absolute;
width: 15px;
height: 25px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 160px;
z-index:9999;
transform: rotate(120deg);
left:213px;
}
brow45{
position: absolute;
width: 15px;
height: 25px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 158px;
z-index:9999;
transform: rotate(120deg);
left:211px;
}
brow46{
position: absolute;
width: 15px;
height: 30px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 158px;
z-index:9999;
transform: rotate(120deg);
left:210px;
}
brow47{
position: absolute;
width: 15px;
height: 35px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 158px;
z-index:9999;
transform: rotate(120deg);
left:208px;
}
brow48{
position: absolute;
width: 15px;
height: 30px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 162px;
z-index:9999;
transform: rotate(120deg);
left:206px;
}
brow49{
position: absolute;
width: 15px;
height: 30px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 162px;
z-index:9999;
transform: rotate(120deg);
left:202px;
}
brow50{
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 164px;
z-index:9999;
transform: rotate(120deg);
left:198px;
}
brow51{
position: absolute;
width: 15px;
height: 25px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 167px;
z-index:9999;
transform: rotate(120deg);
left:196px;
}
brow52{
position: absolute;
width: 15px;
height: 25px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 168px;
z-index:9999;
transform: rotate(120deg);
left:192px;
}
brow53{
position: absolute;
width: 15px;
height: 25px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 170px;
z-index:9999;
transform: rotate(120deg);
left:189px;
}
brow54{
position: absolute;
width: 15px;
height: 20px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 174px;
z-index:9999;
transform: rotate(120deg);
left:186px;
}
brow55{
position: absolute;
width: 15px;
height: 20px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 175px;
z-index:9999;
transform: rotate(120deg);
left:182px;
}
brow56{
position: absolute;
width: 15px;
height: 20px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 178px;
z-index:9999;
transform: rotate(120deg);
left:179px;
}
brow57{
position: absolute;
width: 15px;
height: 20px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 180px;
z-index:9999;
transform: rotate(120deg);
left:175px;
}
brow58{
position: absolute;
width: 15px;
height: 15px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 185px;
z-index:9999;
transform: rotate(120deg);
left:173px;
}
brow59{
position: absolute;
width: 15px;
height: 15px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 186px;
z-index:9999;
transform: rotate(120deg);
left:168px;
}
brow60{
position: absolute;
width: 15px;
height: 15px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 189px;
z-index:9999;
transform: rotate(120deg);
left:165px;
}
brow61{
position: absolute;
width: 15px;
height: 10px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 194px;
z-index:9999;
transform: rotate(120deg);
left:162px;
}
brow62{
position: absolute;
width: 15px;
height: 10px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 198px;
z-index:9999;
transform: rotate(120deg);
left:159px;
}
brow63{
position: absolute;
width: 15px;
height: 7px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 202px;
z-index:9999;
transform: rotate(120deg);
left:156px;
}
brow64{
position: absolute;
width: 15px;
height: 7px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 205px;
z-index:9999;
transform: rotate(120deg);
left:153px;
}
brow65{
position: absolute;
width: 15px;
height: 5px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 208px;
z-index:9999;
transform: rotate(120deg);
left:151px;
}
brow66{
position: absolute;
width: 15px;
height: 5px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 210px;
z-index:9999;
transform: rotate(120deg);
left:150px;
}
brow67{
position: absolute;
width: 15px;
height: 2px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 214px;
z-index:9999;
transform: rotate(120deg);
left:148px;
}
brow68{
position: absolute;
width: 15px;
height: 2px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 216px;
z-index:9999;
transform: rotate(120deg);
left:147px;
}
brow69{
position: absolute;
width: 15px;
height: 2px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 217px;
z-index:9999;
transform: rotate(120deg);
left:146px;
}
eyebrow2{
position: absolute;
top: 199px;
left: 345px;
filter: blur(3px);
border-radius: 100% 0% 0 0;
background: #704b39;
width: 50px;
z-index: 2;
height: 10px;
transform: rotate(-40deg);
}
brow2-1{
position: absolute;
width: 15px;
height: 35px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 190px;
z-index:9999;
transform: rotate(50deg);
left:370px;
}
brow2-2{
position: absolute;
width: 15px;
height: 30px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 195px;
z-index:9999;
transform: rotate(50deg);
left:370px;
}
brow2-3{
position: absolute;
width: 15px;
height: 25px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 200px;
z-index:9999;
transform: rotate(50deg);
left:368px;
}
brow2-4{
position: absolute;
width: 10px;
height: 40px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 180px;
z-index:9999;
transform: rotate(40deg);
left:370px;
}
brow2-5{
position: absolute;
width: 15px;
height: 40px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 186px;
z-index:9999;
transform: rotate(50deg);
left:368px;
}
brow2-6{
position: absolute;
width: 15px;
height: 40px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 186px;
z-index:9999;
transform: rotate(40deg);
left:368px;
}
brow2-7{
position: absolute;
width: 15px;
height: 40px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 186px;
z-index:9999;
transform: rotate(30deg);
left:364px;
}
brow2-8{
position: absolute;
width: 15px;
height: 40px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 196px;
z-index:9999;
transform: rotate(50deg);
left:369px;
}
brow2-9{
position: absolute;
width: 15px;
height: 40px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 193px;
z-index:9999;
transform: rotate(48deg);
left:366px;
}
brow2-10{
position: absolute;
width: 15px;
height: 40px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 193px;
z-index:9999;
transform: rotate(55deg);
left:368px;
}
brow2-11{
position: absolute;
width: 15px;
height: 40px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 190px;
z-index:9999;
transform: rotate(40deg);
left:364px;
}
brow2-12{
position: absolute;
width: 15px;
height: 40px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 190px;
z-index:9999;
transform: rotate(50deg);
left:372px;
}
eye1{
clip-path: polygon(55% 28%, 74% 20%, 76% 19%, 78% 42%, 78% 47%, 72% 49%, 59% 44%, 37% 35%);
background: white;
width: 130px;
height: 130px;
position:absolute;
top: 200px;
left: 160px;
}
lash0{
filter: blur(1px);
position: absolute;
width: 30px;
height: 20px;
border-radius: 100%;
border-bottom: 2px solid #190c04;
background: transparent;
top: 214px;
z-index:99;
left: 255px;
}
lash1{
filter: blur(1px);
position: absolute;
width: 20px;
height: 20px;
border-radius: 100%;
border-bottom: 2px solid #190c04;
background: transparent;
top: 210px;
z-index:99;
left: 260px;
}
lash2{
filter: blur(1px);
position: absolute;
width: 20px;
height: 20px;
border-radius: 100%;
border-bottom: 2px solid #190c04;
background: transparent;
top: 207px;
z-index:99;
left: 258px;
}
lash3{
filter: blur(1px);
position: absolute;
width: 25px;
height: 20px;
border-radius: 100%;
border-bottom: 2px solid #190c04;
background: transparent;
top: 203px;
transform:rotate(-20deg);
z-index:99;
left: 257px;
}
lash4{
filter: blur(1px);
position: absolute;
width: 35px;
height: 20px;
border-radius: 100%;
border-bottom: 2px solid #190c04;
background: transparent;
top: 202px;
z-index:99;
left: 255px;
}
lash5{
filter: blur(1px);
position: absolute;
width: 35px;
height: 20px;
border-radius: 100%;
border-bottom: 2px solid #190c04;
background: transparent;
top: 206px;
z-index:99;
left: 250px;
}
lash6{
filter: blur(1px);
position: absolute;
width: 35px;
height: 20px;
border-radius: 100%;
border-bottom: 2px solid #190c04;
background: transparent;
top: 209px;
z-index:99;
left: 247px;
}
lash7{
filter: blur(1px);
position: absolute;
width: 35px;
height: 20px;
border-radius: 100%;
border-bottom: 2px solid #190c04;
background: transparent;
top: 212px;
z-index:99;
left: 242px;
}
lash8{
filter: blur(1px);
position: absolute;
width: 35px;
height: 20px;
border-radius: 100%;
border-bottom: 2px solid #190c04;
background: transparent;
top: 215px;
z-index:99;
left: 239px;
}
lash9{
filter: blur(1px);
position: absolute;
width: 35px;
height: 20px;
border-radius: 100%;
border-bottom: 2px solid #190c04;
background: transparent;
top: 217px;
z-index:99;
left: 236px;
}
lash10{
filter: blur(1px);
position: absolute;
width: 35px;
height: 20px;
border-radius: 100%;
border-bottom: 2px solid #190c04;
background: transparent;
top: 219px;
z-index:99;
transform: rotate(20deg);
left: 225px;
}
lash11{
filter: blur(1px);
position: absolute;
width: 30px;
height: 20px;
border-radius: 100%;
border-bottom: 2px solid #190c04;
background: transparent;
top: 222px;
z-index:99;
left: 225px;
transform: rotate(40deg);
}
lash12{
filter: blur(1px);
position: absolute;
width: 30px;
height: 20px;
border-radius: 100%;
border-bottom: 2px solid #190c04;
background: transparent;
top: 225px;
z-index:99;
left: 220px;
transform: rotate(50deg);
}
lash13{
filter: blur(1px);
position: absolute;
width: 20px;
height: 20px;
border-radius: 20%;
border-bottom: 1px solid #190c04;
background: transparent;
top: 226px;
z-index:99;
left: 220px;
transform: rotate(50deg);
}
lash14{
filter: blur(1px);
position: absolute;
width: 20px;
height: 15px;
border-radius: 20%;
border-bottom: 1px solid #190c04;
background: transparent;
top: 230px;
z-index:99;
left: 213px;
transform: rotate(50deg);
}
lash15{
filter: blur(1px);
position: absolute;
width: 20px;
height: 20px;
border-radius: 20%;
border-bottom: 1px solid #190c04;
background: transparent;
top: 230px;
z-index:99;
left: 214px;
transform: rotate(50deg);
}
lash16{
filter: blur(1px);
position: absolute;
width: 20px;
height: 20px;
border-radius: 100%;
border-bottom: 1px solid #190c04;
background: transparent;
top: 234px;
z-index:99;
left: 220px;
transform: rotate(-120deg);
}
lash17{
filter: blur(1px);
position: absolute;
width: 20px;
height: 20px;
border-radius: 100%;
border-bottom: 1px solid #190c04;
background: transparent;
top: 234px;
z-index:99;
left: 215px;
transform: rotate(-120deg);
}
lash18{
filter: blur(1px);
position: absolute;
width: 20px;
height: 20px;
border-radius: 100%;
border-bottom: 1px solid #190c04;
background: transparent;
top: 234px;
z-index:99;
left: 210px;
transform: rotate(-120deg);
}
lash19{
filter: blur(1px);
position: absolute;
width: 20px;
height: 20px;
border-radius: 100%;
border-bottom: 1px solid #190c04;
background: transparent;
top: 236px;
z-index:99;
left: 205px;
transform: rotate(-120deg);
}
lash20{
filter: blur(1px);
position: absolute;
width: 20px;
height: 20px;
border-radius: 100%;
border-bottom: 1px solid #190c04;
background: transparent;
top: 236px;
z-index:99;
left: 200px;
transform: rotate(-120deg);
}
lash21{
filter: blur(1px);
position: absolute;
width: 20px;
height: 20px;
border-radius: 100%;
border-bottom: 1px solid #190c04;
background: transparent;
top: 237px;
z-index:99;
left: 195px;
transform: rotate(-120deg);
}
lash22{
filter: blur(1px);
position: absolute;
width: 20px;
height: 20px;
border-radius: 100%;
border-bottom: 1px solid #190c04;
background: transparent;
top: 237px;
z-index:99;
left: 190px;
transform: rotate(-120deg);
}
lash-d1{
filter: blur(1px);
position: absolute;
width: 15px;
height: 10px;
border-radius: 100%;
border-top: 1px solid #532f17;
background: transparent;
top: 270px;
z-index:99;
left: 258px;
transform: rotate(50deg);
}
lash-d2{
filter: blur(1px);
position: absolute;
width: 15px;
height: 10px;
border-radius: 100%;
border-top: 1px solid #532f17;
background: transparent;
top: 270px;
z-index:99;
left: 254px;
transform: rotate(50deg);
}
lash-d3{
filter: blur(1px);
position: absolute;
width: 15px;
height: 10px;
border-radius: 100%;
border-top: 1px solid #532f17;
background: transparent;
top: 270px;
z-index:99;
left: 248px;
transform: rotate(50deg);
}
lash-d4{
filter: blur(1px);
position: absolute;
width: 15px;
height: 10px;
border-radius: 100%;
border-top: 1px solid #532f17;
background: transparent;
top: 268px;
z-index:99;
left: 238px;
transform: rotate(50deg);
}
lash-d5{
filter: blur(1px);
position: absolute;
width: 15px;
height: 10px;
border-radius: 100%;
border-top: 1px solid #532f17;
background: transparent;
top: 266px;
z-index:99;
left: 230px;
transform: rotate(50deg);
}
lash-d6{
filter: blur(1px);
position: absolute;
width: 15px;
height: 10px;
border-radius: 100%;
border-top: 1px solid #532f17;
background: transparent;
top: 262px;
z-index:99;
left: 220px;
transform: rotate(50deg);
}
lash-d7{
filter: blur(1px);
position: absolute;
width: 15px;
height: 10px;
border-radius: 100%;
border-top: 1px solid #532f17;
background: transparent;
top: 263px;
z-index:99;
left: 215px;
transform: rotate(50deg);
}
lash1-2{
filter: blur(1px);
position: absolute;
width: 30px;
height: 20px;
border-radius: 100%;
border-bottom: 1px solid #190c04;
background: transparent;
top: 215px;
z-index:-9;
left: 340px;
}
lash2-2{
filter: blur(1px);
position: absolute;
width: 30px;
height: 20px;
border-radius: 100%;
border-bottom: 1px solid #190c04;
background: transparent;
top: 214px;
z-index:-9;
left: 340px;
}
lash3-2{
filter: blur(1px);
position: absolute;
width: 30px;
height: 20px;
border-radius: 100%;
border-bottom: 1px solid #190c04;
background: transparent;
top: 217px;
z-index:-9;
left: 340px;
}
lash4-2{
filter: blur(1px);
position: absolute;
width: 30px;
height: 20px;
border-radius: 100%;
border-bottom: 1px solid #190c04;
background: transparent;
top: 217px;
z-index:-9;
transform: rotate(-30deg);
left: 340px;
}
lash5-2{
filter: blur(1px);
position: absolute;
width: 30px;
height: 20px;
border-radius: 100%;
border-bottom: 1px solid #190c04;
background: transparent;
top: 215px;
z-index:-9;
left: 340px;
}
lash6-2{
filter: blur(1px);
position: absolute;
width: 30px;
height: 20px;
border-radius: 100%;
border-bottom: 1px solid #190c04;
background: transparent;
top: 217px;
z-index:-9;
transform: rotate(-30deg);
left: 340px;
}
lash7-2{
filter: blur(1px);
position: absolute;
width: 30px;
height: 20px;
border-radius: 100%;
border-bottom: 1px solid #190c04;
background: transparent;
top: 222px;
z-index:-9;
left: 340px;
}
lash8-2{
filter: blur(1px);
position: absolute;
width: 30px;
height: 20px;
border-radius: 100%;
border-bottom: 1px solid #190c04;
background: transparent;
top: 224px;
z-index:-9;
left: 336px;
}
lash9-2{
filter: blur(1px);
position: absolute;
width: 30px;
height: 20px;
border-radius: 100%;
border-bottom: 1px solid #190c04;
background: transparent;
top: 227px;
z-index:-9;
left: 334px;
}
lash10-2{
filter: blur(1px);
position: absolute;
width: 30px;
height: 20px;
border-radius: 100%;
border-bottom: 1px solid #190c04;
background: transparent;
top: 230px;
z-index:-9;
left: 334px;
}
lash11-2{
filter: blur(1px);
position: absolute;
width: 30px;
height: 20px;
border-radius: 100%;
border-bottom: 1px solid #190c04;
background: transparent;
top: 234px;
z-index:-9;
left: 334px;
}
lash12-2{
filter: blur(1px);
position: absolute;
width: 30px;
height: 20px;
border-radius: 100%;
border-bottom: 1px solid #190c04;
background: transparent;
top: 236px;
z-index:-9;
left: 330px;
}
lash13-2{
filter: blur(1px);
position: absolute;
width: 30px;
height: 20px;
border-radius: 100%;
border-bottom: 1px solid #190c04;
background: transparent;
top: 240px;
z-index:-9;
left: 330px;
}
eyeball{
z-index: 1;
background: #7c8788;
width: 25px;
border-radius: 100%;
height: 40px;
position:absolute;
top: 222px;
left: 240px;
box-shadow: inset 0px -5px 10px #5e6164,inset 0px -6px 10px #818a89,inset 5px -2px 10px #676b67,inset -10px 0px 10px #bebfbe,inset -12px 0px 1px #a2a2a3;
}
eyeball::after{
background:#2e2b27;
content:"";
width: 20px;
border-radius: 100%;
height: 25px;
filter:blur(2px);
position:absolute;
top: 5px;
left: 2px;
}
eyeball::before{
background:#d4d7da;
content:"";
width: 10px;
border-radius: 100%;
height: 15px;
position:absolute;
top: 6px;
left: 6px;
opacity: 0.8;
z-index: 2;
transform: rotate(-30deg);
}
shadowoneye{
background:#60605e;
width: 3px;
height: 10px;
position: absolute;
top: 240px;
transform: rotate(-20deg);
left: 255px;
}
shadowoneye::after{
background:#bbb8b2;
content: "";
width: 18px;
height: 6px;
left: -5px;
top: 7px;
opacity: 0.7;
position: absolute;
filter: blur(1px);
transform: rotate(-230deg);
}
shadowoneye::before{
background:#859190;
content: "";
width: 15px;
height: 4px;
left: -12px;
top: 7px;
opacity: 0.7;
position: absolute;
filter: blur(2px);
transform: rotate(20deg);
}
eyelashtop{
clip-path: polygon(51% 22%, 73% 17%, 70% 18%, 35% 37%, 65% 55%, 51% 50%, 34% 43%, 22% 36%, 35% 29%);
position: absolute;
width: 180px;
left:140px;
top: 190px;
height: 150px;
background:#221715;
opacity: 0.5;
z-index:99;
box-shadow: 0px 3px #120c09;
}
eyelashtop2{
position: absolute;
width: 80px;
left:190px;
transform: rotate(-25deg);
top: 224px;
height: 15px;
background:#413c38;
filter: blur(5px);
z-index:99;
}
lashbody{
position: absolute;
width:70px;
left:199px;
transform: rotate(-20deg);
top: 232px;
height: 4px;
background:#1a120f;
z-index:99;
filter:blur(2px);
box-shadow: 0px -4px #716966;
}
eyelashbottom{
position: absolute;
width: 70px;
left:200px;
transform: rotate(20deg);
top: 260px;
height: 6px;
background:#573d3c;
border-radius: 100%;
z-index:99;
filter: blur(3px);
box-shadow: 0px 5px #ac847a;
}
eyecorner{
clip-path: polygon(50% 0, 61% 16%, 61% 22%, 61% 27%, 58% 32%, 57% 27%, 53% 21%, 45% 11%);
background:#caab8f;
position: absolute;
top: 235px;
filter: blur(50px);
left: 205px;
width: 100px;
height: 120px;
transform: rotate(10deg);
}
eyecorner1{
background:#deb99f;
width: 10px;
height:10px;
filter: blur(2px);
border-radius: 100%;
position: absolute;
top: 260px;
left: 258px;
}
eyecorner1::after{
content:"";
clip-path: polygon(50% 0, 61% 16%, 61% 22%, 61% 27%, 58% 32%, 57% 27%, 53% 21%, 45% 11%);
background:#af5c3a;
position: absolute;
top: -20px;
left: -45px;
width: 80px;
height: 80px;
transform: rotate(10deg);
}
eyelid{
position: absolute;
background:#c5a99d;
width: 120px;
height: 20px;
top: 200px;
left: 160px;
transform: rotate(-20deg);
filter: blur(10px);
z-index:8;
}
eyelid::after{
content:"";
background-image: linear-gradient(to right top, #9f9794, #b2a9a5, #c5bcb6, #d8cfc7, #ebe2d9);
position: absolute;
width: 140px;
height: 30px;
top: -30px;
left: -20px;
z-index: -2;
filter: blur(10px);
}
eyelid::before{
content:"";
background-image: linear-gradient(to right top, #9f9794, #b2a9a5, #c5bcb6, #d8cfc7, #ebe2d9);
position: absolute;
width: 40px;
height: 30px;
top: -10px;
left: -40px;
z-index: -2;
filter: blur(10px);
transform: rotate(-140deg);
}
undereye{
background:#f1e9de;
position: absolute;
width: 30px;
height: 60px;
top: 240px;
left: 270px;
transform: rotate(10deg);
border-radius: 0px 200px 100px 0px;
filter: blur(10px);
}
Also see: Tab Triggers