Add requirement indicators on labels

softy-dev · Sep 3, 2024 · 2ebc2aa · 2ebc2aa
1 parent de215fd
commit 2ebc2aa
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -20,7 +20,7 @@
     </section>
     <section id="main">
         <div>
-            <p class="introduction">
+            <p>
             We're thrilled you're interested in joining our community of cheese enthusiasts. 
             At Cheese Inc., we believe in celebrating <em>exceptional flavors</em> and <em>quality craftsmanship</em>. 
             By signing up, you'll gain access to exclusive offers, the latest cheese news, and much more. 
@@ -29,26 +29,29 @@
             <p>Sign up now to get started.</p>
         </div>
         <div>
-            <p>Let's do this!</p>
+            <p id="form-call-text">Let's do this!</p>
+            <p id="required-notice">All fields are required and thus followed by
+            <strong><span aria-label="required">*</span></strong>
+            </p>
             <form id="form">
                 <div>
-                    <label for="first-name" aria-label="first name">First name</label>
+                    <label for="first-name" aria-label="first name">First name <span aria-label="required">*</span></label>
                     <input type="text" id="first-name" name="first-name" required />
 
-                    <label for="email" aria-label="email">Email</label>
+                    <label for="email" aria-label="email">Email <span aria-label="required">*</span></label>
                     <input type="email" id="email" name="email" required />
 
-                    <label for="password" aria-label="password">Password</label>
+                    <label for="password" aria-label="password">Password <span aria-label="required">*</span></label>
                     <input type="password" id="password" name="password" required />
                 </div>
                 <div>
-                    <label for="last-name" aria-label="last name">Last name</label>
+                    <label for="last-name" aria-label="last name">Last name <span aria-label="required">*</span></label>
                     <input type="text" id="last-name" name="last-name" required />
 
-                    <label for="phone" aria-label="phone">Phone number</label>
+                    <label for="phone" aria-label="phone">Phone number <span aria-label="required">*</span></label>
                     <input type="tel" id="phone" name="phone" required />
 
-                    <label for="confirm-password" aria-label="confirm password">Confirm password</label>
+                    <label for="confirm-password" aria-label="confirm password">Confirm password <span aria-label="required">*</span></label>
                     <input type="confirm-password" id="confirm-password" name="confirm-password" required />
                 </div>
             </form>

diff --git a/styles.css b/styles.css
@@ -120,6 +120,7 @@ p, h1, h2, h3, h4, h5, h6 {
 
 #main > div:first-child {
     color: rgb(14, 14, 14);
+    font-size: min(2vw, 25rem);
 }
 
 #main > div:nth-child(2) {
@@ -129,15 +130,19 @@ p, h1, h2, h3, h4, h5, h6 {
     padding-top: 1vw;
 }
 
-#main p {
+#form-call-text {
     font-size: min(2vw, 25rem);
-    width: 80%;
 }
 
 p + p, #main div:last-of-type > p { 
     margin-top: var(--paragraph-spacing); 
 }
 
+#required-notice {
+    font-size: min(2vw, 10rem);
+    color: rgba(14, 14, 14);
+}
+
 label {
     display: block;
     text-transform: uppercase;
@@ -146,6 +151,10 @@ label {
     margin-top: 2vw;
 }
 
+#form > div > label:first-of-type {
+    margin-top: 1vw;
+}
+
 input {
     width: 20vw;
     margin-top: 2px;