Skip to content

Latest commit

 

History

History
15 lines (11 loc) · 2.44 KB

README.md

File metadata and controls

15 lines (11 loc) · 2.44 KB

Robot Emoji

Tag: CSS

You're given an HTML file with the markup for a robot head emoji.

Using only CSS, style the HTML to have the appearance of a robot emoji with the following characteristics:

  • The head should be a perfect square with a width and height of 150px, a margin of 50px, and a background color of #A4D9EB. The head should also have a solid, #9BBCC2, 5px border and a 20px border-radius.
  • A light should be positioned on top of the head's border. This light should be horizontally centered with respect to the head. The bulb should be a perfect circle with a width and height of 30px and a background color of #FFA500. The light's stick should be a rectangle with a width of 10px, a height of 15px, and a background color of #808080. The bulb should be positioned on top of the stick, with 5px of overlap.
  • The ears should each be rectangles with widths of 10px, heights of 50px, and background colors of #C90A0A. They should be positioned against the left and right sides of the head's border. The left ear should have a top-left and bottom-left border-radius of 5px, and the right ear should have a top-right and bottom-right border-radius of 5px. The ears should be vertically centered with respect to the head.
  • The eyes should be perfect circles, each with a width and height of 30px. They should be positioned 25px from the top of the head (30px from the top of the head's border). There should be 20px of gap between the eyes, and they should be horizontally centered in the head. Each eye should have a background color of white, and a solid, #00B3FF, 5px border.
  • The nose should be a triangle with a color of #C90A0A. This triangle should have a width and height of 30px. The triangle should be pointed up (i.e. the 30px edge should be parallel to the bottom of the head). The nose should be horizontally and vertically centered in the head.
  • The mouth should have a width of 100px, a height of 25px and a background color of #DEDEDE, and a solid, black, 1px border with a 20px border-radius. The mouth should be 25px from the bottom of the head (30px from the bottom of the head's border), and it should be horizontally centered.
  • The mouth contains 4 teeth, each of which has a width of a 5px and a background color of black. These teeth should take up the entire height of the mouth without overflowing out of the mouth. There should be even horizontal spacing between each tooth, with half as much space before the first tooth and after the last tooth.