Skip to content

Instantly share code, notes, and snippets.

@diegopso

diegopso/smile.html

Created November 6, 2015 21:10
Show Gist options
  • Save diegopso/9d8f5b1a8ee52fb2e206 to your computer and use it in GitHub Desktop.
Save diegopso/9d8f5b1a8ee52fb2e206 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
smile.html
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<style type="text/css">
.exemplo {
width: 200px;
height: 200px;
border-radius: 100px;
box-shadow: 5px 5px 5px #555;
margin-top: 75px;
overflow: hidden;
}
.eye1, .eye2 {
background: repeating-radial-gradient(black, 7px, black, 7px, white);
background-position: 5px 7px;
width: 25px;
height: 75px;
background-color: white;
border-radius: 100%;
float: left;
margin-left: 30px;
margin-top: 15px;
}
.eye2 {
left: 120px;
}
.boca {
width: 150px;
height: 50px;
overflow: hidden;
position: absolute;
top: 195px;
left: 40px;
}
.labios {
height: 350px;
width: 250px;
border-radius: 100%;
border: 3px solid black;
float: left;
top: 40px;
left: 25px;
position: relative;
}
.cor-rosto {
background: repeating-radial-gradient(#f8b500, #fccd4d);
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="container">
<div class="col-sm-4 col-sm-offset-4">
<div class="exemplo">
<div class="eye1"></div>
<div class="eye2"></div>
<div class="boca">
<div class="labios"></div>
</div>
<div class="cor-rosto"></div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment