Technigo · joheri1 · Aug 26, 2024 · Aug 27, 2024 · Aug 27, 2024 · Aug 27, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1,12 +1,36 @@
 # 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 assignment is to create a business site containing hero header (image or video), a form with at least three different HTML input types. The site should be responsive and adapt well to mobile, tablet, and desktop.  
 
 ## 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?
+1. Hero header
+Just to find the hero image was a struggle. I found an image that I wanted to use - it was "gradient", went from purple to pink - but it wasn't for free. I asked ChatGPT if it could recreate the image for me, and it said that I could create it with CSS, which I wanted to try and it turned out great! But, it's not an image or video. So I commented it out, added the code to CodePen, and took a screenshot: https://codepen.io/joheri1/pen/vYqajdp. But changed my mind, and added it as an "overlay" (with the help from ChatGPT and Google) and added an image of a mountain as hero image (found here: https://stock.adobe.com/search?k=mountain+doodles). Used this site that could make the background transparant: https://www.remove.bg/. The gradient background still didn't work, and I spent a lot of time trying to figure out why, until I asked ChatGPT whom spotted that it was a tiny little space between linear-gradient and the parentheses that messed up the code. 
+
+2. The form questionnarie
+I decided to use a form on the internet as my inspiration (https://tjejerkodar.se/bli-medlem/). The form contains a html heading followed by an Unordered List, five oval input fields with the label text inside of each oval box, a check box ("I agree...") and an oval submit button at the end of the form. 
+
+The biggest issue with this was that I found it hard to understand/read the code in the inspector, so I had to google a lot. How to add the text inside of each input field ("placeholder"), how to add space around the boxes, etc. The form also contained things I couldn't understand, because they weren't visible to the eye, such as "<label for="frm_email_3">Om du är mänsklig, lämna det här fältet tomt.</label>". 
+
+3. Minor layout issues. 
+The name fields are not positioned the way I wanted, the radio button is oval and can't be unchecked, etc. Since time was running out, I started to write PostIts with all the flaws I wanted to correct, added some in a pile that need to be fixed before handing in my project (upload to Netlify, make the site responsive for different devices, etc), and some notes in a pile to fix later, if I have the time (like the oval radio button). 
+
+## If I had more time I would've...
+... asked someone who knows how to use the inspector, to go through the inspo page with me. I understand some parts of it, but far from most. 
+... added a video as a hero header. That would be fun to try out. 
+... tried to figure out how to uncheck the Radio button. 
+... make the name fields lay aligned with the other form fields for tablet and desktop. 
+
+## Tools
+Images of mountains: https://stock.adobe.com/search?k=mountain+doodles 
+Remove background/make an image transparant: https://www.remove.bg/
+ChatGPT and Google. 
+VS Code 
+CodePen
+Git and GitHub
+Netlify
+
 
 ## 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://acme-corp-site.netlify.app/ 
+
diff --git a/code/assets/Acme-corp.webp b/code/assets/Acme-corp.webp
diff --git a/code/assets/Gradient_img.png b/code/assets/Gradient_img.png
diff --git a/code/assets/Mountain-1.jpg b/code/assets/Mountain-1.jpg
diff --git a/code/assets/Mountain-4.png b/code/assets/Mountain-4.png
diff --git a/code/assets/mountain-2.jpg b/code/assets/mountain-2.jpg
diff --git a/code/assets/mountain-3.png b/code/assets/mountain-3.png
diff --git a/code/assets/purple_header.webp b/code/assets/purple_header.webp
diff --git a/code/index.html b/code/index.html
@@ -1,17 +1,62 @@
 <!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>Business Site</title>
+  <link rel="stylesheet" href="style.css">
+</head>
 
-    <!-- Signup form -->
+<body>
 
-  </body>
-</html>
+  <!-- video or image as a header is cool :) -->
+  <div class="hero-header">
+    <div class="hero-image">
+      <img src="assets/Mountain-4.png" alt="Mountain">
+    </div>
+    <div class="overlay">
+      <h1>Welcome to</h1>
+      <h2>Acme Corp.</h2>
+      <p>Where Innovation Meets Excellence</p>
+    </div>
+  </div>
+
+  <!-- Signup form start-->
+  <main>
+    <!-- Sign up info -->
+    <div class="sign-up-info-container">
+      <h2>Come join the Acme community!</h2>
+      <h3>Let's set up your account. Already have one? <a href="url">Sign in here.</a></h3>
+      <!-- Sign up info -->
+      <ul class="sign-up-info-list">
+        <li>Get this and that</li>
+        <li>5% off....</li>
+        <li>Weekly updates</li>
+      </ul>
+    </div>
+    <!-- Sign up form questions -->
+    <fieldset class="questionnaire">
+      <form action="http://httpbin.org/anything" method="post">
+        <div class="name-fields">
+          <label for="firstname"></label>
+          <input type="text" id="firstname" name="firstname" placeholder="First name" required>
+          <label for="lastname"></label>
+          <input type="text" id="lastname" name="lastname" placeholder="Last name" required>
+        </div>
+        <!--Check if its an email address-->
+        <label for="email"></label>
+        <input type="email" id="email" name="email" placeholder="[email protected]" required>
+        <label for="password"></label>
+        <input type="password" id="password" name="password" placeholder="Select password" required>
+        <label><input type="radio" name="Agree" required>Agree</label>
+        <div>
+          <button type="submit">Join</button>
+        </div>
+      </form>
+    </fieldset>
+  </main>
+</body>
+<footer>2024-08-17 Johanna Eriksson</footer>
+
+</html>
diff --git a/code/style.css b/code/style.css
@@ -1,5 +1,271 @@
-/* After you've linked the CSS file in the HTML,
-this should turn the background blue ;) */
+img {
+  display: block;
+  max-width: 100%;
+}
+
 body {
-  background: blue;
+  background-color: #f0e6ef;
+  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+}
+
+.hero-header {
+  position: relative;
+  height: 50vh;
+  width: 100%;
+  border-radius: 20px;
+  overflow: hidden;
+}
+
+.hero-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(to bottom, rgba(255, 182, 193, 0.7), rgba(128, 0, 128, 0.7));
+  /*rgba for making the gradient transparant*/
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /*Horizontal*/
+  justify-content: center;
+  /*Vertical*/
+  color: #f8f0fc;
+  text-align: center;
+  border-radius: 20px;
+  /*rounded corners*/
+}
+
+.overlay h1 {
+  font-size: 14px;
+  margin-bottom: 0.5em;
+}
+
+.overlay h2 {
+  font-size: 54px;
+  margin-bottom: 0.3em;
+  font-size: 45px;
+  color: #ffffff;
+}
+
+.overlay p {
+  font-size: 20px;
+  font-style: italic;
+  color: #ffffff;
+}
+
+main {
+  margin: 30px;
+  border: none
+}
+
+.sign-up-info-container {
+  margin: 50px;
+}
+
+.sign-up-info-list {
+  list-style-type: disc;
+  padding-right: 8px;
+  /*Space between text and bullets*/
+  font-size: 20px;
+  color: #c77dff;
+}
+
+h3 {
+  font-size: 20px;
+  color: #7b2cbf;
+}
+
+a {
+  font-size: 20px;
+  font-weight: bolder;
+  color: #7b2cbf;
+}
+
+.questionnaire {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-width: 70%;
+  margin: 50px;
+  border: 2px solid #ccc;
+  padding: 20px;
+  border-radius: 20px;
+  /* A 20px curvature for all corners around the form */
+}
+
+input {
+  width: 95%;
+  font-size: 24px;
+  padding: 15px 40px;
+  margin-bottom: 15px;
+  color: #666666;
+  border: none;
+  /*Remove default border*/
+}
+
+input[type="text"] {
+  text-align: left;
+  padding-left: 10px;
+  border-radius: 25px;
+  font-size: 24px;
+  color: #c77dff;
+  box-sizing: border-box;
+}
+
+input[type="email"] {
+  text-align: left;
+  padding-left: 10px;
+  border-radius: 25px;
+  font-size: 24px;
+  color: #c77dff;
+  box-sizing: border-box;
+}
+
+input[type="password"] {
+  text-align: left;
+  padding-left: 10px;
+  border-radius: 25px;
+  font-size: 24px;
+  color: #c77dff;
+  box-sizing: border-box;
+}
+
+input:valid {
+  background-color: #f0e6ef;
+  color: #c77dff;
+}
+
+.name-fields {
+  display: flex;
+  gap: 10px;
+}
+
+.name-fields input {
+  flex: 1;
+}
+
+/*Style the agree radio button*/
+input[type="radio"] {
+  appearance: none;
+  /*Deletes the default settings for the radio button*/
+  border: 3px solid #4b0082;
+  border-radius: 50%;
+  /*Make it round*/
+  width: 20px;
+  outline: none;
+  cursor: pointer;
+}
+
+input[type="radio"]:checked {
+  background-color: #4b0082;
+  border-color: #4b0082;
+}
+
+label {
+  display: flex;
+  border-radius: 20px;
+  color: #4b0082;
+}
+
+/*Style the Join button*/
+button {
+  display: flex;
+  justify-content: center;
+  width: 25%;
+  font-size: 24px;
+  padding: 15px 40px;
+  border-bottom: none;
+  background-color: rgb(56, 0, 127);
+  border-radius: 70px;
+  border-width: 1px;
+  color: #ffffff;
+  cursor: pointer;
+
+}
+
+/* Mobile */
+@media (max-width: 500px) {
+  .hero-header {
+    height: 80%;
+  }
+
+  .sign-up-info-container {
+    margin: 5px;
+  }
+
+  .questionnaire {
+    margin: 2px;
+    max-width: 95%;
+  }
+
+  .name-fields {
+    flex-direction: column;
+    /*One field per row*/
+    gap: 1px;
+  }
+
+  input {
+    width: 100%;
+  }
+
+  button {
+    width: 100%;
+  }
+}
+
+/*Tablet*/
+@media screen and (min-width: 501px) and (max-width: 1024px) {
+
+  .sign-up-info-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin: 50px;
+  }
+
+  .questionnaire {
+    margin: 50px;
+  }
+
+  .name-fields {
+    width: 100%;
+  }
+
+  input {
+    width: 100%;
+  }
+
+  button {
+    width: 100%;
+  }
+}
+
+/*Desktop*/
+@media (min-width: 1025px) {
+  .sign-up-info-container {
+    max-width: 70%;
+    margin-left: 150px;
+  }
+
+  .sign-up-info-list {
+    margin-left: 50px;
+  }
+
+  .questionnaire {
+    max-width: 50%;
+    padding: 20px;
+    margin-left: 200px;
+  }
+}
+
+footer {
+  text-align: center;
+  color: #666666;
 }