Test

by mamounothman

HTML

<div class="content-container">
					<div class="sites-container">
				<div class="site-block">
					<div class="site-logo">
						<a href="https://roobet.com/?ref=Primatcodes&amp;utm_source=vgorefs&amp;utm_medium=display&amp;utm_campaign=slots"
							target="_blank" rel="noreferrer" title="Roobet.com"><img src="img/sites/csgoempire-logo.png"
								style="width: 110%; height: auto;" alt="Roobet" /></a>
					</div>
					<div class="bonus">
						<p>Test</p>
					</div>
					<br>
					<div class="deposit-methods">
						<img src="img/deposit-methods/btc-deposit.png" alt="G2A" />
					</div>
					<div class="code">
						<a>tes</a>
						<img src="img/copy.png" alt="CSGO" />
					</div>
					<div class="site-url">
						<a href="https://daddyskins.com/promo-code/Primatcodes">Claim
						</a>
					</div>
				</div>
				<!--2 Site-->
				<div class="site-block">
					<div class="site-logo">
						<a href="https://roobet.com/?ref=vgorefs&amp;utm_source=vgorefs&amp;utm_medium=display&amp;utm_campaign=slots"
							target="_blank" rel="noreferrer" title="Roobet.com"><img src="img/sites/csgoempire-logo.png"
								style="width: 110%; height: auto;" alt="Roobet" /></a>
					</div>
					<div class="bonus">
						<p>Test!</p>
					</div>
					<br>
					<div class="deposit-methods">
						<img src="img/deposit-methods/btc-deposit.png" alt="G2A" />
					</div>
					<div class="code">
						<a>Tes</a>
						<img src="img/copy.png" alt="CSGO" />
					</div>
					<div class="site-url">
						<a href="https://daddyskins.com/promo-code/vgorefs">Claim
						</a>
					</div>
				</div>

CSS

body {
	display: block;
	font-family: "Poppins", sans-serif;
}

.navbar {
	padding: 10px 10px 10px 0px;
	background-color: #191d29;
	box-shadow: 0 2px #23253b;
}
.navbar-brand {
	font-size: 22px;
	color: white !important;
}
.navbar .navbar-nav li a {
	font-size: 16px;
	color: white;
}

.navbar-header img {
	width: 30%;
	height: auto;
	margin: 0;
	padding: 0;
}
.main-navigation {
	box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.2);
}

.navbar-header {
	width: 50%;
}

.top-advertise-container {
	padding: 0;
	font-size: 0;
	margin: 0;
}
.right-advertise {
	width: 20%;
	height: fit-content;
	display: inline-block;
	padding-left: 40px;
}
.left-advertise {
	width: 10%;
	height: fit-content;
	display: inline-block;
	padding-left: 1130px;
}
.left-advertise img {
	width: 170%;
	height: auto;
	margin: 0;
	padding: 0;
}

.right-advertise img {
	width: 95%;
	height: auto;
	margin: 0;
	padding: 0;
}

.Header {
	padding-top: 60px;
	padding-right: 30px;
	padding-bottom: 30px;
	padding-left: 730px;
}

.Header img {
	position: absolute;
	left: 19.8%;

	margin-top: -25px;
	margin-left: -25px;
}
.Header a {
	text-decoration: none;
	color: #8389a0;
	font-size: 23px;
	font-weight: 650;
	text-transform: uppercase;
	text-align: center;
	margin: 0 auto;
}

.main-container,
.site-block,
.sites-container,
body {
	background-color: #1c202e;
}
.containers {
	width: 89%;
	margin: 0 auto;
}
.main-container {
	width: 85%;
	margin: 0 auto;
}
.content-container {
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
}
.sites-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.site-block {
	position: relative;
	width: 18%;
	height: 345px;
	background-color: #23253b;
	margin: 8px;
	border-radius: 12px;
	top: 0;
	transition: 0.5s;
}
.site-block:hover {
	transform: scale(1.06);
}

.site-logo {
	width: 90%;
	height: 30%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bonus {
	display: flex;
	align-items: center;
	justify-content:...

JavaScript

const siteBox = document.querySelectorAll(".site-block");
const siteLogo = document.querySelectorAll(".site-logo");
const bonus = document.querySelectorAll(".bonus");
const code = document.querySelectorAll(".code");
const depositmethods = document.querySelectorAll(".deposit-methods");
const siteurl = document.querySelectorAll(".site-url");

siteBox.forEach(function (element) {
	element.addEventListener("mouseenter", function (event) {
		siteBox.forEach((box) => {
			if (event.target !== box) {
				box.style.opacity = 0.2;
			}
		});
		event.target.opacity = 1;
	});

	element.addEventListener("mouseleave", function (event) {
		siteBox.forEach((otherBox) => {
			otherBox.style.opacity = 1;
		});
	});
});