HTML/CSS - custom tag Online Editor and JavaScript Compiler

html

<!-- Created by Faraz Haghbayan -->
<!DOCTYPE html>
<html>
    <head>
        <title>Great Achaemenid</title>
    </head>
    <body>
           <section id="about-us">
    <h2>About Us</h2>
    <b>This website is dedicated to providing information about Achaemenid empire, one of the greatest empires of all time.</b>
</section>    
     
        
       <h1 class="title">The <red>Achaemenid Empire</red></h1>
            <button><a href="#Geographical">Geographical</a></button><br>
                <button><a href="#Cyrus the great">Cyrus the great</a></button><br>
                   <button><a href="#Achaemenids kings">Achaemenids kings</a></button><br>
                     <button><a href="#The death of Cyrus the great">Cyrus the great's death</a></button><br>
                   
                 <button><a href="#Conquests">Conquests of Achaemenid empire</a></button>
                 <button><a href="#Rate us">Rate Our Website (Its completely free)</a></button>
                
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/Standard_of_Cyrus_the_Great.svg/200px-Standard_of_Cyrus_the_Great.svg.png"Width="70%"height="50%">
        <b>Achaemenid empire was the ancient Iranian empire founded by Cyrus the Great of the Achaemenid dynasty in 550 BC, also known as the First Persian Empire.</b><br><br>
          <h2 id="Geographical">Geographical</h2> 
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Achaemenid_Empire_500_BCE.jpg/500px-Achaemenid_Empire_500_BCE.jpg"Width="70%"height="50%"> 
        <b>Achaemenid empire(هخامنشیان)was Based in Western Asia and it was the largest empire the world had ever seen at its time, spanning a total of 5.5 million square kilometres (2.1 million square miles) from the Balkans and Egypt in the west to Central Asia and the Indus Valley in the east.</b><br><br>

css

/* Created by Faraz Haghbayan */
body {
  background-color: lightblue;
}
}
button {
    display: inline-block;
    font-size: 1em;
    padding: 10px 20px;
    margin: 20px 2px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    color:  #fff;
    background-color:  white;
    border: none;
    border-radius: 15px;
    box-shadow: 0 9px  #999;
}
button:hover {background-color:  #3e8e41}
button:active {
  background-color:  #3e8e41;

BROWSER

Console