Technigo · Anna2024WebDev · Aug 28, 2024 · Aug 28, 2024 · Aug 30, 2024 · Sep 1, 2024
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}
diff --git a/README.md b/README.md
@@ -1,12 +1,16 @@
 # Business Site
 
-Replace this readme with your own information about your project. 
+My business site with a sign up form for an upcoming event. 
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+The aim of the third project in the Web Dev bootcamp was to create a responsive business site with a hero image or video in the header and a sign up form with at least 3 different input types.
 
 ## 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 out by sketching out on paper how I wanted it to look like. I took inspiration from a landing page/event site that was created with the company confetti´s tool for the company I work at. 
+
+I used Flexbox and fieldset as techniques to setup the hero video and sign up form. 
+
+If I hade more time I would learn more about the forms and try to style them better. I tried to make round check-boxes but it did not work out well and I also tried to remove the default setting of the forms to change the links but it didn´t work. 
 
 ## 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://tradewavefintechforum.netlify.app/ 
diff --git a/code/assets/TRADEWAVE.png b/code/assets/TRADEWAVE.png
diff --git a/code/assets/business.mp4 b/code/assets/business.mp4
diff --git a/code/index.html b/code/index.html
@@ -1,17 +1,53 @@
 <!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 :) -->
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>TradeWave</title>
+  <link rel="stylesheet" href="style.css">
+</head>
 
-    <!-- Signup form -->
+<body>
+  <main>
+    <div class="hero">
+      <video class="hero-video" autoplay playsinline muted loop>
+        <source src="assets/business.mp4" type="video/mp4"> <!--video credit Mixkit -->
+      </video>
+    <div class="hero-text">
+      <h1>TradeWave</h1>
+      <h2>Annual Fintech Forum</h2>
+    </div>
+    </div>
 
-  </body>
-</html>
+
+  <!-- Sign up form  -->
+
+  <section class="signup">
+    <form action="https://httpbin.org/anything" method="POST">
+        <h3>Sign up for more information</h3>
+        <fieldset>
+          <label for="name"></label>
+          <input type="text" id="name" name="name" placeholder="Name" required />
+          <label for="company"></label>
+          <input type="text" id="company" name="company" placeholder="Company" required />
+          <label for="email"></label>
+          <input type="text" id="email" name="email" placeholder="E-mail" required />
+          <label for="agree">
+          <input type="checkbox" id="agree" name="agree" required /><a href="https://confetti.events/sv/terms-general">
+              I agree to the Terms and Conditions</a>
+          </label>
+          <button type="submit">Submit</button>
+        </fieldset>
+      </form>
+  </section>
+  </main>
+<footer>
+  <div class="footer-logo"><a href="https://www.google.com">
+    <img src="assets/TRADEWAVE.png" alt="Company Logo"></a>
+  </div>
+  <p> &copy; 2024 TradeWave Inc. All rights reserved</p>
+</footer>
+</body>
+
+</html>
diff --git a/code/style.css b/code/style.css
@@ -1,5 +1,248 @@
-/* After you've linked the CSS file in the HTML,
-this should turn the background blue ;) */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Source sans 3", sans-serif;
+}
+
 body {
-  background: blue;
+  background-color: rgb(63, 77, 102);
+  color: white;
+  display: flex; 
+  flex-direction: column;
+  min-height: 100vh; 
+}
+
+main {
+   flex-grow: 1;       /*makes the main section takes up most space and keeps the footer at the bottom */
+   overflow-x: hidden; 
+}
+
+
+
+.hero {
+  display: flex;
+  align-items: flex-start;
+  position: relative;
+  max-height: 100vh;
+  width: 100vw;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+}
+
+/* Video styling */
+.hero-video {
+  position: relative;
+  height: auto;
+  width: 100vw;
+  max-height: 100vh;
+  filter: brightness(65%);
+  object-fit: cover;
+  z-index: -1;
+}
+
+
+.hero-text {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  top: 70%;
+  left: 60%;
+  transform: translate(-50%, -50%);
+  color: white;
+  text-align: center;
+  padding: 0 15px; 
+}
+
+div h1 {
+  font-size: 50px;
+}
+
+div h2 {
+  font-size: 30px;
+}
+
+/* Form section  */
+
+h3 {
+  text-align: center;
+  margin-bottom: 20px;
+  font-size: 25px
+}
+
+.signup {
+  padding: 20px;
+  text-align: center;
+  background-color: rgb(63, 77, 102);
+  margin-top: 10px;
+}
+
+.signup form {
+  max-width: 300px;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding-top: 10px;
+}
+
+.signup label {
+  display: flex;
+  align-items: center;
+  text-align: left;
+  width: 100%;
+  margin: 10px 0;
+  font-size: 1rem;
+}
+
+fieldset { 
+  color: white;
+  margin: 0;
+  padding: 10px 30px;
+  border: none;
+  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
+  border-radius: 5px;
+  background-color: rgb(126, 141, 163);
+}
+
+.signup input[type="text"],
+.signup input[type="text"], 
+.signup input[type="text"] {
+
+  padding: 12px;
+  margin-left: 5px;
+  border: 1px solid rgb(160, 176, 203);
+  width: 100%;
+}
+
+.signup input[type="checkbox"] {
+  accent-color: rgb(160, 176, 203);
+  border-radius: 5px;
+  width: 20px;
+  height: 20px;
+  padding: 12px;
+  margin: 5px;
+  font-size: 0.8rem;
+  color: white;
+
+}
+
+.signup button {
+  padding: 12px 24px;
+  background-color: #333;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  font-size: 1rem;
+  width: 100%;
+  height: auto;
+  margin-top: 10px;
+  cursor: pointer;
+}
+
+.signup button:hover {
+  animation: bubble 0.4s ease-out;
+}
+
+@keyframes bubble {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+
+input {
+  width: 100%;
+  font-size: 15px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  border-radius: 5px;
+}
+
+.footer {
+  /* display: block; */
+  background-color: rgb(63, 77, 102);
+  text-align: center;
+  position: absolute;
+  width: 100%;
+  margin-left: 10px; 
+  bottom: 0;
+  overflow-x: hidden; 
+}
+
+.footer-logo img {
+  display: block;
+  max-width: 100%;
+  width: 150px;
+  height: auto;
+  padding-top: 20px;
+}
+
+ p {
+ padding-left: 20px;
+ padding-bottom: 20px;
+ margin-right: 10px;
+} 
+
+
+/* Media Queries */
+/* Header font-size for different screen sizes */
+
+@media (min-width: 1024px) {
+
+   div h1 {
+    font-size: 4.5rem;
+  }
+
+   div h2 {
+    font-size: 2.5rem;
+
+  }
+
+}
+
+@media (max-width: 768px) {
+
+   div h1 {
+    font-size: 3.5rem;
+  }
+   div h2 {
+    font-size: 1.5rem;
+  }
+
+}
+
+@media (max-width: 500px) {
+
+   div h1 {
+    font-size: 2.5rem;
+  }
+
+   div h2 {
+    font-size: 1.5rem;
+  }
+
+}
+
+@media (max-width: 480px) {
+
+   div h1 {
+    font-size: 1.5rem;
+  }
+
+   div h2 {
+    font-size: 1rem;
+  }
+
+  h3 {
+    font-size: 1rem; 
+  }
 }