HTML/CSS - qna Online Editor and JavaScript Compiler

html

<!-- Created by Somil Khandelwal -->
<!DOCTYPE html>
<html>
    <head>
        <title>First website</title>
          <meta charset ="utf-8"></meta>
        <meta name ="viewport" content="width=device-width,initial-scale=1"></meta>
    </head>
    <header>
       <div class="head"><h1>About Web Development</h1></div>
    </header>
     <nav>
           <div class="link">
               <a href ="#">HOME</a>
               <a href ="#">ABOUT</a>
               <a href ="#">CONTACT</a>
               <a href ="https://www.sololearn.com/Profile/14367246/?ref=app">OTHER</a>
           </div>
       </nav>
       <div class="img">
           <img src="http://www.sololearn.com/uploads/better-code.jpg",alt="img" width="100%">
       </div>
       <br />
       
       <hr width="80%" height="50%">
       
       <article>

css

/* Created by Somil Khandelwal */
.head h1{
    padding:20px;
    border:20px ;
    border-style:outset;
    display:block;
    border-radius:10%;
    border-right-color:#FF1493;
    border-bottom-color:#FF1493;
    border-top-color:#3CB371;
    border-left-color:#00FFFF;
    margin-top:20px;
    text-shadow:0px 5px 3px #A9A9A9;
    font-family:"Times New Roman",Times,serif;
}
.link a{
    display:inline-block ;
    padding:10px;
    border:10px;
    color:#556B2F;
    overflow:hidden;
    text-decoration:none;
    text-shadow:1px 1px 1px #A9A9A9;
    font-family:"Times New Roman",Times,serif;
    
    

BROWSER

Console