profile.html

<!DOCTYPE <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>profile</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="css/sty.css" />
</head>
<body id="profile_background">
<div id="container">
    <div class="profContainer">
    <div id="lives" class="live">
        <img src="images/heart.png" height="100vw">
        <h2 id="livesCount"></h2>
    </div>

    <div class="score">
        <img src="images/png-score--1519.png" height="100vw">
        <h2 id="score"></h2>
    </div>
    <div class="level">
        <img src="images/iconfinderLevelBall1703904.png" height="100vw">
        <h2 id="level"></h2>
    </div>

    <div class="charchter">
        <img src="images/char.png" height="100vw">
        <h2 id="character"></h2>
    </div>
    </div>


    <div class="badges">
    <div class="badgesTitle">
        <h1>Badges</h1>
    </div>
        <div id="badge1" class="badge"><img src="images/bag1.png" alt=""></div>
        <div id="badge2" class="badge"><img src="images/bag2.png" alt=""></div>
        <div id="badge3" class="badge"><img src="images/bag3.png" alt=""></div>

    </div>
    <div class="backDiv">
        <a href="index.html" target="_self">
            <button class="backBtn">Back</button>
        </a>
    </div>
</div>

    <script src="js/profile.js"></script>
</body>
</html>