Change link color orange

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;
+    }
+    }
+

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;
+    }
+
+

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">

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;
+
+
+}

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%;
+}

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);
+}

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;
+}

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);
+}

week-2/17-nav-menu/styles.css

@@ -1 +1,23 @@
 /* Write your media queries and flexbox CSS below */
+@media screen and (min-width: 481px) {
+  .site-header__nav {
+    display: flex;
+    flex-direction: row;
+  }
+}
+
+@media screen and (min-width: 701px) {
+  .site-header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+  }
+}
+
+@media screen and (min-width: 993px) {
+  .site-header {
+    justify-content: space-between;
+  }
+}
+

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;
 }

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>

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>

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>

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>

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>

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>

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