From a99b12e96de0687ceda1bdbf908010ecadf778ce Mon Sep 17 00:00:00 2001
From: mikaelsrozee <mikaelsrozee@gmail.com>
Date: Fri, 28 Jun 2019 13:49:15 +0100
Subject: [PATCH] add items to list

---
 css/style.css | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 index.html    | 18 ++++++++++++++++
 2 files changed, 75 insertions(+), 1 deletion(-)

diff --git a/css/style.css b/css/style.css
index d03d428..144669d 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,10 +1,13 @@
 * {
     padding: 0;
     margin: 0;
+
+    font-family: sans-serif;
 }
 
 body {
     display: flex;
+    flex-direction: column;
 }
 
 header {
@@ -14,6 +17,13 @@ header {
     padding: 1em 25vw 0 25vw;
 }
 
+main {
+    display: flex;
+    flex-direction: column;
+    width: 50vw;
+    padding: 1em 25vw 0 25vw;
+}
+
 #banner-img {
     margin: 0 auto;
 }
@@ -21,8 +31,54 @@ header {
 #search {
     width: 100%;
     font-size: 200%;
-    font-family: sans-serif;
     caret-color: cornflowerblue;
     border: none;
     outline: none;
 }
+
+.item {
+    display: flex;
+    border: thin solid lightgray;
+    overflow: hidden;
+    margin-bottom: 0.25rem;
+    border-radius: 0.25rem;
+    width: 100%;
+}
+
+.item .type {
+    padding: 0.5rem;
+    border: none;
+    display: block;
+    color: white;
+    text-align: right;
+    width: 6rem;
+    flex: 0 0 auto;
+}
+
+.item .slides {
+    background-color: darkred;
+}
+
+.item .resource {
+    background-color: green;
+}
+
+.item .demo {
+    background-color: darkorange;
+}
+
+.item .info {
+    background-color: cornflowerblue;
+}
+
+.item a {
+    width: 100%;
+    padding: 0.5rem 1rem;
+    display: block;
+    text-decoration: none;
+    flex: 0 1 auto;
+}
+
+.item a:hover {
+    background-color: yellow;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 6727c1c..495be4f 100644
--- a/index.html
+++ b/index.html
@@ -13,5 +13,23 @@
         <input id="search" placeholder="Search" autofocus>
     </nav>
 </header>
+<main>
+    <div class="item">
+        <span class="type info">information</span>
+        <a href="http://www.google.com/">Test Site</a>
+    </div>
+    <div class="item">
+        <span class="type slides">slides</span>
+        <a href="http://www.google.com/">Test Site</a>
+    </div>
+    <div class="item">
+        <span class="type resource">resource</span>
+        <a href="http://www.google.com/">Test Site</a>
+    </div>
+    <div class="item">
+        <span class="type demo">demo</span>
+        <a href="http://www.google.com/">Test Site</a>
+    </div>
+</main>
 </body>
 </html>
\ No newline at end of file