Create a div as the first part of the body, and set the class as page-wrap

  <div class="page-wrap">
 
  </div>

Create a ul as the first part of the page-wrap, and set the class to social.

Create at least two list items. Use Font Awesome to create social icons. Review step 5 in last week's activity if you forget how to do this.

Under the ul, create an H1 and an H2. Set the text of the H1 to your name, and the text of the H2 to a short statement about you.

Hit enter a few times, and then go into the website HTML-Ipsum and copy the "Kitchen Sink" text. Paste it into your document. This is just to make the page longer.

Live preview! You should have a list on the page and two headings, plus the random text from HTML-Ipsum

Open your css/splash.css.

At the top, create a CSS rule that will apply to the entire html document. Add a background image. The image will be the photo you downloaded from pexels.

html{
background-image: url(images/my-image.jpg);
}

Live preview. What happened? Is your photo too big for your browser and you are only seeing a part of it? Or maybe your photo is too small and it's repeating. First, let's make it stop repeating.

html{
background-image: url(images/my-image.jpg);
background-repeat: no-repeat;
}

Now, position it. The position takes two attributes - one for x axis and one for y axis. We can use pixels, percentages, or just "top", "center", "left", "right" or "bottom". We will be using center center to position the background image in the center of our document.

html{
background-image: url(images/my-image.jpg);
background-repeat: no-repeat;
background-position: center center;
}

Backgrounds can also be attached to the window - you can have them fixed in place, or you can have them scroll. We want ours fixed in place.

html{
background-image: url(images/my-image.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}

Now for the magic. Let's make this image fit in the space we have for it!

html { 
background-image: url(images/my-image.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}

Let's live preview!