Assignment CSS Calc and CSS Var by 64070063 (Copy 13964)

Assignment CSS Calc and CSS Var by 64070063 (Copy ..

✨ PAPOPPORN THONGNARINTR

<html>
  <head>
    <title>Small Town Boy</title>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Cinzel&display=swap');
      @import url('https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@1,700&display=swap');
      @import url('https://fonts.googleapis.com/css2?family=Pattaya&display=swap');
      * {
      max-width: 700px;
      margin: auto;
      background:#777777;
      }
      div {
        border-radius: 5px;
      }
      
      #header {
        height: 40px;
        width: 100%;
        background-color: #9999CC;
        position: fixed;
        z-index: 1;
      }

#title {
        margin-left: 3%;
      }

#footer {
        height: 50px;
        width: 100%;
        background-color: #9999CC;
        clear: both;
        position: relative;
      }

.left {
        height: 1000px;
        width: 45px;
        background-color: #444444;
        float: left;
        position: fixed;
      }
      .right {
        height: 1500px;
        width: 45px;
        background-color: #444444;
        float: right;
        position: inherit;
      }
      .stuff {
        display: inline-block;
        margin-top: 6px;
        margin-left: 55px;
        width: 75%;
        height: 1000px;
      }
      .pic{
        width:105%;
        border-radius:15px;
        box-shadow:0px 5px 10px #0005;
        margin:1em 0 2em;
      }
      
      li{
        font-family: 'Cinzel', serif;
        --f:15pe;
        font-size:var(--f);
        color:white;
      }
      .head {
        font-size: 20px;
        font-family: 'Philosopher', sans-serif;
        color:white;
      }
      .h1 {
        font-size: 40px;
        font-family: 'Philosopher', sans-serif;
        color:white;
      }
      .h2 {
        font-size: 25px;
        font-family: 'Philosopher', sans-serif;
        color:white;
      }
      
      #name {
        font-family: Sacramento;
        float: right;
        margin-top: 10px;
        margin-right: 4%;
        font-family: 'Pattaya', sans-serif;
      }
      a {
        color: black;
        text-decoration: none;
      }

@media only screen and (max-width: 430px) {
        .left,
        .right {
          display: none;
        }
        .stuff {
          width: 100%;
          margin-left: 10px;
        }
      }
    </style>
  </head>
  <body>
  <div id="header"></div>
  <div class="left"></div>
  <div class="stuff">
    <br><br>
    <h1 class="h1">Small Town Boy</h1>
    <h2 class="h2">by Duncan Laurence</h2>
    <hr />
    <input type="range" min="1" max="3" step="1" onclick="li.style.setProperty(`--f`,sizeInput.value+`pe`)" id="sizeInput">
    <br>
    <p style="color:white" class="head">About the artise</p>
    <ul>
      <li style="color:white" >Duncan de Moor, known professionally as Duncan Laurence. He's a Dutch singer-songwriter
      </li>
      <li style="color:white" >He represented the Netherlands in the Eurovision Song Contest 2019 with his song "Arcade" and went on to win the competition, giving the Netherlands its first Eurovision win since 1975.
      </li>
      <li>Prior to Eurovision, Laurence was a semi-finalist in the fifth season of The Voice of Holland.</li>
    </ul>
    <p class="head">About this album</p>
    <ul>
      <li>Small Town Boy is the debut studio album by Duncan Laurence.</li>
      <li>It was released on 13 November 2020 by Spark Records.</li>
      <li>The album includes the singles "Arcade", his winning song from Eurovision 2019.</li>
      <li>A deluxe edition of the album was released on 21 May 2021, containing three additional tracks: "Stars", "Sad Old Me" and "I Got You".</li>
    </ul>
    <p class="head">Small Town Boy track listing</p>
    <ul>
      <li>Beautiful</li>
      <li>Yet</li>
      <li>Between Good and Goodbye</li>
      <li>Love You Like I Cloundn't Do</li>
      <li>Sleeping on the Phone</li>
      <li>Arcade</li>
      <li>Figure It Out</li>
      <li>Last Night</li>
      <li>Someone Else</li>
      <li>Love Don't Hate It</li>
      <li>Umbrella</li>
      <li>Feel Something (feat. Armin Van Buuren)</li>
      <li>Stars [Deluxe edition]</li>
      <li>Sad Old Me [Deluxe edition]</li>
      <li>I Got You [Deluxe edition]</li>
      <li>Arcade (feat. FLETCHER) [bonus track]</li>
      <li>Arcade (Sam Feldt remix) [bonus track]</li>
    </ul>
    <p class="head">Listen to "Small Town Boy" the whole album (links)</p>
    <ul>
      <a href="https://open.spotify.com/album/6e0aaabWyyiqxjSvbafGCd?si=myA684lmSB-RiI0kzkSE1w">
        <li>-Spotify-</li>
      </a>
      <a href="https://music.apple.com/th/album/small-town-boy-deluxe/1566066013?l=th">
        <li>-Apple Music-</li>
      </a>
      <img src="https://cdn.discordapp.com/attachments/902192338502295566/945250822793617408/IMG_0962.jpg" class="pic">
    </ul> 
  </div>
  <div class="right"></div>
  <div id="footer">
    </div>
  </body>
</html>