VELOUR Documentation

Project Structure

The production folder contains all files needed to deploy the website.

CSS Files

File	Purpose	Size
main.css	CSS variables, reset, utilities, base styles	~15KB
components.css	All component styles (navbar, cards, sections)	~85KB
responsive.css	Media queries and responsive adjustments	~20KB

JavaScript Files

File	Purpose
main.js	Navigation, mobile menu, portfolio filtering, smooth scroll
animations.js	Intersection Observer animations, parallax effects
gallery.js	Lightbox gallery for project images

Work Card

The primary component for displaying portfolio items and articles.

<a href="project-detail.html" class="work-card">
    <div class="work-card__image">
        <img src="images/project.webp" alt="Project">
        <div class="work-card__overlay"></div>
    </div>
    <div class="work-card__content">
        <span class="work-card__number">01</span>
        <div class="work-card__info">
            <span class="work-card__category">Campaign</span>
            <h3 class="work-card__title">Project Title</h3>
            <p class="work-card__meta">Location • 2026</p>
        </div>
        <span class="work-card__arrow">
            <svg viewBox="0 0 24 24">...</svg>
        </span>
    </div>
</a>

Modifiers

Class	Description
.work-card--large	Spans full width, larger height for featured items

Work Gallery Grid

Container for work cards with responsive grid layout.

<div class="work-gallery__grid">
    <a href="#" class="work-card work-card--large">...</a>
    <a href="#" class="work-card">...</a>
    <a href="#" class="work-card">...</a>
    <a href="#" class="work-card">...</a>
</div>

Filter Buttons

Portfolio filtering functionality with category buttons.

<div class="filter-bar">
    <button class="filter-btn active" data-filter="all">All</button>
    <button class="filter-btn" data-filter="campaign">Campaigns</button>
    <button class="filter-btn" data-filter="editorial">Editorial</button>
</div>

<!-- Add data-category to work-cards -->
<a href="#" class="work-card" data-category="campaign">...</a>

Navigation

Responsive navbar with mobile menu support.

<nav class="navbar">
    <div class="container navbar__container">
        <span class="navbar__lang">EN / IT</span>
        <a href="index.html" class="navbar__logo">VELOUR</a>
        <div class="hamburger" id="hamburger">
            <span class="hamburger__line"></span>
            <span class="hamburger__line"></span>
            <span class="hamburger__line"></span>
        </div>
        <ul class="navbar__menu">
            <li><a href="#" class="navbar__link active">Home</a></li>
            <li><a href="#" class="navbar__link">About</a></li>
            <!-- More links -->
        </ul>
    </div>
</nav>

Layout Classes

Container

Class	Description
.container	Max-width 1400px, centered with padding
.container--narrow	Max-width 900px for article content
.container--wide	Max-width 1600px for full-width layouts

Sections

Class	Description
.section	Standard section padding (--spacing-xl)
.section--dark	Black background, off-white text
.section--light	White background, graphite text

Grid System

Class	Description
.grid	CSS Grid with default gap
.grid--2	Auto-fit 2 columns (min 300px)
.grid--3	Auto-fit 3 columns (min 250px)
.grid--4	Auto-fit 4 columns (min 200px)
.grid-cols-1 to .grid-cols-4	Fixed column counts
.grid-cols-1-2, .grid-cols-2-1	Asymmetric layouts

Flexbox Utilities

Class	Description
.flex	Display flex
.flex--center	Center both axes
.flex--between	Space-between, centered
.flex--column	Column direction
.align-items-start/center/end	Vertical alignment
.justify-content-start/center/end/between	Horizontal alignment

Gap Utilities

Class	Value
.gap-xs	0.5rem
.gap-sm	1rem
.gap-md	2rem
.gap-lg	4rem
.gap-xl	6rem
.gap-2xl	8rem

Buttons

<button class="btn btn--primary">Primary Button</button>
<button class="btn btn--secondary">Secondary Button</button>
<button class="btn btn--outline">Outline Button</button>
<button class="btn btn--primary btn--large">Large Button</button>
<button class="btn btn--primary btn--full">Full Width</button>

