drwpow · ayseakyol · Jan 16, 2020 · Jan 16, 2020 · Jan 17, 2020 · Jan 23, 2020
diff --git a/exercise-1/styles.css b/exercise-1/styles.css
@@ -63,3 +63,49 @@ body {
   margin-right: auto;
   max-width: 56em;
 }
+
+
+
+@media screen and (min-width: 600px){
+
+
+  .grid__text {
+    grid-area: text;
+    padding-left: 150px;
+
+  }
+  .wrapper {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+
+.box {
+  margin: var(--grid);
+  min-height: calc(4 * var(--grid));
+  padding: var(--grid);
+  width: 80%;
+}
+
+
+.grid {
+  grid-template-areas:
+    "red text"
+    "black text";
+}
+
+}
+
+@media screen and (min-width: 900px){
+
+    .grid {
+      display: grid;
+      grid-template-areas:
+        "black text red";
+
+    }
+    .box {
+      margin-top: var(--grid);
+      min-height: calc(4 * var(--grid));
+    }
+
+    }
diff --git a/exercise-2/index.html b/exercise-2/index.html
@@ -9,6 +9,51 @@
 </head>
 
 <body>
+
+  <div class="wrapper">
+    <div class="grid">
+      <div class="box box_1">
+        <div class="picture">
+          <img src="/home/hackyourfuture/Pictures/thumbnail.png" alt="thumbnail">
+              <div class="heading">  <h2>Card Title aligns left </h2> <h4>SUBTITLE ALIGNS UNDERNEATH</h4></div>
+        </div> 
+        <div class="text"><p>There is a normal amount of text here, and there is even spacing around all sides.</p></div>
+        <div class="button"><button class="button-1">NOPE</button><button class="button button-2">OK</button> </div>
+      </div> 
+
+
+
+      <div class="box box_2">
+        <div class="picture_2">
+          <img src="/home/hackyourfuture/Pictures/thumbnail.png" alt="thumbnail">
+          <div><h2>Two-line titles align vertically, I guess</h2>
+          <h4>SUBTITLE ALIGNS UNDERNEATH</h4></div>
+          <div class="stars"><img id="star" src="star.svg" alt="star"><h6>SPECIAL</h6></div>
+        </div> 
+        <div class="text"><p>There is a text here</p></div>
+        <div class="button"><button class="button-1">NOPE</button><button class="button button-2">OK</button> </div>
+      </div>
+
+
+      <div class="box box_3">
+        <div class="picture"><img src="/home/hackyourfuture/Pictures/thumbnail.png" alt="thumbnail"><h2>Where's my subtitle?</h2></div>   
+        <div class="text"><p>There is a normal amount of text here, and there is even spacing around all sides.
+
+          There is less text here.
+
+          There is a little too much text here. This should have been caught or edited down by the copywriter but, hey, here we are, and this has to go live today. Gotta do our best!
+
+          Neat! A line break! </p></div>  
+          <div class="button"><button class="button-5">NOPE</button><button class="button button-6">OK</button> </div>
+      </div>
+  </div>
+</div>
+
+
+
+
+
+
 </body>
 
 </html>
diff --git a/exercise-2/styles.css b/exercise-2/styles.css
@@ -2,8 +2,128 @@
 
 body {
   margin: 0;
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
 }
 
 * {
   box-sizing: border-box;
 }
+
+.wrapper{
+  display:grid;
+  background:#eee;
+  padding: 6em 3em 6em 3em;
+}
+
+
+.box{
+  background-color: white;
+  padding: 15px 0px 5px 15px;
+  border-radius: 16px;
+
+
+}
+
+.grid {
+   display:grid;
+   grid-template-columns:repeat(3, 1fr);
+   grid-auto-rows: 300px;
+   grid-gap:3em;
+
+
+}
+
+.picture {
+  display:grid;
+  grid-template-areas: "picture heading"
+  ;
+}
+
+
+h4{
+  opacity: 0.3;
+}
+
+
+h3{
+  font-weight: bold;
+}
+
+p {
+  display:grid;
+  grid-template-columns: 2fr 1fr;
+  width: 80%;
+  float: right;
+
+}
+
+
+
+.button-1 {
+  border-radius: 36px;
+  font-size: 18px;
+  width: 20%;
+  background-color:#eee;
+  color: gray;
+  display: inline;
+  position: relative;
+  top:100px;
+  left:190px;
+
+}
+
+.button-2 {
+  border-radius: 36px;
+  font-size: 18px;
+  width: 20%;
+  background-color: #4f50ff;;
+  color: white;
+  position: relative;
+  top:73px;
+  left:330px;
+}
+
+
+
+#star{
+  width: 12%;
+}
+
+h6{
+  color: rgb(235, 235, 62);
+}
+
+.picture_2 {
+  display:grid;
+  grid-template-columns: 1fr 3fr 2fr; 
+
+}
+
+.button-5 {
+  border-radius: 36px;
+  font-size: 18px;
+  width: 20%;
+  background-color:#eee;
+  color: gray;
+  display: inline;
+  position: relative;
+  top:170px;
+  left:230px;
+
+}
+
+
+.button-6 {
+  border-radius: 36px;
+  font-size: 18px;
+  width: 20%;
+  background-color: #4f50ff;
+  color: white;
+  position: relative;
+  top:140px;
+  left:350px;
+}
+
+
+
+
diff --git a/exercise-2/thumbnail.png b/exercise-2/thumbnail.png
diff --git a/exercise-3/index.html b/exercise-3/index.html
@@ -3,12 +3,40 @@
 
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Exercise 3</title>
   <link rel="stylesheet" href="./styles.css">
 </head>
 
 <body>
