11-14-24

faqs.html

@@ -36,5 +36,12 @@
   </div>
 
 </div>
+<footer>
+  <ul>
+    <li>Design by <a href="https://bellsworne.com">Bellsworne Tech</a></li> |
+    <li><a href="https://git.bellsworne.tech/chrisbell/d479-prototype">Page source</a></li> |
+    <li>&copy;2024</li>
+  </ul>
+</footer>
 </body>
 </html>

food-and-attractions.html

@@ -19,8 +19,54 @@
   </ul>
 </header>
 
-<div id="content">
+  <div id="content">
 
-</div>
+    <h1>See the sights and eat some grub!</h1>
+
+    <h2>Food</h2>
+
+    <div class="split-container">
+      <div class="fifty-percent">
+        <h3>Restaurants</h3>
+        <p>Taniti currently has 10 restaurants: five serve mostly local fish and rice, three serve American-style meals, and two serve Pan-Asian cuisine.</p>
+      </div>
+      <div class="image-container-right"><img src="images/tropical-forest-restaurant.jpg" alt="Beach diner"></div>
+    </div>
+
+    <div class="split-container">
+      <div>
+        <h3>Grocery stores</h3>
+        <p>Taniti has two supermarkets, two smaller grocery stores, and one convenience store that is open 24 hours a day. </p>
+      </div>
+      <div class="image-container-left"><img src="images/Dining_Bluewater.jpg" alt=""></div>
+    </div>
+
+    <h2>Attractions</h2>
+
+    <div class="split-container">
+      <div>
+        <h3>Entertainment</h3>
+        <p>Most people visit Taniti to enjoy the beaches, explore the rainforest, and to visit the volcano. However, there are other things to do, including visiting a local history museum, going on chartered fishing tours, snorkeling, zip-lining in the rainforest, visiting several pubs, including a microbrewery, dancing at a new dance club, seeing a movie, taking helicopter rides, playing at an arcade, visiting art galleries, and bowling. Also, a nine-hole golf course should be operational by next year. Many of these activities are located in Merriton Landing, which is a rapidly developing area on the north side of Yellow Leaf Bay. </p>
+      </div>
+      <div class="image-container-right"><img src="images/rock-climbing.jpg" alt=""></div>
+    </div>
+
+    <div class="split-container">
+      <div>
+        <h3>Sight-Seeing</h3>
+        <p>Most tourists spend most of their time in Taniti City, which boasts native architecture and nearby white, sandy beaches that encircle Yellow Leaf Bay. Other popular activities include boat or bus tours of the island, hikes in the rainforest, or visits to Taniti’s active volcano.</p>
+      </div>
+      <div class="image-container-left"><img src="images/active-volcano-tour.jpg" alt=""></div>
+    </div>
+
+
+  </div>
+<footer>
+  <ul>
+    <li>Design by <a href="https://bellsworne.com">Bellsworne Tech</a></li> |
+    <li><a href="https://git.bellsworne.tech/chrisbell/d479-prototype">Page source</a></li> |
+    <li>&copy;2024</li>
+  </ul>
+</footer>
 </body>
 </html>

index.html

@@ -31,18 +31,26 @@
             <div class="button">Book a trip!</div>
         </div>
 
+        <h2>About the Island</h2>
+
         <div class="split-container">
             <div>
-                <h3>About The Island</h3>
                 <p>Taniti is a small, tropical island in the Pacific. While the island has an area of less than 500 square miles, the terrain is varied and includes both sandy and rocky beaches, a small but safe harbor, lush tropical rainforests, and a mountainous interior that includes a small, active volcano. Taniti has an indigenous population of about 20,000. Until a recent increase in tourism, most the Tanitian economy was dominated by fishing or agriculture.</p>
             </div>
-            <img src="images/istockphoto-501296920-612x612.jpg" alt="Island photo 2">
+            <div class="image-container-right"><img src="images/istockphoto-501296920-612x612.jpg" alt="Island photo 2"></div>
         </div>
 
         <div class="split-container">
             <h3>Visit our <a href="faqs.html">FAQs</a> for more information!</h3>
         </div>
-
     </div>
+
+<footer>
+    <ul>
+        <li>Design by <a href="https://bellsworne.com">Bellsworne Tech</a></li> |
+        <li><a href="https://git.bellsworne.tech/chrisbell/d479-prototype">Page source</a></li> |
+        <li>&copy;2024</li>
+    </ul>
+</footer>
 </body>
 </html>

lodging.html

@@ -21,6 +21,31 @@
 
 <div id="content">
 
