finished desktop version, adding error stuff

projects/FrontendMentor/newbie/intro-component-with-signup-form/css/style.css

@@ -68,7 +68,9 @@
 
     --box-shadow: 0px 8px 0px rgba(0, 0, 0, 0.14688);
 
+    --padding-outer-form: 0 1.5rem;
     --padding-fields: 1.2188rem;
+    --margin-top-inputs: 1rem;
 }
 
 body {
@@ -138,7 +140,7 @@ form {
     border-radius: var(--border-radius-form);
     box-shadow: var(--box-shadow);
 
-    padding: 0 1.5rem;
+    padding: var(--padding-outer-form);
 }
 
 form input:nth-child(1) {
@@ -154,7 +156,7 @@ form input {
 
     height: 3.5rem;
 
-    margin: 1rem 0 0;
+    margin-top: var(--margin-top-inputs);
 
     border-radius: var(--border-radius-input);
     border: 1px solid var(--col-border);
@@ -162,6 +164,12 @@ form input {
     color: var(--col-neutral-text);
 }
 
+input:active,
+input:focus {
+    outline: none;
+    border-color: var(--col-accent);
+}
+
 form button {
     font-size: var(--fs-button);
     line-height: var(--lh-button);
@@ -192,7 +200,8 @@ form p {
     color: var(--col-neutral-light-text);
 
     /* margin: 0 2.4375rem 1.5rem; */
-    padding-bottom: 1.5rem;
+    padding: 0 0.9375rem 1.5rem;
+    /* padding-bottom: 1.5rem; */
 }
 
 form p a {
@@ -218,5 +227,44 @@ form p a {
         --text-align: start;
 
         --padding-fields: 2rem;
+
+        --padding-outer-form: 0 2.5rem;
+
+        --margin-top-inputs: 1.25rem;
+    }
+
+    body {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        gap: 45px;
+    }
+
+    header,
+    main {
+        flex: 1;
+    }
+
+    header {
+        max-width: 32.8125rem;
+
+        margin-top: 4rem;
+    }
+
+    h1 {
+        margin-bottom: 2rem;
+    }
+
+    main {
+        max-width: 33.75rem;
+    }
+
+    form input:nth-child(1) {
+        margin-top: 2.5rem;
+    }
+
+    form p {
+        text-align: center;
     }
 }

projects/FrontendMentor/newbie/intro-component-with-signup-form/index.html

@@ -10,7 +10,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
-
+  <script src="./js/script.js" defer></script>
   <link rel="stylesheet" href="./css/style.css">
   <title>Frontend Mentor | Intro component with sign up form</title>
 
@@ -35,14 +35,14 @@
   </header>
 
   <main>
-    <h2>Try it free 7 days then $20/mo. thereafter</h2>
+    <h2><span>Try it free 7 days</span> then $20/mo. thereafter</h2>
 
-    <form action="submit">
+    <form action="submit" onsubmit="return verifyData(this.form)">
-      <input type="text" name="firstName" id="firstName" placeholder="First Name">
+      <input type=" text" name="firstName" id="firstName" placeholder="First Name">
       <input type="text" name="lastName" id="lastName" placeholder="Last Name">
       <input type="email" name="email" id="email" placeholder="Email Address">
       <input type="password" name="password" id="password" placeholder="Password">
-      <button>Claim your free trial</button>
+      <button onClick="verifyData(this.form)">Claim your free trial</button>
       <p>
         By clicking the button, you are agreeing to our <a href="#" rel="">Terms and Services</a>
       </p>

projects/FrontendMentor/newbie/intro-component-with-signup-form/js/script.js

@@ -0,0 +1,11 @@
+function verifyData(form) {
+    console.log(typeof form);
+
+    return false;
+}
+
+function validateForm() {
+    console.log("Hello");
+
+    return false;
+}