Skip to content

Commit 3ab1932

Browse files
sebzicodessebzicodes
committed
finished Distrito Federal website mock version.
0 parents  commit 3ab1932

3 files changed

Lines changed: 729 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Distrito Federal — Campbell, CA</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9+
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500&display=swap" rel="stylesheet" />
10+
<link rel="stylesheet" href="styles.css" />
11+
</head>
12+
<body>
13+
14+
<!-- Navigation -->
15+
<nav id="navbar">
16+
<div class="nav-inner">
17+
<span class="nav-logo">DF</span>
18+
<ul class="nav-links">
19+
<li><a href="#about">About</a></li>
20+
<li><a href="#food">Cuisine</a></li>
21+
<li><a href="#drinks">Beverages</a></li>
22+
<li><a href="#events">Events</a></li>
23+
<li><a href="https://www.opentable.com/r/distrito-federal-campbell" class="nav-cta">Reserve</a></li>
24+
</ul>
25+
</div>
26+
</nav>
27+
28+
<!-- Hero -->
29+
<section class="hero" id="hero">
30+
<div class="hero-bg"></div>
31+
<div class="hero-content">
32+
<p class="hero-eyebrow">Campbell, California</p>
33+
<h1 class="hero-title">Distrito<br><em>Federal</em></h1>
34+
<p class="hero-address">379 East Campbell Ave</p>
35+
<a href="https://www.opentable.com/r/distrito-federal-campbell" class="btn btn-primary">Reserve a Table</a>
36+
</div>
37+
<div class="scroll-hint"><span></span></div>
38+
</section>
39+
40+
<!-- About -->
41+
<section class="content-section" id="about">
42+
<div class="section-inner two-col">
43+
<div class="section-text fade-in">
44+
<p class="section-label">Our Story</p>
45+
<h2>A hidden gem<br>of the Bay Area.</h2>
46+
<p>Founded in 2022 by Issac Barrera, Distrito Federal has quickly become the go-to destination for traditional Mexican cuisine, signature craft cocktails, and immersive educational experiences such as <em>Taste of Tequila</em>. A true hospitality experience is defined by more than just great food and drinks — it's about creating an inviting atmosphere, delivering top-shelf service, and showcasing professional expertise in every way. Distrito Federal brings all three of these necessities together in one top-notch establishment.</p>
47+
<a href="https://www.opentable.com/r/distrito-federal-campbell" class="btn btn-outline">Reserve on OpenTable</a>
48+
</div>
49+
<div class="section-media fade-in fade-in--delay">
50+
<img src="https://i.pinimg.com/originals/89/8d/6f/898d6f8726ba02f41bec46ae5df45000.gif" alt="Distrito Federal ambiance" />
51+
</div>
52+
</div>
53+
</section>
54+
55+
<!-- Parallax divider -->
56+
<div class="parallax-divider" style="background-image: url('https://sunporkfreshfoods.com.au/wp-content/uploads/2019/10/pork-belly-tacos.jpg')">
57+
<div class="parallax-overlay">
58+
<p class="parallax-label fade-in">Cuisine</p>
59+
</div>
60+
</div>
61+
62+
<!-- Food -->
63+
<section class="content-section" id="food">
64+
<div class="section-inner two-col reverse">
65+
<div class="section-text fade-in">
66+
<p class="section-label">The Kitchen</p>
67+
<h2>Elevated<br>Mexican Cuisine.</h2>
68+
<p>At Distrito Federal, we take pride in offering a truly memorable take on elevated, traditional Mexican cuisine. From our signature Enchiladas to our Specialty Tacos, every dish is crafted with care, superb flavor, and authenticity. Our menu is curated and executed by Chef Geo — a chef celebrated in multiple publications for his passion in bringing bold, vibrant Mexican flavors to food. He ensures that every plate offers something more than meets the eye, marking the perfect balance of tradition, creativity, and taste.</p>
69+
<a href="" class="btn btn-outline">Peruse the Menu</a>
70+
</div>
71+
<div class="section-media fade-in fade-in--delay">
72+
<img src="https://sunporkfreshfoods.com.au/wp-content/uploads/2019/10/pork-belly-tacos.jpg" alt="Porkbelly tacos from Distrito Federal" />
73+
</div>
74+
</div>
75+
</section>
76+
77+
<!-- Parallax divider -->
78+
<div class="parallax-divider" style="background-image: url('https://killjoycocktail.com/wp-content/uploads/2021/07/killjoy-july-2021-13-1024x683.jpg')">
79+
<div class="parallax-overlay">
80+
<p class="parallax-label fade-in">Beverages</p>
81+
</div>
82+
</div>
83+
84+
<!-- Drinks -->
85+
<section class="content-section" id="drinks">
86+
<div class="section-inner two-col">
87+
<div class="section-text fade-in">
88+
<p class="section-label">The Bar</p>
89+
<h2>Craft cocktails,<br>freshly pressed.</h2>
90+
<p>Since Distrito's inception, our goal has been to craft extraordinary drinks using the freshest ingredients. As a standard, we process all juices in-house and prepare each cocktail with professional precision and care. Some of our most popular selections include the <em>Lucid Dream</em> — a clarified pear and matcha cocktail; <em>24 Carrot</em> — a tequila-based drink featuring freshly juiced carrot and habanero-infused honey; and our signature <em>Mexican Carajillo</em>, a beloved favorite among guests and staff alike. Reserve a spot or stop by today.</p>
91+
<a href="" class="btn btn-outline">Explore the Bar Menu</a>
92+
</div>
93+
<div class="section-media fade-in fade-in--delay">
94+
<img src="https://killjoycocktail.com/wp-content/uploads/2021/07/killjoy-july-2021-13-1024x683.jpg" alt="Craft cocktails at Distrito Federal" />
95+
</div>
96+
</div>
97+
</section>
98+
99+
<!-- Parallax divider -->
100+
<div class="parallax-divider" style="background-image: url('https://www.downtowncampbell.com/sites/default/files/styles/8-large_650/public/uploads/users/1/images/https%253A%252F%252Fcdn.evbuc.com%252Fimages%252F825544699%252F1212969634083%252F1%252Foriginal.20240812-202509?itok=RZY34yTA')">
101+
<div class="parallax-overlay">
102+
<p class="parallax-label fade-in">Events</p>
103+
</div>
104+
</div>
105+
106+
<!-- Events -->
107+
<section class="content-section" id="events">
108+
<div class="section-inner two-col reverse">
109+
<div class="section-text fade-in">
110+
<p class="section-label">Community</p>
111+
<h2>Taste of Tequila<br>&amp; More.</h2>
112+
<p>From time to time, Distrito hosts events to celebrate our Mexican roots and bring our community together. The <em>Taste of Tequila</em> is a notable occasion that will bring to you the best high-end craft cocktails paired carefully with our highly rated cuisine. For more information regarding event times and dates, inquire within.</p>
113+
</div>
114+
<div class="section-media fade-in fade-in--delay">
115+
<img src="https://www.downtowncampbell.com/sites/default/files/styles/8-large_650/public/uploads/users/1/images/https%253A%252F%252Fcdn.evbuc.com%252Fimages%252F825544699%252F1212969634083%252F1%252Foriginal.20240812-202509?itok=RZY34yTA" alt="Taste of Tequila event by Distrito Federal" />
116+
</div>
117+
</div>
118+
</section>
119+
120+
<!-- Footer -->
121+
<footer>
122+
<div class="footer-inner">
123+
<div class="footer-brand">
124+
<h3>Distrito | Federal</h3>
125+
<p>379 East Campbell Ave<br>Campbell, California</p>
126+
</div>
127+
<nav class="footer-links">
128+
<a href="https://www.google.com/maps/place/Distrito+Federal/@37.2871665,-121.9457518,17z/data=!3m2!4b1!5s0x808fcb4ed688c8bf:0x24e94ffc9959a72b!4m6!3m5!1s0x808e3589bced4189:0x95fd8f9b37f1742f!8m2!3d37.2871665!4d-121.9431769!16s%2Fg%2F11sys2l29w?authuser=0&entry=ttu&g_ep=EgoyMDI1MTAyNi4wIKXMDSoASAFQAw%3D%3D" class="btn btn-ghost">Google Maps</a>
129+
<a href="tel:+14083405578" class="btn btn-ghost">Call Us</a>
130+
<a href="" class="btn btn-ghost">Email</a>
131+
<a href="https://github.com/sebzicodes" class="btn btn-ghost">Website by Sebzi</a>
132+
</nav>
133+
<p class="footer-copy">&copy; 2025 Distrito Federal. All rights reserved.</p>
134+
</div>
135+
</footer>
136+
137+
<script src="script.js"></script>
138+
</body>
139+
</html>

‎script.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// Navbar: solidify on scroll
2+
const navbar = document.getElementById('navbar');
3+
window.addEventListener('scroll', () => {
4+
navbar.classList.toggle('scrolled', window.scrollY > 60);
5+
}, { passive: true });
6+
7+
// Hero parallax (JS-driven for smoothness)
8+
const heroBg = document.querySelector('.hero-bg');
9+
window.addEventListener('scroll', () => {
10+
if (window.scrollY < window.innerHeight) {
11+
heroBg.style.transform = `translateY(${window.scrollY * 0.35}px)`;
12+
}
13+
}, { passive: true });
14+
15+
// Fade-in on scroll via IntersectionObserver
16+
const fadeEls = document.querySelectorAll('.fade-in');
17+
const observer = new IntersectionObserver((entries) => {
18+
entries.forEach(entry => {
19+
if (entry.isIntersecting) {
20+
entry.target.classList.add('visible');
21+
observer.unobserve(entry.target);
22+
}
23+
});
24+
}, { threshold: 0.12 });
25+
26+
fadeEls.forEach(el => observer.observe(el));

0 commit comments

Comments
 (0)