Technigo · trista1987 · Jan 30, 2024 · Jan 30, 2024 · Jan 30, 2024 · Jan 31, 2024
diff --git a/README.md b/README.md
@@ -1,12 +1,20 @@
 # Business Site
 
-Replace this readme with your own information about your project. 
+contributors:
+Cornelia Dahlin,
+Yia Tsai,
+Trista Shan
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+This group project is about a summer music festival ticket booking page. 
 
 ## 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?
+We sketched the website layout by Figma. 
+This website is for a summer music festival ticket. We made it by HTML form and CSS, media queries for resposive design. We used javascript for fun because we were curious about the result. 
+If we had more time, we would like to make more 
+We used google, stack over flow, materials as well as chatGPT to solve the problems. 
+If we had time, we would like to make the website more beautiful by using CSS. 
 
 ## 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.
+Here is the link of our project: https://team-lightening1-business-site.netlify.app/
+
diff --git a/code/festival_gif_360.gif b/code/festival_gif_360.gif
diff --git a/code/index.html b/code/index.html
@@ -4,14 +4,129 @@
     <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">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
   </head>
-  <body>
-    <h1>Business name 🌻</h1>
+
+<body>
+<div class="container">
+<!-- Hero Video -->
+<div class="hero">
+  <video autoplay muted loop playsinline>
+    <source src="https://assets.mixkit.co/videos/preview/mixkit-crowd-jumping-at-the-concert-14084-large.mp4" type="video/mp4">
+  </video>
+  <div class="text-container">
+    <h1>SUMMER JAM</h1>
+    <div class="text-background">
+      <h2>Don't miss out on the ultimate summer experience. Secure your spot and join us for an unforgettable weekend of music, joy, and summer vibes. Get your tickets now! 🎟️</h2>
+    </div>
+  </div>
+</div>
+
+<h3>Access passes here</h3>
+
+<form action="https://httpbin.org/anything" method="post" name="signupForm">
+
+  <!-- Ticket Radio Input -->
+  <div class="form-area">
+    <label>Festival Tickets</label>
+    <select name="tickets" required>
+      <option value="" selected disabled>Select your ticket</option>
+      <option value="friday">Friday Ticket - 1.099,00 SEK</option>
+      <option value="saturday">Saturday Ticket - 1.099,00 SEK</option>
+      <option value="sunday">Sunday Ticket - 1.099,00 SEK</option>
+      <option value="3day">3-Day Ticket - 2.499,00 SEK</option>
+    </select>
+  </div>
+
+  <!-- Ticket Amount Input -->
+  <div class="form-area">
+    <label>Amount of tickets</label>
+    <input type="number" id="ticket-amount" name="amount" min="1" value="1">
+  </div>
 
-    <!-- video or image as a header is cool :) -->
+  <!-- Text Input -->
+  <div class="form-area">
+    <label>Full name</label>
+    <input type="text" id="fullname" placeholder="Type your name" name="fullname" required>
+  </div>
 
-    <!-- Signup form -->
+  <!-- Email Input -->
+  <div class="form-area">
+    <label>Email</label>
+    <input type="email" id="email" placeholder="[email protected]" name="email" required>
+  </div>
 
