<!DOCTYPE html> <html> <head> <style> .smiling-face{ width:200px; height:200px; background-color:yellow; border-radius:50%; position:relative; } .left-eye{ width:23%; height:20%; border-radius:45%; background-color:rgb(240,240,240); position:absolute; left:20%; top:20%; } .right-eye{ width:23%; height:20%; border-radius:45%; background-color:rgb(240,240,240); position:absolute; right:20%; top:20%; } .left-pupil{ width:48%; height:45%; border-radius:50%; background-color:rgb(100,100,100); position:absolute; top:55%; /* 55 = 100 (total) - 45 (height) */ left:26%; /* 26 = 50 (half of total) - 24 (half of width) */ } </style> </head> <body> <div class="smiling-face"> <span class="left-eye"> <span class="left-pupil"> </span> </span> <span class="right-eye"> </span> </div> </body> </html>
Run
×
Share