Technigo · Fannyhenriques · Aug 27, 2024 · Aug 28, 2024 · Aug 30, 2024 · Aug 30, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1,12 +1,24 @@
-# Business Site
+This project was developed to create a responsive business website for BlueWave Scuba, featuring a full-width header video and a sign-up form with various inputs. The site was supposed to adapt seamlessly across devices with screen widths ranging from 320px to 1600px.
 
-Replace this readme with your own information about your project. 
+The main challenges were:
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+- Integrating a full-width video in the header that remains fixed and scales properly across different screen sizes.
+- Building a responsive sign-up form that adapts to various device widths, from small mobile screens to large desktops.
 
-## The problem
+To address the first challenge, I used a video element within the header and applied CSS properties such as object-fit: cover and position: sticky to ensure the video maintained its size and stayed fixed in the header.
+
+For the second challenge, I employed a combination of flexible layout techniques and media queries to ensure the form's responsiveness. I started by building the form with a mobile-first approach, then added media queries to adjust the layout and styling for larger screens.
+
+Tools and Technologies Used
+Google Fonts: To enhance the typography.
+Responsive Design: Utilizing media queries for a seamless experience across devices.
+
+If I had more time, I would:
+- Add a navigation bar and a logo to improve site structure and branding.
+- Include additional information about what BlueWave Scuba offers to provide visitors with a clear understanding of the site's purpose.
+- Add additional form validation.
+- Incorporate animations to enhance user interaction.
 
-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?
 
 ## 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.
+Deployed project: https://bluewavescuba.netlify.app
diff --git a/code/index.html b/code/index.html
@@ -1,17 +1,68 @@
 <!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>
+<html lang="en">
 
-    <!-- video or image as a header is cool :) -->
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap">
+  <title>Blue-wave-scuba</title>
+</head>
 
-    <!-- Signup form -->
+<body>
+  <header>
+    <div class="hero">
+      <video autoplay muted loop playsinline>
+        <source src="media/scuba.mp4" type="video/mp4" />
+        Your browser does not support the video tag.
+      </video>
+      <div class="hero-caption">
+        <h1>Welcome to the world of scuba!</h1>
+        <p>Whether you're just starting out or are a seasoned Dive Master, BlueWave Scuba is here to make every dive an
+          unforgettable adventure!</p>
+      </div>
+    </div>
+  </header>
+  <main>
+    <section>
+      <div class="form-caption">
+        <h2>Join the community!</h2>
+      </div>
+      <fieldset>
+        <form action="https://httpbin.org/anything" method="post">
 
-  </body>
-</html>
+          <label>
+            <span>First name:</span>
+            <input type="text" name="first name" placeholder="first name">
+          </label>
+          <label>
+            <span>Last name:</span>
+            <input type="text" name="last name" placeholder="last name">
+          </label>
+          <label>
+            <span>E-mail:</span>
+            <input type="email" name="email" placeholder="[email protected]" required>
+          </label>
+          <label>
+            <span>Skill level </span>
+            <select class="select-container" name="Category">
+              <option value="beginner">Beginner</option>
+              <option value="advanced-diver">Advanced diver</option>
+              <option value="dive-master">Dive master</option>
+            </select>
+          </label>
+
+          <button type="submit">Sign up</button>
+        </form>
+      </fieldset>
+    </section>
+  </main>
+  <footer>
+    <div class="byline">
+      <img src="media/whale.png" alt="whale">
+      <p>Video by: <a href="https://pixabay.com" target="_blank">Pixabay</a></p>
+    </div>
+  </footer>
+</body>
+
+</html>
diff --git a/code/media/logo b/code/media/logo
diff --git a/code/media/scuba.mp4 b/code/media/scuba.mp4
diff --git a/code/media/under-water.jpg b/code/media/under-water.jpg
diff --git a/code/media/underwater.jpg b/code/media/underwater.jpg
diff --git a/code/media/whale.png b/code/media/whale.png