11-13-24

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

faqs.html

@@ -21,6 +21,20 @@
 
 <div id="content">
 
+  <h1>Frequently Asked Questions:</h1>
+  <div id="faq-box">
+    <ul>
+      <li>Power outlets are 120 volts (the same as in the United States).</li>
+      <li>Alcohol is not allowed to be served or sold between the hours of midnight and 9:00 a.m.</li>
+      <li>The drinking age on Taniti is 18 and the drinking age is not strictly enforced.</li>
+      <li>Many younger Tanitians speak fluent English. Very little English is spoken in rural areas, especially by the older residents.</li>
+      <li>There is one hospital and several clinics. The hospital has many multilingual employees.</li>
+      <li>Violent crime is very rare on Taniti, but as tourism increases, there are more reports of pickpocketing and other petty crimes.</li>
+      <li>Taniti enjoys a large number of national holidays, and many tourist attractions and restaurants will be closed on holidays, so visitors should plan accordingly.</li>
+      <li>Taniti uses the U.S. dollar as its currency, but many businesses will also accept euros and yen.</li>
+    </ul>
+  </div>
+
 </div>
 </body>
 </html>

index.html

@@ -19,9 +19,30 @@
         </ul>
     </header>
 
+    <div id="top-banner">
+        <img src="images/islands.jpg" alt="Picture of Islands" >
+    </div>
+
     <div id="content">
-        <h1>Welcome to Paradise</h1>
-        <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>
+
+        <h1>Welcome to Paradise!</h1>
+
+        <div style="text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; margin-top: 50px;">
+            <div class="button">Book a trip!</div>
+        </div>
+
+        <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>
+
+        <div class="split-container">
+            <h3>Visit our <a href="faqs.html">FAQs</a> for more information!</h3>
+        </div>
+
     </div>
 </body>
 </html>

styles.css

@@ -3,7 +3,7 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    font-family: "DejaVu Serif", sans-serif;
+    font-family: "DejaVu Sans", sans-serif;
 }
 
 body {
@@ -74,11 +74,10 @@ header img {
     justify-content: center;
     text-align: center;
     width: 100%;
-    margin: 1%;
 }
 
 #content p {
- margin: 1%;
+    font-size: large;
 }
 
 #content a {
@@ -88,4 +87,69 @@ header img {
 
 #content a:hover {
     text-decoration: underline;
+}
+
+#top-banner {
+    width: 100%;
+    height: 25vh;
+    overflow: hidden;
+}
+
+#top-banner img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.split-container {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.split-container>* {
+    margin: 2%;
+    flex-grow: 1;
+}
+
+.split-container img {
+    border: 20px solid #669a87ff;
+    border-radius: 10px;
+    rotate: 5deg;
+    width: 100%;
+    height: auto;
+    transition: scale 0.3s;
+}
+
+.split-container img:hover {
+    scale: 1.1;
+    transition: scale 0.3s;
+}
+
+.button {
+    margin: 0;
+    background-color: #669a87ff;
+    color: white;
+    outline: #669a87ff solid 5px;
+    outline-offset: -1px;
+    text-align: center;
+    border-radius: 10px;
+    padding: 20px;
+    width: 300px;
+    transition: outline-offset ease-in-out 0.3s;
+}
+
+.button:hover {
+    outline: #669a87ff solid 5px;
+    outline-offset: 5px;
+    transition: outline-offset ease-in-out 0.3s;
+}
+
+#faq-box {
+    margin: 5% 10%;
+}
+
+#faq-box li {
+    margin-bottom: 30px;
 }