2. Welcome Screen

HTML of Basic Welcome Screen Content

Now you will update your welcome screen HTML slightly by adding a <button> element and an h4 element. The button will start the game after we add more code later. Later you can customize your welcome message and even add some specific data about the trivia game.

Update your welcome screen HTML to match the code below. (Don't add another welcome screen!)

HTML

<!-------------- WELCOME SCREEN --------------->
<div class='screen' id='welcome-screen'>
    <h1>Welcome to our example game!</h1>
    <h4>You have questions waiting for you.</h4>
    <button class="start-btn">Start</button>
</div>

CSS for More Style

Add the following CSS styles to the bottom of your stylesheet for buttons and headings. Modify styles as you wish, but be careful about the effects of changing display, margin, and width , which can be problematic sometimes.

CSS

h1, h4 {
  text-align: center;
}
button {
  background-color: rgba(255,255,255,.7);
  border: none;
  outline: none;
  border-radius: 19px;
  box-shadow: 3px 3px 7px black;
  font-size: 24px;
  display: block;
  margin: 10px auto;
  min-height: 70px;
  width: 100%;
}