Montana-Code-School · NaniW · Mar 30, 2017
diff --git a/CSS/Komodo.css b/CSS/Komodo.css
@@ -0,0 +1,105 @@
+.dropbtn {
+    color: white;
+    padding: 16px;
+    cursor: pointer;
+
+    background: linear-gradient(45deg, rgba(255,184,115,0.65) 0%,rgba(010,196,209,0.65) 50%,rgba(0,0,99,0.65) 100%);
+  	border-radius: 2px;
+  	box-shadow: 0px 2px 4px rgba(34,62,66,.25);
+    font-size: 25px;
+    font-weight: bold;
+    letter-spacing: 1px;
+    padding: 16px 32px;
+    text-decoration: none;
+    text-transform: uppercase;
+    -webkit-transition: box-shadow 1s ease;
+  	transition: box-shadow 1s ease;
+}
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+
+.dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+}
+
+.dropdown-content a:hover {background-color: #f1f1f1}
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+.dropdown:hover .dropbtn {
+    background-color: #3e8e41;
+}
+
+body {
+  background-color: azure;
+	font-family: 'Raleway', sans-serif;
+  text-align: center;
+  }
+
+h1, h2, h3 {
+  color: black;
+  font-family: fantasy;
+}
+
+h1 {
+  font-size: 64px;
+}
+
+h2 {
+  font-size: 32px;
+  }
+
+h3 {
+  font-size: 25px;
+}
+
+ul {
+  list-style-position: inside;
+}
+
+a.btn {
+	background: linear-gradient(45deg, rgba(255,184,115,0.65) 0%,rgba(010,196,209,0.65) 50%,rgba(0,0,99,0.65) 100%);
+	border-radius: 2px;
+	box-shadow: 0px 2px 4px rgba(34,62,66,.25);
+  color: black;
+  font-size: 25px;
+  font-weight: bold;
+  letter-spacing: 1px;
+  padding: 16px 32px;
+  text-decoration: none;
+  text-transform: uppercase;
+  -webkit-transition: box-shadow 1s ease;
+	transition: box-shadow 1s ease;
+}
+
+a.btn:hover {
+	box-shadow: 0px 4px 4px rgba(34,62,66,.5);
+	-webkit-transition: box-shadow 1s ease;
+	transition: box-shadow 1s ease;
+}
+
+.img-wrap:hover img {
+    transform:scale(0.75);
+}
+.img-wrap img {
+    display:inline-grid;
+    transition: all 0.5s ease 0.25s;
+    width: 75%;
+}
diff --git a/IMG/Komodo1.jpg b/IMG/Komodo1.jpg
diff --git a/IMG/Komodo2b.jpg b/IMG/Komodo2b.jpg
diff --git a/IMG/Komodo3.jpg b/IMG/Komodo3.jpg
diff --git a/IMG/Komodo4.jpg b/IMG/Komodo4.jpg
diff --git a/IMG/Komodo5.jpg b/IMG/Komodo5.jpg
diff --git a/IMG/Komodo6.jpg b/IMG/Komodo6.jpg
diff --git a/IMG/komodo7.jpg b/IMG/komodo7.jpg
diff --git a/JS/Komodo.js b/JS/Komodo.js
@@ -0,0 +1,3 @@
+function myFunction() {
+   document.getElementById("demo").innerHTML = "Thank you for your patient!";
+}
diff --git a/Komodo.html b/Komodo.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>MyFirstWebPage</title>
+    <link href='https://fonts.googleapis.com/css?family=Playfair+Display:900|Raleway:300' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" type="text/css" href="CSS/Komodo.css">
+
+      </head>
+  <body>
+<h1>Komodo Island</h1>
+
+<div class="dropdown">
+  <button class="dropbtn">MENU</button>
+
+  <div class="dropdown-content">
+    <a href="KomodoAbout.html">About</a>
+    <a href="KomodoGetThere.html">Getting There</a>
+    <a href="KomodoMedia.html">Media</a>
+  </div>
+
+</div>
+<p>&nbsp;</p>
+
+<p>Hi there!</p>
+<p>My name is Bernadetta Wardhani (Nani).<br />
+  I am a student of Montana Code School - Part-Time Course 2017 - Missoula, MT.<br />
+  This website is my first assignment from the class.</p>
+<p>I would like to share a little bit of information about Komodo National Park in Indonesia.<br />
+  These volcanic islands are inhabited by a population of around 5,700 giant lizards, whose appearance and aggressive behaviour have led to them being called 'Komodo dragons'.<br />
+  They exist nowhere else in the world and are of great interest to scientists studying the theory of evolution.<br />
+  The rugged hillsides of dry savannah and pockets of thorny green vegetation contrast starkly with the brilliant white sandy beaches and the blue waters surging over coral.</p>
+<p>Hope you like it!</p>
+
+<p>&nbsp;</p>
+    <div style="font-size: 12px">
+      <p><a href="https://commons.wikimedia.org/wiki/File:Komodo_Island_north_aerial.jpg#/media/File:Komodo_Island_north_aerial.jpg" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Komodo_Island_north_aerial.jpg" alt="Komodo Island north aerial.jpg" height="426" width="640"></a><br>By <a rel="nofollow" class="external text" href="http://www.flickr.com/people/61952179@N00">jon hanson</a>&nbsp;
+        from London - <a rel="nofollow" class="external text" href="http://www.flickr.com/photos/61952179@N00/2784352749/">indonesian islands</a>, <a href="http://creativecommons.org/licenses/by-sa/2.0" title="Creative Commons Attribution-Share Alike 2.0">CC BY-SA 2.0</a>&nbsp;<a href="https://commons.wikimedia.org/w/index.php?curid=9104873">Link</a></p>
+    </div>
+    <p>&nbsp;</p>
+
+        <p><a class="btn" href="http://www.komodonationalpark.org" target="_blank">Komodo National Park</a></p>
+        <p>&nbsp;</p>
+
+        <p id="demo">More information coming soon!</p>
+        <button type="button" onclick="myFunction()">Under Construction</button>
+
+<p>&nbsp;</p>
+<script src="JS/Komodo.js"></script>
+    </body>
+</html>
diff --git a/KomodoAbout.html b/KomodoAbout.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>MyFirstWebPage</title>
+    <link href='https://fonts.googleapis.com/css?family=Tangerine:900|Raleway:300' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" type="text/css" href="CSS/Komodo.css">
+      </head>
+  <body>
+
+<h1>Komodo Island</h1>
+
+<div class="dropdown">
+  <button class="dropbtn">MENU</button>
+
+  <div class="dropdown-content">
+    <a href="Komodo.html">Home</a>
+    <a href="KomodoAbout.html">About</a>
+    <a href="KomodoGetThere.html">Getting There</a>
+    <a href="KomodoMedia.html">Media</a>
+  </div>
+
+</div>
+<p>&nbsp;</p>
+
+      <h2>About</h2>
+        <p>Komodo National Park, located in the center of the Indonesian archipelago, between the islands of Sumbawa and Flores, is composed of three major islands (Rinca, Komodo, and Padar) and numerous smaller ones, all of them of volcanic origin. Located at the juncture of two continental plates, this national park constitutes the “shatter belt” within the Wallacea Biogeographical Region, between the Australian and Sunda ecosystems.</p>
+        <p>The property is identified as a global conservation priority area, comprising unparalleled terrestrial and marine ecosystems and covers a total area of 219,322 ha. The dry climate has triggered specific evolutionary adaptation within the terrestrial flora that range from open grass-woodland savanna to tropical deciduous (monsoon) forest and quasi cloud forest. The rugged hillsides and dry vegetation highly contrast with the sandy beaches and the blue coral-rich waters.</p>
+        <p>The most remarkable inhabitant of Komodo National Park is the Komodo Lizard, Varanus komodoensis. These giant lizards, existing no-where else in the world, are of great scientific interest, especially for their evolutionary implications. Most commonly known as 'Komodo Dragons', due to its appearance and aggressive behavior, the Komodo Lizard, is the largest living species of lizard, growing to an average length of 2 to 3 meters. The species is the last representative of a relic population of large lizards that once lived across Indonesia and Australia.</p>
+        <p>As well as being home to the Komodo dragon, the Park provides a refuge for many other notable terrestrial species such as the orange-footed scrub fowl, an endemic rat, and the Timor deer. The rich coral reefs of Komodo host a great diversity of species, and the strong currents of the sea attract the presence of sea turtles, whales, dolphins and dugongs.</p>
+<p>&nbsp;</p>
+
+<script src="JS/Komodo.js"></script>
+
+    </body>
+</html>
diff --git a/KomodoGetThere.html b/KomodoGetThere.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>MyFirstWebPage</title>
+    <link href='https://fonts.googleapis.com/css?family=Playfair+Display:900|Raleway:300' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" type="text/css" href="CSS/Komodo.css">
+  </head>
+  <body>
+<h1>Komodo Island</h1>
+
+<div class="dropdown">
+  <button class="dropbtn">MENU</button>
+
+  <div class="dropdown-content">
+    <a href="Komodo.html">Home</a>
+    <a href="KomodoAbout.html">About</a>
+    <a href="KomodoGetThere.html">Getting There</a>
+    <a href="KomodoMedia.html">Media</a>
+  </div>
+
+</div>
+<p>&nbsp;</p>
+
+      <h2>How to Get There</h2>
+        <ul>
+            <li>By flights: There are 1.5 hours daily flights from Bali to Labuan Bajo/Komodo Airport. There is also twice a week flight from Kupang.</li>
+            <li>By Sea: Inter-island motorboats from Sape in West Nusa Tenggara available everyday (weather permits). Pelni ship from Bali and Lombok every two weeks.</li>
+            <li>By Land: Transportations from the Flores areas is also available.</li>
+        </ul>
+        <p>&nbsp;</p>
+
+      <h3>Getting Around</h3>
+          <p>You have to walk to the hills with designated path. On Komodo Island, you have to climb Mt Ara (538 meters above sea level) for 3-4 hours. On Rinca island, you have to trek for about 1.5 hours.</p>
+          <p>&nbsp;</p>
+
+<script src="JS/Komodo.js"></script>
+
+    </body>
+</html>
diff --git a/KomodoMedia.html b/KomodoMedia.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>MyFirstWebPage</title>
+    <link href='https://fonts.googleapis.com/css?family=Playfair+Display:900|Raleway:300' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" type="text/css" href="CSS/Komodo.css">
+  </head>
+  <body>
+<h1>Komodo Island</h1>
+
+<div class="dropdown">
+  <button class="dropbtn">MENU</button>
+
+  <div class="dropdown-content">
+    <a href="Komodo.html">Home</a>
+    <a href="KomodoAbout.html">About</a>
+    <a href="KomodoGetThere.html">Getting There</a>
+    <a href="KomodoMedia.html">Media</a>
+  </div>
+
+</div>
+<p>&nbsp;</p>
+
+  <h2>Media</h2>
+    <p><iframe src="https://www.youtube.com/embed/RaTWq98hzF0?ecver=2" width="640" height="360" frameborder="0" allowfullscreen></iframe></p>
+    <p>&nbsp;</p>
+
+    <div class="img-wrap">
+      <img src="IMG/Komodo1.jpg">
+      <img src="IMG/Komodo2b.jpg">
+      <img src="IMG/Komodo3.jpg">
+      <img src="IMG/Komodo4.jpg">
+      <img src="IMG/Komodo5.jpg">
+      <img src="IMG/Komodo6.jpg">
+      <img src="IMG/Komodo7.jpg">
+      <p>&nbsp;</p>
+    </div>
+
+<script src="JS/Komodo.js"></script>
+
+    </body>
+</html>