Assignment CSS Calc and CSS Var 64070015 พีเจ-จิราพันธ์

Assignment CSS Calc and CSS Var 64070015 พีเจ-จิรา..

✨ JIRAPHAN KWANRUK

<html>
  <head>
    <title> </title>
    <style>
      body {
        background: hsl(48, 28%, 86%);
        margin: 0;
        font-family: Kanit;
      }
      #main {
        padding: 0em;
        max-width: 900px;
        margin: auto;
        font-size: 1em;
        margin-bottom: 2em;
        background-color: white;
      }
      #maintext {
        padding: 1em;
        max-width: 900px;
        margin: auto;
        font-size: 1em;
        margin-bottom: 2em;
        background-color: white;
        line-height: 1.6;
      }

.articleimg {
        width: 100%;
        border: 3px solid black;
        box-shadow: 5px 10px;
      }

blockquote {
        margin: 1em;
        background: hsl(99, 13%, 80%);
        padding: 1em;
        font-size: 1.3em;
        border-left: 14px solid black;
        color: black;
        font-weight: bold;
      }

.topimg {
        width: 100%;
      }

.toolbar {
        padding: 1em;
        max-width: 900px;
        font-size: 1em;
        margin-bottom: -3em;
        background-color: white;
        text-align: right;
      }
      span {
        position: relative;
        top: -4;
      }
      #btn1 {
        background-color: hsl(48, 28%, 86%);
        width: 30px;
      }
      #btn2 {
        background-color: hsl(99, 13%, 80%);
        width: 30px;
      }
      #btn3 {
        background-color: hsl(0, 0%, 50%);
        width: 30px;
      }
    </style>
  </head>
  <body>
    <br />
    <div id="main">
      <img
        class="topimg"
        src="https://www.itl.cat/pngfile/big/292-2921227_got-wallpaper-stark.jpg"
      />
      <div class="toolbar">
        <span>Background Color </span>
        <input
          id="btn1"
          type="button"
          onclick="chBackcolor('hsl(48, 28%, 86%)');"
        />
        <input
          id="btn2"
          type="button"
          onclick="chBackcolor('hsl(99, 13%, 80%)');"
        />
        <input
          id="btn3"
          type="button"
          onclick="chBackcolor('hsl(0, 0%, 50%)');"
        />
        <br />
        <span>FontSize </span>
        <input
          type="range"
          min="10"
          max="40"
          step="1"
          id="slider"
          onchange="changeSizeBySlider()"
        />
        <span>Padding </span>
        <input
          type="range"
          min="0"
          max="50"
          step="1"
          id="slider2"
          onchange="changePadBySlider()"
        />
        <span>Space Between Text </span>
        <input
          type="range"
          min="1"
          max="4"
          step="1"
          id="slider3"
          onchange="changelhBySlider()"
        />
      </div>
      <div id="maintext">
        <h1>House Stark</h1>
        <div>
          <p>
            <b> &emsp;&emsp;House Stark of Winterfell</b>
            is a Great House of Westeros and the royal house of the Kingdom of
            the North. They rule over the vast region known as the North from
            their seat in Winterfell. It is one of the oldest lines of Westerosi
            nobility by far, claiming a line of descent stretching back over
            eight thousand years. Before the Targaryen conquest, as well as
            during the War of the Five Kings and early on in Daenerys
            Targaryen's war for Westeros, the leaders of House Stark ruled over
            the region as the Kings in the North.
          </p>
          <p>
            &emsp;&emsp;Their rule in the North seemingly ended after the events
            of the Red Wedding when House Frey and House Bolton betrayed House
            Stark after forming a secret alliance with House Lannister, during
            which Roose Bolton murdered King Robb Stark. Both the North and
            Winterfell were taken over by House Bolton. However, the Boltons'
            hold was jeopardized when Sansa Stark escaped their clutches after
            learning her brothers Bran and Rickon Stark were still alive and
            reunited with her half-brother, Jon Snow, at Castle Black. Sansa and
            Jon marched on the Boltons to save their younger brother Rickon, who
            was later murdered by Ramsay Bolton, and retake Winterfell. House
            Stark was restored to their former stature after the Battle of the
            Bastards. The Stark victory led to House Stark's return to royal
            status in the North with their bannermen declaring Jon as the King
            in the North. He later abdicated his title as king in order to gain
            the full support of Daenerys Targaryen in the Great War, becoming
            the Warden of the North. Following the Battle of King's Landing,
            Bran Stark was chosen as the new king of the Six Kingdoms, allowing
            the North to secede as an independent kingdom under Sansa
          </p>

<img
            class="articleimg"
            src="https://c.tenor.com/gAC9QAmcnZUAAAAC/the-winds-have-arrived-jon-snow.gif"
          />
          <p>
            &emsp;&emsp;House Stark's sigil is a grey direwolf on a white
            background, over green. They are one of the few noble Houses whose
            family motto is not a boast or threat. Instead, the House Stark
            family motto is a warning, one that, no matter the circumstances,
            will always be relevant: "Winter Is Coming."
          </p>

<blockquote>
            "The Winds Have Arrived...Winter is coming!" -Jon Snow
          </blockquote>
        </div>
      </div>
    </div>
    <script>
      var cont = document.getElementById("maintext");
      function changeSizeByBtn(size) {
        cont.style.fontSize = size;
      }
      function changeSizeBySlider() {
        var slider = document.getElementById("slider");
        cont.style.fontSize = slider.value;
      }
      var cont = document.getElementById("maintext");
      function changeSizeByBtn(size) {
        cont.style.padding = size;
      }
      function changePadBySlider() {
        var slider = document.getElementById("slider2");
        cont.style.padding = slider.value;
      }
      var cont = document.getElementById("maintext");
      function changeSizeByBtn(size) {
        cont.style.lineHeight = size;
      }
      function changelhBySlider() {
        var slider = document.getElementById("slider3");
        cont.style.lineHeight = slider.value;
      }
      function chBackcolor(color) {
        document.body.style.background = color;
      }
    </script>
  </body>
</html>