2nd page.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
    font-family: Arial;
    color: white;
}
    
a:hover{
    color:#fefefe;
    opacity:0.8;
}

.split {
    height: 100%;
    width: 50%;
    position: fixed;
    z-index: 1;
    top: 0;
    overflow-x: hidden;
    padding-top: 20px;
}

.left {
    left: 0;
    background-color: #111;
}

.right {
    right: 0;
    background-color: red;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.centered img {
    width: 350px;
    border-radius: 50%;
}
</style>
</head>
<body>
<div class="split left">
    <div class="centered">
        <a href="foodtest.php"><img src="images/maxresdefault.jpg" alt="Food"></a>
    <h1>FOOD</h1>
    </div>
</div>
<div class="split right">
    <div class="centered">
        <a href="juice.php"><img src="images/jjjj.jpg" alt="Juice" ></a>
    <h1>JUICE</h1>
    </div>
</div>
</body>
</html> 