<meta charset="UTF-8"> <title>A happy face</title> <style> .face{ height:400px; width:400px; border:3px solid black; border-radius:50%; background: #FFF2E6; position:absolute; left:50%; top:50%; margin-top:-203px; margin-left:-203px; } .eye1{ height:80px; width:100px; border:3px solid; border-color: #4DC3FF; border-radius:50%; position:absolute; left:70px; top:100px; } .eye2{ height:80px; width:100px; border:3px solid; border-color: #4DC3FF; border-radius:50%; position:absolute; right:70px; top:100px; } .mouth{ height:80px; width:100px; border:3px solid black; border-radius:50%; position:absolute; right:150px; bottom:60px; } .son{ height:160px; width:260px; background:#FFF2E6; position:absolute; bottom:100px; left:70px; } </style></head> <body>
<div class="face">
<div class="eye1"></div> <div class="eye2"></div> <div class="mouth"></div> <div class="son"></div></div> </body> </html>
<title>Test</title> <style type="text/css"> div.face { float: left; background-color: sandybrown; border: 1px solid darkgoldenrod; padding: 50px; margin: 50px; box-sizing: border-box; }
div.eye { display: inline; margin: 25px; border: 25px solid brown; border-radius: 50px; background-color: brown; }
div.line { border-bottom: 1px solid brown; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; padding-top: 50px;
} } </style>
<div class="face"> <div class="eye"> </div> <div class="eye"> </div> <div class="line"> </div> </div>
font-style: italic; background-color: tan; display: inline-block; border-width: 100px; border-style:hidden; width: 100pt; height: 100pt; border-radius: 30000px;} reye{
position: absolute; top: 40px; left:40px; font-style: italic; background-color: green; display: inline-block; border-width: 100px; border-style:hidden; width: 10pt; height: 10pt; border-radius: 30000px;} leye{
position: absolute; top: 40px; left:80px; font-style: italic; background-color: green; display: inline-block; border-width: 100px; border-style:hidden; width: 10pt; height: 10pt; border-radius: 30000px;} mouth{
position: absolute; top: 100px; left:60px; font-style: italic; background-color: red; display: inline-block; border-width: 100px; border-style:hidden; width: 30pt; height: 10pt; border-radius: 30000px;} </style> </head> <body> <face></face>
<reye></reye> <leye> </leye></body>
<mouth> </mouth>
border-radius:150%; background: plum; height:400px; width:300px; border:1px ;
position: absolute; top: 100px; left:60px; font-style: italic; background-color: blue; display: inline-block; width: 50pt; height: 50pt; border-radius: 50%;} div.eye2{
position: absolute; top: 100px; left:180px; font-style: italic; background-color: blue; display: inline-block; width: 50pt; height: 50pt; border-radius: 50%;} div.nose{
position: absolute; top: 200px; left:120px; font-style: italic; background-color: beige; display: inline-block; width: 50pt; height: 50pt; border-radius: 50%;}
position: absolute; top: 270px; left:90px; font-style: italic; background-color: beige; display: inline-block; width: 100pt; height: 30pt; border-radius: 50%;}</style> </head> <body> <div class="face">
<div class="eye1"></div> <div class="eye2"></div> <div class="nose"></div> <div class="mouth"></div></div>
</body> </html>
.head{ height:400px; width:400px; border:1px solid black; border-radius:50%; } .lefteye{ display:inline-block ; height:80px; width:100px; border:1px solid; border-radius:50%; margin-left:50px; margin-top:90px; } .righteye{ display:inline-block; height:80px; width:100px; border:1px solid; border-radius:50%; margin-left:50px; } .mouth{ height:80px; width:100px; margin-left:150px; border:1px solid black; border-radius:50%; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; }
<head> <meta charset="utf-8" /> <title>Smiley Face</title> <style> .face { height: 500px; width: 500px; border-radius: 50%; border: solid 1px; background-color: #d2b48c; position: relative; } .right-eye { position: absolute; left: 150px; top: 100px; height: 75px; width: 50px; border-radius: 50%; border: solid 1px; background-color: blue; } .left-eye { position: absolute; left: 300px; top: 100px; height: 75px; width: 50px; border-radius: 50%; border: solid 1px; background-color: blue; } .mouth { width: 200px; height: 100px; /* as the half of the width */ background-color: pink; border-bottom-left-radius: 110px; border-bottom-right-radius: 110px; border: 1px solid black; border-bottom: 0; position: absolute; left: 150px; top: 300px; } </style> </head> <body> <div class="face"> <div class="right-eye"></div> <div class="left-eye"></div> <div class="mouth"></div> </div> </body></html>
<head> <title>Happy Face</title> <meta charset="utf-8" /> <style> .face { height: 500px; width: 500px; border: 5px solid black; border-radius: 100%; background: yellow; } .right-eye{ height: 50px; width: 50px; border: 5px solid black; border-radius: 100%; background: black; margin-left:25%; margin-top: 25%; } .left-eye{ height: 50px; width: 50px; border: 5px solid black; border-radius: 100%; background: black; margin-left:65%; margin-top: -12%; } .mouth{ border-bottom:8px solid black; margin-left:25%; margin-top: 20%; height: 100px; width: 250px; border-radius:100%; } </style> </head> <body> <div class = "face"> <div class = "right-eye"> </div> <div class = left-eye> </div> <div class = "mouth"> </div> </div> </body></html>