add image overlay text

Author: jwcooper

assets/sass/pages/_home.scss

@@ -37,13 +37,47 @@
     }
 
     .image {
+      position: relative;
+
       img {
         aspect-ratio: 1/1;
         object-fit: cover;
         width: 100%;
         height: auto;
         border-radius: 25px;
       }
+
+      .image-title {
+        position: absolute;
+        bottom: 20px;
+        left: 20px;
+        right: 20px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+
+        span {
+          align-self: flex-end;
+
+          p {
+            vertical-align: bottom;
+            color: #fff;
+            padding: 10px;
+            margin: 0;
+            font-size: 24px;
+            border-radius: 10px;
+            background-color: rgba(0, 0, 0, 0.7);
+          }
+        }
+
+        img {
+          height: 90px;
+          width: 90px;
+          padding: 10px;
+          background-color: rgba(0, 0, 0, 0.7);
+          border-radius: 10px;
+        }
+      }
     }
   }
 

index.html

@@ -22,6 +22,15 @@ <h1>The easiest way to program microcontrollers</h1>
                                 src="{{ "assets/images/learn/sketch_drawing_toy.jpg" |
                                         relative_url }}"
         />
+      <span class="image-title">
+        <span>
+          <p>Sketch Drawing Toy by Ruiz Brothers</p>
+        </span>
+        <img alt="Made with CircuitPython Logo"
+                                  src="{{ "assets/images/made_with_circuitpython.svg" |
+                                          relative_url }}"
+          />
+      </span>
     </div>
   </div>
 
@@ -144,7 +153,7 @@ <h2>CircuitPython libraries on single board computers</h2>
         </p>
       </div>
       <div class="get-started">
-        <a href="{{ "downloads" | relative_url }}">Learn More</a>
+        <a href="{{ "blinka" | relative_url }}">Learn More</a>
       </div>
     </div>
   </div>