Skip to content

Instantly share code, notes, and snippets.

@Dagothig
Last active October 18, 2019 01:29
Show Gist options
  • Save Dagothig/98c24bc674ad96ff7bdd2fb004ad7dbf to your computer and use it in GitHub Desktop.
Save Dagothig/98c24bc674ad96ff7bdd2fb004ad7dbf to your computer and use it in GitHub Desktop.
Nifty Fifty gallery with only html
<!DOCTYPE html>
<html lang="en">
<head>
<title>the_ocalhoun's Nifty Fifty</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="charset" content="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
a {
color: #23923d; }
.bg-light {
background-color: #e9ecef !important; }
.shadow-sm {
box-shadow: 0.125rem 0.25rem 0.25rem -0.125rem rgba(0, 0, 0, 0.15) !important; }
.text-primary {
color: #28a745 !important; }
h1 .text-primary {
font-weight: bolder;
text-shadow: 1px 1px #000; }
.row-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(25em, 1fr));
grid-gap: 1.5rem; }
@media (max-width: 576px) {
.row-grid {
grid-template-columns: 1fr; } }
.card {
overflow: hidden;
border: none; }
.card-body {
display: flex;
flex-direction: column; }
.card-img {
position: relative; }
.card-img img {
object-fit: cover;
width: 100%;
height: 10em; }
.card-img .card-title {
background: rgba(0, 0, 0, 0.3);
color: #fff;
font-weight: bold;
text-shadow: 1px 3px #000;
position: absolute;
width: 100%;
bottom: 0;
margin: 0;
padding: 1.125rem 1.875rem; }
.card-links {
text-align: right; }
.card-links a {
margin-left: 0.5em; }
.current {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
background: #28a745; }
.progress {
height: 2.25rem;
font-size: 0.9rem;
background: #ced4da;
box-shadow: 0.125rem 0.25rem 0.25rem -0.125rem rgba(0, 0, 0, 0.15) inset; }
.progress-bar {
background: repeating-linear-gradient(45deg, #28a745 0rem, #28a745 1rem, #1e7e34 1rem, #1e7e34 2rem); }
</style>
</head>
<body class="bg-light">
<div class="my-4 mx-2 mx-sm-0">
<div class="container">
<h1><span class="text-primary">Nifty&nbsp;Fifty</span> <span class="text-secondary">scenario&nbsp;pack</span>
</h1>
<p>
the_ocalhoun's creating a really neat scenario pack for Roller Coaster Tycoon. I've been
slowly playing through it, but finding the indivdual scenarios has been cumbersome.
So until they're complete and they're released as a complete thing, here's the list mostly
up to date:
</p>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="17" aria-valuemax="50" style="width:34%">17 of 50 done
</div>
</div>
</div>
</div>
<div class="mx-sm-4 row-grid">
<div class="card bg-white shadow-sm">
<div class="card-img bg-secondary"><img src="https://i.imgur.com/fWZEQWz.png" alt="preview">
<h5 class="card-title">#17: Red Sea
</h5>
</div>
<div class="card-body">
<p class="card-text">When the Red Sea was parted, you were SUPPOSED to lead your people through it to the promised land. Not build a theme park on the bottom of the sea!
</p>
<div class="flex-grow-1"></div>
<div class="card-links"><a href="https://drive.google.com/open?id=1O_h3eN0LNtwYN3dVVGN6xY0jwCPeVdjC" rel="noopener noreferrer" target="_blank">Download</a><a href="https://www.reddit.com/r/rct/comments/ckzoxu/nifty_fifty_17_red_sea/" rel="noopener noreferrer" target="_blank">Post</a>
</div>
</div>
</div>
<div class="card bg-white shadow-sm">
<div class="card-img bg-secondary"><img src="https://i.imgur.com/AiaEoaT.png" alt="preview">
<h5 class="card-title">#16: Su Oku River Resort
</h5>
</div>
<div class="card-body">
<p class="card-text">Su Oku River Resort has long been famed for its cherry blossom massage rooms and luxurious saunas. But it has fallen on hard times and needs to be upgraded with more thrilling attractions if it's going to last.
</p>
<div class="flex-grow-1"></div>
<div class="card-links"><a href="https://drive.google.com/open?id=1vOCYJH19cY_Nskj_Sg7lfHG87HUFX0eA" rel="noopener noreferrer" target="_blank">Download</a><a href="https://www.reddit.com/r/rct/comments/cimyfr/nifty_fifty_16_su_oku_river_resort/" rel="noopener noreferrer" target="_blank">Post</a>
</div>
</div>
</div>
<div class="card bg-white shadow-sm">
<div class="card-img bg-secondary"><img src="https://i.imgur.com/DGPQ6sY.png" alt="preview">
<h5 class="card-title">#15: Adventure Land presents Aqua Shores
</h5>
</div>
<div class="card-body">
<p class="card-text">Adventure Land's new water park expansion is not going well. It's over budget, behind schedule, and now their contractor has gone bankrupt. You've been hired to finish building it and make it a thriving water park before the scheduled opening date.
</p>
<div class="flex-grow-1"></div>
<div class="card-links"><a href="https://drive.google.com/open?id=1EhfhCeSUxWC52uzeZEZixxMm0sBtzQ-y" rel="noopener noreferrer" target="_blank">Download</a><a href="https://www.reddit.com/r/rct/comments/b3n0nh/nifty_fifty_15_adventure_land_presents_aqua_shores/" rel="noopener noreferrer" target="_blank">Post</a>
</div>
</div>
</div>
<div class="card bg-white shadow-sm">
<div class="card-img bg-secondary"><img src="https://i.imgur.com/sHIQCef.png" alt="preview">
<h5 class="card-title">#14: Redtail Ridge Golf Course
</h5>
</div>
<div class="card-body">
<p class="card-text">This golf course has not been doing well financially. It seems golf just isn't as popular as it once was in this little corner of suburbia. Maybe if you fire up the R&amp;D department, though, you can come up with a way to turn things around.
</p>
<div class="flex-grow-1"></div>
<div class="card-links"><a href="https://drive.google.com/open?id=1s3H4CjCjPaevPAOAcc-zKBb39nxZivv3" rel="noopener noreferrer" target="_blank">Download</a><a href="https://www.reddit.com/r/rct/comments/b30xij/nifty_fifty_14_redtail_ridge_golf_course/" rel="noopener noreferrer" target="_blank">Post</a>
</div>
</div>
</div>
<div class="card bg-white shadow-sm">
<div class="card-img bg-secondary"><img src="https://i.imgur.com/dcGZnTQ.png" alt="preview">
<h5 class="card-title">#13: Timber Valley
</h5>
</div>
<div class="card-body">
<p class="card-text">You're the type who never gives up. When life gives you lemons, you make lemonade. When life gives you a fertile valley full of trees, you build rides made out of wood.
</p>
<div class="flex-grow-1"></div>
<div class="card-links"><a href="https://drive.google.com/open?id=13Lj5ukk-fjF9GjZe7XRTcRhl6qeN9HB8" rel="noopener noreferrer" target="_blank">Download</a><a href="https://www.reddit.com/r/rct/comments/aqti3n/nifty_fifty_13_timber_valley/" rel="noopener noreferrer" target="_blank">Post</a>
</div>
</div>
</div>
<div class="card bg-white shadow-sm">
<div class="card-img bg-secondary"><img src="https://i.imgur.com/vGmInJx.png" alt="preview">
<h5 class="card-title">#12: The Seventh Circle
</h5>
</div>
<div class="card-body">
<p class="card-text">The demons here are tired of hearing screams of pain and horror. Your punishment (you know what you did) is to give them a different kind of scream to listen to for a while.
</p>
<div class="flex-grow-1"></div>
<div class="card-links"><a href="https://drive.google.com/open?id=1CEmihsbzEdBLhK8d1N3Fkrj-HXyNqj1o" rel="noopener noreferrer" target="_blank">Download</a><a href="https://www.reddit.com/r/rct/comments/aoegdm/nifty_fifty_12_the_seventh_circle/" rel="noopener noreferrer" target="_blank">Post</a>
</div>
</div>
</div>
<div class="card bg-white shadow-sm">
<div class="card-img bg-secondary"><img src="https://i.imgur.com/8Vfw92B.png" alt="preview">
<h5 class="card-title">#11: Milton Gardens
</h5>
</div>
<div class="card-body">
<p class="card-text">If you're going to turn this struggling garden into a first-rate amusement park, you're going to need to research some much more exciting rides.
</p>
<div class="flex-grow-1"></div>
<div class="card-links"><a href="https://drive.google.com/open?id=1AsbiSweh9bwKCGq3OQ-IiKZ4vpX0sXLq" rel="noopener noreferrer" target="_blank">Download</a><a href="https://www.reddit.com/r/rct/comments/ajy75q/nifty_fifty_11_milton_gardens/" rel="noopener noreferrer" target="_blank">Post</a>
</div>
</div>
</div>
<div class="card bg-white shadow-sm">
<div class="card-img bg-secondary"><img src="https://i.imgur.com/GEaWYMe.png" alt="preview">
<h5 class="card-title">#10: Turtle Cove
</h5>
</div>
<div class="card-body">
<p class="card-text">This little slice of paradise would be the perfect place for a beachfront park ... except for the many sea turtle nesting sites you're absolutely forbidden from interfering with.
</p>
<div class="flex-grow-1"></div>
<div class="card-links"><a href="https://drive.google.com/open?id=1uldaXfcmTroh7lpcsD9Wy5zifaplYFgp" rel="noopener noreferrer" target="_blank">Download</a><a href="https://www.reddit.com/r/rct/comments/aikz8a/nifty_fifty_10_turtle_cove/" rel="noopener noreferrer" target="_blank">Post</a>
</div>
</div>
</div>
<div class="card bg-white shadow-sm">
<div class="card-img bg-secondary"><img src="https://i.imgur.com/myESXiw.png" alt="preview">
<h5 class="card-title">#9: Jolly Jingle Jamboree
</h5>
</div>
<div class="card-body">
<p class="card-text">Although initially popular, years of lackluster management has left this Christmas-themed park in disrepair and deeply in debt. If it's going to survive and become viable, it will need to be refreshed and upgraded.
</p>
<div class="flex-grow-1"></div>
<div class="card-links"><a href="https://drive.google.com/open?id=1TFNUHJtcMe4OySrSDUCinaTwWCMMF57W" rel="noopener noreferrer" target="_blank">Download</a><a href="https://www.reddit.com/r/rct/comments/aetdyw/nifty_fifty_9_jolly_jingle_jamboree/" rel="noopener noreferrer" target="_blank">Post</a>
</div>
</div>
</div>
<div class="card bg-white shadow-sm">
<div class="card-img bg-secondary"><img src="https://i.imgur.com/JyJYJUZ.png" alt="preview">
<h5 class="card-title">#8: Froggy Bottom Swamp
</h5>
</div>
<div class="card-body">
<p class="card-text">When you bought the swampland around a despised old war monument, people thought you were crazy. The soft ground isn't even stable enough to dig in. But you saw the beginnings of an amusement park empire!
</p>
<div class="flex-grow-1"></div>
<div class="card-links"><a href="https://drive.google.com/open?id=19dyVbtBU1T6EECW404Z8O8HLjpSlMRvX" rel="noopener noreferrer" target="_blank">Download</a><a href="https://www.reddit.com/r/rct/comments/adesjh/nifty_fifty_8_froggy_bottom_swamp/" rel="noopener noreferrer" target="_blank">Post</a>
</div>
</div>
</div>
<div class="card bg-white shadow-sm">
<div class="card-img bg-secondary"><img src="https://i.imgur.com/HEe5gn0.jpg" alt="preview">
<h5 class="card-title">#7: Four Elements
</h5>
</div>
<div class="card-body">
<p class="card-text">Deep in the heart of the sacred forest, you'll find a very special place where each of the four elements holds sway over its own area. Each area offers its own unique challenges and opportunities.
</p>
<div class="flex-grow-1"></div>
<div class="card-links"><a href="https://drive.google.com/open?id=1VYGyUZHYoG70BhWaix94Bh3i-ludixcs" rel="noopener noreferrer" target="_blank">Download</a><a href="https://www.reddit.com/r/rct/comments/a4rh3f/nifty_fifty_7_four_elements/" rel="noopener noreferrer" target="_blank">Post</a>
</div>
</div>
</div>
<div class="card bg-white shadow-sm">
<div class="card-img bg-secondary"><img src="https://i.imgur.com/TuMUFD9.png" alt="preview">
<h5 class="card-title">#6: Pacific State Maximum Security
</h5>
</div>
<div class="card-body">
<p class="card-text">International courts have ruled that denying access to amusement parks is a human rights abuse. The prison's budget is tight and the inmates are nearly broke, but you have an idea about how to comply with this new law.
</p>
<div class="flex-grow-1"></div>
<div class="card-links"><a href="https://drive.google.com/open?id=1PCmn2LYVYNA1cd8N0-XG6Krf877uLckA" rel="noopener noreferrer" target="_blank">Download</a><a href="https://www.reddit.com/r/rct/comments/a1cwv6/nifty_fifty_6_pacific_state_maximum_security/" rel="noopener noreferrer" target="_blank">Post</a>
</div>
</div>
</div>
<div class="card bg-white shadow-sm">
<div class="card-img bg-secondary"><img src="https://i.imgur.com/Cz854nh.png" alt="preview">
<h5 class="card-title">#5: Privateer's Palace
</h5>
</div>
<div class="card-body">
<p class="card-text">Captain Smokebeard, now the most successful privateer on the seven seas, has decided that his palace is a bit too drab and his men need entertainment. Entertain them ... or else.
</p>
<div class="flex-grow-1"></div>
<div class="card-links"><a href="https://drive.google.com/open?id=1eigpb6NkuMRZlNTf0zgsUdDTsCAMSkNF" rel="noopener noreferrer" target="_blank">Download</a><a href="https://www.reddit.com/r/rct/comments/a0d3s9/nifty_fifty_5_privateers_palace/" rel="noopener noreferrer" target="_blank">Post</a>
</div>
</div>
</div>
<div class="card bg-white shadow-sm">
<div class="card-img bg-secondary"><img src="https://i.imgur.com/KMAzouU.png" alt="preview">
<h5 class="card-title">#4: Roosevelt Lodge
</h5>
</div>
<div class="card-body">
<p class="card-text">Roosevelt Lodge wants to expand into the amusement park business to make the area even more popular, but since the terrain is very challenging, they've hired an expert to design the park: you.
</p>
<div class="flex-grow-1"></div>
<div class="card-links"><a href="https://drive.google.com/open?id=1wosjoM7c8t1E7gAx1s30GDIM7A-6VZMe" rel="noopener noreferrer" target="_blank">Download</a><a href="https://www.reddit.com/r/rct/comments/9zbs39/nifty_fifty_4_roosevelt_lodge/" rel="noopener noreferrer" target="_blank">Post</a>
</div>
</div>
</div>
<div class="card bg-white shadow-sm">
<div class="card-img bg-secondary"><img src="https://i.imgur.com/fXt3hob.png" alt="preview">
<h5 class="card-title">#3: Fun 4 Kidz: Fun Zone
</h5>
</div>
<div class="card-body">
<p class="card-text">There seems to have been some problem with communication in your theme park management firm. The engineers gave you blueprints for all the latest and greatest roller coasters, but the marketing department gave you a park marketed and themed for small children. It's up to you to make this work.
</p>
<div class="flex-grow-1"></div>
<div class="card-links"><a href="https://drive.google.com/open?id=19pUXU6O2loDvHmzo0TVouPjJRUWslTHH" rel="noopener noreferrer" target="_blank">Download</a><a href="https://www.reddit.com/r/rct/comments/9uxog0/nifty_fifty_3_fun_4_kidz_a_uniquely_challenging/" rel="noopener noreferrer" target="_blank">Post</a>
</div>
</div>
</div>
<div class="card bg-white shadow-sm">
<div class="card-img bg-secondary"><img src="https://i.imgur.com/87EcTiN.png" alt="preview">
<h5 class="card-title">#2: Scranton Street
</h5>
</div>
<div class="card-body">
<p class="card-text">There are a few abandoned lots on Scranton Street, and you've decided to illegally build a theme park there. If you can attract enough guests before the rich neighbors get you shut down, the city council might let you keep the park operational...
</p>
<div class="flex-grow-1"></div>
<div class="card-links"><a href="https://drive.google.com/open?id=14_BH-NGp7v8YJMKiOTgAwvr-WA9w1Usu" rel="noopener noreferrer" target="_blank">Download</a><a href="https://www.reddit.com/r/rct/comments/9t451t/second_scenario_for_the_nifty_fifty_pack_scranton/" rel="noopener noreferrer" target="_blank">Post</a>
</div>
</div>
</div>
<div class="card bg-white shadow-sm">
<div class="card-img bg-secondary"><img src="https://i.imgur.com/qIO4QCn.png" alt="preview">
<h5 class="card-title">#1: Onamaga Beach
</h5>
</div>
<div class="card-body">
<p class="card-text">They said this rocky, windswept beach was no place for an amusement park. They said it was too cold and damp. They said it couldn't done. Prove them wrong.
</p>
<div class="flex-grow-1"></div>
<div class="card-links"><a href="https://drive.google.com/open?id=17Kr17nJ0ABTaUmtHp8-oy7B_fMUfH2bB" rel="noopener noreferrer" target="_blank">Download</a><a href="https://www.reddit.com/r/rct/comments/9swjsx/the_first_officially_finished_scenario_of_my/" rel="noopener noreferrer" target="_blank">Post</a>
</div>
</div>
</div>
</div>
<div class="container my-4 text-center"><a href="https://github.com/Dagothig/nifty-fifty">Source</a></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment