add images to site

diff --git a/public/hornet.png b/public/hornet.png
new file mode 100644 (file)
index 0000000..ba66fce
Binary files /dev/null and b/public/hornet.png differ

diff --git a/public/index.html b/public/index.html
index 0fbc6639ff4ffa95a7a46f7a405261158d99f7ea..3300f9d8a3191ba88e6347fcb35b829d5ac2112d 100644 (file)
--- a/public/index.html
+++ b/public/index.html
@@ -33,10 +33,12 @@
   <h1 style="color: yellow;">Alexander Goussas</h1>
   <h2 style="color: green; text-align: center;">Blog about programming and friends</h2>
 
+  <img id="logo" src="./logo.png" />
+  <img id="hornet" src="./hornet.png" />
+
   <section id="posts">
     <h2 style="color: yellow;">Posts</h2>
     <ul>
-      <li><a href="./06-05-2026-language-checkpoint-april.md.html">Language Checkpoint - April 2026</a></li>
     </ul>
   </section>
   <script src="js/script.js"></script>

diff --git a/public/logo.png b/public/logo.png
new file mode 100644 (file)
index 0000000..764882d
Binary files /dev/null and b/public/logo.png differ

diff --git a/public/styles.css b/public/styles.css
index d4cd95bf495f5b399013d331b1256649319cdbde..b8ef45873701971b84ecec2d2a154319eacb03fc 100644 (file)
--- a/public/styles.css
+++ b/public/styles.css
@@ -24,10 +24,55 @@ a {
 }
 
 nav {
+  display: flex;
+  justify-content: center;
   ul {
     list-style: none;
     display: flex;
-    justify-content: space-between;
+  }
+}
+
+#logo {
+  max-width: 169px;
+  position: fixed;
+  right: 10px;
+  top: 200px;
+  border: 2px lightgreen solid;
+  animation: 0.3s linear infinite alternate blink-green;
+}
+
+#hornet {
+  max-width: 169px;
+  position: fixed;
+  top: 20px;
+  left: 10px;
+  border: 2px red solid;
+  animation: 0.3s linear infinite alternate blink-red;
+}
+
+@keyframes blink-red {
+  from {
+    transform: scale(1);
+    box-shadow: none;
+  }
+  to {
+    transform: scale(0.99);
+    box-shadow: 
+      rgba(255 0 0 / 80%) 3px 3px 8px,
+      rgba(255 0 0 / 80%) -3px -3px 8px;
+  }
+}
+
+@keyframes blink-green {
+  from {
+    transform: scale(1);
+    box-shadow: none;
+  }
+  to {
+    transform: scale(0.99);
+    box-shadow: 
+      rgba(0 255 0 / 80%) 3px 3px 8px,
+      rgba(0 255 0 / 80%) -3px -3px 8px;
   }
 }