A modern, fully responsive landing page for a creative agency. Built with semantic HTML5, BEM methodology, and contemporary CSS techniques including logical properties, clamp(), CSS Grid, and Flexbox—with accessibility and performance at the core.
- Fully Responsive Design – Mobile-first approach with seamless adaptation across devices
- BEM CSS Architecture – Scalable, maintainable, and modular naming conventions
- Modern CSS Techniques – Fluid typography with
clamp(), logical properties, CSS Grid, Flexbox - Visual Excellence – Glassmorphism effects, smooth animations, and micro-interactions
- Accessibility First – WCAG-compliant with skip-to-content links, ARIA labels, semantic HTML
- SEO Optimized – Comprehensive metadata, Open Graph tags, Twitter Cards, canonical links
- Performance Ready – Font preconnection, lazy-loaded images, optimized assets
- Enhanced UX – Smooth scroll animations, back-to-top button, responsive navigation menu
leon-creative-agency/
├── css/ # Modern CSS with BEM methodology
│ └── style.css
├── js/ # Interactivity and navigation logic
│ └── main.js
├── images/ # Image screen
│ └── leon-image.png
├── index.html # Main entry point
└── README.md # Project documentation
| Technology | Purpose |
|---|---|
| HTML5 | Semantic markup and structure |
| CSS3 | Flexbox, Grid, Custom Properties, Logical Properties |
| JavaScript | Interactive elements (hamburger menu, smooth scroll) |
| Font Awesome 6 | Icon library |
| Google Fonts | Inter typeface |
| Unsplash | High-quality placeholder images |
The project follows Block Element Modifier naming conventions for maintainable, scalable CSS:
/* Block: standalone component */
.services { }
/* Element: part of a block */
.services__item { }
.services__icon { }
/* Modifier: variation of a block or element */
.services__item--featured { }
.nav__menu--open { }All colors, spacing, and typography values are defined as CSS variables:
:root {
--color-primary: #10cab7;
--color-secondary: #2c3e50;
--color-accent: #ff6b6b;
--spacing-unit: 1rem;
--font-family-body: 'Inter', sans-serif;
}| Breakpoint | Device Type |
|---|---|
≤ 480px |
Mobile phones |
480px – 768px |
Tablets |
768px – 992px |
Small laptops |
≥ 992px |
Desktop & larger |
- Any modern web browser (Chrome, Firefox, Safari, Edge)
- No build tools or dependencies required
- Clone or download the repository:
git clone https://github.com/your-username/leon-template.git
cd leon-template- Open in browser:
# Option 1: Direct file access
open index.html
# Option 2: Using Python 3
python -m http.server 8000
# Option 3: Using Node.js (http-server)
npx http-server- View in your browser:
- Direct:
file:///path/to/leon-template/index.html - Local server:
http://localhost:8000
Edit CSS variables in the :root selector within style.css:
:root {
--color-primary: #your-color;
--color-secondary: #your-color;
--color-accent: #your-color;
}- Logo – Update the image URL in the header
- Hero Text – Edit section headings and descriptions
- Services – Add/remove service cards and descriptions
- Team – Replace placeholder team member information
- Contact – Update email, social links, and location
Replace Unsplash placeholder URLs with your own:
<!-- Before -->
<img src="https://images.unsplash.com/photo-..." alt="Description">
<!-- After -->
<img src="your-image-url.jpg" alt="Your Alt Text">Update font imports and sizing in the <head>:
<link href="https://fonts.googleapis.com/css2?family=YourFont:wght@400;700&display=swap" rel="stylesheet">Include your analytics script before closing </body>:
<script>
// Google Analytics, Hotjar, or your tracking code
</script>The site includes industry-standard accessibility practices:
- Skip-to-Content Link – Allows keyboard users to bypass navigation
- Semantic HTML – Proper use of
<header>,<main>,<footer>,<section>,<nav> - ARIA Labels – Interactive elements clearly labeled for screen readers
- Focus Indicators – Visible outlines for keyboard navigation
- Alt Text – Descriptive alt attributes on all images
- Color Contrast – WCAG AA compliant text/background ratios
- Responsive Text – Readable on all screen sizes
The <head> section includes:
- Meta description and keywords
- Open Graph tags (Facebook, LinkedIn sharing)
- Twitter Card metadata
- Canonical link (for duplicate prevention)
- Author and copyright information
- Verification placeholders (Google, Bing, Pinterest)
Action Items:
- Replace
<meta name="description">with your own description - Update Open Graph image URL
- Add your verification codes in
<meta>tags - Update canonical
<link>if hosting on a custom domain
- ✅ Google Fonts preconnected for faster loading
- ✅ Images lazy-loaded to reduce initial payload
- ✅ Minified CSS and JavaScript
- ✅ No external dependencies (pure HTML/CSS/JS)
- ✅ Optimized media queries
- ✅ CSS animations use
transformandopacityfor smooth 60fps
Optimization Tips:
- Compress images with TinyPNG or Squoosh
- Use WebP format for modern browsers
- Deploy with gzip compression enabled
- Consider CDN for static assets
| Animation | Trigger | Effect |
|---|---|---|
| Fade-in | Page load | Smooth opacity transition |
| Floating icon | Scroll | Subtle vertical movement |
| Hover scale | Mouse over | Interactive button feedback |
| Back-to-top pulse | Always visible | Gentle pulse animation |
| Menu slide | Click hamburger | Smooth slide-in/out |
| Browser | Support |
|---|---|
| Chrome 90+ | ✅ Full support |
| Firefox 88+ | ✅ Full support |
| Safari 14+ | ✅ Full support |
| Edge 90+ | ✅ Full support |
| IE 11 | ❌ Not supported (modern CSS features) |
| Asset | Size | Load Time (4G) |
|---|---|---|
| HTML | ~25 KB | <100ms |
| CSS | ~18 KB | <100ms |
| JavaScript | ~5 KB | <50ms |
| Total | ~48 KB | ~250ms |
Actual load times depend on image optimization and hosting.
- BEM Methodology
- MDN: CSS Grid
- MDN: Flexbox
- CSS Logical Properties
- WCAG 2.1 Guidelines
- Font Awesome Documentation
For issues, suggestions, or questions:
- Check existing documentation above
- Review source code comments in
index.htmlandstyle.css - Open an issue on GitHub
- Contact: [your-email@example.com]
This project is released under the MIT License. You are free to use, modify, and distribute this template for personal and commercial projects. Attribution is appreciated but not required.
MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so.
- Original Design Concept – Leon Template by Graphberry
- Images – Unsplash
- Icons – Font Awesome
- Typography – Google Fonts
- Methodology – BEM by GetBEM
- Push to GitHub
- Connect repository to Netlify
- Set build command: (leave empty)
- Set publish directory: (root folder)
- Import GitHub repository
- Click "Deploy"
- Share live URL
git push origin main
# Enable GitHub Pages in repository settings- Add dark mode toggle
- Implement form validation and backend integration
- Add blog/portfolio section
- Integrate CMS (Netlify CMS, Contentful)
- Add multi-language support
- Implement progressive web app (PWA)
We'd love to hear your thoughts! If you use this template, feel free to share your experience or suggest improvements.
Built with ❤️ by Leon Agency Team
Last updated: April 2026
- View Live Demo – Replace with your hosted URL
- View Source Code – GitHub Repository