Technigo · jempa182 · Sep 1, 2024 · Sep 1, 2024 · Sep 1, 2024 · Sep 1, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1,12 +1,6 @@
 # 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.
-
-## 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?
+The task was to create a business one-pager website that contains an image or video header and a signup form. The main focus is practising what you've learned about HTML forms. You can make up your own fantasy company or use an existing one.
 
 ## 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.
+https://binge-streaming-business-site.netlify.app/
diff --git a/code/.DS_Store b/code/.DS_Store
diff --git a/code/assets/.DS_Store b/code/assets/.DS_Store
diff --git a/code/assets/logo-binge2.png b/code/assets/logo-binge2.png
diff --git a/code/assets/logo-example.png b/code/assets/logo-example.png
diff --git a/code/assets/pool-hang-2.jpg b/code/assets/pool-hang-2.jpg
diff --git a/code/assets/pool-hang.jpg b/code/assets/pool-hang.jpg
diff --git a/code/index.html b/code/index.html
@@ -1,17 +1,44 @@
 <!DOCTYPE html>
-<html>
-  <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! -->
-  </head>
-  <body>
-    <h1>Business name 🌻</h1>
-
-    <!-- video or image as a header is cool :) -->
-
-    <!-- Signup form -->
-
-  </body>
-</html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Binge Streaming Service</title>
+  <link rel="stylesheet" href="./style.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+</head>
+<body>
+  <main class="container">
+    <section class="video-background">
+      <video autoplay loop muted playsinline> 
+        <source src="https://videos.pexels.com/video-files/6976213/6976213-uhd_1920_1440_25fps.mp4" type="video/mp4">
+      </video>
+      <h1 class="overlay-text">Watched everything? <br>Don't worry - we've got more!</h1>
+    </section>
+
+    <section class="form-container">
+      <img src="./assets/logo-binge2.png" alt="Binge logo">
+      <form action="https://httpbin.org/anything" method="POST">
+        <h2>Your new favorite streaming service</h2>
+        <p>Sign up now to try it out for free!</p>
+        <input type="text" placeholder="Name" required>
+        <input type="email" placeholder="Email" required>
+        <input type="password" placeholder="Password" required>
+        <input type="password" placeholder="Repeat password" required>
+
+        <div class="radio-group">
+          <label><input type="radio" name="length" value="Monthly"> Monthly</label>
+          <label><input type="radio" name="length" value="Yearly"> Yearly</label>
+        </div>
+        <div class="checkbox-group">
+          <input type="checkbox" id="terms" required>
+          <label for="terms">I accept the terms & conditions.</label>
+        </div>
+        <button type="submit">START STREAMING</button>
+      </form>
+    </section>
+  </main>
+</body>
+</html>
diff --git a/code/style.css b/code/style.css
@@ -1,5 +1,157 @@
-/* After you've linked the CSS file in the HTML,
-this should turn the background blue ;) */
-body {
-  background: blue;
+/* Base styles */
+body, html {
+  margin: 0;
+  padding: 0;
+  font-family: "Montserrat", sans-serif;
+  height: 100%;
+  background-color: rgb(250, 243, 102);
+}
+
+/* Layout */
+.container {
+  display: flex;
+  height: 100%;
+  min-height: 100vh;
+}
+
+/* Video background styles */
+.video-background {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+video {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  min-width: 100%;
+  min-height: 100%;
+  transform: translate(-50%, -50%);
+  object-fit: cover;
+}
+
+.overlay-text {
+  position: absolute;
+  top: 45%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  text-align: center;
+  font-size: 2rem;
+}
+
+/* Form container styles */
+.form-container {
+  flex: 1;
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.container img {
+  max-width: 200px;
+  margin: 0 auto;
+  padding-bottom: 20px;
+}
+
+/* Form styles */
+form {
+  max-width: 380px;
+  margin: 0 auto;
+}
+
+h2 {
+  text-align: center;
+  margin-bottom: 2rem;
+  font-size: 1.7rem;
+}
+
+p {
+  text-align: center;
+  margin-bottom: 2rem;
+  font-size: 1rem;
+}
+
+/* Form input styles */
+input[type="text"], 
+input[type="email"], 
+input[type="password"] {
+  width: 95%;
+  padding: 0.8rem;
+  margin-bottom: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.radio-group {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 1rem;
+}
+
+.checkbox-group {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.checkbox-group label {
+  margin-left: 0.5rem;
+}
+
+button {
+  width: 100%;
+  padding: 0.75rem;
+  background-color: black;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-family: "Montserrat", sans-serif;
+}
+
+/* Responsive styles */
+
+/* Tablet or Desktop */
+@media (max-width: 768px) {
+  .container {
+    flex-direction: column;
+  }
+
+  .video-background {
+    height: 30vh;
+  }
+
+  .form-container {
+    padding: 1rem;
+  }
+}
+
+/* Mobile */
+@media (min-width: 300px) and (max-width: 768px) {
+  .form-container {
+    width: 87%;
+    margin-top: 10px;
+    margin-bottom: 50px;
+  }
+
+  .overlay-text {
+    text-align: center;
+    margin-bottom: 2rem;
+    font-size: 1.2rem;
+  }
+
+  .video-background {
+    height: 100vh;
+  }
+
+  video {
+    width: 100%;
+    height: 100%;
+    transform: translate(-50%, -50%) scale(1.2);
+    object-position: center;
+  }
 }