Github and Website Workshop/welcome-section

From OpenHatch wiki

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

HTML

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

[image] 

<body>
	<header>
		<!-- header component here -->
	</header> 
	<main>
		<!-- main component here --> 
	</main>
</body>

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

<section id=”welcome”> will house the entire section, including the background image <div id=”welcome-text”> will house the welcome text layered on top of the background image 

<main>
   <section id="welcome">
      <div id="welcome-text">
        Hello, I'm [your name here]! Welcome to my little corner of the interwebs!
      </div>
   </section>
</main>

CSS

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

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

Challenge: how we get <main> to be positioned right below <header>?

  • Hint: use the height value you set for <header>


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!

section#welcome {
   width: 100%;
   height: [some fixed height];
   background-image: url('[some url]');
   background-position: center; /* Change this depending on how you want the image to be positioned */
}


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”

div#welcome-text {
  width: 100%;
  position: absolute;
  text-align: center;
  text-shadow: 2px 2px 2px #000000; /* Add shadow around the text so it is more visible against the background image */
}


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

Retrieved from "https://wiki.openhatch.org/wiki/Github_and_Website_Workshop/welcome-section?oldid=15965"