3-Add the Right Eye

Do A Lot of the Same Thing

Let's add more that our html, and let's go ahead and add both the .righteye and #inner-right divs:

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

Now, let's go into our CSS file and add features for the right eye (NOTE: there are some differences from the left eye!):

.righteye {
  width: 6px;
  height: 6px;
  border: solid 1px black;
  border-radius: 3px;
  z-index: 1;
  position: relative;
  left: 54px;
  top: 18px;
  background-color: black;
}

Now, Let's Add Another Pupil!

This time, notice how it is the exact same as #inner-left. Why is that?

.righteye {
  width: 6px;
  height: 6px;
  border: solid 1px black;
  border-radius: 3px;
  z-index: 1;
  position: relative;
  left: 54px;
  top: 18px;
  background-color: black;
}

/* Add new code here */
#inner-right {
  width: 2px;
  height: 2px;
  border: solid 1px white;
  position: relative;
  left: 2px;
  top: 2px;
  background-color: white;
}

Great! Now We Have Our Eyes!

You should now see that your smiley face has both eyes looking at you (it is probably a little creepy)!

Previous2-Add the Left EyeNext4-Add the Mouth

Last updated