Added thumbnail list

AndersSeverinsen · Nov 24, 2024 · ffb72a8 · ffb72a8
1 parent 4a8c5ae
commit ffb72a8
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 3 deletions.
diff --git a/images/mybrain.ico → favicon.ico b/images/mybrain.ico → favicon.ico
diff --git a/images/fridg3_display.png b/images/fridg3_display.png
diff --git a/index.html b/index.html
@@ -2,10 +2,9 @@
     <head>
         <title>BruunSeverinsen</title>
         <link rel="stylesheet" type="text/css" href="style.css">
-        <link rel="icon" type="image/x-icon" href="images/mybrain.ico">
+        <link rel="mybrain" type="image/x-icon" href="favicon.ico">
         <link href='https://fonts.googleapis.com/css?family=Manrope' rel='stylesheet'>
     </head>
-    <!--<img src="images/kajak.jpg" alt="kajak.jpg" id="backgroundimage">-->
     <header id="primary">
         <div class="header leftcolumn">
             <a href="#">
@@ -17,9 +16,44 @@ <h1>BruunSeverinsen</h1>
             <a href="bruunseverinsen.dk/">Home</a>
             <a href="bruunseverinsen.dk/wiki" target="_blank">Wiki</a>
             <a href="#" target="_blank">Blog</a>
-            <!--<a href="./contract">Contract</a>-->
         </div>
     </header>
+    <body>
+        <div class="thumbdiv">
+            <ul class="thumbnav">
+                <li>
+                    <a href="#personal" class="active">
+                        <h3>Personal</h3>
+                    </a>
+                </li>
+                <li>
+                    <a href="#school">
+                        <h3>School</h3>
+                    </a>
+                </li>
+                <li>
+                    <a href="#pro">
+                        <h3>Professional</h3>
+                    </a>
+                </li>
+            </ul>
+            <ul class="thumblist">
+                <li class="thumb notactive">
+                    <a> <!-- href="./fridg3" target="_blank"  -->
+                        <div class="leftcolumn">
+                            <h3>Smart shopping list - fridg3</h3>
+                            <p>A shopping list that also keeps track of your current stock, 
+                                and can present precipice for what you have available.</p> 
+                            <h5>March 22, 2022</h5>   
+                        </div>
+                        <div class="rightcolumn">
+                            <img src="images/fridg3_display.png">
+                        </div>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </body>
     <footer>
         <div class="bottomnav leftcolumn">
             <ul>

diff --git a/style.css b/style.css
@@ -94,4 +94,85 @@ header a:hover, footer a:hover {
     width: 50px; 
     height: 50px;
     padding-left: 10px;
+}
+
+/* Thumbnail listing */
+.thumbdiv {
+    flex-wrap: wrap;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}
+
+.thumb {
+    margin: 10px;
+    width: 800px;
+    height: 200px;
+    overflow: hidden;
+    padding: 20px;
+}
+
+.thumblist li:not(:last-child) {
+    margin-right: 5px;
+    padding-right: 5px;
+    border-bottom: 1px solid #c8c8c8;
+  }
+
+.thumb .leftcolumn {
+    width: 60%;
+}
+
+.thumb:hover h3 {
+    text-decoration: underline;
+    text-underline-offset: 2px;
+}
+
+.thumb img {
+    width: 200px;
+    height: 200px;
+    object-fit: cover;
+}
+
+.thumb h5 {
+    color: #707070;
+}
+
+.notactive {
+    color: black;
+}
+
+.notactive:hover h3 {
+    text-decoration: none;
+}
+
+
+/* Thumbnail navigation */
+.thumbnav {
+    width: 800px;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    border-bottom: 1px solid #c8c8c8;
+}
+
+.thumbnav li {
+    float: left;
+}
+
+.thumbnav li a {
+    display: block;
+    color: #707070;
+    text-align: center;
+    padding: 0px 10px;
+    text-decoration: none;
+}
+
+.thumbnav li a:hover {
+    color: black;
+}
+
+.thumbnav li a.active {
+    color: black;
+    border-bottom: 1px solid black;
 }