puzzle.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>PUZZLE GAMES</title>
</head>
<body>
    <script src="puzzle.js"></script>


<link rel="stylesheet" href="puzzle.css">
<div id="starter">BEST COLLECTION OF PUZZLE GAMES
</div>

<button id="home" onclick="logoutofpuzzlepage()">HOME</button>
<BUTTON ID="logout" onclick="logout()">LOG OUT</BUTTON>
<div class="container">

<div id="puz1">
<a href="https://play.famobi.com/mahjong-3d" target="_blank">
    <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/Mahjong3dTeaser.jpg?v=0.2-e86af1e2"border=0 center=align height=350 width=320>
<p id="pz1">MAHJONG-3D</p>
</a>
</div>

<div id="puz2">
    <a href="" target="_blank">
    <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/JewelsMania_Teaser.jpg?v=0.2-e86af1e2" border=0 center=align height=350 width=320>
<p id="pz2">JEWELS MANIA</p>
    </a>
</div>


<DIV ID="puz3">
<a href="https://play.famobi.com/maze" tager="_blank">
<img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/MazeTeaser.jpg"border=0 center=align height=350 width=320>
<p id="pz3">MAZE</p>
</a>
</DIV>
</div>






<style>
body{
background-image: url("https://tse1.mm.bing.net/th?id=OIP.UTEu_7YuOm2_F67Cyc5XZQHaE8&pid=Api&P=0&w=253&h=170");
background-size:cover;
background-blend-mode: hard-light;
}

</style>





</body>
</html>