Commit b81447a8 authored by Miko's avatar Miko

Ryle Miko Estrella HW1

parent 0c4917bb
This diff is collapsed.
.magicbox{
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.imagebox{
background:url(../images/asylum.jpg);
background-size: cover;
height:500px;
background-position: 40% 50%;
vertical-align:
}
.imagebox2{
background:url(../images/hallway.jpg);
background-size: cover;
height:500px;
background-position: 40% 50%;
vertical-align:
}
.imagebox3{
background:url(../images/hallway_zombie.jpg);
background-size: cover;
height:500px;
background-position: 40% 50%;
vertical-align:
}
.imagebox4{
background:url(../images/noise.jpg);
background-size: cover;
height:500px;
background-position: 40% 50%;
vertical-align:
}
.imagebox5{
background:url(../images/doctoroffice.jpg);
background-size: cover;
height:500px;
background-position: 40% 50%;
vertical-align:
}
.imageboxdeadend{
background:url(../images/zombiejump.gif);
background-size: cover;
height:500px;
background-position: 40% 50%;
vertical-align:
}
.imageboxdeadend4{
background:url(../images/hidingzombie.gif);
background-size: cover;
height:500px;
background-position: 40% 50%;
vertical-align:
}
.imageboxdeadend2{
background:url(../images/grateful.gif);
background-size: cover;
height:500px;
background-position: 40% 50%;
vertical-align:
}
.imageboxdeadend3{
background:url(../images/winner.gif);
background-size: cover;
height:500px;
background-position: 40% 50%;
vertical-align:
}
.space{
margin: 40px;
}
.choice1{
transition:ease-out 0.423s;
font-size: 30px;
color: black;
background-color: red;
}
.choice2{
transition:ease-out 0.423s;
font-size: 30px;
color: black;
background-color: green;
}
.choice3{
transition:ease-out 0.423s;
font-size: 30px;
color: black;
background-color: gray;
}
.choice1:hover{
background-color: #a1a1a1;
color: black;
text-decoration: none;
}
.choice2:hover{
background-color: #a1a1a1;
color: black;
text-decoration: none;
}
.choice3:hover{
background-color: #a1a1a1;
color: black;
text-decoration: none;
}
\ No newline at end of file
</DOCTYPE html>
<html>
<head>
<title>Asylum of the Living Dead</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body style="background: url(images/asylum_entrance.jpg); background-size: cover">
<h1 align=center style="color: red">Asylum of the Living Dead</h1>
<div class = "row" style = "margin: 40px">
<div class="col-md-6 imageboxdeadend"></div>
<div class="col-md-6" style="margin: none;">
<div class="row" style="margin: none; padding: 20px; height:400px; background-color: #2c2c2c">
<h3 align=center style="margin: none; color: white">Dead End</h3>
<h4 align=center style="color: white">A zombie jumped on you, and bit you. YOU DIED!<br> Maybe you should've picked a better choice. GAME OVER!</h4>
</div>
<div class="row" style="margin: solid 1px">
<a href="index.html"class="col-md-12 choice1" style="margin: none; height:150px; border:solid 1px black;">
<br>
<center style="vertical-align: center;">Restart?</center>
</a>
</div>
</div>
</body>
</html>
\ No newline at end of file
</DOCTYPE html>
<html>
<head>
<title>Asylum of the Living Dead</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body style="background: url(images/asylum_entrance.jpg); background-size: cover">
<h1 align=center style="color: red">Asylum of the Living Dead</h1>
<div class = "row" style = "margin: 40px">
<div class="col-md-6 imageboxdeadend2"></div>
<div class="col-md-6" style="margin: none;">
<div class="row" style="margin: none; padding: 20px; height:400px; background-color: #2c2c2c">
<h3 align=center style="margin: none; color: white">Congratulations!</h3>
<h4 align=center style="color: white">You managed to keep yourself alive. Too bad you didn't get the files. Oh well, being alive is more important than work!<br>GAME OVER!</h4>
</div>
<div class="row" style="margin: solid 1px">
<a href="index.html"class="col-md-12 choice1" style="margin: none; height:150px; border:solid 1px black;">
<br>
<center style="vertical-align: center;">Restart?</center>
</a>
</div>
</div>
</body>
</html>
\ No newline at end of file
</DOCTYPE html>
<html>
<head>
<title>Asylum of the Living Dead</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body style="background: url(images/asylum_entrance.jpg); background-size: cover">
<h1 align=center style="color: red">Asylum of the Living Dead</h1>
<div class = "row" style = "margin: 40px">
<div class="col-md-6 imageboxdeadend3"></div>
<div class="col-md-6" style="margin: none;">
<div class="row" style="margin: none; padding: 20px; height:400px; background-color: #2c2c2c">
<h3 align=center style="margin: none; color: white">Congratulations!</h3>
<h4 align=center style="color: white">You GOT the files, and you managed to keep yourself alive. GGWP<br>GAME OVER!</h4>
</div>
<div class="row" style="margin: solid 1px">
<a href="index.html"class="col-md-12 choice1" style="margin: none; height:150px; border:solid 1px black;">
<br>
<center style="vertical-align: center;">Restart?</center>
</a>
</div>
</div>
</body>
</html>
\ No newline at end of file
</DOCTYPE html>
<html>
<head>
<title>Asylum of the Living Dead</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body style="background: url(images/asylum_entrance.jpg); background-size: cover">
<h1 align=center style="color: red">Asylum of the Living Dead</h1>
<div class = "row" style = "margin: 40px">
<div class="col-md-6 imageboxdeadend4"></div>
<div class="col-md-6" style="margin: none;">
<div class="row" style="margin: none; padding: 20px; height:400px; background-color: #2c2c2c">
<h3 align=center style="margin: none; color: white">Dead End</h3>
<h4 align=center style="color: white">you managed to find a hiding spot but too bad the zombies found you. YOU DIED!<br> Maybe you should've picked a better choice. GAME OVER!</h4>
</div>
<div class="row" style="margin: solid 1px">
<a href="index.html"class="col-md-12 choice1" style="margin: none; height:150px; border:solid 1px black;">
<br>
<center style="vertical-align: center;">Restart?</center>
</a>
</div>
</div>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
</DOCTYPE html>
<html>
<head>
<title>Asylum of the Living Dead</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
</head>
<body style="background: url(images/begin.jpg); background-size: cover; height: 100vh; background-position: 50% 90%; ">
<div style="background:rgba(200,200,200,0.35); margin:60px; height:calc(100vh - 180px); width: calc(100vw - 180px); padding:30px">
<h1 align=Center >Get Ready for the Adventure of your life!</h1>
<center>
<hr style="width:60%; border: solid 1px black;">
<h2>There was once an abandoned asylum. Mysteriously, you found yourself inside the asylum and you can't remember anything what happened to you. You have to escape the asylum ALIVE.</h2>
<!--<a href="page1.html" align=Center>Begin Adventure!</a>
-->
<a href="page1.html"class="col-md-12 choice3" style="margin: none; height:150px; border:solid 1px black;">
<br>
<center style="vertical-align: center;">Begin Adventure!</center>
</a>
</center>
</div>
</body>
</html>
\ No newline at end of file
</DOCTYPE html>
<html>
<head>
<title>Asylum of the Living Dead</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body style="background: url(images/asylum_entrance.jpg); background-size: cover">
<h1 align=center style="color: red">Asylum of the Living Dead</h1>
<div class = "row" style = "margin: 40px">
<div class="col-md-6 imagebox"></div>
<div class="col-md-6" style="margin: none;">
<div class="row" style="margin: none; padding: 20px; height:400px; background-color: #2c2c2c">
<h3 align=center style="margin: none; color: white">Page 1</h3>
<h4 align=center style="color: white">You wake up inside of an Asylum and you can't remember anything. You have two choices before you: you stay where you are, or you explore the area.</h4>
</div>
<div class="row" style="margin: solid 1px">
<a href="page3.html"class="col-md-6 choice1" style="margin: none; height:150px; border:solid 1px black;">
<br>
<center style="vertical-align: center;">Explore Further</center>
</a>
<a href="page2.html"class="col-md-6 choice2" style="margin: none; height:150px; border:solid 1px black;">
<br>
<center style="vertical-align: Center;">Stay Where you are</center>
</a>
</div>
</div>
</body>
</html>
\ No newline at end of file
</DOCTYPE html>
<html>
<head>
<title>Asylum of the Living Dead</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body style="background: url(images/asylum_entrance.jpg); background-size: cover">
<h1 align=center style="color: red">Asylum of the Living Dead</h1>
<div class = "row" style = "margin: 40px">
<div class="col-md-6 imagebox"></div>
<div class="col-md-6" style="margin: none;">
<div class="row" style="margin: none; padding: 20px; height:400px; background-color: #2c2c2c">
<h3 align=center style="margin: none; color: white">Page 2</h3>
<h4 align=center style="color: white">You hear different noises. You have two choices before you: Pick up the lamp near you, or you explore further.</h4>
</div>
<div class="row" style="margin: solid 1px">
<a href="page3.html"class="col-md-6 choice1" style="margin: none; height:150px; border:solid 1px black;">
<br>
<center style="vertical-align: center;">Explore Further</center>
</a>
<a href="deadpage.html"class="col-md-6 choice2" style="margin: none; height:150px; border:solid 1px black;">
<br>
<center style="vertical-align: Center;">Pick up the lamp near you</center>
</a>
</div>
</div>
</body>
</html>
\ No newline at end of file
</DOCTYPE html>
<html>
<head>
<title>Asylum of the Living Dead</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body style="background: url(images/asylum_entrance.jpg); background-size: cover">
<h1 align=center style="color: red">Asylum of the Living Dead</h1>
<div class = "row" style = "margin: 40px">
<div class="col-md-6 imagebox2"></div>
<div class="col-md-6" style="margin: none;">
<div class="row" style="margin: none; padding: 20px; height:400px; background-color: #2c2c2c">
<h3 align=center style="margin: none; color: white">Page 2</h3>
<h4 align=center style="color: white">You see 2 paths before you. Left or Right?</h4>
</div>
<div class="row" style="margin: solid 1px">
<a href="page4.html"class="col-md-6 choice1" style="margin: none; height:150px; border:solid 1px black;">
<br>
<center style="vertical-align: center;">Left</center>
</a>
<a href="deadpage.html"class="col-md-6 choice2" style="margin: none; height:150px; border:solid 1px black;">
<br>
<center style="vertical-align: Center;">Right</center>
</a>
</div>
</div>
</body>
</html>
\ No newline at end of file
</DOCTYPE html>
<html>
<head>
<title>Asylum of the Living Dead</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body style="background: url(images/asylum_entrance.jpg); background-size: cover">
<h1 align=center style="color: red">Asylum of the Living Dead</h1>
<div class = "row" style = "margin: 40px">
<div class="col-md-6 imagebox3"></div>
<div class="col-md-6" style="margin: none;">
<div class="row" style="margin: none; padding: 20px; height:400px; background-color: #2c2c2c">
<h3 align=center style="margin: none; color: white">Page 3</h3>
<h4 align=center style="color: white">You found a zombie in the middle of the hallway, what will you do?</h4>
</div>
<div class="row" style="margin: solid 1px">
<a href="page5.html"class="col-md-6 choice1" style="margin: none; height:150px; border:solid 1px black;">
<br>
<center style="vertical-align: center;">Fight!</center>
</a>
<a href="page6.html"class="col-md-6 choice2" style="margin: none; height:150px; border:solid 1px black;">
<br>
<center style="vertical-align: Center;">Sneak away</center>
</a>
</div>
</div>
</body>
</html>
\ No newline at end of file
</DOCTYPE html>
<html>
<head>
<title>Asylum of the Living Dead</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body style="background: url(images/asylum_entrance.jpg); background-size: cover">
<h1 align=center style="color: red">Asylum of the Living Dead</h1>
<div class = "row" style = "margin: 40px">
<div class="col-md-6 imagebox4"></div>
<div class="col-md-6" style="margin: none;">
<div class="row" style="margin: none; padding: 20px; height:400px; background-color: #2c2c2c">
<h3 align=center style="margin: none; color: white">Page 4</h3>
<h4 align=center style="color: white">you managed to kill the zombie, but you hear footsteps getting closer to you. what will you do?</h4>
</div>
<div class="row" style="margin: solid 1px">
<a href="deadpage4.html"class="col-md-6 choice1" style="margin: none; height:150px; border:solid 1px black;">
<br>
<center style="vertical-align: center;">Hide</center>
</a>
<a href="page6.html"class="col-md-6 choice2" style="margin: none; height:150px; border:solid 1px black;">
<br>
<center style="vertical-align: Center;">Run</center>
</a>
</div>
</div>
</body>
</html>
\ No newline at end of file
</DOCTYPE html>
<html>
<head>
<title>Asylum of the Living Dead</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body style="background: url(images/asylum_entrance.jpg); background-size: cover">
<h1 align=center style="color: red">Asylum of the Living Dead</h1>
<div class = "row" style = "margin: 40px">
<div class="col-md-6 imagebox5"></div>
<div class="col-md-6" style="margin: none;">
<div class="row" style="margin: none; padding: 20px; height:400px; background-color: #2c2c2c">
<h3 align=center style="margin: none; color: white">Page 4</h3>
<h4 align=center style="color: white">you found the doctor's room. before you is the files, and the way out. what will you do?</h4>
</div>
<div class="row" style="margin: solid 1px">
<a href="deadpage2.html"class="col-md-6 choice1" style="margin: none; height:150px; border:solid 1px black;">
<br>
<center style="vertical-align: center;">Exit the building</center>
</a>
<a href="deadpage3.html"class="col-md-6 choice2" style="margin: none; height:150px; border:solid 1px black;">
<br>
<center style="vertical-align: Center;">Take the Files</center>
</a>
</div>
</div>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment