From bcbf073e2a2cfd00a61bb319860fc4c087725efd Mon Sep 17 00:00:00 2001
From: amira-alshaikh-mhd <amira.alshaikh.mhd@gmail.com>
Date: Fri, 2 Dec 2022 13:33:13 +0200
Subject: [PATCH 1/2] update

---
 week-2/10-media-queries/columns.css   | 12 ++++++
 week-2/11-flexbox/flexbox.css         | 14 +++++++
 week-2/11-flexbox/index.html          |  8 ++--
 week-2/12-justify-content/flexbox.css | 35 ++++++++++++++++++
 week-2/13-align-items/flexbox.css     | 21 +++++++++++
 week-2/14-order/flexbox.css           | 34 +++++++++++++++++
 week-2/15-align-self/flexbox.css      | 43 ++++++++++++++++++++++
 week-2/16-more-flexbox/flexbox.css    | 53 +++++++++++++++++++++++++++
 week-2/17-nav-menu/styles.css         | 22 +++++++++++
 week-3/19-search/index.html           |  4 +-
 week-3/20-labels/index.html           |  2 +-
 week-3/21-buttons/index.html          |  2 +-
 week-3/22-checkout/index.html         |  7 +++-
 week-3/23-comments/index.html         |  7 +++-
 week-3/24-dietary/index.html          | 18 ++++++++-
 week-3/25-shirt-size/index.html       |  9 ++++-
 week-3/25-shirt-size/styles.css       |  5 +++
 week-3/26-checkout-groups/index.html  | 35 +++++++++++++++++-
 week-3/27-attributes/index.html       | 17 +++++----
 19 files changed, 328 insertions(+), 20 deletions(-)

diff --git a/week-2/10-media-queries/columns.css b/week-2/10-media-queries/columns.css
index 43e80d23..ce70a66f 100644
--- a/week-2/10-media-queries/columns.css
+++ b/week-2/10-media-queries/columns.css
@@ -1 +1,13 @@
 /* Add your own CSS code below */
+@media only screen and (min-width: 768px) {
+    .countries {
+    columns: 2 ;
+    }
+    }
+
+    @media only screen and (min-width: 1200px) {
+    .countries {
+    columns: 3;
+    }
+    }
+    
diff --git a/week-2/11-flexbox/flexbox.css b/week-2/11-flexbox/flexbox.css
index 43e80d23..a15653b4 100644
--- a/week-2/11-flexbox/flexbox.css
+++ b/week-2/11-flexbox/flexbox.css
@@ -1 +1,15 @@
 /* Add your own CSS code below */
+.countries--first{
+    display: flex;
+    flex-direction: row-reverse;
+    width: 65%;
+    }
+    .countries--second {
+    width: 65%;
+    }
+    .countries--third {
+    width: 65%;
+    flex-direction: column-reverse;
+    }
+    
+    
\ No newline at end of file
diff --git a/week-2/11-flexbox/index.html b/week-2/11-flexbox/index.html
index 11dc3dbb..865ea437 100644
--- a/week-2/11-flexbox/index.html
+++ b/week-2/11-flexbox/index.html
@@ -57,11 +57,11 @@ <h3 class="solution__title">Solution</h3>
         <div class="exercise">
           <h2 class="exercise__title">Third</h2>
           <ul class="countries countries--third">
-            <li class="country">1. Brazil</li>
-            <li class="country">2. Croatia</li>
-            <li class="country">3. Ethiopia</li>
-            <li class="country">4. Laos</li>
             <li class="country">5. Uganda</li>
+            <li class="country">4. Laos</li>
+            <li class="country">3. Ethiopia</li>
+            <li class="country">2. Croatia</li>
+            <li class="country">1. Brazil</li>
           </ul>
         </div>
         <div class="solution">
diff --git a/week-2/12-justify-content/flexbox.css b/week-2/12-justify-content/flexbox.css
index 3c4c7ff1..704628b6 100644
--- a/week-2/12-justify-content/flexbox.css
+++ b/week-2/12-justify-content/flexbox.css
@@ -2,8 +2,43 @@
   display: flex;
 }
 
+
+
 .countries--second .country {
   padding: 0.5em;
 }
 
 /* Add your own CSS code below */
+.countries--first {
+  width: 63%;
+  justify-content:flex-end;
+}
+
+.countries--second {
+  width: 63%;
+
+}
+.countries--second > li {
+  margin: auto;
+  padding: 20px;
+  justify-content: space-around;
+}
+
+.countries--third {
+  width: 63%;
+  flex-direction: column;
+  justify-content: end;
+}
+
+.countries--fourth {
+  flex-direction: column-reverse;
+  justify-self:flex-end;
+  width: 63%;
+}
+
+.countries--fourth > li {
+  margin-top: auto;
+  margin-bottom: auto;
+
+
+}
diff --git a/week-2/13-align-items/flexbox.css b/week-2/13-align-items/flexbox.css
index 3675a0df..b389d4a5 100644
--- a/week-2/13-align-items/flexbox.css
+++ b/week-2/13-align-items/flexbox.css
@@ -2,3 +2,24 @@
   display: flex;
 }
 /* Add your own CSS code below */
+.countries--first {
+  flex-direction: row;
+  align-items: center;
+  width: 62%;
+}
+
+.countries--second {
+  flex-direction: row-reverse;
+  align-items: flex-end;
+  width: 62%;
+}
+.countries--third {
+  flex-direction: column;
+  align-items: flex-end;
+  width: 62%;
+}
+.countries--fourth {
+  flex-direction: column-reverse;
+  align-items:center;
+  width: 62%;
+}
\ No newline at end of file
diff --git a/week-2/14-order/flexbox.css b/week-2/14-order/flexbox.css
index ed621b79..96b7f4fc 100644
--- a/week-2/14-order/flexbox.css
+++ b/week-2/14-order/flexbox.css
@@ -3,3 +3,37 @@
 }
 
 /* Add your own CSS code below */
+.countries--first {
+  width: 62%;
+}
+.countries--first .country--brazil {
+  order: calc(5);
+}
+.countries--second {
+  width: 62%;
+}
+.countries--second .country--brazil {
+  order: calc(3);
+}
+.countries--second .country--uganda {
+  order: calc(5);
+}
+.countries--third {
+  width: 62%;
+  
+}
+.countries--third .country--brazil {
+  order: calc(5);
+}
+.countries--third .country--croatia {
+  order: calc(4);
+}
+.countries--third .country--laos {
+  order: calc(2);
+}
+.countries--third .country--uganda {
+  order: calc(1);
+}
+.countries--third .country--ethiopia {
+  order: calc(3);
+}
diff --git a/week-2/15-align-self/flexbox.css b/week-2/15-align-self/flexbox.css
index ed621b79..ca6cfb41 100644
--- a/week-2/15-align-self/flexbox.css
+++ b/week-2/15-align-self/flexbox.css
@@ -3,3 +3,46 @@
 }
 
 /* Add your own CSS code below */
+.countries--first {
+  width: 62%;
+}
+.countries--first .country--ethiopia {
+  align-self: flex-end;
+}
+.countries--second {
+  width: 62%;
+}
+.countries--second .country--brazil {
+  align-self: center ;
+}
+.countries--second .country--croatia {
+  align-self: center;
+}
+.countries--second .country--ethiopia {
+  align-self: flex-end;
+}
+.countries--second .country--laos {
+  align-self: center;
+}
+.countries--second .country--uganda {
+  align-self: center;
+}
+.countries--third {
+  width: 62%;
+  align-items:flex-end;
+}
+.countries--third .country--brazil {
+  align-self: flex-start;
+}
+.countries--third .country--uganda {
+  align-self: flex-start;
+}
+
+.countries--fourth {
+  width: 62%;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.countries--fourth .country--uganda {
+  align-self: center;
+}
\ No newline at end of file
diff --git a/week-2/16-more-flexbox/flexbox.css b/week-2/16-more-flexbox/flexbox.css
index ed621b79..b19bdfdd 100644
--- a/week-2/16-more-flexbox/flexbox.css
+++ b/week-2/16-more-flexbox/flexbox.css
@@ -3,3 +3,56 @@
 }
 
 /* Add your own CSS code below */
