index.html

<!Doctype html>
<html lang = "en">
<head>
  <meta charset="utf-8" />
  <title>Playing with CSS Variables and JS</title>
  <link rel = "stylesheet" href ="style.css" />
  <link rel = "icon" type="image/png" size ="" href="" />
</head>
  <body>
    <h2>UPDATE CSS VARIABLES with<span class ='h1'> JS</span></h2>
    <div class ="controls">
    <label for ="spacing">SPACING:</label>
    <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px" />
    <label for ="blur">BLUR:</label>
    <input type = "range" name ="blur" min="0" max= "25" value="10" data-sizing ="px" />
    <label for = "base">BASE COLOR:</label>
    <input type="color" name= "base" value = "#03A9F4" />
    </div>
<script type="text/javascript" src="playingwithcss.js"> </script>
  <img src="Photo.jpg" />
  </body>

</html>