From 0225860e6047ddaee31e7ecb45e907a6221041b8 Mon Sep 17 00:00:00 2001
From: Juan Massuelles <juan@polux.studio>
Date: Wed, 20 Oct 2021 00:10:20 +0200
Subject: [PATCH] variable bg

---
 .../live/session4/carrousel/index-var.html         | 61 ++++++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 b2-cwd/integration/live/session4/carrousel/index-var.html
diff --git a/b2-cwd/integration/live/session4/carrousel/index-var.html b/b2-cwd/integration/live/session4/carrousel/index-var.html
new file mode 100644
index 0000000..5fad30a
--- /dev/null
+++ b/b2-cwd/integration/live/session4/carrousel/index-var.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Welcome to the forest</title>
+    <link rel="stylesheet" href="style.css" />
+    <script type="text/javascript" src="scripts/slider.js" async></script>
+    <style>
+    @media (max-width: 480px) {
+      :root { --bg-image: url(./imgs/mobile/forest-river.jpg); }
+    }
+    @media (min-width: 481px) and (max-width: 989px) {
+      :root { --bg-image: url(./imgs/tablet/forest-river.jpg); }
+    }
+    @media (min-width: 990px) {
+      :root { --bg-image: url(./imgs/full/forest-river.jpg); }
+    }
+    </style>
+  </head>
+  <body>
+    <header id="top-slider" aria-hidden="true">
+      <div class="slider">
+        <div id="slide-1" class="slide img-wrap" style="background-image: var(--bg-image);">
+          <picture>
+            <source media="(max-width: 480px)" srcset="./imgs/mobile/forest-river.jpg">
+            <source media="(orientation: landscape) and (min-width: 481px) and (max-width: 989px)" srcset="./imgs/tablet/forest-river.jpg">
+            <source media="(min-width: 990px)" srcset="./imgs/full/forest-river.jpg">
+            <img src="./imgs/tablet/forest-river.jpg" alt="">
+          </picture>
+        </div>
+        <div id="slide-2" class="slide img-wrap" aria-hidden="true">
+          <picture>
+            <source media="(max-width: 480px)" srcset="./imgs/mobile/forest-moss.jpg">
+            <source media="(orientation: landscape) and (min-width: 481px) and (max-width: 989px)" srcset="./imgs/tablet/forest-moss.jpg">
+            <source media="(min-width: 990px)" srcset="./imgs/full/forest-moss.jpg">
+            <img src="./imgs/tablet/forest-moss.jpg" alt="">
+          </picture>
+        </div>
+        <div id="slide-3" class="slide img-wrap" aria-hidden="true">
+          <picture>
+            <source media="(max-width: 480px)" srcset="./imgs/mobile/forest-autumn.jpg">
+            <source media="(orientation: landscape) and (min-width: 481px) and (max-width: 989px)" srcset="./imgs/tablet/forest-autumn.jpg">
+            <source media="(min-width: 990px)" srcset="./imgs/full/forest-autumn.jpg">
+            <img src="./imgs/tablet/forest-autumn.jpg" alt="">
+          </picture>
+        </div>
+        <nav class="slider-nav">
+          <span class="prev"><i class="ico-circle-left"></i></span>
+          <span class="pause"><i class="ico-pause2"></i></span>
+          <span class="next"><i class="ico-circle-right"></i></span>
+        </nav>
+      </div>
+    </header>   
+    <div id="slider-position">
+      <i class="on"></i>
+      <i class="ico-radio-unchecked"></i>
+      <i class="ico-radio-unchecked"></i>
+    </div>
+    <h1>Welcome to the forest</h1>
+  </body>
+</html>
\ No newline at end of file
