diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 00000000..686466a4
Binary files /dev/null and b/.DS_Store differ
diff --git a/README.md b/README.md
index d59a798a..75f2d2bb 100644
--- 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
new file mode 100644
index 00000000..2dd0b75d
Binary files /dev/null and b/code/assets/Acme-corp.webp differ
diff --git a/code/assets/Gradient_img.png b/code/assets/Gradient_img.png
new file mode 100644
index 00000000..f3ed2a96
Binary files /dev/null and b/code/assets/Gradient_img.png differ
diff --git a/code/assets/Mountain-1.jpg b/code/assets/Mountain-1.jpg
new file mode 100644
index 00000000..ba64fbcd
Binary files /dev/null and b/code/assets/Mountain-1.jpg differ
diff --git a/code/assets/Mountain-4.png b/code/assets/Mountain-4.png
new file mode 100644
index 00000000..49b64012
Binary files /dev/null and b/code/assets/Mountain-4.png differ
diff --git a/code/assets/mountain-2.jpg b/code/assets/mountain-2.jpg
new file mode 100644
index 00000000..c8695ab5
Binary files /dev/null and b/code/assets/mountain-2.jpg differ
diff --git a/code/assets/mountain-3.png b/code/assets/mountain-3.png
new file mode 100644
index 00000000..875afca6
Binary files /dev/null and b/code/assets/mountain-3.png differ
diff --git a/code/assets/purple_header.webp b/code/assets/purple_header.webp
new file mode 100644
index 00000000..6ec1a0c0
Binary files /dev/null and b/code/assets/purple_header.webp differ
diff --git a/code/index.html b/code/index.html
index 85fe8e53..cd0f39f0 100644
--- 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="your.email@acme.com" required>
+        <label for="password"></label>
+        <input type="password" id="password" name="password" placeholder="Select password" required>
+        <label><input type="checkbox" id="checkbox" name="Agree" required>Agree</label>
+        <div>
+          <button type="submit">Join</button>
+        </div>
+      </form>
+    </fieldset>
+  </main>
+</body>
+<footer>2024-08-17 Johanna Eriksson</footer>
+
+</html>
\ No newline at end of file
diff --git a/code/style.css b/code/style.css
index 529ed755..088a9ded 100644
--- a/code/style.css
+++ b/code/style.css
@@ -1,5 +1,278 @@
-/* After you've linked the CSS file in the HTML,
-this should turn the background blue ;) */
+img {
+  /*Ensure that images adapt to different screen sizes without causing layout issues*/
+  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;
+  margin-left: 0px;
+  border-radius: 25px;
+  font-size: 24px;
+  color: #c77dff;
+  box-sizing: border-box;
+  border: 2px solid #dcc3f0;
+}
+
+input[type="email"] {
+  text-align: left;
+  padding-left: 10px;
+  border-radius: 25px;
+  border: 2px solid #dcc3f0;
+  font-size: 24px;
+  color: #c77dff;
+  box-sizing: border-box;
+}
+
+input[type="password"] {
+  text-align: left;
+  padding-left: 10px;
+  border-radius: 25px;
+  border: 2px solid #dcc3f0;
+  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 check box*/
+input[type="checkbox"] {
+  appearance: none;
+  /*Deletes the default settings for the check box*/
+  border: 3px solid #4b0082;
+  border-radius: 25px;
+  /*rounded corners*/
+  width: 20px;
+  /*Ensures that the radio button remains round*/
+  outline: none;
+  cursor: pointer;
+  margin-right: 10px;
+}
+
+input[type="checkbox"]:checked {
+  background-color: #4b0082;
+  border-color: #c77dff;
+}
+
+label {
+  display: flex;
+  align-items: center;
+  border-radius: 20px;
+  color: #4b0082;
+  font-size: 20px;
+}
+
+/*Style the Join button*/
+button {
+  display: flex;
+  justify-content: center;
+  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;
 }
\ No newline at end of file