Github and Website Workshop/welcome-section

Welcome to Challenge 7 of the Github and Website Workshop - creating a welcome section



HTML
We will be using the tag to encapsulate the website’s content (the content that changes page by page)

[image]

The goal is to create a section that will house a welcome message layered on top of a background image

   will house the entire section, including the background image    will house the welcome text layered on top of the background image

CSS
To get this section to resemble something like the above example, we need to tweak the CSS.

Since is layered on top of the rest of the elements, we want to appear below it. Right now, be positioned at the top of the page.

Challenge: how we get to be positioned right below ?
 * Hint: use the height value you set for

Let’s set a background image for section#welcome
 * We should select an image that is larger width-wise than height-wise
 * If you can’t decide on an image, check out lorempixel for some placeholder images!

We want to be able to position div#welcome-text with respect to section#welcome.
 * We do this using “position: relative” and “position: absolute”
 * We want to div#welcome-text to be positioned “relative” to section#welcome
 * Therefore, section#welcome requires “position: relative” and div#welcome-text requires “position: absolute”

Challenge: figure out how to center the text in the middle of the section
 * Hint: use the top or bottom property

Save the changes and reload index.html. When you’re satisfied, commit and push the changes.

Next: Challenge 8