drwpow · thomashaile · Jan 18, 2020 · Jan 18, 2020 · Jan 18, 2020 · Jan 18, 2020
diff --git a/exercise-1/styles.css b/exercise-1/styles.css
@@ -63,3 +63,57 @@ body {
   margin-right: auto;
   max-width: 56em;
 }
+
+
+
+/* i will add media queries only below for the devices with differnt screen
+ 600px, and 900px */
+
+@media all and (max-width: 899px) and (min-width: 600px){
+
+  .grid__text {
+    grid-area: text;
+    padding-left: 150px;
+  }
+
+  .wrapper {
+    margin: 10px;
+  }
+
+.box {
+  margin: var(--grid);
+  min-height: calc(4 * var(--grid));
+  padding: var(--grid);
+  width: 80%;
+}
+
+
+.grid {
+  grid-template-areas:
+    "red text"
+    "black text"; /* for the column arrengments */
+}
+
+}
+
+@media screen and (min-width: 900px){
+
+    .grid {
+      display: grid;
+      grid-template-areas:
+        "black text red";
+
+    }
+    .box {
+      margin: var(--grid);
+      min-height: calc(4 * var(--grid));
+      padding: var(--grid);
+      width: auto; 
+    }
+    .grid__text {
+    grid-area: text;
+    padding-left: 30px;
+  }
+
+    }
+
diff --git a/exercise-2/index.html b/exercise-2/index.html
@@ -9,6 +9,21 @@
 </head>
 
 <body>
+
+      <h1>Identity Card</h1>
+
+    <div class="card">
+      <img src="./profileimage.jpg" alt="avater" />
+      <h1>Mr. Tom Cleverly</h1>
+      <div class="designation">Blogger & Content Writter</div>
+      <p>Contact: +32-xxxxx</p>
+     <div class="button"><button class="nope">NOPE</button><button class="ok">OK</button></button></div>
+      </div>
+
+
+
+
+
 </body>
 
 </html>
diff --git a/exercise-2/profileimage.jpg b/exercise-2/profileimage.jpg
diff --git a/exercise-2/styles.css b/exercise-2/styles.css
@@ -1,9 +1,57 @@
 /* The only reset you’ll ever need */
 
-body {
-  margin: 0;
+
+      body {
+        font-family: Arial, Helvetica, sans-serif;
+        margin: 0;
+        padding: 0;
+      }
+      h1 {
+         text-align: center;
+          }
+      .card {
+        box-shadow: 0 8px 8px 10px rgba(87, 84, 84, 0.4);
+        max-width: 250px;
+        padding: 10px;
+        margin: auto;
+        text-align: center;
+        box-sizing: border-box;
+      }
+
+      img {
+        width: 70%;
+        border: 1px solid black;
+        border-radius: 50%;
+      }
+
+      .designation {
+        font-size: 18px;
+      }
+
+      .button {
+        margin: 20px 0;
+      }
+
+.nope {
+  border-radius: 36px;
+  font-size: 18px;
+  width: 20%;
+  background-color:#eee;
+  color: gray;
+  display: inline;
+  position: relative;
+  top:100px;
+  left:190px;
+
 }
 
-* {
-  box-sizing: border-box;
+.ok {
+  border-radius: 36px;
+  font-size: 18px;
+  width: 20%;
+  background-color: #4f50ff;;
+  color: white;
+  position: relative;
+  top:73px;
+  left:330px;
 }
diff --git a/exercise-3/images/1.png b/exercise-3/images/1.png
diff --git a/exercise-3/images/2.png b/exercise-3/images/2.png
diff --git a/exercise-3/images/3.png b/exercise-3/images/3.png
diff --git a/exercise-3/index.html b/exercise-3/index.html
@@ -1,14 +1,48 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
-
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>Exercise 3</title>
   <link rel="stylesheet" href="./styles.css">
 </head>
-
 <body>
+<header class="header">
+  <h1>Exercise 3: Interactivity</h1>
+  <h2>Objective</h2>
+  <p>Build a carousel using only HTML and CSS that looks somewhat like the
+      following:</p>
+</header>
+
+<!-- the whole slide shows container  -->
+
+    <div class="slider-holder">
+        <span id="slider-image-1"></span>
+        <span id="slider-image-2"></span>
+        <span id="slider-image-3"></span>
+        <div class="image-holder">
+            <img src="images/1.png" class="slider-image" />
+            <img src="images/2.png" class="slider-image" />
+            <img src="images/3.png" class="slider-image" />
+        </div>
+        <div class="button-holder">
+            <a href="#slider-image-1" class="slider-change"></a>
+            <a href="#slider-image-2" class="slider-change"></a>
+            <a href="#slider-image-3" class="slider-change"></a>
+        </div>
+    </div>
 </body>
+</html>
+<article>
+  <h2>Rules</h2>
+  <ol class="assignments-rules">
+    <li>Only HTML and CSS. No Javascript is allowed.</li>
+    <li>Carousel must be operable using the navigation.</li>
+    <li>Left, right buttons are not necessary.</li>
+    <li>Touch swipe isn't necessary.</li>
+    <li>Supporting flexible slides / image sizes isn't necessary.</li>
+  </ol>
+</article>
 
+</body>
 </html>
diff --git a/exercise-3/styles.css b/exercise-3/styles.css
@@ -1,7 +1,63 @@
-body {
-  margin: 0;
+.slider-holder
+{
+    width: 800px;
+    height: 400px;
+    background-color: yellow;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 0px;
+    text-align: center;
+    overflow: hidden;
 }
 
-* {
-  box-sizing: border-box;
+.image-holder
+{
+    width: 2400px;
+    background-color: red;
+    height: 400px;
+    clear: both;
+    position: relative;
+
+    -webkit-transition: left 2s;
+    -moz-transition: left 2s;
+    -o-transition: left 2s;
+    transition: left 2s;
 }
+
+.slider-image
+{
+    float: left;
+    margin: 0px;
+    padding: 0px;
+    position: relative;
+}
+
+#slider-image-1:target ~ .image-holder
+{
+    left: 0px;
+}
+
+#slider-image-2:target ~ .image-holder
+{
+    left: -800px;
+}
+
+#slider-image-3:target ~ .image-holder
+{
+    left: -1600px;
+}
+
+.button-holder
+{
+    position: relative;
+    top: -20px;
+}
+
+.slider-change
+{
+    display: inline-block;
+    height: 10px;
+    width: 10px;
+    border-radius: 5px;
+    background-color: brown;
+}