Finished Tiles

Time 3.5 hrs
Raskatan · Jan 16, 2017 · 6023387 · 6023387
1 parent 0b7d194
commit 6023387
Show file tree

Hide file tree

Showing 14 changed files with 184 additions and 6 deletions.
diff --git a/css/style.css b/css/style.css
diff --git a/css/style.css.map b/css/style.css.map
diff --git a/images/reduced/photo01.jpg b/images/reduced/photo01.jpg
diff --git a/images/reduced/photo02.jpg b/images/reduced/photo02.jpg
diff --git a/images/reduced/photo03.jpg b/images/reduced/photo03.jpg
diff --git a/images/reduced/photo04.jpg b/images/reduced/photo04.jpg
diff --git a/images/reduced/photo05.jpg b/images/reduced/photo05.jpg
diff --git a/images/reduced/photo06.jpg b/images/reduced/photo06.jpg
diff --git a/images/reduced/photo07.jpg b/images/reduced/photo07.jpg
diff --git a/images/reduced/photo08.jpg b/images/reduced/photo08.jpg
diff --git a/images/reduced/photo09.jpg b/images/reduced/photo09.jpg
diff --git a/images/reduced/photo10.jpg b/images/reduced/photo10.jpg
diff --git a/sass/style.scss b/sass/style.scss
@@ -6,9 +6,21 @@ $blue: #015F83;
 $red: #DF4664;
 $green: #6BA439;
 
-.blue{
+h4.blue{
   color: $blue;
   }
+
+h3.blue{
+  border-color: $blue;
+  }
+
+h3.red{
+  border-color: $red;
+  }
+
+h3.green{
+  border-color: $green;
+  }
 
 *{
   margin: 0;
@@ -30,6 +42,12 @@ h2{
   line-height: 100%;
   }
 
+h3{ 
+  font-size: 18px;
+  margin-bottom: 10px; 
+  line-height: 100%;
+  }
+
 h4{
   font-size: 18px;
   margin-bottom: 10px;
@@ -115,6 +133,50 @@ article{
         font-weight: bold;
         }
       }
+    }      
+  }
+
+.tiles{
+  h3{
+    display: block;
+    border-bottom-width: 2px;
+    border-bottom-style: solid;
+    padding-bottom: 10px;
+    margin-bottom: 36px;
+    font-weight: bold;
+    }
+  .row{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: no-wrap;
+    justify-content: space-between;
+    align-items: flex-start;
+    align-content: stretch;
+    margin-bottom: 90px;
+    @media screen and (max-width: 600px){
+      flex-direction: column;
+      }
+    article{
+      width: 30%;
+      margin-right: 5%;
+      &:last-child{
+        margin-right: 0;
+        }
+      @media screen and (max-width: 600px){
+        width: 100%;
+        margin: 0;
+        }
+      img{
+        width: 100%;
+        height: calc(width*1.6);
+        margin-bottom: 10px;
+        }
+      h3{
+        border: none;
+        margin-bottom: 10px;
+        padding: 0;
+        }
+      }
     }
   }
 

diff --git a/tiles.html b/tiles.html
@@ -1,10 +1,76 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
   <head>
-    link rel="stylesheet" type="text/css" href="css/style.css">
-  <title>Adam Christensen's Tile Test</title>
+    <link rel="stylesheet" type="text/css" href="css/style.css">
+  <title>Adam Christensen's Tiles Test</title>
   </head>
   <body>
-    <arti
+    <article class="tiles">
+      <header>
+      </header>
+      <h3 class="red">In your area</h3>
+    <div class="row">
+      <article>
+        <img src="images/reduced/photo03.jpg">
+        <h3>Cras mattis consectetur</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere est ex, ac commodo massa facilisis sed. Vivamus non nulla at nulla consequat pulvinar ac quis ante.</p>
+        <p>Maecenas mollis laoreet </p>
+      </article>         
+      <article>
+        <img src="images/reduced/photo02.jpg">
+        <h3>Cras mattis consectetur</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere est ex, ac commodo massa facilisis sed. Vivamus non nulla at nulla consequat pulvinar ac quis ante.</p>
+        <p>Maecenas mollis laoreet </p>
+      </article>
+      <article>
+        <img src="images/reduced/photo04.jpg">
+        <h3>Cras mattis consectetur</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere est ex, ac commodo massa facilisis sed. Vivamus non nulla at nulla consequat pulvinar ac quis ante.</p>
+        <p>Maecenas mollis laoreet </p>
+      </article>
+    </div> 
+      <h3 class="blue">News</h3> 
+    <div class="row">  
+      <article>
+        <img src="images/reduced/photo05.jpg">
+        <h3>Cras mattis consectetur</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere est ex, ac commodo massa facilisis sed. Vivamus non nulla at nulla consequat pulvinar ac quis ante.</p>
+        <p>Maecenas mollis laoreet </p>
+      </article>         
+      <article>
+        <img src="images/reduced/photo06.jpg">
+        <h3>Cras mattis consectetur</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere est ex, ac commodo massa facilisis sed. Vivamus non nulla at nulla consequat pulvinar ac quis ante.</p>
+        <p>Maecenas mollis laoreet </p>
+      </article>
+      <article>
+        <img src="images/reduced/photo07.jpg">
+        <h3>Cras mattis consectetur</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere est ex, ac commodo massa facilisis sed. Vivamus non nulla at nulla consequat pulvinar ac quis ante.</p>
+        <p>Maecenas mollis laoreet </p>
+      </article>
+    </div>    
+      <h3 class="green">Inspirational</h3>
+    <div class="row">
+      <article>
+        <img src="images/reduced/photo09.jpg">
+        <h3>Cras mattis consectetur</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere est ex, ac commodo massa facilisis sed. Vivamus non nulla at nulla consequat pulvinar ac quis ante.</p>
+        <p>Maecenas mollis laoreet </p>
+      </article>         
+      <article>
+        <img src="images/reduced/photo08.jpg">
+        <h3>Cras mattis consectetur</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere est ex, ac commodo massa facilisis sed. Vivamus non nulla at nulla consequat pulvinar ac quis ante.</p>
+        <p>Maecenas mollis laoreet </p>
+      </article>
+      <article>
+        <img src="images/reduced/photo10.jpg">
+        <h3>Cras mattis consectetur</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere est ex, ac commodo massa facilisis sed. Vivamus non nulla at nulla consequat pulvinar ac quis ante.</p>
+        <p>Maecenas mollis laoreet </p>
+      </article>
+    </div>
+    </article>
   </body>
 </html>