Technigo · julialindstrand · Sep 5, 2025 · Sep 5, 2025 · Sep 5, 2025 · Sep 5, 2025
diff --git a/Form/index.html b/Form/index.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0"
+  >
+  <link
+    rel="stylesheet"
+    href="/style.css"
+  >
+</head>
+
+
+<body>
+
+  <div class="hero-image">
+    <div class="hero-text">
+      <h1>TailTales</h1>
+    </div>
+  </div>
+
+
+  <nav class="navbar">
+    <div
+      class="nav-container"
+      onclick="myFunction(this)"
+    >
+      <div class="bar1"></div>
+      <div class="bar2"></div>
+      <div class="bar3"></div>
+    </div>
+    <ul>
+      <li class="nav-text"><a href="/">Home</a></li>
+      <li class="nav-text"><a href="/#cat-cards">Cats</a></li>
+      <li class="nav-text"><a href="/#article-cards">Articles</a></li>
+      <li class="nav-text"><a href="/Form/index.html">Application</a></li>
+      <li class="nav-text"><a href="#footer">Contact</a></li>
+    </ul>
+  </nav>
+
+
+  <form
+    action="https://httpbin.org/anything"
+    method="post"
+  >
+    <link
+      rel="stylesheet"
+      href="style.css"
+    >
+
+    <h2>Adoption application</h2>
+
+    <p>We want you to write your information and select the cat you are interested in adopting. We will then send you
+      the
+      questions we want answered and then if everything aligns we can book a meeting.</p>
+
+    <fieldset
+      class="form-input"
+      id="forminput"
+    >
+
+      <label>
+        <span>Name</span>
+        <input
+          type="name"
+          name="name"
+          id="name"
+          autofocus="name"
+          required="text"
+        >
+      </label>
+
+
+      <label>
+        <span>Number</span>
+        <input
+          type="number"
+          name="number"
+          id="number"
+          required="text"
+        >
+      </label>
+
+      <label>
+        <span>E-mail</span>
+        <input
+          type="email"
+          name="email"
+          id="email"
+          placeholder="[email protected]"
+          required
+        >
+      </label>
+
+      <label>
+        <span>Cat</span>
+        <select
+          name="cat"
+          id="cat"
+          required
+        >
+          <option
+            value=""
+            disabled
+            selected
+            hidden
+          ></option>
+          <option value="Marmalade">Marmalade</option>
+          <option value="Snowball">Snowball</option>
+          <option value="Ashlyn">Ashlyn</option>
+          <option value="Tess">Tess</option>
+        </select>
+      </label>
+
+
+      <label class="checkbox">I confirm that I am 18 years or older
+        <input
+          id="checkbox"
+          type="checkbox"
+          required=""
+        >
+      </label>
+
+    </fieldset>
+
+    <button class="submit">Apply</button>
+
+    <div class="button-back">
+      <a href="/">
+        <button
+          class="submit"
+          type="button"
+        >Back</button>
+      </a>
+    </div>
+
+
+  </form>
+
+
+  <div
+    id="footer"
+    class="footer-container"
+  >
+    <div class="footer-main">
+      <p>All rights reserved</p>
+      <p>+46 123 45 67</p>
+      <p>Tailroad 5, Sweden</p>
+    </div>
+  </div>
+
+
+</body>
+
+<script
+  type="text/javascript"
+  src="/script.js"
+></script>
+
+</html>
diff --git a/Form/style.css b/Form/style.css
@@ -0,0 +1,78 @@
+body {
+  font-family: sans-serif;
+  background: rgb(248, 248, 234);
+}
+
+
+form {
+  border-radius: 30px;
+  padding: 40px;
+  max-width: 400px;
+  margin: 50px auto;
+  background: rgb(62, 102, 62);
+  color: beige;
+  box-shadow: 0 1px 3px 0 black, 0 4px 6px 0 black;
+}
+
+fieldset {
+  display: flex;
+  flex-direction: column;
+  border: none;
+  padding: 5px;
+  background: rgb(255, 255, 255);
+  color: black;
+  font-size: 15px;
+  border-radius: 5px;
+  box-shadow: 0 1px 3px 0 black, 0 4px 6px 0 black;
+}
+
+:focus {
+  outline: none;
+  border: 2px solid rgb(166, 190, 166);
+  border-radius: 3px;
+}
+
+h2 {
+  text-transform: uppercase;
+  text-align: center;
+  margin-top: 10px;
+}
+
+label {
+  display: flex;
+  flex-direction: column;
+  padding: 2px;
+  margin-top: 5px;
+}
+
+.checkbox input {
+  width: 18px;
+  height: 18px;
+  margin-left: 1px;
+  align-self: flex-start;
+}
+
+.checkbox input:checked {
+  accent-color: rgb(62, 102, 62);
+}
+
+.submit {
+  background: rgb(166, 190, 166);
+  border: none;
+  appearance: none;
+  border-radius: 4px;
+  width: 100%;
+  font-size: 20px;
+  color: black;
+  font-weight: bold;
+  padding: 10px;
+  margin-top: 20px;
+  box-shadow: 0 1px 3px 0 black, 0 4px 6px 0 black;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.submit:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
+  box-shadow: 10px 10px 5px black;
+}
diff --git a/Pictures/Article1.jpg b/Pictures/Article1.jpg
diff --git a/Pictures/Article2.jpg b/Pictures/Article2.jpg
diff --git a/Pictures/Ashlyn.jpg b/Pictures/Ashlyn.jpg
diff --git a/Pictures/Header-cat.jpg b/Pictures/Header-cat.jpg
diff --git a/Pictures/Marmalade.jpg b/Pictures/Marmalade.jpg
diff --git a/Pictures/Snowball.jpg b/Pictures/Snowball.jpg
diff --git a/Pictures/Tess.jpg b/Pictures/Tess.jpg
diff --git a/Pictures/moon.png b/Pictures/moon.png
diff --git a/README.md b/README.md
@@ -1 +1,3 @@
-# js-project-business-site
+# js-project-business-site
+
+Project: [Tail Tales](https://technigo-tailtales.app/)
diff --git a/favicon.ico b/favicon.ico