add items to list

PortAISociety · Jun 28, 2019 · a99b12e · a99b12e
1 parent 1198ae7
commit a99b12e
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 1 deletion.
diff --git 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,15 +17,68 @@ header {
     padding: 1em 25vw 0 25vw;
 }
 
+main {
+    display: flex;
+    flex-direction: column;
+    width: 50vw;
+    padding: 1em 25vw 0 25vw;
+}
+
 #banner-img {
     margin: 0 auto;
 }
 
 #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;
+}
diff --git 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>