Added contact page

Xarlizard · Aug 2, 2024 · 40376d5 · 40376d5
1 parent cabc630
commit 40376d5
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <link rel="icon" type="image/png" sizes="32x32" href="./src/images/charlie-logo.svg">
-  <link rel="stylesheet" type="text/css" href="./src/style.css" />
+  <link rel="stylesheet" type="text/css" href="./src/style/index.css" />
   <title>Charlie</title>
 
 </head>

diff --git a/src/fonts/Roboto-Bold.ttf b/src/fonts/Roboto-Bold.ttf
diff --git a/src/fonts/Roboto-Regular.ttf b/src/fonts/Roboto-Regular.ttf
diff --git a/src/images/icon-list.svg b/src/images/icon-list.svg
diff --git a/src/images/icon-success.svg b/src/images/icon-success.svg
diff --git a/src/images/illustration-sign-up-desktop.svg b/src/images/illustration-sign-up-desktop.svg
diff --git a/src/images/illustration-sign-up-mobile.svg b/src/images/illustration-sign-up-mobile.svg
diff --git a/src/pages/signup.html b/src/pages/signup.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
+  <link rel="icon" type="image/png" sizes="32x32" href="../images/favicon-32x32.png">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=Outfit:[email protected]&family=Overpass:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap">
+  <link rel="stylesheet" href="../style/signup.css">
+  <title>Contact Charlie</title>
+</head>
+<body>
+  <main>
+    <div class="container">
+        <!-- Sign-up form start -->
+      <div class="first">
+        <img class="mobileImg" src="../images/illustration-sign-up-mobile.svg" alt="mobileImage">
+        <div class="firstText">
+          <h1>Get in contact!!</h1>
+
+          <text>Share your address if you are in need of one of the following digital services:</text>
+          <ul>
+           <li>Website Design/Development/Hosting</li>
+            <li>Social Media Marketing / Ad(s) Camapigns</li>
+            <li>eCommerce Digital Services Consultory</li>
+          </ul>
+          <h3>Email address</h3>
+          <form id="emailForm">
+          <input type="email" id="email" name="email" placeholder="[email protected]"></input>
+
+          <input type="submit" id="submit" value="Share email address"></button>
+          </form>
+        </div>
+      </div>
+        <!-- Sign-up form end -->
+
+        <!-- Success message start -->
+      <div class="second">
+        <img src="../images/icon-success.svg" alt="icon-success">
+        <h1>Thanks for subscribing!</h1>
+
+        <text>A confirmation email has been sent to <span id="emailValue"></span>. Please open it and click the button inside to confirm your subscription.</text>
+
+        <button>Dismiss message</button>
+      </div>
+        <!-- Success message end -->
+    </div>
+    <br>
+    <div class="attribution">
+      Coded by <a href="#">xarlizard</a>.
+    </div>
+  </main>
+  <script src="../scripts/signup.js"></script>
+</body>
+</html>
diff --git a/src/scripts/signup.js b/src/scripts/signup.js
@@ -0,0 +1,8 @@
+document.getElementById("emailForm").addEventListener("submit", function(event) {
+    event.preventDefault(); // Prevents the default form submission
+    let emailValue = document.getElementById("email").value;
+    if(emailValue == ""){return false}
+    document.getElementById("emailValue").textContent = emailValue;
+    document.getElementsByClassName("first")[0].style.display = "none";
+    document.getElementsByClassName("second")[0].style.display = "flex";
+  });
diff --git a/src/style.css → src/style/index.css b/src/style.css → src/style/index.css