🔧 Modern responsive website for Base48 hackerspace in Brno, Czech Republic
Base48 is a community-driven hackerspace and maker workshop located in Brno, Czech Republic. This website serves as the digital front door to our physical space, showcasing our facilities, community, and mission to provide a collaborative environment for DIY projects, electronics, 3D printing, and knowledge sharing.
- Retro-futuristic aesthetic with CRT monitor frames and pixel art elements
- Responsive design that works seamlessly on desktop, tablet, and mobile
- Dark/Light theme toggle for optimal viewing experience
- Smooth animations and hover effects for enhanced interactivity
- Accessibility-focused with proper ARIA labels and semantic HTML
- One hand usable all actions are reachable single-handedly
- Interactive visual features that make people remember our website
- Animated satellite sprite with clickable Easter egg explaining the "48" origin
- Interactive photo galleries with lightbox functionality
- CRT-style frame displays showcasing different areas of the hackerspace
- Smooth scrolling navigation between sections
- Hamburger menu for mobile navigation
- CSS Grid & Flexbox for responsive layouts
- CSS Custom Properties for consistent theming
- Vanilla JavaScript for lightweight interactivity
- WebP images for optimized loading
- HTML5 - Semantic markup with accessibility features
- CSS3 - Modern styling with CSS Grid, Flexbox, and custom properties
- Vanilla JavaScript - Lightweight, dependency-free interactions
- WebP Images - Modern image format for optimal performance
- Font Awesome - Icon library for consistent iconography
- No Build - Or advanced optimisation for sake of transparency
- Hosting (server) directives - Not included in this repository
├── index.html # Main HTML file
├── css/ # Stylesheets
│ ├── main.css # Main CSS imports
│ ├── variables.css # CSS custom properties
│ ├── base.css # Base styles and resets
│ ├── layout.css # Layout and grid systems
│ ├── components.css # Reusable component styles
│ ├── responsive.css # Media queries and responsive design
│ ├── animations.css # CSS animations and transitions
│ ├── buttons.css # Button component styles
│ ├── lightbox.css # Image lightbox functionality
│ ├── crt-effect.css # Retro CRT monitor effects
│ ├── satellite.css # Animated satellite sprite
│ ├── fonts.css # Font declarations
│ └── utilities.css # Utility classes
├── js/ # JavaScript files
│ └── main.js # Main JavaScript functionality
├── img/ # Images and assets
│ ├── logo/ # Base48 logos
│ ├── gallery/ # Photo gallery images
│ ├── screen/ # CRT screen content images
│ ├── frame/ # CRT frame images
│ └── og/ # Open Graph images
└── vendor/ # Third-party assets
└── fa/ # Font Awesome icons
- A modern web browser
- Local web server (optional, for development)
-
Clone the repository
git clone https://github.com/Thebys/base48.git cd base48 -
Open in browser Open
index.htmldirectly.
- Mobile-first approach
- Flexible grid systems
- Adaptive typography and spacing
- Touch-friendly interactive elements
- Optimized WebP images with fallbacks
- Efficient CSS organization
- Minimal JavaScript footprint
- Lazy loading for gallery images
We welcome contributions to improve the website! Please:
- Fork the repository
- Create a feature branch
- Make your changes
- Test across different devices/browsers
- Submit a pull request
- Follow existing code style and organization
- Maintain accessibility standards
- Test responsive design on multiple devices
- Optimize images before adding to the repository
- Document any new features or changes
©left Base48, z.s. Some rights reserved.
Made with ❤️ by the Base48 community
prepared by Tomáš "Thebys" Biheler