Why are the HTML and Body tags marked in red in my editor?-CodePudding

I've tried looking for errors in my code, but failed to find any, and yet, the HTML and Body tags are highlighted in my editor. Any idea why? It's a short piece of code, but perhaps my eyes can't see something. I'm posting my code below, if someone would want to check for me. Thanks! https://pastebin.com/bmdhSd2b

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <link
      rel="icon"
      href="Link"
    />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
 
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Encode Sans&display=swap");
        body, html {
            height: 100%;
            margin: 0;
        }
 
        body {
          font-family: "Encode Sans";
          color: #ffffff;
          font-size: 18px;
          padding: 1em;
          line-height: 1.4;
          text-align: center;
          margin-top: 5vw;
          background-color: #25272a;
          margin: 0;
        }
 
        a {
          color: #0a0a23;
          text-decoration: underline;
        }
 
        a:hover {
          color: #f5f6f7;
          background-color: #1b1b32;
          cursor: pointer;
          text-decoration: none;
        }
 
        a:active {
          box-shadow: none;
          top: 5px;
        }
 
      h1 {
        text-align: center;
      }
      .photos {
        width: 50%;
        margin: 0 auto;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        align-items: center;
        justify-content: center;
      }
 
      figcaption {
        text-align: center;
      }
 
      footer {
        font-size: 0.75em;
        margin-top: 20px;
      }
 
      @media (max-width: 650px) {
        .photos {
          flex-direction: column;
        }
      }
      .logot {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 80px;
  transform: translate(-50%, -50%);
  color: white;
  text-shadow: 2px 2px #000000
      }
      .main-title {
       font-size: 60px;
       color: white;
       text-shadow: 1px 1px 1px black
       position: fixed;
       top: 90%;
       left: 50%;
      }
      .bgbl {
          background-color: #4d4d4d;
          border-radius:25px;
          color: #b3cccc;
      }
      .typewrite {
          color: #b3cccc;
      }
      ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #2f3236;
  border-radius: 15px;
  z-index: 10000;
  position: fixed;
  top: 5px;
  width: 100%;
 
}
 
li {
  float: left;
}
 
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
li a:hover:not(.active) {
  background-color: #111;
}
 
.active {
  background-color: #3eaf7c;
}
      .buttono {
  background-color: #3eaf7c;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}
 
.buttono1 {
  background-color: #25272a;
  color: white; 
  border: 2px solid #3eaf7c;
  border-radius: 15px;
}
 
.buttono1:hover {
  background-color: #3eaf7c;
  color: white;
}
      .bg {
  background-image: url("Link");
  height:40%; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 25px;
}
    </style>
 
  </head>
 
  <body>
  <ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  </ul>
   <div class="bg"></div>
   <h1 class="main-title">Title</h1>
   <a href="Link" class="buttono buttono1">Join</a>
  </body>
</html>

CodePudding user response：

The problem is this line (missing semicolon)

      text-shadow: 1px 1px 1px black position: fixed;

Place semicolon after declaring the text-shadow property.

CodePudding user response：

Maybe your editor doesn't like it that you put the closing /> on a new line ? Or, your editor is very old and doesn't like the <tag/> form. Another reason might be that you forgot a semicolon after one of the CSS statements. Try this tidied code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Title</title>
  <link rel="icon" href="Link"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

  <style>
    @import url("https://fonts.googleapis.com/css2?family=Encode Sans&display=swap");
    body,
    html {
      height: 100%;
      margin: 0;
    }
    
    body {
      font-family: "Encode Sans";
      color: #ffffff;
      font-size: 18px;
      padding: 1em;
      line-height: 1.4;
      text-align: center;
      margin-top: 5vw;
      background-color: #25272a;
      margin: 0;
    }
    
    a {
      color: #0a0a23;
      text-decoration: underline;
    }
    
    a:hover {
      color: #f5f6f7;
      background-color: #1b1b32;
      cursor: pointer;
      text-decoration: none;
    }
    
    a:active {
      box-shadow: none;
      top: 5px;
    }
    
    h1 {
      text-align: center;
    }
    
    .photos {
      width: 50%;
      margin: 0 auto;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    figcaption {
      text-align: center;
    }
    
    footer {
      font-size: 0.75em;
      margin-top: 20px;
    }
    
    @media (max-width: 650px) {
      .photos {
        flex-direction: column;
      }
    }
    
    .logot {
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 80px;
      transform: translate(-50%, -50%);
      color: white;
      text-shadow: 2px 2px #000000
    }
    
    .main-title {
      font-size: 60px;
      color: white;
      text-shadow: 1px 1px 1px black;
      position: fixed;
      top: 90%;
      left: 50%;
    }
    
    .bgbl {
      background-color: #4d4d4d;
      border-radius: 25px;
      color: #b3cccc;
    }
    
    .typewrite {
      color: #b3cccc;
    }
    
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #2f3236;
      border-radius: 15px;
      z-index: 10000;
      position: fixed;
      top: 5px;
      width: 100%;
    }
    
    li {
      float: left;
    }
    
    li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    
    li a:hover:not(.active) {
      background-color: #111;
    }
    
    .active {
      background-color: #3eaf7c;
    }
    
    .buttono {
      background-color: #3eaf7c;
      border: none;
      color: white;
      padding: 16px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      transition-duration: 0.4s;
      cursor: pointer;
    }
    
    .buttono1 {
      background-color: #25272a;
      color: white;
      border: 2px solid #3eaf7c;
      border-radius: 15px;
    }
    
    .buttono1:hover {
      background-color: #3eaf7c;
      color: white;
    }
    
    .bg {
      background-image: url("Link");
      height: 40%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      border-radius: 25px;
    }
  </style>

</head>

<body>
  <ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>
  <div class="bg"></div>
  <h1 class="main-title">Title</h1>
  <a href="Link" class="buttono buttono1">Join</a>
</body>

</html>