coditech · Mazenelali · Dec 1, 2022 · Dec 1, 2022 · Dec 1, 2022 · Dec 1, 2022
diff --git a/week-1/1-parent-child/index.html b/week-1/1-parent-child/index.html
@@ -27,6 +27,7 @@
           <p class="message__content">
             I can meet on Tuesday and Wednesday after 4.
           </p>
+           <span class="message__time">6:48pm</span>
         </div>
       </div>
     </div>

diff --git a/week-1/2-html-attributes/index.html b/week-1/2-html-attributes/index.html
@@ -23,18 +23,18 @@
         <div class="message">
           <div class="message__author">Luke</div>
           <p class="message__content">
-            Let's meet at the iCafe in Merchant City. https://goo.gl/maps/aza4h9nUBhn
+            Let's meet at the <a href=#iCafe>iCafe</a> in Merchant City. https://goo.gl/maps/aza4h9nUBhn
           </p>
           <span class="message__time">7:35pm</span>
         </div>
         <div class="message">
           <div class="message__author">Won</div>
           <p class="message__content">
-            Ok! https://media.giphy.com/media/l41K4KlVE8dgozf8I/giphy.gif
-          </p>
-          <span class="message__time">7:38pm</span>
+            Ok! <img src="//media.giphy.com/media/l41K4KlVE8dgozf8I/giphy.gif">
+          </p>span>
         </div>
       </div>
-    </div>
+  </div>
   </body>
 </html>
+
diff --git a/week-1/2-html-attributes/readme.md b/week-1/2-html-attributes/readme.md
@@ -4,9 +4,9 @@ Luke has sent a map to iCafe. Using HTML attributes, we can turn this into a lin
 
 Complete the following steps in the `index.html` file:
 
