Technigo · erikamolsson · Aug 29, 2024 · Aug 30, 2024 · Aug 31, 2024 · Aug 31, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1,12 +1,16 @@
 # Business Site
 
-Replace this readme with your own information about your project. 
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+For this project i chose to build a business landing page for guided bus tours in Scotland. I designed a page with a hero image, 3 info-elements and one form to if you want to book a guided tour.
 
 ## The problem
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+I started of by making a design in figma. I started by watching/googling how to make a hero image to start with. And it was more tricky then I imagined - but I managed to do it! I did the landing page in general and did the form last of all. I didn't want the input of the form to be to big of a size - and therefor I used flexbox to put the label and input next to each other. And did the same for the other element in the form as well. For the form I used input type: number, text and email.
+
+I felt I could have worked much longer with the styling and fonts in general for the landing page. But also tried out more attributes for the form.
 
 ## View it live
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+Business site: https://business-site-guided-trip-scotland.netlify.app 
+
+
+## View it live with "Accessibility"
+Business site: https://project-8-accessibility--business-site-guided-trip-scotland.netlify.app/ 
diff --git a/code/.DS_Store b/code/.DS_Store
diff --git a/code/images/.DS_Store b/code/images/.DS_Store
diff --git a/code/images/harry-potter-train-new.jpg b/code/images/harry-potter-train-new.jpg
diff --git a/code/images/harry-potter-train.jpg b/code/images/harry-potter-train.jpg
diff --git a/code/images/header-scotland-new.jpg b/code/images/header-scotland-new.jpg
diff --git a/code/images/header-scotland.jpg b/code/images/header-scotland.jpg
diff --git a/code/images/loch-ness-new.jpg b/code/images/loch-ness-new.jpg
diff --git a/code/images/loch-ness.jpg b/code/images/loch-ness.jpg
diff --git a/code/images/logo-bc.png b/code/images/logo-bc.png
diff --git a/code/images/the-highlands-new.jpg b/code/images/the-highlands-new.jpg
diff --git a/code/images/the-highlands.jpg b/code/images/the-highlands.jpg
diff --git a/code/index.html b/code/index.html
@@ -1,17 +1,161 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Business Site</title>
     <!-- dont forget to add a css file and link it here! -->
+     <link rel="stylesheet" href="style.css">
   </head>
   <body>
-    <h1>Business name 🌻</h1>
+    <!-- header - fullwidth image, logo and menu -->
+    <header>
+      <article class="header-content-width">
+          <div role="img" class="main-logo">
+            <img src="./images/logo-bc.png" width="60" alt="BU Logo">
+          </div>
+
+          <!-- hamburgermenu (fake) -->
+          <nav class="nav-small-screen">
 
-    <!-- video or image as a header is cool :) -->
+            <ul class="nav-small-screen-links" role="menu" id="myLinks">
+              <li class="nav-menu-links" role="presentation"><a href="#about-us">About us</a></li>
+              <li class="nav-menu-links" role="presentation"><a href="#guided-trips">Guided trips</a></li>
+              <li class="nav-menu-links" role="presentation"><a href="#book-a-tour">Book a tour</a></li>
+            </ul>
 
