HTML/CSS - BLUE TO PURPLE GRADIENT PROFILE Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width initial-scale=1.0" >
        <meta http-equiv="X-UA-Compatible" content= "IE-edge">
        <meta name="author" content="ANONYMOUS CODER1">
        <title>Profile Page</title>
    </head>
    <body>
        <header>
          <h1>ANONYMOUS CODER 1 </h1>
          <img src="https://blob.sololearn.com/avatars/d0fe5ee8-50c6-4949-9724-32406ccafa9e.jpg" height=100px width=100px/>
        </header><hr>
        <main>
        <pre>  
         <h2><pre id="pre1">
0 Followers    3 Following    ⭐️1139 XP    2 Certificate<br><br><br></pre></h2>
          <pre id="pre2"><h2>STREAK</h2><hr>
        <ol>
<li class="active">S</li>            <li class="active">M</li>            <li class="active">T</li>            <li class="active">W</li>            <li class="deactive">T</li>            <li class="deactive">F</li>         <li class="deactive">S</li>
        </ol> 
           </pre> 
           <pre id="pre3">
               <h3>STREAK : 11 DAYS</h3><hr><h3>CURRENT STREAK : 19 DAYS</h3>
           </pre> 
           </pre> 
        </main><hr id=hr3>

css

body {
    background:linear-gradient(to top, #090a57, #1c022e);
    background-repeat:no-repeat;
    background-attachment:fixed;
    text-align:center;
    font-family:cursive;
    color: #ff7300;
}
img{
    border-radius:10000px;
}
li{
    display:inline-block ;
}
hr{
    width:500px;
}
pre{
    font-family:cursive;
}
#pre2{
    border:solid;
    border-radius:50px;
    border-color: white;
}
.active{
    color: #34f20f;
}

BROWSER

Console