<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Great Shrekonizes Great</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="header">

<h1>Great Shrekonizes Great</h1>

<p>Chat with a Character Far Far Away</p>

</div>

<div class="character-list">

<button id="shrek">Shrek</button>

<button id="fiona">Fiona</button>

<button id="donkey">Donkey</button>

<button id="farquaad">Farquaad</button>

<button id="puss">Puss In Boots</button>

<button id="sister">Ugly Step Sister</button>

<button id="ginger">Gingerbread Man</button>

<button id="dragon">Dragon</button>

<button id="charming">Prince Charming</button>

<button id="godmother">Fairy Godmother</button>

<button id="pinocchio">Pinocchio</button>

<button id="pigs">Three Little Pigs</button>

<button id="fieri">Guy Fieri</button>

</div>

<div class="chat-box" id="chat-box">

</div>

<script src="script.js"></script>

</body>

</html>