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,12 @@
 # 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 
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.jpg b/code/images/harry-potter-train.jpg
diff --git a/code/images/header-scotland.jpg b/code/images/header-scotland.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.jpg b/code/images/the-highlands.jpg
diff --git a/code/index.html b/code/index.html
@@ -5,13 +5,132 @@
     <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>
+      <div class="header-content-width">
+          <div class="main-logo">
+            <img src="./images/logo-bc.png" width="60" alt="BU Logo">
+          </div>
+
+          <!-- hamburgermenu (fake) -->
+          <nav class="nav-small-screen">
+            <ul>
+              <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>
+      </div>
 
-    <!-- video or image as a header is cool :) -->
+      <div 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 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>
+      </div>
+    </header>
+
+
+    <!-- main container -->
+    <main class="main-container">
 
-    <!-- Signup form -->
+      <h2 class="section-tour-example-h2">Read more about our 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>
+            <img class="tour-example-img" src="./images/harry-potter-train.jpg" alt="Guided tours">
+          </div>
+          <div class="div-button-tour-example">
+            <a href="#" target="_blank" class="button-header">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>
+              <img class="tour-example-img" src="./images/loch-ness.jpg" alt="Guided tours">
+            </div>
+            <div class="div-button-tour-example">
+              <a href="#" target="_blank" class="button-header">Tour details</a> 
+            </div>
+        </article>
+
+        <article class="tour-example">
+          <p class="small-text-tour-example">8-day trip</p>
+          <h3>Glorious Inverness!</h3>
+          <div>
+            <img class="tour-example-img" src="./images/the-highlands.jpg" alt="Guided tours">
+          </div>
+          <div class="div-button-tour-example">
+            <a href="#" target="_blank" class="button-header">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 -->
+        <div 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>
+        </div>
+
+        <!-- date -->
+        <div class="label-input-radio">
+          <p class="label-for-radio">Choose a month of your arrival in Scotland:</p>
+            <div class="radioboxes">
+              <input type="radio" id="date-1" name="date-1" value="September">
+              <label for="date-1">September</label><br>
+              <input type="radio" id="date-2" name="date-2" value="November">
+              <label for="date-2">November</label><br>
+              <input type="radio" id="date-3" name="date-3" value="December">
+              <label for="date-3">December</label><br>
+            </div>
+        </div>
+
+        <fieldset>
+          <legend>Your information:</legend>
+          <!-- namn -->
+          <div class="label-input-flex">
+            <label for="name">Name</label>
+            <input type="text" name="name" id="name">
+          </div>
+          <!-- mejl -->
+          <div class="label-input-flex">
+            <label for="email">E-mail</label>
+            <input type="email" name="email" id="email" required>
+          </div>
+          <!-- phone -->
+          <div class="label-input-flex">
+            <label for="number">Phone number</label>
+            <input type="number" id="number">
+          </div>
+        </fieldset>
+
+        <div class="button-submit-flex">
+          <input type="submit" value="Submit">
+        </div>
+
+      </form>
+
+    </main>
   </body>
 </html>