HTML/CSS - My Blog | UI Design Online Editor and JavaScript Compiler

html

<!-- 
    Author: Black
    Topic: My Blog | UI Design
    Date: May 1st 2020
      
      -  Icons designed in Affinity designer
      -  Illustration from undraw.co
    
    Thank you all ! I never thought my second code could cross 100+ likes
 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Blog | UI Design</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="loader fc">
      <div>
        <svg x="0px" y="0px" width="24px" height="30px">
          <rect x="0" y="13" width="4" height="5" fill="#FFBF00">
            <animate
              attributeName="height"

css

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-tap-highlight-color:  rgba(0, 0, 0, 0);
  outline: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  scroll-behavior: smooth;
}
body, html {
  overflow: hidden;
  font-size: clamp(16px, 2.5vw, 20px);
}
.heading {
  font-size: 1.35rem;
  font-weight: bold;
}
main {
  -webkit-transition: -webkit-transform 300ms ease-in-out;
  transition: -webkit-transform 300ms ease-in-out;
  transition: transform 300ms ease-in-out;

function $(tag) {
  return document.querySelector(tag);
}
function openPage(i) {
  $('.sections').style.transform = `translateX(-${i * 100}vw)`;
}
function openNav() {
  $('main').classList.add('navOpen');
  $('.nav-container').classList.add('navOpen');
  $('.overlay').style.opacity = 1;
  $('.overlay').style.pointerEvents = 'auto';
}
function closeNav() {
  $('main').classList.remove('navOpen');
  $('.nav-container').classList.remove('navOpen');
  $('.overlay').style.opacity = 0;
  $('.overlay').style.pointerEvents = 'none';
}
onload = function() {
  $('.loader').style.opacity = 0;
};

BROWSER

Console