Commit b81447a8 authored by Miko's avatar Miko

Ryle Miko Estrella HW1

parent 0c4917bb
This source diff could not be displayed because it is too large. You can view the blob instead.
.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
</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