+  <div class="slidershow middle">
+
+    <div class="slides">
+      <input type="radio" name="r" id="r1" checked>
+      <input type="radio" name="r" id="r2">
+      <input type="radio" name="r" id="r3">
+      <input type="radio" name="r" id="r4">
+      <div class="slide s1">
+        <img src="nicolascage.jpeg" alt="nicolascage smiling">
+      </div>
+      <div class="slide">
+        <img src="nicolascage2.jpeg" alt="nicolascage close-eyes">
+      </div>
+      <div class="slide">
+        <img src="nicolascage3.jpeg" alt="nicolascage in forest">
+      </div>
+      <div class="slide">
+        <img src="nicolascage4.jpeg" alt="nicolascage in restaurant">
+      </div>
+    </div>
+
+    <div class="navigation">
+      <label for="r1" class="bar"></label>
+      <label for="r2" class="bar"></label>
+      <label for="r3" class="bar"></label>
+      <label for="r4" class="bar"></label>
+    </div>
+  </div>
 </body>
 
 </html>
diff --git a/exercise-3/nicolascage.jpeg b/exercise-3/nicolascage.jpeg
diff --git a/exercise-3/nicolascage2.jpeg b/exercise-3/nicolascage2.jpeg
diff --git a/exercise-3/nicolascage3.jpeg b/exercise-3/nicolascage3.jpeg
diff --git a/exercise-3/nicolascage4.jpeg b/exercise-3/nicolascage4.jpeg
diff --git a/exercise-3/styles.css b/exercise-3/styles.css
@@ -1,7 +1,68 @@
 body {
   margin: 0;
+  padding: 0;
+  background: #444444;
+}
+.slidershow{
+  width: 700px;
+  height: 400px;
+  overflow: hidden;
+}
+.middle{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+}
+.navigation{
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+}
+.bar{
+  width: 15px;
+  height: 15px;
+  border: 2px solid #fff;
+  margin: 6px;
+  cursor: pointer;
+  transition: 0.4s;
+  border-radius: 100%;
+}
+.bar:hover{
+  background: #fff;
+}
+
+input[name="r"]{
+    position: absolute;
+    visibility: hidden;
 }
 
-* {
-  box-sizing: border-box;
+.slides{
+  width: 500%;
+  height: 100%;
+  display: flex;
+}
+
+.slide{
+  width: 20%;
+  transition: 0.6s;
+}
+.slide img{
+  width: 100%;
+  height: 100%;
+}
+
+#r1:checked ~ .s1{
+  margin-left: 0;
+}
+#r2:checked ~ .s1{
+  margin-left: -20%;
+}
+#r3:checked ~ .s1{
+  margin-left: -40%;
+}
+#r4:checked ~ .s1{
+  margin-left: -60%;
 }