-    <!-- Signup form -->
+            <ul class="nav-small-screen-icon" href="javascript:void(0);" onclick="clickForMenu()">
+              <li class="nav-menu-item-small-screen"></li>
+              <li class="nav-menu-item-small-screen"></li>
+              <li class="nav-menu-item-small-screen"></li>
+            </ul>
+          </nav>
+      </article>
+
+      <article class="header-textbox">
+        <h1>EXPLORE SCOTLAND WITH US</h1>
+        <p>Book a ticket for a bus seat today and join us for an amazing guided two weeks in Scotlands great dunes! Food, culture, nature and more - we won’t let you miss anything. Not even the windy great cliffs!</p>
+        <br>
+        <div role="button" class="button-header-flex">
+          <a href="#" target="_blank" class="button-header">Read more</a> 
+          <a href="#" target="_blank" class="button-header">Book a ticket</a>
+        </div>
+      </article>
+    </header>
+
+
+    <!-- main container -->
+    <main class="main-container">
+
+      <h2 class="section-tour-example-h2">Read more about the different guided tours you can book with us down below</h2>
+
+      <section class="section-tour-example">
+
+        <article class="tour-example">
+          <p class="small-text-tour-example">2-day trip</p>
+          <h3>The Harry Potter train!</h3>
+          <div role="img">
+            <img class="tour-example-img" src="./images/harry-potter-train-new.jpg" alt="Guided tours: Harry Potter train">
+          </div>
+          <div role="button" class="div-button-tour-example">
+            <a href="#" target="_blank" class="button-tour-example">Tour details</a> 
+          </div>
+        </article>
+
+        <article class="tour-example">
+          <p class="small-text-tour-example">4-day trip</p>
+          <h3>The monster of Loch Ness!</h3>
+            <div role="img">
+              <img class="tour-example-img" src="./images/loch-ness-new.jpg" alt="Guided tours: Loch Ness">
+            </div>
+            <div role="button" class="div-button-tour-example">
+              <a href="#" target="_blank" class="button-tour-example">Tour details</a> 
+            </div>
+        </article>
+
+        <article class="tour-example">
+          <p class="small-text-tour-example">8-day trip</p>
+          <h3>Glorious Inverness!</h3>
+          <div role="img">
+            <img class="tour-example-img" src="./images/the-highlands-new.jpg" alt="Guided tours: The Highlands">
+          </div>
+          <div role="button" class="div-button-tour-example">
+            <a href="#" target="_blank" class="button-tour-example">Tour details</a> 
+          </div>
+        </article>
+
+      </section>
+
+      <!-- Signup form -->
+      <h2 class="section-tour-example-h2">Sign up on a trip below - and we will contact you further!</h2>
+
+      <form class="form-book-a-tour" action="https://httpbin.org/anything" method="post">
+        <!-- choose a trip -->
+        <article class="label-input-flex">
+          <label for="guided-trip">Which trip are you intrested in?</label>
+          <select id="guided-trip" name="guided-trip">
+            <option value="harry-potter">Harry Potter Train</option>
+            <option value="loch-ness">Loch Ness</option>
+            <option value="inverness">Inverness</option>
+          </select>
+        </article>
+
+        <!-- date -->
+        <article class="label-input-radio">
+          <p class="label-for-radio">Choose a month of your arrival in Scotland:</p>
+            <ul class="radioboxes">
+              <li>
+                <input type="radio" id="date-1" name="date-arrival" value="September">
+                <label for="date-1">September</label>
+              </li>
+              <li> 
+                <input type="radio" id="date-2" name="date-arrival" value="November">
+                <label for="date-2">November</label>
+              </li>
+              <li>
+                  <input type="radio" id="date-3" name="date-arrival" value="December">
+                  <label for="date-3">December</label>
+              </li>
+            </ul>
+        </article>
+
+        <fieldset>
+          <legend>Your information:</legend>
+          <!-- namn -->
+          <p class="label-input-flex">
+            <label for="name">Name</label>
+            <input type="text" name="name" id="name" required aria-required="true">
+          </p>
+          <!-- mejl -->
+          <p class="label-input-flex">
+            <label for="email">E-mail</label>
+            <input type="email" name="email" id="email" required aria-required="true">
+          </p>
+          <!-- phone -->
+          <p class="label-input-flex">
+            <label for="number">Phone number</label>
+            <input type="number" id="number">
+          </p>
+        </fieldset>
+
+        <p class="button-submit-flex">
+          <input type="submit" value="Submit">
+        </p>
+
+      </form>
+
+    </main>
+
+    <script>
+      function clickForMenu() {
+        var x = document.getElementById("myLinks");
+        if (x.style.display === "flex") {
+            x.style.display = "none";
+        } else {
+            x.style.display = "flex";
+        }
+      }
+    </script>
 
   </body>
 </html>