html klart

JosefineEngdahl · Aug 16, 2022 · e2c064c · e2c064c
1 parent 28c2481
commit e2c064c
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 1 deletion.
diff --git a/.DS_Store b/.DS_Store
diff --git a/code/.DS_Store b/code/.DS_Store
diff --git a/code/images/girlwithtoiletpaper.jpg b/code/images/girlwithtoiletpaper.jpg
diff --git a/code/index.html b/code/index.html
@@ -4,12 +4,55 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Project 3</title>
+    <link rel="stylesheet" href="style.css">
     <!-- dont forget to add a css file and link it here! -->
   </head>
   <body>
     <!-- video or image as a header is cool :) -->
+
+    <div class="hero-image">
+     <!-- <img src="images/girlwithtoiletpaper.jpg" alt="Girl with toilet paper">-->
+      <h1>On a roll</h1>
+    </div>
+
+
+  <section class="form">
+      <form action="https://httpbin.org/anything" method="post">
+        <label for="Message">personal message</label>
+        <input type="text" name="Message">
+
+        <label for="Name">Name</label>
+        <input type="text" name="Name">
+
+        <label for="email">E-mail</label>
+        <input type="email" name="email" placeholder="[email protected]">
+
+        <label for="Address1">Street</label>
+        <input type="text" name="Address1">
+
+        <label for="Address2">Zip code</label>
+        <input type="text" name="Address2">
+
+        <p>Paper quality</p>
+        <input type="radio" id="High" name="quality" value="High"> 
+        <label for="High">High quality</label>
+
+        <input type="radio" id="Medium" name="quality" value="Medium"> 
+        <label for="Medium">Medium quality</label>
+
+        <input type="radio" id="Low" name="quality" value="Low"> 
+        <label for="Low">Low quality</label>
+
+        <input type="checkbox" id="terms" name="terms" value="accept">
+        <label for="terms">I accept the terms and conditions</label>
+
+        <button type="submit">Submit</button>
+      </form>
+    </section>
+
 
     <!-- Signup form -->
+
 
     <section class="accordion">
       <!-- Accordion -->
@@ -26,5 +69,6 @@ <h1>FAQ</h1>
       </div>
     </section>
     <!-- dont forget to link the javascript file here! -->
+    <script src="script.js"></script>
   </body>
 </html>
diff --git a/code/script.js b/code/script.js
@@ -1,6 +1,8 @@
 // A function that adds and remove the class "active" on the section you click on.
 // We haven't really talked about ´this´ yet, but we will... ;)
 // console.log(this) to see how it works
+
+
 function toggle() {
   this.classList.toggle("active")
 }

diff --git a/code/style.css b/code/style.css
@@ -2,6 +2,26 @@
 in this case it is the div with the answer class next to the div with the active class.
 this can be used for the FAQ-accordion. read more here: https://www.w3schools.com/css/css_combinators.asp */
 
+body, html {
+  height: 100%;
+}
+
+.hero-image {
+  height: 80%;
+  background-image: url("images/girlwithtoiletpaper.jpg");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  position: relative;
+}
+
+
+.answer {
+  display: none;
+}
+
+
 .active + .answer {
-  /* some styling here */
+  display: block;
 }
+