stuheart86's picture
Upload index.html
2ff702d
<!DOCTYPE html>
<html>
<head>
<title>Stu-Studios Clown_Town_app</title>
<style>
body {
background-image: url('img_underground_clown.jpg.png');
background-size: cover;
}
.container {
text-align: center;
color: dark slate-blue;
background-color: white;
border: 2px solid dark slate-blue;
margin: 50px auto;
padding: 20px;
width: 50%;
}
.options {
background-color: white;
border: 2px solid dark slate-blue;
margin: 10px;
padding: 10px;
width: 20%;
display: inline-block;
cursor: pointer;
}
.options:hover {
background-color: dark slate-blue;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>Stu-Studios</h1>
<h2>Clown_Town_app</h2>
<p>Welcome to the app that will scare you senseless or have you in stitches!</p>
<h3>Select a genre:</h3>
<div class="options" id="option1">Funny</div>
<div class="options" id="option2">Freaky</div>
<div class="options" id="option3">Scary</div>
<div class="options" id="option4">Insane</div>
<h3>Select a story teller:</h3>
<div class="options" id="option5">Male</div>
<div class="options" id="option6">Female</div>
<h3>Select a story telling style:</h3>
<div class="options" id="option7">Relaxed</div>
<div class="options" id="option8">Tense</div>
<div class="options" id="option9">Scared</div>
<div class="options" id="option10">Funny</div>
<h3>Select creativity level:</h3>
<div class="options" id="option11">Low</div>
<div class="options" id="option12">Medium</div>
<div class="options" id="option13">High</div>
<br><br>
<div id="story"></div>
</div>
</body>
</html>