feat: Add art directed red panda

It serves the small portrait panda image if viewport is 600px wide or less, and the large landscape image otherwise.
gabrielml · Jul 24, 2021 · 0c97718 · 0c97718
1 parent a948f9f
commit 0c97718
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -189,7 +189,16 @@ <h2>Rocking the free web</h2>
       </div>
 
       <div class="red-panda">
-        <!-- insert picture element -->
+        <picture>
+          <source
+            media="(max-width: 550px)"
+            srcset="images/red-panda-portrait600_tinified.jpg"
+          />
+          <img
+            src="images/red-panda1200_tinified.jpg"
+            alt="Large portrait red-panda image"
+          />
+        </picture>
       </div>
     </main>
   </body>