Feature/007 laura

src/003-box-sizing/example/example.css

@@ -3,3 +3,30 @@
  * Version: 1
  * By: xxx
  */
+
+.brd-box{
+    border: 5px solid #D24F2E;
+}
+
+.bx{
+    border: 5px solid #D24F2E;
+}
+
+.cnt-box{
+    box-sizing: content-box;
+    border: 5px solid #D24F2E;
+    max-width: calc(100% - 60px);
+    width: 1000px;
+}
+
+.container{
+    background-color: rgb(233,233,233);
+    padding: 5px 15px 15px 15px;
+    margin: 15px 15px;
+}
+
+
+.bx, .brd-box, .cnt-box{
+    margin: 15px;
+    padding: 15px;
+}

src/003-box-sizing/example/index.html

@@ -35,26 +35,26 @@
 
       <div>
 
-        <div>
+        <div class="container">
           <h3> Box Model </h3>
-          <div>
+          <div class="bx">
             <p>Since the dawn of CSS, the box model has worked like this by default:</p>
             <p>width + padding + border = actual visible/rendered width of an element's box</p>
             <p>height + padding + border = actual visible/rendered height of an element's box</p>
           </div>
         </div>
 
-        <div>
+        <div class="container">
           <h3>Box Sizing : Content Box </h3>
-          <div>
+          <div class="cnt-box">
             <p>Default. The width and height properties (and min/max properties) includes only the content. Border,
               padding, or margin are not included</p>
           </div>
         </div>
 
-        <div class="bs-example">
+        <div class="bs-example container">
           <h3>Box Sizing : border-box </h3>
-          <div>
+          <div class="brd-box">
             <p>The width and height properties (and min/max properties) includes content, padding and border, but not
               the margin</p>
           </div>

src/004-display/example/example.css

@@ -3,3 +3,82 @@
  * Version: 1
  * By: xxx
  */
+.column {
+    display: inline-block;
+    width: 48%;
+    vertical-align: middle;
+}
+
+.division{
+    padding: 15px 10px
+}
+
+header{
+    padding-bottom: 2px;
+}
+
+header,
+.division{
+    background-color: rgb(232,232,232);
+}
+
+header h1{
+    padding-left: 10px;
+}
+
+.navigation {
+    background-color: rgb(220, 220, 220);
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+.navigation ul{
+    list-style: none;
+}
+
+.navigation ul li{
+    display: inline;
+}
+
+
+.section{
+    background-color: rgb(232,232,232);
+    display: flex;
+    flex-wrap: wrap;
+    padding: 35px 50px 20px 15px;
+}
+
+.section div{
+    flex-grow: 1;
+    width: 30%;
+    min-width: 100px;
+}
+
+.section div{
+    border: 1px solid red;
+    display: inline-block;
+    height: 200px;
+    margin: 1px;
+   /* width: 300px;*/
+
+}
+
+#table{
+    display: table;
+    border-collapse: separate;
+    border-spacing: 1px;
+}
+
+#table .row{
+    display:table-row;
+}
+
+#table .row div{
+    background-color: rgb(200,200,200);
+    display: table-cell;
+    height: 50px;
+    width: 800px;
+    text-align: center;
+    padding-top: 30px;
+
+}

src/004-display/example/index.html

@@ -41,7 +41,7 @@ <h1>Lorem ipsum
           </h1>
         </header>
 
-        <div>
+        <div class="navigation">
           <ul>
             <li><a href="">Link 1</a></li>
             <li><a href="">Link 2</a></li>
@@ -50,38 +50,38 @@ <h1>Lorem ipsum
           </ul>
         </div>
 
-        <div>
-          <div>
+        <div class="division">
+          <div class="column">
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
             ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
             nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
             anim id est laborum.
           </div>
-          <div>
+          <div class="column" style="margin-top:-20px;">
             Lorem ipsum dolor sit amet, consectetur adipisicing elit.
           </div>
         </div>
 
-        <div>
-          <div>
+        <div id="table">
+          <div class="row">
             <div>Table Header</div>
             <div>Table Header</div>
             <div>Table Header</div>
           </div>
-          <div>
+          <div class="row">
             <div>Table Cell</div>
             <div>Table Cell</div>
             <div>Table Cell</div>
           </div>
-          <div>
+          <div class="row">
             <div>Table Cell</div>
             <div>Table Cell</div>
             <div>Table Cell</div>
           </div>
         </div>
 
-        <div>
+        <div class="section">
           <div>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex

src/005-centering/example/example.css

@@ -3,3 +3,134 @@
  * Version: 1
  * By: xxx
  */
+
+.container{
+    background-color: rgb(232,232,232);
+    max-width: 1200px;
+    margin: auto;
+}
+
+.centered-text{
+    padding-top: 10px;
+    padding-bottom: 10px;
+    text-align: center;
+}
+
+.centered-box{
+    text-align: center;
+}
+
+.centered-box div{
+    background-color: rgb(211,211,211);
+    display: inline-block;
+    margin: 20px 5px;
+    max-width: 200px;
+    padding: 25px 25px;
+    text-align: left;
+}
+
+.centered-flexbox{
+    display:flex;
+    justify-content: center;
+}
+
+.centered-flexbox div{
+    background-color: rgb(211,211,211);
+    max-width: 200px;
+    margin: 5px 5px;
+    padding: 25px 25px;
+}
+
+
+.centered-line {
+    background-color: rgb(211,211,211);
+    display: inline-block;
+    height: 100px;
+    line-height: 100px;
+    margin-top: 20px;
+    padding-left:10px;
+    text-align: left;
+    vertical-align: middle;
+    width: 500px;
+}
+
+
+.centered-text,
+.center-within-parent,
+.flex-lines,
+.link-list,
+.vertically-center-within-parent,
+.vertical-line{
+    background-color: rgb(211, 211, 211);
+}
+
+
+.center-within-parent {
+    height: 200px;
+    margin-top: 20px;
+    position: relative;
+
+}
+
+.child,
+.child-vertically{
+    background-color: rgb(169,169,169);
+    color: rgb(255,255,255);
+}
+
+.child{
+    position: absolute;
+    top: 50%;
+    height: 100px;
+    margin-top: -50px;
+    width: 90%;
+    padding: 10px 10px;
+    margin-left: 20px;
+}
+
+.flex-lines{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.flex-lines p{
+    padding: 70px 20px;
+}
+
+.link-list{
+    text-align: center;
+}
+
+.link-list div{
+    display: inline-block;
+    margin: 10px;
+
+}
+
+.vertical-line{
+    margin-top: 30px;
+    margin-bottom: 30px;
+    height: 200px;
+    width: 200px;
+}
+
+.vertical-line p{
+    padding: 55px 20px 30px 10px;
+}
+
+.vertically-center-within-parent{
+    margin-top: 40px;
+    position:relative;
+    height: 200px;
+    padding-top: 30px;
+}
+
+.child-vertically{
+    left: 50%;
+    padding: 10px 10px;
+    position: absolute;
+    top: 52%;
+    transform: translate(-50%,-57%);
+    width: 95%;
+}