-1. In Luke's message, use the `<a>` tag with the `href` attribute to turn the word "iCafe" into a link that can be clicked.
-2. In Won's message, use the `<img>` tag with the `src` attribute to show the funny gif in the message.
-3. When you are finished, use git to add, commit and push your changes.
+2. In Won's message, use the `<img>` tag with the `src` attribute to show the funny gif in the message.href` attribute to turn the word "iCafe" into a link that can be clicked.
+hed, use git to add, commit and push your changes.
+3. When you are finis1. In Luke's message, use the `<a>` tag with the `
 
 ```shell
 git add .

diff --git a/week-1/3-semantic-html/index.html b/week-1/3-semantic-html/index.html
@@ -11,29 +11,32 @@
   </head>
 
   <body>
+
     <div class="site-wrapper">
+      <header role="banner">
       <div class="site-header">
         <div class="site-header__title">Messages</div>
       </div>
+      </header>
       <div class="messages">
         <div class="message">
           <div class="message__author">Won</div>
-          <p class="message__content">Where should we meet later?</p>
-          <span class="message__time">Mar 25, 2018 7:25pm</span>
+          <p class="message__content"><article>should we meet later?</article> </p>
+          <span class="message__time"><time datetime="25, 2018 7:25pm">mar</time></span>
         </div>
         <div class="message">
           <div class="message__author">Luke</div>
           <p class="message__content">
-            Let's meet at the iCafe in Merchant City. https://goo.gl/maps/aza4h9nUBhn
+            <article>'s meet at the iCafe in Merchant City. https://goo.gl/maps/aza4h9nUBhn</article>
           </p>
           <span class="message__time">Mar 25, 2018 7:35pm</span>
         </div>
         <div class="message">
           <div class="message__author">Won</div>
           <p class="message__content">
-            Ok! https://media.giphy.com/media/l41K4KlVE8dgozf8I/giphy.gif
+           <article> Ok! https://media.giphy.com/media/l41K4KlVE8dgozf8I/giphy.gif</article>
           </p>
-          <span class="message__time">Mar 25, 2018 7:38pm</span>
+          <span class="message__time"><time datetime="2018 7:38pm">mar</time> </span>
         </div>
       </div>
       <div id="result" class="result"></div>

diff --git a/week-1/4-links-scripts/index.html b/week-1/4-links-scripts/index.html
@@ -3,7 +3,8 @@
   <head>
     <meta charset="utf-8" />
     <title>4. Adding Links and Scripts - HTML, CSS and Git Exercises</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" >
+    <link rel="stylesheet" href="css/missing-styles.css">
   </head>
 
   <body>
@@ -33,5 +34,6 @@
         </div>
       </div>
     </div>
+    <script src="js/convertUrls.js"></script>
   </body>
 </html>
diff --git a/week-1/5-css-selectors/index.html b/week-1/5-css-selectors/index.html
@@ -17,25 +17,34 @@
         <div class="site-header__title">Messages</div>
       </div>
       <div class="messages">
-        <div id="first-message">
+        <div class="first-message">
           <div class="message__author">Won</div>
           <p class="message__content">Where should we meet later?</p>
           <time class="message__time">7:25pm</time>
         </div>
-        <article>
+        <div class="seconde-message">
+        <articl>
+
           <div class="message__author">Luke</div>
           <p class="message__content">
             Let's meet at the iCafe in Merchant City. https://goo.gl/maps/aza4h9nUBhn
           </p>
           <time class="message__time">7:35pm</time>
+
         </article>
+        </div>
+      </div>
+      <div class="third-message">
+        <article>
         <div class="message--latest">
           <div class="message__author">Won</div>
           <p class="message__content">
             Ok! https://media.giphy.com/media/l41K4KlVE8dgozf8I/giphy.gif
           </p>
           <time class="message__time">7:38pm</time>
         </div>
+        </article>
+
       </div>
     </div>
   </body>

diff --git a/week-1/5-css-selectors/message-backgrounds.css b/week-1/5-css-selectors/message-backgrounds.css
@@ -1 +1,11 @@
 /* Add your CSS code below */
+.first-message {
+    background-color: red;
+}
+
+.seconde-message{
+    background-color: cadetblue;
+}
+.thrid-message {
+    background-color: yellow;
+}
diff --git a/week-1/6-css-properties/readme.md b/week-1/6-css-properties/readme.md
@@ -8,4 +8,4 @@ There are many CSS properties you can use to change how your website looks. Add
 4. Make yesterday's message partially transparent to show it is old.
 5. Increase the space between each line in a message.
 
-_Hint: You can use Google to learn new CSS properties. Try searching for color, font-weight, text-decoration, font-size, border, opacity, and line-height._
+_Hint: You can use Google to learn new CSS properties. Try searching for color, font-weight, text-decoration, font-size, border, opacity, and line-height.
diff --git a/week-1/6-css-properties/styles.css b/week-1/6-css-properties/styles.css
@@ -1 +1,17 @@
 /* Add your CSS code below */
+.message__content a {
+    color:red ;
+    font-weight: bold;
+    text-decoration: none;
+}
+.message__content{
+    font-size: 0.9rem;
+}
+.message--unread{
+    border: solid  blue;
+
+}
+.message{
+    opacity:0.2;
+    line-height: 300%;
+}
diff --git a/week-1/7-css-box/styles.css b/week-1/7-css-box/styles.css
@@ -3,4 +3,10 @@
   border: 1px solid #4491db;
   border-radius: 4px;
   background: #fff;
+  width:100px;
+  height:30px ;
+  margin: 30px 20px 20px 50px;
+  padding: 5px 5px 5px 5px;
+  border: solid blue;
+
 }
diff --git a/week-1/8-advanced-selectors/index.html b/week-1/8-advanced-selectors/index.html
@@ -38,7 +38,7 @@
         <div class="message message--unread">
           <div class="message__author">Won</div>
           <p class="message__content">
-            Ok!
+            OK!
             <a
               href="https://media.giphy.com/media/l41K4KlVE8dgozf8I/giphy.gif"
               class="link link--gif"

diff --git a/week-1/8-advanced-selectors/styles.css b/week-1/8-advanced-selectors/styles.css
@@ -1 +1,14 @@
 /* Try different box model properties below */
+.messages p {
+    color: white;
+    margin-bottom: 5px;
+
+
+}
+.site-footer p {
+    font-size: 12px;
+    text-align: center;
+}
+.message:last-child{
+    box-shadow: 4px 4px 0 #dba944;
+}
diff --git a/week-2/10-media-queries/columns.css b/week-2/10-media-queries/columns.css
@@ -1 +1,16 @@
 /* Add your own CSS code below */
+.countries {
+    columns:2;
+}
+@media screen  and (min-width:768px){
+    .countries{
+        columns:2;
+    }
+
+}
+
+@media  and (min-width:1200px){
+    .countries{
+        columns:3;
+    }
+}    
diff --git a/week-2/11-flexbox/flexbox.css b/week-2/11-flexbox/flexbox.css
@@ -1 +1,7 @@
 /* Add your own CSS code below */
+
+
+.countries--first{
+   display:flex;
+   flex-direction: row-reverse ;
+}
diff --git a/week-2/11-flexbox/index.html b/week-2/11-flexbox/index.html
@@ -9,8 +9,8 @@
     <link rel="stylesheet" href="flexbox.css" />
   </head>
 
-  <body>
-    <div class="site-wrapper">
+    <body>
+      <div class="site-wrapper">
       <div class="panel">
         <div class="exercise">
           <div class="site-header">

diff --git a/week-2/12-justify-content/flexbox.css b/week-2/12-justify-content/flexbox.css
@@ -7,3 +7,21 @@
 }
 
 /* Add your own CSS code below */
+ .countries--first{
+  flex-direction: row;
+  justify-content: right;
+ }
+
+ .countries--second {
+  flex-direction: row;
+  justify-content: space-around;
+ }
+
+ .countries--third {
+  flex-direction: column;
+  justify-content: flex-end;
+ }
+ .countries--fourth{
+  flex-direction: column;
+  justify-content: space-around;
+ }
diff --git a/week-2/13-align-items/flexbox.css b/week-2/13-align-items/flexbox.css
@@ -2,3 +2,21 @@
   display: flex;
 }
 /* Add your own CSS code below */
+.countries--first{
+  align-items: center;
+  flex-direction: row;
+}
+.countries--second {
+  align-items:flex-end;
+  flex-direction: row-reverse;
+
+}
+.countries--third{
+  flex-direction: column;
+  align-items:flex-end;
+}
+.countries--fourth {
+ align-items:center;
+
+ flex-direction:column-reverse;
+}
diff --git a/week-2/14-order/flexbox.css b/week-2/14-order/flexbox.css
@@ -2,4 +2,37 @@
   display: flex;
 }
 
-/* Add your own CSS code below */
+.countries--first > .country--brazil {
+  order: 5;
+}
+.countries--second > .country--brazil {
+  order: 4;
+}
+.countries--second > .country--uganda {
+  order: 5;
+}
+
+.countries--first > .country--brazil {
+  order: 5;
+}
+.countries--second > .country--brazil {
+  order: 4;
+}
+.countries--second > .country--uganda {
+  order: 5;
+}
+.countries--third > .country--uganda {
+  order: 1;
+}
+.countries--third > .country--laos {
+  order: 2;
+}
+.countries--third > .country--ethiopia {
+  order: 3;
+}
+.countries--third > .country--croatia {
+  order: 4;
+}
+.countries--thrid  .country--brazil{
+  order: 5;
+}
diff --git a/week-2/15-align-self/flexbox.css b/week-2/15-align-self/flexbox.css
@@ -3,3 +3,34 @@
 }
 
 /* Add your own CSS code below */
+.countries--first .country--ethiopia{
+  align-self:flex-end
+}
+
+.countries--second {
+  align-items: center;
+  align-self:flex-end; 
+}
+.countries--second .country--ethiopia{
+  align-self: flex-end;
+}
+
+.countries--third {
+  align-items:flex-start;
+}
+.countries--third .country--ethiopia{
+  align-self:flex-end;
+}
+.countries--third .country--croatia{
+  align-self:flex-end;
+}
+.countries--third .country--laos{
+  align-self: flex-end;
+}
+.countries--fourth{
+  flex-direction: column;
+  align-items: flex-start
+}
+.countries--fourth .country--uganda {
+  align-self: center;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,6 +27,7 @@ @@
               <p class="message__content">
                 I can meet on Tuesday and Wednesday after 4.
               </p>
+               <span class="message__time">6:48pm</span>
             </div>
           </div>
         </div>
@@ Expand Down @@