⏲️ Estimated reading time: 3 min
WordPress HTML/CSS/JS code for the Apple-Analog style clock set to Brussels time:
Apple Clock in HTML – Brussels Time. Create a stylish Apple-inspired clock in your website using HTML, CSS, and JavaScript. This code displays the current time in Brussels and is perfect for tech demos or custom dashboard widgets.
🕒 Apple Analog Clock with Brussels Time – Full Code Example
If you’re looking to add a sleek, style clock to your website, this tutorial provides you with the full HTML, CSS, and JavaScript code. It adjusts the time to Brussels (Europe/Brussels timezone) and updates every second.
Features
- Analog clock with hour, minute, and second hands
- Designed to mimic Apple’s sleek UI style
- Automatically adjusts to Brussels time (UTC+2)
- Responsive and centered layout
- Includes 12 tick marks and branding
Complete Apple Analog Code
Below is the full code you can copy and paste into your project:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Apple Analog Clock - Brussels Time</title>
<style>
body {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #ececec;
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}
.clock {
width: 200px;
height: 200px;
background: #fff;
border: 6px solid #000;
border-radius: 50%;
box-shadow: 0 5px 12px rgba(0,0,0,0.1);
position: relative;
}
.clock .center {
width: 8px;
height: 8px;
background: #000;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
.hand {
position: absolute;
bottom: 50%;
left: 50%;
transform-origin: bottom;
}
.hand.hour {
height: 45px;
width: 4px;
background: #000;
z-index: 4;
}
.hand.minute {
height: 65px;
width: 3px;
background: #555;
z-index: 3;
}
.hand.second {
height: 70px;
width: 1px;
background: #d00;
z-index: 2;
}
.tick {
position: absolute;
width: 3px;
height: 8px;
background: #000;
top: 6px;
left: 50%;
transform-origin: center 94px;
transform: translateX(-50%) rotate(0deg);
}
.brand-text {
position: absolute;
top: 40px;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
color: #000;
font-weight: 500;
z-index: 1;
font-family: "Audiowide", display;
}
</style>
</head>
<body>
<div class="clock">
<div class="center"></div>
<div class="hand hour" id="hourHand"></div>
<div class="hand minute" id="minuteHand"></div>
<div class="hand second" id="secondHand"></div>
<div class="brand-text">Help Zone</div>
</div>
<script>
const clock = document.querySelector('.clock');
for (let i = 0; i < 12; i++) {
const tick = document.createElement('div');
tick.className = 'tick';
tick.style.transform = `translateX(-50%) rotate(${i * 30}deg)`;
clock.appendChild(tick);
}
const hourHand = document.getElementById('hourHand');
const minuteHand = document.getElementById('minuteHand');
const secondHand = document.getElementById('secondHand');
function updateClock() {
const now = new Date();
const brusselsTime = new Date(now.toLocaleString("en-US", {timeZone: "Europe/Brussels"}));
const sec = brusselsTime.getSeconds();
const min = brusselsTime.getMinutes();
const hr = brusselsTime.getHours();
const secDeg = sec * 6;
const minDeg = min * 6 + sec * 0.1;
const hrDeg = ((hr % 12) + min / 60) * 30;
secondHand.style.transform = `rotate(${secDeg}deg)`;
minuteHand.style.transform = `rotate(${minDeg}deg)`;
hourHand.style.transform = `rotate(${hrDeg}deg)`;
}
setInterval(updateClock, 1000);
updateClock();
</script>
</body>
</html>
👇 Live Demo!
How to Use
- Copy the full code above into an
.htmlfile. - Open the file in your browser – the clock will show Brussels time.
- You can integrate it into a WordPress page using an iframe or code block plugin.
🏷️ Tags: html clock, css analog clock, javascript clock, brussels time clock, style ui, time widget, html time script, web design widgets, frontend projects, web developer tools, Bruxelles
Only logged-in users can submit reports.
Discover more from HelpZone
Subscribe to get the latest posts sent to your email.
