Docs: minor improvements

css_transition_underline/base.css

@@ -43,11 +43,11 @@ html {
   content: '';
   position: absolute;
   width: 100%;
-  transform: scaleX(0);
   height: 2px;
   bottom: 0;
   left: 0;
   background-color: var(--heading-color);
+  transform: scaleX(0);
   transform-origin: bottom right;
   transition: transform 0.25s ease-out;
 }

css_transitions/base.css

@@ -56,7 +56,6 @@ code {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin: 5px 0;
   float: left;
 }
 
@@ -74,9 +73,40 @@ code {
   margin-left: 50px;
 }
 
+.trans-example-2 {
+  width: 400px;
+  height: 150px;
+  position: relative;
+}
+
+.trans-example-2__box {
+  width: 100px;
+  height: 100px;
+  background: rgb(142,87,250);
+  border-radius: 3px;
+  color: #fff;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition-property: transform top left background;
+  transition-duration: .5s;
+  transition-timing-function: ease-out;
+}
+
+.trans-example-2:hover .trans-example-2__box {
+  transform: rotate(1turn) scale(.45);
+  top: 75px;
+  left: 350px;
+  background: rgb(252,102,33);
+}
+
 .color-box {
   background: rgb(242,244,248);
-  transition: background .5s;
+  transition: background 1s;
 }
 
 .color-box:hover {

css_transitions/index.html

@@ -47,12 +47,16 @@ <h2 class="primary-heading">properties</h2>
         </ul>
         See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function" target="_blank">MDN for descriptions</a>.
       </li>
-
     </ul>
 
 
-    <h2 class="primary-heading">css transition + variable + js</h2>
+    <h2 class="primary-heading">css transition + transforms</h2>
+    <div class="trans-example-2">
+      <div class="trans-example-2__box">hello</div>
+    </div>
 
+
+    <h2 class="primary-heading">css transition + variable + js</h2>
     <div class="box color-box">
       <div>Hover</div>
     </div>
@@ -69,8 +73,5 @@ <h2 class="primary-heading">css transition + variable + js</h2>
 
   </main>
 
-  <footer>
-  </footer>
-
 </body>
 </html>

css_transitions/script.js

@@ -1,22 +1,24 @@
 function randomBg() {
+
   // Generate a random number between 0 and given number (inclusive)
   function random(n) {
     return Math.floor(Math.random() * (n + 1));
   }
+
   // Generate a random rgb color
   function randomRGB() {
-    let rgbColor = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+    let rgbColor = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
     return rgbColor;
   }
+
   // Set an elements --random-bg property to a random color
-  function changeBg() {
-    let els = document.querySelectorAll('.color-box');
-    for (el of els) {
+  function changeBg(selector) {
+    let els = document.querySelectorAll(selector);
+    for (let el of els) {
       el.style.setProperty('--random-bg', randomRGB());
     }
-
   }
-  changeBg();
+  changeBg('.color-box');
 }
 
 randomBg();