creating form structure

bkarimii · bkarimii · commit dff7e9896f7f · 2023-09-11T14:45:05.000+01:00
diff --git a/css/store.css b/css/store.css
@@ -85,43 +85,94 @@ html{
 .section-1-store{
 
     grid-column: 1/2;
-    padding: 1.5em;
+    padding: 4em;
     
 } 
 
+
 .form-container{
     display: flex;
     flex-direction: column;
 }
 .form-container>*{
-    width: 90%;
+    width: 100%;
 
 }
 
+.form-container fieldset{
+    border: none;
+    display: block;
+    padding: 0;
+    margin-bottom:1em ;
+    gap: 1em;
+}
+
+.form-container input{
+    height: 2em;
+}
+
 #personal-info{
-    display: flex;
-    flex-direction: column;
+    padding: 0;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    grid-template-areas:  
+    "label1 label2"
+    "fname lname";
 }
 
-#personal-info label{
-    width: fit-content;
+
+
+#label-fname{
+    grid-area: label1;
+
 }
 
-#personal-info input{
-    width: 3em;
+#label-lname{
+    grid-area: label2;
 }
 
+#fname{
+    grid-area: fname;
+}
 
-label , input{
-    display: inline-block;
+#lname{
+    grid-area: lname;
 }
 
 
-.section-1-store fieldset{
-    border: none;
-    display: block;
+
+
+/* styling address field set ----------------- */
+#address-info{
+    display: grid;
+    padding: 0;
+}
+
+ /* styling radio buttons */
+#karma-radio-color{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: repeat(2,auto-fit);
+}
+ 
+
+#karma-radio-color legend{
+    grid-column: 1/-1;
+    grid-row: 1;
+}
+
+#karma-radio-color #karma-red{
+    grid-column: 1;
+    grid-row: 2;
+}
+
+#karma-radio-color #space-grey{
+    grid-column: 2;
+    grid-row: 2;
 }
 
+
 .section-2-store{
     grid-column: 2/-1;
     
diff --git a/level-2/store.html b/level-2/store.html
@@ -45,36 +45,47 @@ <h1>
             </h1>
             <form class="form-container">
                 <fieldset id="personal-info">
-                    <div>
+                    <!-- <div>
                         <label for="fname">First Name:</label>
-                        <label for="lname">Last Name:</label>
+                        <input type="text" id="fname" name="fname"/>
                     </div>
                     <div>
-                        <input type="text" id="fname" name="fname"/>
+                        <label for="lname">Last Name:</label>
                         <input type="text" id="lname" name="lname">
-                    </div>
+                    </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"/>
 
-                <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"/>
+                </fieldset>
+                
 
-                <fieldset>
+                <fieldset id="karma-radio-color">
                     <legend>Select a color:</legend>
-                    <input type="radio" value="karma-orange" name="device-color" id="karma-orange">
-                    <label for="karma-orange">Karma Orange</label>
-                    <input type="radio" value="space-grey" name="device-color" id="space-grey">
-                    <label for="space-grey">Space Grey</label>
-
-                    <input type="checkbox" id="terms" name="terms-conditions" value="terms">
+                    <span id="karma-red">
+                        <input type="radio" value="karma-orange" name="device-color" id="karma-orange">
+                        <label for="karma-orange">Karma Orange</label>
+                    </span>
+                    <span id="space-grey">
+                        <input type="radio" value="space-grey" name="device-color" id="space-grey">
+                        <label for="space-grey">Space Grey</label>
+                    </span>
+                    
                 </fieldset>
 
                 <fieldset>
+                    <input type="checkbox" id="terms" name="terms-conditions" value="terms">
                     <label for="terms">
                         By tick this box you are agree with Karma's <a href="#">Terms and Conditions</a>
                     </label>
