diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/faqs.html b/faqs.html index b57a18d..a30e520 100644 --- a/faqs.html +++ b/faqs.html @@ -21,6 +21,20 @@
+

Frequently Asked Questions:

+
+ +
+
diff --git a/images/islands.jpg b/images/islands.jpg new file mode 100644 index 0000000..8b7cbfc Binary files /dev/null and b/images/islands.jpg differ diff --git a/images/istockphoto-501296920-612x612.jpg b/images/istockphoto-501296920-612x612.jpg new file mode 100644 index 0000000..fa83f9c Binary files /dev/null and b/images/istockphoto-501296920-612x612.jpg differ diff --git a/index.html b/index.html index b4aad14..5b98dab 100644 --- a/index.html +++ b/index.html @@ -19,9 +19,30 @@ +
+ Picture of Islands +
+
-

Welcome to Paradise

-

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.

+ +

Welcome to Paradise!

+ +
+
Book a trip!
+
+ +
+
+

About The Island

+

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.

+
+ Island photo 2 +
+ +
+

Visit our FAQs for more information!

+
+
diff --git a/styles.css b/styles.css index 211f0e0..8d9c83a 100644 --- a/styles.css +++ b/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; } \ No newline at end of file