Class	Description
.btn	Base button styles with hover animation
.btn--primary	Black background, white text
.btn--secondary	Transparent with black border
.btn--outline	Transparent with white border (for dark bg)
.btn--large	Larger padding and font size
.btn--full	Full width button

Forms

<div class="form-group">
    <label class="form-label">Name</label>
    <input type="text" class="form-input" placeholder="Your name">
</div>
<div class="form-group">
    <label class="form-label">Message</label>
    <textarea class="form-textarea" placeholder="Your message"></textarea>
</div>

Class	Description
.form-group	Form field container with margin
.form-label	Uppercase label styling
.form-input	Text input styling
.form-select	Select dropdown styling
.form-textarea	Textarea with min-height
.form-error	Error message styling (burgundy)

Utility Classes

Text Utilities

Class	Description
.text-center	Center aligned text
.text-left	Left aligned text
.text-right	Right aligned text
.text-uppercase	Uppercase with letter-spacing
.text-italic	Italic text
.text-mono	Monospace font

Text Size Classes

Class	Size
.text-xs	var(--text-xs)
.text-sm	var(--text-sm)
.text-base	var(--text-base)
.text-lg	var(--text-lg)
.text-xl	var(--text-xl)
.text-2xl to .text-6xl	Larger sizes

Color Utilities

Class	Color
.color-black	#0A0A0A
.color-white	#FAF9F6
.color-off-white	#F0EDE8
.color-rose	#B76E79
.color-burgundy	#800020
.color-graphite	#2D2D2D
.color-silver	#9A9A9A

Background Utilities

Class	Background
.bg-black	#0A0A0A
.bg-white	#FAF9F6
.bg-rose	#B76E79

Margin Utilities

Class	Description
.mt-0/sm/md/lg/xl	Margin top
.mb-0/sm/md/lg/xl	Margin bottom
.my-0/sm/md/lg/xl	Margin top & bottom
.mx-auto	Horizontal centering

Padding Utilities

Class	Description
.pt-0/sm/md/lg/xl	Padding top
.pb-0/sm/md/lg/xl	Padding bottom

Width Utilities

Class	Value
.w-full	width: 100%
.w-auto	width: auto
.max-w-sm	max-width: 250px
.max-w-md	max-width: 400px
.max-w-lg	max-width: 500px
.max-w-xl	max-width: 600px
.max-w-2xl	max-width: 800px

Display & Visibility

Class	Description
.hidden	display: none
.visible	display: block
.desktop-only	Visible only on desktop (≥1024px)
.mobile-only	Visible only on mobile (<1024px)

Animations

Keyframe Animations

Animation	Description
fadeIn	Fade in from transparent
fadeInUp	Fade in + slide up 30px
fadeInDown	Fade in + slide down 30px
slideInLeft	Slide in from left
slideInRight	Slide in from right
scaleUp	Scale from 0.9 + fade in

Animation Classes

Class	Animation
.fade-in	fadeIn 0.6s ease-out
.fade-in-up	fadeInUp 0.8s ease-out
.fade-in-down	fadeInDown 0.8s ease-out

/* Using animations with JavaScript */
element.classList.add('fade-in-up');

/* Custom animation with transition variable */
.my-element {
    transition: var(--transition-smooth);
}
.my-element:hover {
    transform: translateY(-5px);
}

Color Palette

The template uses a dark, sophisticated color scheme with rose gold accents.

Typography

Font Families

Variable	Font	Usage
--font-serif	'Cormorant Garamond', serif	Headings, display text
--font-display	'Italiana', serif	Hero titles, large display text
--font-sans	'Montserrat', sans-serif	Body text, navigation, UI
--font-mono	'Space Mono', monospace	Labels, numbers, code

Text Sizes (Fluid Typography)

