AdrienVictor · AdrienVictor · Jan 24, 2019 · Jan 24, 2019 · Feb 1, 2019 · Feb 4, 2019
diff --git a/CSS/style.css b/CSS/style.css
@@ -6,12 +6,24 @@ img {
   width: 20%;
   object-fit: contain;
 }
+header {
+  background-color: bisque;
+}
 .head-wrapper {
+<<<<<<< HEAD
   display: inline-flex;
   background: url(../Assets/Images/pink-lonely-chair-website-header-design.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
+=======
+  display: grid;
+  max-width: 100%;
+  width: 100%;
+  grid-template-columns: 33% 33% 33%;
+  grid-gap: 10px;
+  margin: auto;
+>>>>>>> e5c26fef26a77c08e96736d5417f3c57936b243b
 }
 .head-wrapper div {
   width: 33%;
@@ -69,7 +81,10 @@ table {
   width: 40%;
   max-width: 50%;
   margin: auto;
+<<<<<<< HEAD
   text-align: center;
+=======
+>>>>>>> e5c26fef26a77c08e96736d5417f3c57936b243b
 }
 table,
 th,
@@ -80,11 +95,14 @@ td {
 th,
 td {
   width: 10%;
+  text-align: center;
 }
 
 /*==== Footer Style ===*/
 footer {
-  background: lightblue;
+  background: gold;
+  border: 2px solid black;
+  color: red;
 }
 
 /* ==== SOCIAL MEDIA ICONS */

diff --git a/html/test.html b/html/test.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Document</title>
+    <style>
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+      .grid_container {
+        display: grid;
+        grid-template-columns: auto auto auto auto;
+        /* grid-auto-rows: 100px; */
+        grid-gap: 10px 15px;
+        background: lightblue;
+        height: 400px;
+        justify-content: start;
+        /* align-items: end; */
+        align-content: end;
+      }
+      .grid_item {
+        border: 2px solid blue;
+        height: 100px;
+        width: 200px;
+      }
+      .item9 {
+        grid-column: span 4;
+        /* width: auto; */
+      }
+    </style>
+  </head>
+  <body>
+    <h1>let's talk about grid</h1>
+    <div class="grid_container">
+      <div class="grid_item">1</div>
+      <div class="grid_item">2</div>
+      <div class="grid_item">3</div>
+      <div class="grid_item">4</div>
+      <div class="grid_item">5</div>
+      <div class="grid_item">6</div>
+      <div class="grid_item">7</div>
+      <div class="grid_item">8</div>
+      <div class="grid_item item9">9</div>
+    </div>
+  </body>
+</html>
diff --git a/html/units.html b/html/units.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Units</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      .parent {
+        width: 80vw;
+        height: 120px;
+        background: aqua;
+        margin: 25% auto;
+      }
+      .child {
+        background: blue;
+        height: 60px;
+        width: 40vw;
+        margin: auto;
+        font-size: 2vw;
+      }
+      p {
+        font-size: 3rem;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>let's check some units</h1>
+    <div class="parent">
+      <p>let's check font size</p>
+      <div class="child">This is the child</div>
+    </div>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -82,6 +82,7 @@ <h4>Expected Skills to Know</h4>
 
       <strong></strong>
 
+      <<<<<<< HEAD
       <em></em> <span></span> <b></b>
       <p>
         Let format our skills: <span><strong>HTML</strong></span
@@ -148,6 +149,73 @@ <h4>Expected Skills to Know</h4>
       </table>
     </main>
     <div class="sticky-note"><p>I am a sticky note</p></div>
+    =======
+    <em></em> <span></span> <b></b>
+    <p>
+      Let format our skills: <span><strong>HTML</strong></span
+      >, <em>CSS</em>, JavaScript, React.
+    </p>
+    <video
+      width="400"
+      controls
+      type="video/mp4"
+      src="./Assets/Videos/Wildlife.mp4"
+    ></video>
+    <!-- TABLE CREATION TIPS
+  columns
+  rows
+  value
+  table header
+  table body
+  table footer
+-->
+    <table>
+      <thead>
+        <tr>
+          <th>Names</th>
+          <th>HTML</th>
+          <th>CSS</th>
+          <th>JavaScript</th>
+          <th>Maths</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <!--td=table data-->
+          <td>John</td>
+          <td>15</td>
+          <td>15</td>
+          <td>45</td>
+          <td>20</td>
+        </tr>
+        <tr>
+          <!--td=table data-->
+          <td>Jane</td>
+          <td>8</td>
+          <td>15</td>
+          <td>30</td>
+          <td>15</td>
+        </tr>
+        <tr>
+          <!--td=table data-->
+          <td>Arthur</td>
+          <td>7</td>
+          <td>5</td>
+          <td>40</td>
+          <td>1</td>
+        </tr>
+        <tr>
+          <!--td=table data-->
+          <td>Bob</td>
+          <td>15</td>
+          <td>11</td>
+          <td>24</td>
+          <td>9</td>
+        </tr>
+      </tbody>
+    </table>
+    <br />
+    >>>>>>> e5c26fef26a77c08e96736d5417f3c57936b243b
     <footer>
       <ul class="footer-nav">
         <li>

diff --git a/test.html b/test.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>lets talk about flexbox</title>
+    <style>
+      * {
+        box-sizing: border-box;
+        padding: 0;
+        margin: 0;
+      }
+      .flex-container {
+        background: dodgerblue;
+        height: 300px;
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: flex-end;
+        align-items: center;
+        /* align-content: stretch; */
+      }
+      .item {
+        background: lightgoldenrodyellow;
+        width: 200px;
+        height: 100px;
+        margin: 2px;
+        text-align: center;
+        line-height: 100px;
+      }
+      .item1 {
+        flex-shrink: 2;
+        align-self: flex-start;
+      }
+      .item3 {
+        flex-shrink: 3;
+        align-self: flex-end;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>FlexBox</h1>
+    <div class="flex-container">
+      <div class="item item1">item 1</div>
+      <div class="item item2">item 2</div>
+      <div class="item item3">item 3</div>
+      <!-- <div class="item item4">item 4</div>
+      <div class="item item5">item 5</div>
+      <div class="item item6">item 6</div>
+      <div class="item item7">item 7</div>
+      <div class="item item8">item 8</div>
+      <div class="item item9">item 9</div>
+      <div class="item item10">item 10</div>
+      <div class="item item11">item 11</div>
+      <div class="item item12">item 12</div> -->
+    </div>
+  </body>
+</html>