Skip to content

Latest commit

 

History

History
27 lines (20 loc) · 1.24 KB

018-profile-page-3.md

File metadata and controls

27 lines (20 loc) · 1.24 KB

Objectives

After this exercise, you should be able to:

  • Use CSS to improve the look of your profile

Example

Your profile was pretty bomb after you updated it last, but it looked a little bare. Let's use CSS to style it up a bit!

Exercise

For this exercise, we'll provide suggestions but you can style your profile any way you wish.

  1. Create a file named, "profile.css."
  2. Open "profile.html"
  • Add a <link> to your profile.css file.
  1. Using a mix of HTML and CSS, consider making the following modifications:
  • Align your profile image to the left.
  • Force your profile image into a square shape.
  • Place your name heading and your "about me" paragraph into a single <div>.
  • Place this <div> right next to your profile image.
  • Add left margin to your <div> to give your profile image some room.
  • Remove the borders of your table leaving only a single dividing line between each entry.
  • Alternate the background color of each table row using an nth-child selector
  • Use the :hover pseudo-class to increase the size of each of your fears as the user mouses over them!
  1. Have fun, play around, and make your profile spectacular!