<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jogo do Bicho – Official Artwork Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="Jogo do Bicho – official artwork and cultural project. This site does not offer gambling or betting services.">
<style>
:root {
--green-dark: #264620;
--green-mid: #3a6b30;
--gold: #f5c34a;
--gold-deep: #d89a1f;
--bg-body: #050b10;
--text-main: #fdf7ec;
--text-muted: #c6d0dd;
--accent-soft: #7f5af0;
--accent-chips: rgba(255, 255, 255, 0.07);
--shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.5);
--radius-xl: 18px;
--radius-pill: 999px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: radial-gradient(circle at top, #101b28 0%, #050b10 55%, #020308 100%);
color: var(--text-main);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
color: inherit;
}
img {
max-width: 100%;
display: block;
}
.page {
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Top nav */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10;
background: linear-gradient(90deg, #153018, #182e3f);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
}
.nav-inner {
max-width: 1160px;
margin: 0 auto;
padding: 0.6rem 1.25rem;
display: flex;
align-items: center;
gap: 1rem;
}
.brand {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
font-size: 0.9rem;
}
.brand-mark {
width: 32px;
height: 32px;
border-radius: 10px;
background: radial-gradient(circle at 20% 0%, #ffe792 0%, #f5b83b 40%, #f08c1f 100%);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
font-size: 1.1rem;
}
.brand span {
color: #fef7d4;
}
.nav-links {
display: flex;
gap: 1rem;
margin-left: 2rem;
flex: 1;
}
.nav-links a {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #e9f3ff;
opacity: 0.9;
padding-bottom: 0.25rem;
border-bottom: 2px solid transparent;
}
.nav-links a:hover,
.nav-links a.is-active {
border-bottom-color: var(--gold);
color: #ffffff;
}
.nav-actions {
margin-left: auto;
display: flex;
gap: 0.6rem;
align-items: center;
}
.btn {
border-radius: var(--radius-pill);
padding: 0.45rem 1.1rem;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
border: 1px solid transparent;
cursor: pointer;
background: transparent;
color: #fdf7ec;
}
.btn-outline {
border-color: rgba(255, 255, 255, 0.35);
background: rgba(0, 0, 0, 0.2);
}
.btn-gold {
background: radial-gradient(circle at 25% 0%, #ffe792 0%, #f5c34a 40%, #d8941b 100%);
border-color: rgba(0, 0, 0, 0.25);
color: #3a2307;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6);
}
.btn-gold:hover {
filter: brightness(1.05);
}
/* Hero */
.hero {
margin-top: 64px; /* nav height */
padding: 1.5rem 1.25rem 3.5rem;
}
.hero-inner {
max-width: 1160px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 4fr);
gap: 2.25rem;
align-items: center;
}
.hero-copy {
padding: 1.5rem 1rem 1.5rem 0;
}
.hero-kicker {
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.75rem;
color: #c3f3c0;
margin-bottom: 0.75rem;
}
.hero-title {
font-size: clamp(2.1rem, 3vw + 1rem, 3rem);
line-height: 1.1;
margin-bottom: 0.75rem;
}
.hero-title span {
color: var(--gold);
text-shadow: 0 0 14px rgba(0, 0, 0, 0.8);
}
.hero-subtitle {
font-size: 0.98rem;
color: var(--text-muted);
max-width: 32rem;
margin-bottom: 1.4rem;
}
.hero-badges {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-bottom: 1.6rem;
}
.badge {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.15em;
padding: 0.35rem 0.75rem;
border-radius: var(--radius-pill);
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(0, 0, 0, 0.35);
color: #f5f7fb;
}
.hero-ctas {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.hero-note {
font-size: 0.78rem;
color: var(--text-muted);
max-width: 32rem;
}
.hero-note strong {
color: #ffffff;
}
.hero-art {
position: relative;
}
.hero-art-card {
border-radius: 32px;
overflow: hidden;
box-shadow: var(--shadow-soft);
background: radial-gradient(circle at top, #ffd86b 0%, #f39c12 35%, #8e44ad 90%);
position: relative;
isolation: isolate;
}
.hero-art-card img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.hero-art-overlay {
position: absolute;
inset: 0;
background: radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 55%);
pointer-events: none;
}
/* Info strip */
.info-strip {
max-width: 1160px;
margin: 0 auto 2.5rem;
padding: 0.9rem 1.25rem;
border-radius: var(--radius-xl);
background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.09), rgba(0, 0, 0, 0.9));
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
border: 1px solid rgba(255, 255, 255, 0.08);
display: grid;
gap: 0.75rem;
grid-template-columns: minmax(0, 3fr) minmax(0, 4fr);
align-items: center;
}
.info-strip h2 {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: #e9f3ff;
margin-bottom: 0.2rem;
}
.info-strip p {
font-size: 0.82rem;
color: var(--text-muted);
}
.info-strip strong {
color: #ffffff;
}
.info-tagline {
justify-self: end;
font-size: 0.78rem;
color: #e9f3ff;
text-align: right;
}
/* Footer */
footer {
margin-top: auto;
padding: 1.25rem 1.5rem 2rem;
font-size: 0.75rem;
color: #8e9aad;
}
footer .footer-inner {
max-width: 1160px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.75rem;
border-top: 1px solid rgba(255, 255, 255, 0.06);
padding-top: 0.9rem;
}
.footer-links {
display: flex;
gap: 0.9rem;
flex-wrap: wrap;
}
.footer-links a {
color: #b2bed0;
}
.footer-links a:hover {
color: #ffffff;
}
/* Responsive */
@media (max-width: 860px) {
.hero-inner {
grid-template-columns: minmax(0, 1fr);
text-align: left;
}
.hero-art {
order: -1;
}
.nav-links {
display: none;
}
.nav-inner {
justify-content: space-between;
}
.info-strip {
grid-template-columns: minmax(0, 1fr);
text-align: left;
}
.info-tagline {
justify-self: flex-start;
text-align: left;
}
}
@media (max-width: 520px) {
.hero {
padding-inline: 0.9rem;
}
.hero-copy {
padding-right: 0;
}
.hero-title {
font-size: 2.1rem;
}
.hero-badges,
.hero-ctas {
gap: 0.5rem;
}
}
</style>
</head>
<body>
<div class="page">
<!-- Top navigation -->
<header class="nav">
<div class="nav-inner">
<a href="#" class="brand">
<div class="brand-mark">JB</div>
<span>Jogo do Bicho</span>
</a>
<nav class="nav-links" aria-label="Primary navigation">
<a href="#" class="is-active">Home</a>
<a href="#about">About</a>
<a href="#artwork">Artwork</a>
<a href="#learn">Learn</a>
</nav>
<div class="nav-actions">
<button class="btn btn-outline" type="button">Coming Soon</button>
<!-- No real log-in / betting while project is in artwork phase -->
</div>
</div>
</header>
<!-- Hero section -->
<main>
<section class="hero">
<div class="hero-inner">
<div class="hero-copy">
<div class="hero-kicker">Artwork • Culture • Development log</div>
<h1 class="hero-title">
<span>Jogo do Bicho</span><br>
a visual love letter to a classic animal game.
</h1>
<p class="hero-subtitle">
This site currently hosts the official character art and world-building
for a future digital interpretation of <em>Jogo do Bicho</em>.
It is a cultural and artistic project only – no betting or gambling
is available.
</p>
<div class="hero-badges">
<div class="badge">25 animals • full spectrum palette</div>
<div class="badge">UK-friendly design language</div>
<div class="badge">Artwork timestamped & archived</div>
</div>
<div class="hero-ctas">
<a href="#artwork" class="btn btn-gold">View the animals</a>
<a href="#learn" class="btn btn-outline">Learn about the project</a>
</div>
<p class="hero-note">
<strong>Important:</strong> this is not a gambling site and does not
accept stakes, bets, or wagers. All content is illustrative and
for cultural / artistic purposes only.
</p>
</div>
<div class="hero-art">
<div class="hero-art-card">
<!-- Replace hero-header.jpg with the exact filename of your header image -->
<img src="hero-header.jpg" alt="Jogo do Bicho colourful hero artwork">
<div class="hero-art-overlay"></div>
</div>
</div>
</div>
</section>
<!-- Info strip -->
<section class="info-strip" id="about">
<div>
<h2>About this project</h2>
<p>
<strong>Jogo do Bicho</strong> here is presented as a visual archive:
carefully crafted animal illustrations, colour-coded backgrounds, and
interface concepts inspired by traditional bookmaker layouts rather
than casino aesthetics.
</p>
</div>
<div class="info-tagline">
Artwork and interface concepts are in development.<br>
Public launch will follow once compliance and licensing are complete.
</div>
</section>
</main>
<!-- Footer -->
<footer>
<div class="footer-inner">
<div>
© <span id="year"></span> Jogo do Bicho. Artwork & interface concepts.
No gambling or betting services are provided.
</div>
<div class="footer-links">
<a href="#learn">Project notes</a>
<a href="#artwork">Artwork gallery</a>
<a href="mailto:info@example.com">Contact</a>
</div>
</div>
</footer>
</div>
<script>
// Set current year automatically
document.getElementById('year').textContent = new Date().getFullYear();
</script>
</body>
</html>