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,147 @@
+<!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="http://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