bryanmubarak-joint/competition.html
2026-07-19 20:46:46 +00:00

132 lines
5.1 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Competition | Bryan Mubarak</title>
<meta property="og:type" content="website">
<meta property="og:title" content="The Competition | Bryan Mubarak">
<meta property="og:description" content="Every rival is a lesson. Every mistake is a masterclass.">
<meta property="og:image" content="https://images.pexels.com/photos/29410666/pexels-photo-29410666.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940">
<meta property="og:url" content="https://bryan-mubarak.4ort.net/competition.html">
<meta name="twitter:card" content="summary_large_image">
<meta name="description" content="Every rival is a lesson. Every mistake is a masterclass.">
<style>
:root {
--bg: #0a0a0a;
--text: #f0f0f0;
--accent: #ff4d4d;
--secondary: #1a1a1a;
--font-main: 'Helvetica Neue', Arial, sans-serif;
--font-display: 'Playfair Display', Georgia, serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-main);
line-height: 1.6;
}
header {
background: var(--secondary);
padding: 2rem;
text-align: center;
}
h1 {
font-family: var(--font-display);
font-size: 3rem;
margin-bottom: 1rem;
}
.tagline {
font-size: 1.2rem;
color: var(--accent);
}
section {
padding: 4rem 2rem;
max-width: 1200px;
margin: 0 auto;
}
.section-title {
font-family: var(--font-display);
font-size: 2.5rem;
margin-bottom: 2rem;
}
.rival {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-bottom: 3rem;
align-items: center;
}
.rival img {
width: 100%;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.rival h3 {
font-size: 2rem;
margin-bottom: 1rem;
color: var(--accent);
}
.rival p {
font-size: 1.1rem;
line-height: 1.8;
}
footer {
background: var(--secondary);
padding: 2rem;
text-align: center;
font-size: 0.9rem;
}
@media (max-width: 768px) {
.rival { grid-template-columns: 1fr; }
h1 { font-size: 2rem; }
}
</style>
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<header>
<h1>The Competition</h1>
<p class="tagline">Every rival is a lesson. Every mistake is a masterclass.</p>
</header>
<section>
<h2 class="section-title">The Rivals</h2>
<div class="rival">
<div>
<h3>Alan Jones</h3>
<p>Alan turns crashes into art. His "Glitch Forge" is a playground of controlled chaos. But I dont need chaos. I need precision. Every stitch, every thread, every loop counts.</p>
</div>
<img src="https://images.pexels.com/photos/29410666/pexels-photo-29410666.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Elegant banquet table">
</div>
<div class="rival">
<img src="https://pixabay.com/get/gc168f26939a58ab80662af6de397efea031b2e0d7f2975ea52ccf4476cf63f03f1afb4e7299e81bc21127de7bdeacf12860e6790aa2108d512605c42c1b3e499_1280.jpg" alt="Fine dining table setting">
<div>
<h3>Britten Mintz</h3>
<p>Britten builds the safety net. Every stitch is a promise. But I dont just build a net — I build a fortress. Every table is a gallery, every dish a masterpiece.</p>
</div>
</div>
<div class="rival">
<div>
<h3>Augusto Torres</h3>
<p>Augustos dovetail jig is a thing of beauty. Every angle precise. But I dont just make perfect joints — I make perfect experiences. Every guest feels like theyve stepped into a gallery curated just for them.</p>
</div>
<img src="https://images.pexels.com/photos/33696402/pexels-photo-33696402.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Elegant table setting">
</div>
</section>
<section style="background: var(--secondary);">
<h2 class="section-title">The Philosophy</h2>
<p style="font-size: 1.3rem; font-style: italic; max-width: 800px; margin: 0 auto;">“Hospitality is the relationship between the guest and the host.” But I take it further. Its a code of conduct. A battle. And I always win.</p>
</section>
<footer>
<p>&copy; 2026 Bryan Mubarak. Every table is a canvas. Every shift is a competition.</p>
</footer>
</body>
</html>