Fun Face Using Pure html

List of Material Desing

Buttons style Try it

Radio Button Try it

Mac CSS Loader Try it

Digital_clock Try it

Notification Alert Glow Try it

Skeleton Screen Loading Try it

YouTube Video Play And pause Try it

Pure CSS Tooltip Try it

Box Hovering Effects Try it

Windows Loader Animation Try it

Multi level Navigation Menu Try it

Input Field Placeholder Effects Try it

Full Page Loader Try it

Card and Button Special Loader Try it

Basic Calculator Try it

Simple Box hovering Try it

Material Design Box Try it

Material Menu Icon Change to Back Button Try it

Long Press Event Using Pure Javascript Try it

Switch Button Using Pure CSS Try it

Main Page Loader Pure CSS Try it

Fun face Pure CSS Try it

Material card Animation Pure CSS Try it

vertical navigation design Try it

Responsive Animation Navigation Try it

Tabs - Material Design Try it

Accordion Collapsible Content Panels Try it

Vertical Tabs - Material Design Try it

Dropdown - Material Design Try it

Jquery Search Filter Try it

CSS Ellipsis Multiline Example Try it

Email Validation With Jquery Try it

Checking if an input is empty with JavaScript Try it

Number Validation In Javascript Try it

How to add calendar in html form using javascript Try it

Iphone Style Toggle Button CSS Try it

Bounce Animation Pure CSS Try it

Value Change Animation Jquery Try it

Material CheckBox Animation Try it

Material Success Icon animation css Try it

How TO - Hover Parent MouseOver child will show Animation Try it

How TO - TODO List Using Pure javascript Try it

How TO - Table Multi Checkbox Try it

How TO - Pure CSS Loading Circle Try it

How TO - Circular Progress Bar With Plain HTML and CSS Try it

How TO - CSS Animated Notification Icon And Badge Count HTML and CSS Try it

How TO - hover tick animation CSS3 Try it

CSS Buttons hover effects Try it

glow effects Try it

Skeleton Table Loading Try it

Important notification banner display Try it

Success message with ripple effects in material design Try it

Box with ripple effects in material design Try it

<!DOCTYPE html>
	<html>
	<head>
		<title>Page Title</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
	</head>
	<style>
	
	.face{
    width: 100px;
    height: 100px;
    border: 1px solid;
    border-radius: 50%;
    margin: 100px 40px;
    background: #eac086;
    position: relative;

}
  .face:before{
    content: "";
    background-image: url(../img/hair_face.png);
    width: 145px;
    height: 91px;
    display: inline-block;
    position: absolute;
    background-size: cover;
    top: -44px;
    left: -14%;
    background-position: center;
  }
  .bling{
  width: 15px;
    height: 15px;
    background: black;
    border-radius: 50%;
    animation: bling-ey 0.8s ease infinite;
    position: relative;
    top: 21px;
    left: 17px;
  }
  .blinga{
  width: 15px;
    height: 15px;
    background: black;
    border-radius: 50%;    
    position: relative;
    top: 21px;
    left: 17px;
  }
  .left{
     position: relative;
    display: inline-block;
    left: 64%;
    top: 4px;
  }
  @keyframes bling-ey {
    0%{
       transform: rotateX(90deg);
       }
    100%{
          transform: rotateX(0deg);
    }
  }
  .happy-line{
    width: 41px;
    height: 27px;
    background: none;
    bottom: 20px;
    top: 54%;
    left: 35%;
    position: absolute;
    border: 1px solid;
    border-radius: 50%;
    border-top: 1px solid transparent;
    border-left: 1px solid transparent;
    transform: rotate(16deg);
  }
  .text{
    position:absolute;
    bottom:0px;
    right:-90px;
    
  }
	
	</style>
	<body>

<div class="face">
    <div class="bling">
</div>
    <div class="blinga left"></div>
    <div class="happy-line"></div>
    <div class="text">--W3Samples</div>
</div>
		
	</body>
	<script>
	 
        
	</script>
	</html>