272 lines
6.6 KiB
HTML
272 lines
6.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" >
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>CodePen - CSS User Avatars</title>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./style.css">
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- partial:index.partial.html -->
|
||
|
|
<div class="smile smile-happy">
|
||
|
|
<div class="eyes cf">
|
||
|
|
<div class="eye eye-right"></div>
|
||
|
|
<div class="eye eye-left"></div>
|
||
|
|
</div>
|
||
|
|
<div class="shy-circles cf">
|
||
|
|
<div class="shy shy-left"></div>
|
||
|
|
<div class="shy shy-right"></div>
|
||
|
|
</div>
|
||
|
|
<div class="mouth"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="smile tired">
|
||
|
|
<div class="eyes cf">
|
||
|
|
<div class="eye eye-right"></div>
|
||
|
|
<div class="eye eye-left"></div>
|
||
|
|
</div>
|
||
|
|
<div class="mouth"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="smile bored">
|
||
|
|
<div class="eyes cf">
|
||
|
|
<div class="eye eye-right"></div>
|
||
|
|
<div class="eye eye-left"></div>
|
||
|
|
</div>
|
||
|
|
<div class="shy-circles cf">
|
||
|
|
<div class="shy shy-left"></div>
|
||
|
|
<div class="shy shy-right"></div>
|
||
|
|
</div>
|
||
|
|
<div class="mouth"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="smile replete">
|
||
|
|
<div class="star"><span></span></div>
|
||
|
|
<div class="eyes cf">
|
||
|
|
<div class="eye eye-left"></div>
|
||
|
|
<div class="eye eye-right"></div>
|
||
|
|
</div>
|
||
|
|
<div class="shy-circles cf">
|
||
|
|
<div class="shy shy-left"></div>
|
||
|
|
<div class="shy shy-right"></div>
|
||
|
|
</div>
|
||
|
|
<div class="mouth"><span></span></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="smile funny">
|
||
|
|
<div class="eyebrow"></div>
|
||
|
|
<div class="eyes cf">
|
||
|
|
<div class="eye eye-left"></div>
|
||
|
|
<div class="eye eye-right"></div>
|
||
|
|
</div>
|
||
|
|
<div class="nose"></div>
|
||
|
|
<div class="angry">
|
||
|
|
<div class="right"></div>
|
||
|
|
<div class="left"></div>
|
||
|
|
</div>
|
||
|
|
<div class="circles">
|
||
|
|
<div></div>
|
||
|
|
<div></div>
|
||
|
|
<div></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="smile polite">
|
||
|
|
<div class="eyes cf">
|
||
|
|
<div class="eye eye-right"></div>
|
||
|
|
<div class="eye eye-left"></div>
|
||
|
|
</div>
|
||
|
|
<div class="shy-circles cf">
|
||
|
|
<div class="shy shy-left"></div>
|
||
|
|
<div class="shy shy-right"></div>
|
||
|
|
</div>
|
||
|
|
<div class="mouth"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="smile sick">
|
||
|
|
<div class="eyes cf">
|
||
|
|
<div class="eye eye-right"></div>
|
||
|
|
<div class="eye eye-left"></div>
|
||
|
|
</div>
|
||
|
|
<div class="ring"></div>
|
||
|
|
<div class="shy-circles cf">
|
||
|
|
<div class="shy shy-left"></div>
|
||
|
|
<div class="shy shy-right"></div>
|
||
|
|
</div>
|
||
|
|
<div class="mouth"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="smile stupid">
|
||
|
|
<div class="shy-circles cf">
|
||
|
|
<div class="shy shy-left"></div>
|
||
|
|
<div class="shy shy-right"></div>
|
||
|
|
</div>
|
||
|
|
<div class="top">
|
||
|
|
<div class="box"></div>
|
||
|
|
<div class="box2"><span></span></div>
|
||
|
|
</div>
|
||
|
|
<div class="mouth"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="smile brat">
|
||
|
|
<div class="eyes cf">
|
||
|
|
<div class="eye eye-right"></div>
|
||
|
|
<div class="eye eye-left"></div>
|
||
|
|
</div>
|
||
|
|
<div class="shy-circles cf">
|
||
|
|
<div class="shy shy-left"></div>
|
||
|
|
<div class="shy shy-right"></div>
|
||
|
|
</div>
|
||
|
|
<div class="mouth">
|
||
|
|
<span class="circle"></span>
|
||
|
|
<span class="border"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="smile masked">
|
||
|
|
<div class="ring"></div>
|
||
|
|
<div class="eyes cf">
|
||
|
|
<div class="eye eye-right"></div>
|
||
|
|
<div class="eye eye-left"></div>
|
||
|
|
</div>
|
||
|
|
<div class="shy-circles cf">
|
||
|
|
<div class="shy shy-left"></div>
|
||
|
|
<div class="shy shy-right"></div>
|
||
|
|
</div>
|
||
|
|
<div class="mouth">
|
||
|
|
<div class="inside"><span></span></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="smile summer">
|
||
|
|
<div class="eyes">
|
||
|
|
<div class="eye eye-left"></div>
|
||
|
|
<div class="eye eye-right"></div>
|
||
|
|
</div>
|
||
|
|
<div class="shy-circles cf">
|
||
|
|
<div class="shy shy-left"></div>
|
||
|
|
<div class="shy shy-right"></div>
|
||
|
|
</div>
|
||
|
|
<div class="mouth"><span></span></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="smile sad">
|
||
|
|
<div class="eyes cf">
|
||
|
|
<div class="eye eye-left"></div>
|
||
|
|
<div class="eye eye-right"></div>
|
||
|
|
</div>
|
||
|
|
<div class="shy-circles cf">
|
||
|
|
<div class="shy shy-left"></div>
|
||
|
|
<div class="shy shy-right"></div>
|
||
|
|
</div>
|
||
|
|
<div class="mouth"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="smile suprised">
|
||
|
|
<div class="eyes cf">
|
||
|
|
<div class="eye eye-right"></div>
|
||
|
|
<div class="eye eye-left"></div>
|
||
|
|
</div>
|
||
|
|
<div class="shy-circles cf">
|
||
|
|
<div class="shy shy-left"></div>
|
||
|
|
<div class="shy shy-right"></div>
|
||
|
|
</div>
|
||
|
|
<div class="mouth"><span></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="smile crazy">
|
||
|
|
<div class="eyes cf">
|
||
|
|
<div class="eye eye-right"></div>
|
||
|
|
<div class="eye eye-left"></div>
|
||
|
|
</div>
|
||
|
|
<div class="shy-circles cf">
|
||
|
|
<div class="shy shy-left"></div>
|
||
|
|
<div class="shy shy-right"></div>
|
||
|
|
</div>
|
||
|
|
<div class="mouth"><span></span></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="smile pixel">
|
||
|
|
<div class="eyes cf">
|
||
|
|
<div class="eye eye-right">
|
||
|
|
<span class="bottom-left"></span>
|
||
|
|
<span class="bottom-right"></span>
|
||
|
|
<span class="top-left"></span>
|
||
|
|
<span class="top-right"></span>
|
||
|
|
</div>
|
||
|
|
<div class="eye eye-left">
|
||
|
|
<span class="bottom-left"></span>
|
||
|
|
<span class="bottom-right"></span>
|
||
|
|
<span class="top-left"></span>
|
||
|
|
<span class="top-right"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="shy-circles cf">
|
||
|
|
<div class="shy shy-left"></div>
|
||
|
|
<div class="shy shy-right"></div>
|
||
|
|
</div>
|
||
|
|
<div class="mouth">
|
||
|
|
<span class="left"></span>
|
||
|
|
<span class="right"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="smile ring-eyes">
|
||
|
|
<div class="eyes-wrapper cf">
|
||
|
|
<div class="eyes">
|
||
|
|
<div class="eye eye-right"></div>
|
||
|
|
<div class="eye eye-left"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="shy-circles cf">
|
||
|
|
<div class="shy shy-left"></div>
|
||
|
|
<div class="shy shy-right"></div>
|
||
|
|
</div>
|
||
|
|
<div class="mouth"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="smile crying">
|
||
|
|
<div class="eyes cf">
|
||
|
|
<div class="eye eye-right"></div>
|
||
|
|
<div class="eye eye-left"></div>
|
||
|
|
</div>
|
||
|
|
<div class="shy-circles cf">
|
||
|
|
<div class="shy shy-left"></div>
|
||
|
|
<div class="shy shy-right"></div>
|
||
|
|
</div>
|
||
|
|
<div class="mouth">
|
||
|
|
<span class="left"></span>
|
||
|
|
<span class="right"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="smile music">
|
||
|
|
<div class="eyes cf">
|
||
|
|
<div class="eye eye-right"></div>
|
||
|
|
<div class="eye eye-left"></div>
|
||
|
|
</div>
|
||
|
|
<div class="music-note cf">
|
||
|
|
<span class="left"></span>
|
||
|
|
<span class="right"></span>
|
||
|
|
</div>
|
||
|
|
<div class="mouth"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="smile nerd">
|
||
|
|
<div class="eyes cf">
|
||
|
|
<div class="eye eye-right"></div>
|
||
|
|
<div class="eye eye-left"></div>
|
||
|
|
</div>
|
||
|
|
<div class="shy cf">
|
||
|
|
<div class="shy-left"></div>
|
||
|
|
<div class="shy-right"></div>
|
||
|
|
</div>
|
||
|
|
<div class="mouth"></div>
|
||
|
|
</div>
|
||
|
|
<!-- partial -->
|
||
|
|
<script src="./script.js"></script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|