<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Server NGO Gaming - FULL500 Under Maintenance</title>
<meta name="description" content="Sorry, We are currently performing system maintenance for website full500 by link horizonbarcelona.com." /
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Canonical URL -->
<link rel="canonical" href="https://horizonbarcelona.com/" />
<link rel="alternate" media="only screen and (max-width: 1500px)" href="https://horizonbarcelona.com/">
<link rel="shortcut icon" href="https://phoneoye.com/FULL500/IMG/FAVICONFULL.png" sizes="16x16">
<meta name="google-site-verification" content="lSN7_AQ4DCmFxC7kPJKtvYl1npTVFcbhpHiPbmk89zo" />
<style>
body {
margin: 0;
padding: 0;
background-color: #000;
color: #fff;
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
flex-direction: column;
}
.logo img {
width: 120px;
margin-bottom: 15px;
animation: fadeIn 1.2s ease-in-out;
}
/* Gear Container */
.gear-container {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-bottom: 15px;
}
/* Gear 1 */
.gear1 {
font-size: 50px;
color: #ff7b00;
animation: spin 3s linear infinite;
}
/* Gear 2 */
.gear2 {
font-size: 35px;
color: #ffb84d;
animation: spin-reverse 3s linear infinite;
}
/* Animations */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes spin-reverse {
from { transform: rotate(360deg); }
to { transform: rotate(0deg); }
}
h1 {
font-size: 26px;
font-weight: 700;
color: #ff7b00;
margin-bottom: 10px;
}
p {
font-size: 16px;
color: #ccc;
margin-bottom: 15px;
}
.last-update {
font-size: 14px;
color: #888;
margin-bottom: 20px;
}
/* Progress Bar */
.progress-container {
width: 300px;
height: 14px;
background-color: #222;
border-radius: 8px;
overflow: hidden;
margin-bottom: 30px;
box-shadow: 0 0 10px rgba(255,123,0,0.3);
}
.progress-bar {
width: 0%;
height: 100%;
background: linear-gradient(90deg, #ff7b00, #ffb84d);
animation: load 4s infinite;
}
@keyframes load {
0% { width: 0%; }
50% { width: 100%; }
100% { width: 0%; }
}
/* Social Icons */
.social {
display: flex;
justify-content: center;
gap: 15px;
}
.social-icon {
font-size: 22px;
color: #ff7b00;
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
border-radius: 50%;
background-color: rgba(255, 123, 0, 0.15);
}
.social-icon:hover {
transform: scale(1.2);
box-shadow: 0 0 15px #ff7b00;
color: #fff;
}
.social-icon.twitter:hover { background-color: #1da1f2; }
.social-icon.facebook:hover { background-color: #1877f2; }
.social-icon.instagram:hover { background-color: #e4405f; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>
<div class="logo">
<img src="https://i.postimg.cc/Jnm4FmYd/maintenance.png" alt="Logo Maintenance">
</div>
<!-- Double Gear -->
<div class="gear-container">
<div class="gear1"><i class="fas fa-cog"></i></div>
<div class="gear2"><i class="fas fa-cog"></i></div>
</div>
<h1>Situs Sedang Dalam Pemeliharaan Sistem</h1>
<p>We are currently performing system maintenance for horizonbarcelona.com.<br>Please check back later or contact us using the information below.</p>
<div class="last-update">Terakhir diperbarui: 17 Agustus 2025.</div>
<!-- Progress Bar -->
<div class="progress-container">
<div class="progress-bar"></div>
</div>
<!-- Social Media -->
<div class="social">
<a href="https://api.whatsapp.com/send/?phone=6287718191043" class="social-icon whatsapp" title="Whatsapp"><i class="fab fa-whatsapp"></i></a>
<a href="https://www.facebook.com/profile.php?id=61579179183665" class="social-icon facebook" title="Facebook"><i class="fab fa-facebook-f"></i></a>
</div>
<br>
<footer>
© 2025 <a href="https://horizonbarcelona.com/menu">horizonbarcelona.com</a>. All rights reserved.
</footer>
</body>
</html>