<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.15.0/css/mdb.min.css" rel="stylesheet">
<!-- add icon link -->
<link rel="icon" href="./img/icon1.icon" type="image/x-icon">
<link rel="stylesheet" href="pool.css">
<link rel="stylesheet" href="font.css">
<!-- scrollReveal property -->
<script src="https://unpkg.com/scrollreveal@4"></script>
<script>
window.sr = ScrollReveal({
distance: '50px', //for animation of page scroll
duration: 1000,
easing: 'ease',
mobile: true,
reset: true,
viewFactor: 0.4,
});
</script>
<title>Pool2 | PLAY4LUX</title>
</head>
<style>
.container-fluid {
width: 78%;
margin: 0 auto;
}
.poolBackground {
background-image: url("image/r/Group\ <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a89ce89ad086d8c6cf">[email protected]</a>");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
max-width: 565px;
width: 100%;
min-height: 288px;
position: relative;
}
.poolImageContainer {
background-image: url(imgi1.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
max-width: 204px;
width: 100%;
min-height: 264px;
/*position: absolute;*/
top: 11px;
left: 30px;
box-shadow: 3px 5px 18px 0px #08061a;
border-width: 4px;
border-style: solid;
border-image: linear-gradient(45deg, #8e602c, #b98b43, #f8ed8d, #b98b43, #8e602c) 1 1 1 1;
}
.poolRightContentContainer {
/*position: absolute;*/
top: 38px;
padding-left: 28px;
width: 80%;
}
.productName {
font-size: 20px;
background: linear-gradient(45deg, #8e602c, #f8ed8d);
background: -webkit-linear-gradient(90deg, #8e602c, #f8ed8d, #8e602c);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(2px 3px 3px #000);
font-weight: 900;
margin-bottom: .9rem;
}
.title {
display: inline-block;
font-size: 17px;
font-weight: 600;
background: -webkit-linear-gradient(90deg, #fff, #fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 600;
}
.data {
font-size: 19px;
background: -webkit-linear-gradient(90deg, #fff, #fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 600;
}
.focused {
font-size: 20px;
background: -webkit-linear-gradient(90deg, #f8ed8d, #f8ed8d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 900;
}
.drawDate, .winningOdd, .actualPrice, .tokenPrice {
background: -webkit-linear-gradient(90deg, #fff, #fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(2px 4px 3px #000);
font-weight: 600;
margin-bottom: .6rem;
}...
// The code continues with the rest of the unchanged content.
Few amendments.. but still i suggest to re-write the or i can write for you from scratch if u want.. cheers bro... Happy to Help...