+  <h1>Come and stay a while!</h1>
+
+  <h2>Lodging</h2>
+
+  <div class="split-container">
+    <div>
+      <h3>Enjoy a worry free stay</h3>
+      <p>Taniti has a wide variety of lodging that ranges from an inexpensive hostel to one large, four-star resort. There are many small, family-owned hotels and a growing number of bed and breakfasts. All types of lodging are strictly regulated and regularly inspected by the Tanitian government.</p>
+    </div>
+    <div class="image-container-right"><img src="images/beach-hut.jpg" alt="Beach diner"></div>
+  </div>
+
+  <div class="split-container">
+    <div>
+    </div>
+    <div class="image-container-left"><img src="images/island-hotel.webp" alt=""></div>
+  </div>
+
 </div>
+<footer>
+  <ul>
+    <li>Design by <a href="https://bellsworne.com">Bellsworne Tech</a></li> |
+    <li><a href="https://git.bellsworne.tech/chrisbell/d479-prototype">Page source</a></li> |
+    <li>&copy;2024</li>
+  </ul>
+</footer>
 </body>
 </html>

styles.css

@@ -64,18 +64,23 @@ header img {
     align-items: flex-start;
     flex-direction: column;
     width: 90%;
-    height: 100vh;
     margin: auto;
     background-color: #d4d4bcff;
     padding: 1%;
 }
 
-#content h1 {
+#content h1, h2 {
     justify-content: center;
     text-align: center;
     width: 100%;
 }
 
+#content h2 {
+    margin-top: 50px;
+    border-bottom: 5px solid #232323ff;
+    border-radius: 10px;
+}
+
 #content p {
     font-size: large;
 }
@@ -109,21 +114,40 @@ header img {
 }
 
 .split-container>* {
+    flex: 1;
     margin: 2%;
-    flex-grow: 1;
+    box-sizing: border-box;
 }
 
-.split-container img {
+.image-container-left, .image-container-right {
+    width: 1500px;
+    height: 400px;
     border: 20px solid #669a87ff;
     border-radius: 10px;
-    rotate: 5deg;
-    width: 100%;
-    height: auto;
     transition: scale 0.3s;
+    overflow: hidden;
+    padding: 0;
+    margin-top: 80px;
 }
 
-.split-container img:hover {
-    scale: 1.1;
+.image-container-right {
+    rotate: 5deg;
+}
+
+.image-container-left {
+    rotate: -5deg;
+}
+
+.image-container-left img, .image-container-right img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    margin: 0;
+    padding: 0;
+}
+
+.image-container-left:hover, .image-container-right:hover {
+    scale: 1.05;
     transition: scale 0.3s;
 }
 
@@ -152,4 +176,38 @@ header img {
 
 #faq-box li {
     margin-bottom: 30px;
-}
+}
+
+footer {
+    width: 100%;
+    height: 5vh;
+    background-color: #45452e;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+
+footer ul {
+    display: flex;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    width: 48%;
+    justify-content: center;
+}
+
+footer ul li {
+    padding: 0 10px;
+}
+footer ul li a {
+    text-decoration: underline;
+    color: white;
+    transition: color 0.3s ease-in-out;
+}
+
+footer ul li a:hover {
+    transition: color 0.3s ease-in-out;
+    color: #232323ff;
+}

transportation.html

@@ -21,6 +21,33 @@
 
 <div id="content">
 
+  <h1>Get around the island</h1>
+
+  <h2>Transportation</h2>
+
+  <div class="split-container">
+    <div>
+      <h3>Transport to and from the island</h3>
+      <p>Taniti has a wide variety of lodging that ranges from an inexpensive hostel to one large, four-star resort. There are many small, family-owned hotels and a growing number of bed and breakfasts. All types of lodging are strictly regulated and regularly inspected by the Tanitian government.</p>
+    </div>
+    <div class="image-container-right"><img src="images/jet.jpg" alt="Jet plane"></div>
+  </div>
+
+  <div class="split-container">
+    <div>
+      <h3>Ground transportation</h3>
+      <p>Public buses serve Taniti City and run from 5 a.m. to 11 p.m. every day. Private buses serve the rest of the island. Taxis are available in Taniti City, and rental cars can be rented from a local rental agency near the airport. Bikes and helmets are available to rent from several vendors (helmets are required by law). Taniti City is fairly flat and very walkable. Many tourists stay in the area surrounding Merriton Landing: this area is easy to explore on foot.</p>
+    </div>
+    <div class="image-container-left"><img src="images/island-taxi.jpg" alt=""></div>
+  </div>
+
 </div>
+<footer>
+  <ul>
+    <li>Design by <a href="https://bellsworne.com">Bellsworne Tech</a></li> |
+    <li><a href="https://git.bellsworne.tech/chrisbell/d479-prototype">Page source</a></li> |
+    <li>&copy;2024</li>
+  </ul>
+</footer>
 </body>
 </html>