styling input fields

bkarimii · bkarimii · commit 286b232b5bcb · 2023-09-11T17:03:42.000+01:00
diff --git a/css/store.css b/css/store.css
@@ -103,12 +103,13 @@ html{
     border: none;
     display: block;
     padding: 0;
-    margin-bottom:1em ;
-    gap: 1em;
+    margin-bottom:1.5em ;
+    gap: .5em;
 }
 
 .form-container input{
-    height: 2em;
+    height: 1.5em;
+    font-size: 1.2rem;
 }
 
 #personal-info{
@@ -146,7 +147,28 @@ html{
 /* styling address field set ----------------- */
 #address-info{
     display: grid;
-    padding: 0;
+
+}
+
+#address-info input{
+    margin-bottom: 1em;
+}
+
+#address-info span{
+    display: grid;
+    grid-template-areas: 
+    "city post"
+    "inp1 inp2";
+    gap: .5em;
+}
+/* #address-info span>*{
+    display: block;
+} */
+
+
+#address-info label::after, #personal-info label::after{
+    content: "*";
+    color: var(--hover-color);
 }
 
  /* styling radio buttons */
@@ -160,19 +182,31 @@ html{
 #karma-radio-color legend{
     grid-column: 1/-1;
     grid-row: 1;
+    margin-top: 1em;
 }
 
-#karma-radio-color #karma-red{
+#karma-red{
     grid-column: 1;
     grid-row: 2;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+
 }
 
-#karma-radio-color #space-grey{
+#space-grey{
     grid-column: 2;
     grid-row: 2;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
 }
 
 
+
+
+/*  section-2 image part -------------*/
+
 .section-2-store{
     grid-column: 2/-1;
     
diff --git a/level-2/store.html b/level-2/store.html
@@ -44,30 +44,25 @@ <h1>
                 Order your Karma WiFi device today!
             </h1>
             <form class="form-container">
+
                 <fieldset id="personal-info">
-                    <!-- <div>
-                        <label for="fname">First Name:</label>
-                        <input type="text" id="fname" name="fname"/>
-                    </div>
-                    <div>
-                        <label for="lname">Last Name:</label>
-                        <input type="text" id="lname" name="lname">
-                    </div> -->
                     <label for="fname" id="label-fname">First Name:</label>
                     <input type="text" id="fname" name="fname"/>
                     <label for="lname" id="label-lname">Last Name:</label>
                     <input type="text" id="lname" name="lname">
                 </fieldset>
+
                 <fieldset id="address-info">
                     <label for="address">Address: </label>
                     <input type="text" id="address" name="address"/>
                     <label for="address-2">Address 2:</label>
                     <input type="text" id="address-2" name="address-2"/>
-                    <label for="city">City:</label>
-                    <input type="text" id="city" name="city">
-                    <label for="post-code">Post Code:</label>
-                    <input type="text" id="post-code" name="post-code"/>
-
+                    <span id="city-post">
+                        <label for="city">City:</label>
+                        <label for="post-code">Post Code:</label>
+                        <input type="text" id="city" name="city">
+                        <input type="text" id="post-code" name="post-code"/>
+                    </span>
                 </fieldset>
                 
 