Variable	Value
--text-xs	clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem)
--text-sm	clamp(0.875rem, 0.8rem + 0.35vw, 1rem)
--text-base	clamp(1rem, 0.9rem + 0.5vw, 1.125rem)
--text-lg	clamp(1.125rem, 1rem + 0.6vw, 1.25rem)
--text-xl	clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem)
--text-2xl	clamp(1.5rem, 1.2rem + 1.5vw, 2rem)
--text-3xl	clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem)
--text-4xl	clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem)
--text-5xl	clamp(3rem, 2rem + 5vw, 5rem)
--text-6xl	clamp(3.75rem, 2.5rem + 6.25vw, 7rem)

Spacing

Variable	Value
--spacing-xs	0.5rem (8px)
--spacing-sm	1rem (16px)
--spacing-md	2rem (32px)
--spacing-lg	4rem (64px)
--spacing-xl	6rem (96px)
--spacing-2xl	8rem (128px)

Transitions

Variable	Value	Usage
--transition-smooth	all 0.3s cubic-bezier(0.4, 0, 0.2, 1)	General UI transitions
--transition-slow	all 0.6s cubic-bezier(0.4, 0, 0.2, 1)	Page transitions, reveals
--transition-bounce	all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55)	Playful hover effects

Shadows

Variable	Value
--shadow-sm	0 2px 4px rgba(0, 0, 0, 0.1)
--shadow-md	0 4px 12px rgba(0, 0, 0, 0.15)
--shadow-lg	0 10px 40px rgba(0, 0, 0, 0.2)
--shadow-xl	0 20px 60px rgba(0, 0, 0, 0.3)

Z-Index Scale

Variable	Value	Usage
--z-negative	-1	Background elements
--z-normal	1	Default stacking
--z-dropdown	100	Dropdowns, popovers
--z-sticky	200	Sticky elements
--z-fixed	300	Fixed navbar, buttons
--z-modal	400	Modals, overlays
--z-tooltip	500	Tooltips, highest layer

Image Dimensions

Recommended image sizes for optimal display:

Image Type	Dimensions	Format
Hero Background	1920 x 1080 px	WebP
Page Hero	1920 x 1080 px	WebP
Portfolio Cards	800 x 600 px	WebP
Featured/Large Cards	1200 x 800 px	WebP
Team/Portrait	600 x 800 px	WebP
Instagram Grid	400 x 400 px	WebP

Breakpoints

Breakpoint	Width	Target
Mobile	< 768px	Phones
Tablet	768px - 1023px	Tablets, small laptops
Desktop	1024px - 1199px	Laptops, desktops
Large	>= 1200px	Large desktops

Page Overview

The template includes 8 fully designed pages.

Page	File	Description
Home	index.html	Cinematic hero, featured work, about preview, testimonials
About	pages/about.html	Founder bio, philosophy, team, awards
Services	pages/services.html	Service offerings, pricing cards
Portfolio	pages/portfolio.html	Filterable work gallery with work-card grid
Project Detail	pages/project-detail.html	Individual project showcase with gallery
Journal	pages/journal.html	Blog listing with featured article
Journal Post	pages/journal-post.html	Individual article with rich content
Contact	pages/contact.html	Contact form, location, social links

Navigation Structure

Menu items in order:

Customization Tips

Credits & Attributions

This template uses the following third-party resources. We thank all the creators for their amazing work.

Fonts

Font	Designer	License
Cormorant Garamond	Christian Thalmann	Open Font License
Montserrat	Julieta Ulanovsky	Open Font License
Space Mono	Colophon Foundry	Open Font License
Italiana	Santiago Orozco	Open Font License

Images

Resource	Source	License
Placeholder Images	Placehold.co	Free to Use
Production Images	Replace with your own images	User Provided

Icons

Icon Set	Source	License
Custom SVG Icons	Hand-crafted for this template	Included

Technologies

Services

Service	Usage	Link
Google Fonts	Font delivery CDN	fonts.google.com

Template Information

Property	Value
Template Name	VELOUR
Version	1.0.0
Release Date	January 2026
Designer & Developer	Ashekur Rahman