4-Add the Mouth

Let's Put a Smile on that Face!

Add a little more to your html file:

<body>
    <div class="wrapper">
        <h1>CSS Smiley Face</h1>
        <div class="face">
            <div class="lefteye">
                <div id="inner-left"></div>
            </div>
            <div class="righteye">
                <div id="inner-right"></div>
            </div>
            <!-- Add new code here -->
            <div class="mouth"></div>
        </div>
    </div>
</body>

Now, let's go into our CSS file again:

.mouth {
  width: 30px;
  height: 10px;
  border: solid 1px black;
  border-radius: 0px 0px 45px 45px; /* What's going on here?? */
  margin: 16px;
  position: relative;
  top: 1em; /* What is an 'em' and how is it different from 'px'? */
  left: 1em;
  background-color: black;
}

Great! We Have a Face!

You should now see a full smiley face with the h1 title above it. Now, let's customize!

Previous3-Add the Right EyeNext5-Challenge

Last updated