> For the complete documentation index, see [llms.txt](https://docs.idew.org/code-trivia-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.idew.org/code-trivia-app/code-template/template-build-tutorial/2.-welcome-screen.md).

# 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!)**

{% code title="HTML" %}

```markup
<!-------------- 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>
```

{% endcode %}

### 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.

{% code title="CSS" %}

```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%;
}
```

{% endcode %}