ex02 finished

06-EX02/index.html

@@ -66,20 +66,20 @@
     <div class="reviewContainer">
             <div class="review">
                 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam dolore ipsum vitae consectetur eius velit amet ratione? Repudiandae aperiam, itaque sapiente vero accusantium aspernatur laudantium earum voluptatibus ex ab magni!</p>
-                <div class="round-image">
+                <div class="round-image1">
                 </div>
                 <div>-<b>Jane Doe</b> CEO - ABC Inc.</div>
             </div>
             
             <div class="review">
                 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perferendis odit cum ipsum placeat atque asperiores nisi nam corrupti, saepe repellat officiis, architecto nulla voluptatum consectetur eos neque error voluptates accusamus.</p>
-                    <div class="round-image">
+                    <div class="round-image3">
                     </div>
                     <div>-<b>John Doe</b> CEO - ABC Inc.</div>
             </div>
             <div class="review">
                 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis quo doloribus qui? Sed, cumque debitis. Numquam suscipit ad cumque, dolore eligendi cum perspiciatis earum? Recusandae vero quae provident ducimus possimus.</p>
-                    <div class="round-image">
+                    <div class="round-image2">
                     </div>
                     <div>-<b>Janet Smith</b> CEO - ABC Inc.</div>
             </div>
@@ -94,7 +94,7 @@
             </div>
             <div class="listCont">
                 <h2>random titel</h2>
-                <ul>
+                <ul class="list">
                     <li>Lorem ipsum dolor sit amet </li>
                     <li>Lorem ipsum dolor sit amet </li>
                     <li>Lorem ipsum dolor sit amet </li>
@@ -103,7 +103,7 @@
             </div>
             <div class="listCont">
                 <h2>laatste titel</h2>
-                <ul>
+                <ul class="list">
                         <li>Lorem </li>
                         <li>Lorem  </li>
                         <li>Lorem  </li>
@@ -114,10 +114,6 @@
         <p>&copy; Untitled Photos Unsplash Viceo Voverr</p>
     </div>
 
-    
-
-
-    </div>
 </body>
 
 </html>

06-EX02/style.css

@@ -32,13 +32,27 @@
     color: white;
     padding: 5px;
 }
-.round-image {
+.round-image1 {
     height: 50px;
     width: 50px;
     border-radius: 50%;
     background-image: url(images/pic01.jpg);
     background-size: cover;
 }
+.round-image2 {
+    height: 50px;
+    width: 50px;
+    border-radius: 50%;
+    background-image: url(images/pic02.jpg);
+    background-size: cover;
+}
+.round-image3 {
+    height: 50px;
+    width: 50px;
+    border-radius: 50%;
+    background-image: url(images/pic03.jpg);
+    background-size: cover;
+}
 .main{
     display: flex;
     flex-flow: row wrap;
@@ -108,33 +122,39 @@ text-align: center;
     height: 400px;
     text-align: center;
     color: white;
-    /*flex toepassen zodat items naast elkaar komen*/
+    
 }
 .footer p {
-    background-color: black;
-    color: white;
+    
     border-top: solid gray 2px;
     width: 60%;
-    
-    /* int midden plaatsen */
+    margin-left: 20%;
 }
 
 .footcontainer{
     height: 90%;
-    
+    display: flex;
+    justify-content: space-around;
 }
 .footcontainer h2 {
     text-align: left;
+    padding: 0;
 }
 .spanCont{
-    width: 30%;
+    width: 40%;
     text-align: left;
+    margin-left: 5%;
 }
 .listCont{
     width: 30%;
     text-align: left;
-    /* plaatst tussen li */
-    /*markering listitem wegwerken */
+}
+.listCont h2{
+    margin-left: 10%;
+}
+.list li{
+    padding-bottom: 10%;
+    list-style-type: none;
 }
 
 b{