+.countries--first {
+  align-items: flex-end;
+  width: 65%;
+  justify-content: right;
+}
+
+.countries--second {
+  width: 65%;
+  flex-direction: row-reverse;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.countries--third {
+  width: 65%;
+  justify-content: center;
+  align-items: flex-start;
+}
+.countries--third .country--brazil {
+  align-self: flex-end;
+}
+.countries--fourth {
+  width: 65%;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+}
+.countries--fourth .country--ethiopia {
+  align-self: center;
+}
+.countries--fourth .country--laos {
+  align-self: center;
+}
+
+.countries--fifth {
+  flex-direction: column-reverse;
+  width: 65%;
+  align-items: flex-end;
+  
+}
+.countries--fifth > li {
+  margin-bottom: auto;
+  margin-top: auto;
+
+}
+
+.countries--fifth  .country--uganda {
+  order:calc(4);
+  align-self: center;
+}
+.countries--fifth .country--laos {
+  order: calc(5);
+}
diff --git a/week-2/17-nav-menu/styles.css b/week-2/17-nav-menu/styles.css
index f04f4c7b..55031c1f 100644
--- a/week-2/17-nav-menu/styles.css
+++ b/week-2/17-nav-menu/styles.css
@@ -1 +1,23 @@
 /* Write your media queries and flexbox CSS below */
+@media all and (min-width: 480px) {
+    .site-header__nav {
+      display: flex;
+      flex-direction: ;
+    }
+  }
+  
+  @media all and (min-width: 701px) {
+    .site-header {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: row;
+    }
+  }
+  
+  @media all and (min-width: 993px) {
+    .site-header {
+      justify-content: space-between;
+    }
+  }
+ 
\ No newline at end of file
diff --git a/week-3/19-search/index.html b/week-3/19-search/index.html
index d94ec98d..5eeb032d 100644
--- a/week-3/19-search/index.html
+++ b/week-3/19-search/index.html
@@ -11,7 +11,9 @@
   <body>
     <div class="site-wrapper">
       <main>
-        <p>Delete this line and add your form.</p>
+        <form method="GET"  action="https://www.google.com/search">
+          <input type="text" name="q" id="search-input">
+        </form>
       </main>
     </div>
   </body>
diff --git a/week-3/20-labels/index.html b/week-3/20-labels/index.html
index ccdc8171..1c6049d1 100644
--- a/week-3/20-labels/index.html
+++ b/week-3/20-labels/index.html
@@ -12,7 +12,7 @@
     <div class="site-wrapper">
       <main>
         <form method="GET" action="https://www.google.com/search">
-          <!-- Add a label here -->
+          <label for="search-input" > <a href="https://www.google.com/search">Search on Google</a></label>
           <input type="text" name="q" />
         </form>
       </main>
diff --git a/week-3/21-buttons/index.html b/week-3/21-buttons/index.html
index ff87846d..fb566048 100644
--- a/week-3/21-buttons/index.html
+++ b/week-3/21-buttons/index.html
@@ -14,7 +14,7 @@
         <form method="GET" action="https://www.google.com/search">
           <label for="search-input">Search on Google</label>
           <input type="text" name="q" id="search-input" />
-          <!-- Add a submit button here -->
+          <button type="submit">Search</button>
         </form>
       </main>
     </div>
diff --git a/week-3/22-checkout/index.html b/week-3/22-checkout/index.html
index 4c42ebba..924e9ebf 100644
--- a/week-3/22-checkout/index.html
+++ b/week-3/22-checkout/index.html
@@ -37,7 +37,12 @@ <h1 class="shopping-basket__title">Your Shopping Basket</h1>
         <div class="checkout">
           <h2 class="checkout__title">Checkout</h2>
           <form method="GET" id="checkout-form" class="checkout__form">
-            <!-- Add the form fields here -->
+            <label for="Search-input" >Name</label>
+            <input type="text" name="customer-name" id="search-input"><br>
+            <label for="search-input">Email</label>
+            <input type="email" name="customer-email" id="search-input"><br>
+            <label for="search-input">Phone</label>
+            <input type="number" name="customer0phone" id="search-input"><br>
 
             <button type="submit">Complete Purchase</button>
           </form>
diff --git a/week-3/23-comments/index.html b/week-3/23-comments/index.html
index 110a5027..88a1b8f2 100644
--- a/week-3/23-comments/index.html
+++ b/week-3/23-comments/index.html
@@ -30,8 +30,13 @@ <h1>Our t-shirts are amazing!</h1>
 
         <div class="comments">
           <p>Add your comments and let us know what you think!</p>
+          <form method="GET">
+            <label>Add your message</label><br><br>
+            <textarea></textarea>
+            <button type="submit">Send Comment</button>
+          </form>
 
-          <!-- Your comment form goes here -->
+          
         </div>
       </main>
     </div>
diff --git a/week-3/24-dietary/index.html b/week-3/24-dietary/index.html
index 5593174b..322b17c5 100644
--- a/week-3/24-dietary/index.html
+++ b/week-3/24-dietary/index.html
@@ -19,7 +19,23 @@ <h1>Codi Summit</h1>
         </p>
 
         <form>
-          <!-- Your multiple choice goes here -->
+          <fieldset>
+            <legend>Please select all of your dietary requirements</legend>
+            <label>
+            <input type="checkbox" name="dietary"> Halal </label><br>
+            <label>
+              <input type="checkbox" name="dietary"> Kosher  
+            </label><br>
+            <label>
+              <input type="checkbox" name="dietary"> Vegetarian
+            </label><br>
+            <label>
+              <input type="checkbox" name="dietary"> Vegan
+            </label><br>
+            <label>
+              <input type="checkbox" name="dietary"> Gluten Free
+            </label><br>
+          </fieldset>
           <button type="submit">Submit</button>
         </form>
       </main>
diff --git a/week-3/25-shirt-size/index.html b/week-3/25-shirt-size/index.html
index 9e4d606f..15598309 100644
--- a/week-3/25-shirt-size/index.html
+++ b/week-3/25-shirt-size/index.html
@@ -28,8 +28,15 @@ <h1 class="shopping-basket__title">Your Shopping Basket</h1>
                   <p>Codi t-shirt, black</p>
                 </div>
               </td>
+
               <td>
-                Medium
+                <form>
+                  <label class="screenreader">"Choose a size"</label>
+                  <select>
+                    <option value="Medium" selected>Medium</option>
+                    <option value="Small" >Small</option>
+                    <option value="Larg">Larg</option>
+                  </select></form>
               </td>
               <td>
                 1
diff --git a/week-3/25-shirt-size/styles.css b/week-3/25-shirt-size/styles.css
index f2831578..9efffb90 100644
--- a/week-3/25-shirt-size/styles.css
+++ b/week-3/25-shirt-size/styles.css
@@ -1 +1,6 @@
 /* Add your CSS below */
+.screenreader {
+    clip: rect(1px, 1px, 1px, 1px);
+    position: absolute !important;
+    left: -2000px;
+  }
\ No newline at end of file
diff --git a/week-3/26-checkout-groups/index.html b/week-3/26-checkout-groups/index.html
index 66513ddd..63e35db2 100644
--- a/week-3/26-checkout-groups/index.html
+++ b/week-3/26-checkout-groups/index.html
@@ -37,7 +37,40 @@ <h1 class="shopping-basket__title">Your Shopping Basket</h1>
         <div class="checkout">
           <h2 class="checkout__title">Checkout</h2>
           <form method="GET" id="checkout-form" class="checkout__form">
-            <!-- Add the form fields here -->
+            <fieldset>
+              <legend>Billing Address</legend>
+              <p>Address  Line 1</p>
+              <input type="text" name="Address Line 1">
+
+              <p>Address  Line 2</p>
+              <input type="text" name="Address Line 2">
+
+
+              <p>Postcode</p>
+              <input type="text" name="Postcode">
+
+
+              <p>City</p>
+              <input type="text" name="Ciyt">
+            
+            
+            </fieldset>
+            <fieldset>
+              <legend>Delivery Address</legend>
+              <p>Address  Line 1</p>
+              <input type="text" name="Address Line 1">
+
+              <p>Address  Line 2</p>
+              <input type="text" name="Address Line 2">
+
+
+              <p>Postcode</p>
+              <input type="text" name="Postcode">
+
+
+              <p>City</p>
+              <input type="text" name="Ciyt">
+            </fieldset>
 
             <button type="submit">Complete Purchase</button>
           </form>
diff --git a/week-3/27-attributes/index.html b/week-3/27-attributes/index.html
index e54fd838..11149042 100644
--- a/week-3/27-attributes/index.html
+++ b/week-3/27-attributes/index.html
@@ -42,7 +42,7 @@ <h2 class="checkout__title">Checkout</h2>
               <legend>Billing Address</legend>
               <p>
                 <label for="billing-address-1">Address Line 1</label>
-                <input type="text" name="billing-address-1" id="billing-address-1" />
+                <input type="text" name="billing-address-1" id="billing-address-1" required/>
               </p>
               <p>
                 <label for="billing-address-2">Address Line 2</label>
@@ -50,38 +50,38 @@ <h2 class="checkout__title">Checkout</h2>
               </p>
               <p>
                 <label for="billing-postcode">Postcode</label>
-                <input type="text" name="billing-postcode" id="billing-postcode" />
+                <input type="text" name="billing-postcode" id="billing-postcode"  required/>
               </p>
               <p>
                 <label for="billing-city">City</label>
-                <input type="text" name="billing-city" id="billing-city" />
+                <input type="text" name="billing-city" id="billing-city" required/>
               </p>
             </fieldset>
             <fieldset>
               <legend>Delivery Address</legend>
               <p>
                 <label for="delivery-address-1">Address Line 1</label>
-                <input type="text" name="delivery-address-1" id="delivery-address-1" />
+                <input type="text" name="delivery-address-1" id="delivery-address-1" required/>
               </p>
               <p>
                 <label for="delivery-address-2">Address Line 2</label>
                 <input type="text" name="delivery-address-2" id="delivery-address-2" />
               </p>
               <p>
-                <label for="delivery-address-postcode">Postcode</label>
+                <label for="delivery-address-postcode" >Postcode</label>
                 <input
                   type="text"
                   name="delivery-address-postcode"
                   id="delivery-address-postcode"
-                />
+                required/>
               </p>
               <p>
                 <label for="delivery-address-city">City</label>
-                <input type="text" name="delivery-address-city" id="delivery-address-city" />
+                <input type="text" name="delivery-address-city" id="delivery-address-city" required/>
               </p>
               <p>
                 <label for="delivery-country">Country</label>
-                <input type="text" name="delivery-country" id="delivery-country" />
+                <input type="text" name="delivery-country" id="delivery-country" value="United Kingdom" readonly/>
               </p>
               <fieldset>
                 <legend>Delivery Options</legend>
@@ -91,6 +91,7 @@ <h2 class="checkout__title">Checkout</h2>
                     name="delivery-option"
                     id="delivery-option"
                     value="standard"
+                    checked disabled
                   />
                   Royal Mail
                 </label>

From 0c9f6edb2eda87f59b49861a336f39a7dbbfdc1d Mon Sep 17 00:00:00 2001
From: amira-alshaikh-mhd <amira.alshaikh.mhd@gmail.com>
Date: Fri, 2 Dec 2022 15:46:20 +0200
Subject: [PATCH 2/2] orang links

---
 week-2/17-nav-menu/styles.css  | 36 +++++++++++++++++-----------------
 week-2/18-git-merge/styles.css |  2 +-
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/week-2/17-nav-menu/styles.css b/week-2/17-nav-menu/styles.css
index 55031c1f..121e4afc 100644
--- a/week-2/17-nav-menu/styles.css
+++ b/week-2/17-nav-menu/styles.css
@@ -1,23 +1,23 @@
 /* Write your media queries and flexbox CSS below */
-@media all and (min-width: 480px) {
-    .site-header__nav {
-      display: flex;
-      flex-direction: ;
-    }
+@media screen and (min-width: 481px) {
+  .site-header__nav {
+    display: flex;
+    flex-direction: row;
   }
-  
-  @media all and (min-width: 701px) {
-    .site-header {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: row;
-    }
+}
+
+@media screen and (min-width: 701px) {
+  .site-header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
   }
-  
-  @media all and (min-width: 993px) {
-    .site-header {
-      justify-content: space-between;
-    }
+}
+
+@media screen and (min-width: 993px) {
+  .site-header {
+    justify-content: space-between;
   }
+}
  
\ No newline at end of file
diff --git a/week-2/18-git-merge/styles.css b/week-2/18-git-merge/styles.css
index 0051cdba..af46a4f7 100644
--- a/week-2/18-git-merge/styles.css
+++ b/week-2/18-git-merge/styles.css
@@ -1,6 +1,6 @@
 /* Add your own CSS code below */
 .link {
-  color: #4491db;
+  color: orangered;
   font-weight: 700;
   text-decoration: none;
 }