Merge pull request #11 from lizwang50/etrex-day3

etrex · web-flow · commit 81dd892e5f76 · 2020-03-29T21:15:00.000+08:00
etrex day3
diff --git a/Etrex/Day3 - CSS variable/index.html b/Etrex/Day3 - CSS variable/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    :root {
+      --size: 0vw;
+    }
+
+    h1 {
+      margin: 0;
+      font-size: var(--size);
+    }
+
+    input {
+      width: 90%;
+    }
+  </style>
+</head>
+<body>
+  請拖曳：<input type="range" min="0" max="32" value="0" step="0.01"></input>
+  <h1>怕爆！</h1>
+  <script>
+    let input = document.querySelector("input")
+    input.addEventListener("input", function(){
+      let size = this.value
+      document.documentElement.style.setProperty("--size",`${size}vw`);
+    })
+  </script>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -12,6 +12,7 @@
         width: 100%;
         border: 1px solid #004085;
         border-radius: 5px;
+        margin-top: 10px;
       }
       .hover-border:after {
         content: "";
@@ -34,6 +35,7 @@
       <div class="col-md-8">
         <h1>慶祝蛋炒飯成功 :D</h1>
         <div class="content-border d-flex justify-content-center">
+
           <nav class="nav flex-column my-4">
             <a class="nav-link hover-border" href="./Etrex/Day2 - clock/index.html">卡米 der 時鐘</a>
             <a class="nav-link hover-border" href="./Liz/Day2 - clock/index.html">栗子 der 時鐘</a>
@@ -42,6 +44,11 @@ <h1>慶祝蛋炒飯成功 :D</h1>
             <a class="nav-link hover-border" href="./cindy/Day2-clock/index.html">Cindy der 時鐘</a>
           </nav>
         </div>
+        <div class="content-border d-flex justify-content-center">
+          <nav class="nav flex-column my-4">
+            <a class="nav-link hover-border" href="./Etrex/Day3 - CSS variable/index.html">卡米 der 怕爆</a>
+          </nav>
+        </div>
       </div>
     </div>
   </div>