-  </body>
-</html>
+  <!-- Phone Input -->
+<div class="form-area">
+  <label>Phone</label>
+  <input type="tel" name="telephone" placeholder="### ### ### ###" required>
+</div>
+
+<div class="form-area">
+  <label>Payment</label>
+  <div class="payment-options">
+    <label class="radio-option">
+      <input type="radio" name="payment" value="visa" required>
+      Visa
+    </label>
+    <label class="radio-option">
+      <input type="radio" name="payment" value="mastercard" required>
+      Mastercard
+    </label>
+    <label class="radio-option">
+      <input type="radio" name="payment" value="amex" required>
+      Amex
+    </label>
+    <label class="radio-option">
+      <input type="radio" name="payment" value="applepay" required>
+      Apple Pay
+    </label>
+    <label class="radio-option">
+      <input type="radio" name="payment" value="paypal" required>
+      Paypal
+    </label>
+    <label class="radio-option">
+      <input type="radio" name="payment" value="klarna" required>
+      Klarna
+    </label>
+  </div>
+</div>
+
+  <!-- Submit Button -->
+  <div class="form-area">
+    <button class="submit" id="submit">SUBMIT</button>
+  </div>
+</div>
+
+
+ <!-- "Back to Top" button -->
+ <button id="goTopBtn" onclick="goTop()"><i class="fas fa-arrow-up"></i></button>
+ <script>
+
+   var mybutton = document.getElementById("goTopBtn");
+
+
+   window.onscroll = function() {
+     scrollFunction();
+   };
+
+   function scrollFunction() {
+     if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+       mybutton.style.display = "block";
+     } else {
+       mybutton.style.display = "none";
+     }
+   }
+
+
+   function goTop() {
+     document.body.scrollTop = 0; 
+     document.documentElement.scrollTop = 0; 
+   }
+ </script>
+<footer>
+  Conelia, Yia and Trista | Technigo Boot Camp 2024
+</footer>
+</body>
+</html>
diff --git a/code/style.css b/code/style.css
@@ -1,5 +1,190 @@
-/* After you've linked the CSS file in the HTML,
-this should turn the background blue ;) */
+*{
+  box-sizing: border-box;
+  margin: 0px;
+  padding: 0px;
+}
+
 body {
-  background: blue;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: center;
+  background-image: linear-gradient(#f6a31b,#c75727)
+}
+
+.container {
+  background-color: white;
+  padding: 15px;
+  border-radius: 15px; 
+  width: 70%; 
+  margin: 40px auto;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+}
+
+@media (max-width: 667px) {
+  .container {
+    width: 90%;
+    margin: 15px auto;
+  }
+}
+
+/* Hero Video */
+.hero {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+video {
+  width: 100%;
+  border-radius: 15px;
+}
+
+.text-container {
+  position: absolute;
+  width: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+}
+
+/* Hero Text */
+h1 {
+  top: 35%;
+  font-size: 45px;
+  color: #da602d;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+h2 {
+  font-size: 14px;
+  color: #FFFFFF;
+  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  letter-spacing: 1.2px; 
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.text-background {
+  background: rgba(0, 0, 0, 0.5); 
+  padding: 20px;
+}
+
+
+ /* Media query for screens smaller than 667px */
+ @media (max-width: 667px) {
+  video {
+    width: 100%;
+    border-radius: 10px;
+  }
+
+  h1 {
+    font-size: 25px;
+    letter-spacing: 1px;
+  }
+
+.text-background, h2 {
+    display: none;
+  }
+}
+
+/* Form Heading */
+h3 {
+margin-top: 20px;
+text-align: center; 
+  font-size: 24px;
+  color: #333; 
+  font-family:'Vollkorn', serif;
+}
+
+/* Form Area */
+.form-area {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center; 
+}
+
+.form-area input,
+.form-area select {
+  width: 80%;
+  padding: 8px;
+  margin-top: 5px;
+  box-sizing: border-box;
+  text-align: center;
+  font-family: "Arial", sans-serif;
+  font-size: 14px;
+}
+
+@media (max-width: 667px) {
+  .form-area label,  
+  .form-area input,
+   .form-area select {
+      font-size: 8px; 
+    }
+
+    h3 {
+      font-size: 18px; 
+    }
+  }
+
+.payment-options {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-top: 8px;
+  gap: 20px;
+}
+
+.form-area button {
+  padding: 10px 20px;
+  background-color: #000000;  
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.form-area button:hover {
+  background-color: #f6a31b;
+}
+
+.radio-option {
+  margin-right: 10px; 
+  margin-bottom: 10px; 
+  font-weight: lighter;
+}
+
+label {
+  font-size: 15px;
+  font-weight: bold;
+  font-family: "Arial", sans-serif; 
+}
+
+/* "Back To The Top"-button */
+#goTopBtn {
+  display: none;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background-color: #000000;
+  color: #ffffff;
+  border: none;
+  border-radius: 5px;
+  padding: 10px;
+  cursor: pointer;
+  font-size: 16px;
+  transition: background-color 0.3s ease;
+}
+
+#goTopBtn:hover {
+  background-color: #f6a31b; 
+}
+
+footer{
+  text-align: center;
+  font-style: "Arial", sans-serif;
+  color: white;
 }