action.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ACTION GAMES</title>
</head>
<body>

    <div id="action">THE MOST POPULAR ACTION GAMES IN 2021</div>
    <div id="act"></div>

    <button id="home" onclick="logoutofactionpage()">HOME</button>
    <button id="logout" onclick="logout()">LOG OUT</button>
    <link rel="stylesheet" href="action.css">
    
    
    
    
    
    <DIV class="container">

<div class="action1">
<a href="https://www.gamesgames.com/game/mexico-rex" target="_blank">
    <img width=320 height=350 border="0" align="center" src="https://tse3.mm.bing.net/th?id=OIP.Aqw3pVC4RkgPz902J4_7TQHaEK&pid=Api&P=0&w=330&h=186">

<p id="mexico-rex">MEXICO-REX</p>
</a></div>





<div class="action2">
<a href="https://poki.com/en/g/ninja-clash-heroes" target="_blank">
    <img width=320 height=350 border="0" align="center" src="https://tse4.mm.bing.net/th?id=OIP.qjuGYSuO8G27yLz-Cb04KAHaEE&pid=Api&P=0&w=299&h=165">
 <p id="ninja">NINJA CLASH</p>
</a>
</div>






<div class="action3">
<a href="https://www.crazygames.com/game/amazing-strange-rope-police-vice-spider" target="_blank">
<img width="320" height="350" border="0"  align="center" src="https://tse3.mm.bing.net/th?id=OIP._5LIPvo3YrSnZTGfLioYJwHaHa&pid=Api&P=0&w=300&h=300">
<p id="rope-police">SPIDERMAN</p>
</a>
</div>
</DIV>
<style>
body{

    background-image:url("https://tse2.mm.bing.net/th?id=OIP.Y_WomXu2crZDafufJoxa6wHaFj&pid=Api&P=0&w=241&h=181");
    position: relative;
    background-size: cover;
background-blend-mode: darken;
}

</style>
<script src="action.js"></script>



</body>
</html>