Hero / Intro

  • Titel: Glas Parkstad – jouw glaszetter in Zuid-Limburg

  • Subtekst: Van isolatieglas tot interieurglas – snel, veilig en vakkundig geplaatst.

  • Knoppen:

    • [Offerte aanvragen]

    • [Bel direct 045 – 546 3955]

  • Achtergrondfoto van glasplaatsing of modern raam.

2. Onze specialisaties

  • 3 blokken met korte beschrijving + icoon/foto:

    1. Isolatieglas (HR++, Triple, Vacuümglas)

    2. Veiligheid & Interieurglas (deuren, wanden, balustrades)

    3. Restauratie & Service (glas in lood, monumentaal, voorzetramen)

  • Knop: [Meer over onze glassoorten]

3. Waarom kiezen voor Glas Parkstad

  • Bulletblokken met icoontjes:

    • Snelle service van offerte tot montage

    • Ervaren vakmensen, generatie op generatie

    • Persoonlijk en eerlijk advies

    • Topkwaliteit voor een eerlijke prijs

  • Knop: [Vraag direct een offerte aan]

4. Projecten & voorbeelden

  • 3–4 projectfoto’s met korte beschrijving (plaats + type glas).

  • Knop: [Bekijk meer projecten]

5. Over Glas Parkstad

  • Korte introductie:

    Al generaties lang familiebedrijf met hart voor glas. Vanuit Kerkrade werken we voor particulieren en bedrijven in de regio Parkstad.

  • Knop: [Meer over ons team]

6. Contact & offerteblok

  • Eenvoudig contactformulier (naam, telefoon, bericht).

  • Contactgegevens:

    • 📞 045 – 546 3955

    • ✉️ info@glasparkstad.eu

    • 📍 Marktstraat 35B, Kerkrade

    • 🕓 Ma–Vr 8:00 – 17:00

  • Google Maps-kaart.

  • Optioneel: [Stuur ons een WhatsApp-bericht]

7. Footer

  • Logo + korte slogan

  • Menu: Home | Diensten | Projecten | Contact

  • Social media-iconen

  • https://www.instagram.com/glasparkstad/?utm_source=chatgpt.com
  • https://www.facebook.com/GlasParkstad/?utm_source=chatgpt.com
  • https://twitter.com/GlasParkstad?utm_source=chatgpt.com
📍 Projectinformatie
Project Globeview
Klant Naam klant
Adres Straatnaam 123, 6211 AB Heerlen
Telefoon 043 – 123 4567
Email info@globeview.nl
Facebook Facebook
Instagram Instagram
LinkedIn LinkedIn

Cheatsheet

Snel overzicht van onze GLW tokens, classes en patterns.

🎨Kleuren

Variabele / ClassVoorbeeldWaardeToelichting
--glw-color-primaryvarPrimair merk
--glw-color-secondaryvarSecundair
--glw-color-accentvarAccent
.glw-on-darkTekststijlen op donkere vlakken

🅰️Typografie & Spacing

Token / SelectorWaardeToelichting
--glw-font-bodyNunito-globeview, sans-serifBody-font
--glw-font-headingNunito-globeview, sans-serifHeading-font
--glw-base-font-sizeclamp(1rem, .8rem + .5vw, 1.125rem)Basistekst
--glw-h1 … --glw-h6clamp-waardenHeadings schalen
--glw-section-m-padding5remDefault sectie-padding

📐Layout & Grid

ClassBeschrijving
.glw-containerMax-breedte + side-padding
.glw-section-(xxl…xxs)Vaste vert. padding varianten
.glw-section-heroHero hoogte + centrering
.glw-section-offsetOffset t.o.v. sticky header

🖼️Media

ClassBeschrijving
.glw-imgResponsieve basis-afbeelding
.glw-img--roundedRonde hoeken
.glw-img--shadowZachte schaduw
.glw-img--coverCover binnen container

🔘Buttons

ClassBeschrijving
.glw-btn-primaryPrimair (Elementor safe)
.glw-btn-secondarySecundair
.glw-btn-outlineOutline

✍️Forms

ClassBeschrijving
.glw-formForm-wrapper spacing
.glw-inputInputs, textarea, select
.glw-form--compactCompacte variant

🧭Navigatie

ClassBeschrijving
.glw-navHoofdmenu basis
.glw-nav--mobileMobiele varianten

📝Content & Rich Text

SelectorBeschrijving
.glw-contentTypo-defaults voor tekst
.glw-dividerDunne scheidingslijn
.glw-list-checkLijst met checks

🃏Cards

ClassBeschrijving
.glw-cardBasis kaart
.glw-card--shadowMet schaduw
.glw-card--hoverHover-lift
.glw-card--darkDonkere variant

🧰Utilities & Helpers

ClassBeschrijving
.u-hiddenVerbergen
.u-centerFlex center
.u-max-wMax-breedte helper

Animations

ClassBeschrijving
.glw-anim-fadeinFade-in (on-view)
.glw-anim-riseRise-in

Tip: voor complexe animaties liever Elementor Transitions/Transform gebruiken.

🌙Dark Mode

ClassBeschrijving
.glw-darkDark root (tokens swappen)
.glw-on-darkCorrecte contrast-tekst

🧩Custom CSS site

Plaats hier per project je unieke classes/tokens.

🧰 Tools (Performance, Design, SEO, Dev)

Handige links voor testen, design, performance, SEO en meer.

Categorie Naam Link Omschrijving
Testing & Performance PageSpeed Insights pagespeed.web.dev Test je snelheid en Core Web Vitals (Google).
GTmetrix gtmetrix.com Analyseer laadtijd en performance.
WebPageTest webpagetest.org Diepgaande performance-analyse.
Lighthouse Lighthouse SEO, performance en accessibility check (Chrome).
Pingdom Tools pingdom.com Snelheid en uptime tests.
Dareboost dareboost.com Performance + best practices check.
CSS & Design Clippy clippy CSS clip-path generator.
Animista animista.net Kant-en-klare CSS-animaties.
Keyframes keyframes.app Visuele CSS animation builder.
Neumorphism.io neumorphism.io Soft UI stijl generator.
Glassmorphism glassmorphism Frosted glass effecten.
Shadows Brumm shadows.brumm.af Mooie box-shadow generator.
Kleuren & Gradients Coolors coolors.co Kleurpaletten generator.
Color Hunt colorhunt.co Inspiratie voor kleurpaletten.
UI Gradients uigradients.com Mooie gradients verzamelen.
CSS Gradient cssgradient.io Online gradient generator.
MyColorSpace mycolor.space Automatische palet- en gradientmaker.
Paletton paletton.com Kleurentheorie tool en combinaties.
Fonts & Typography Google Fonts fonts.google.com Gratis en populaire webfonts.
Fontpair fontpair.co Combineer fonts slim.
Type Scale type-scale.com Typografie schalen met ritme.
Wordmark.it wordmark.it Voorbeeldteksten in je geïnstalleerde fonts.
Accessibility Wave wave.webaim.org Accessibility checker.
Axe DevTools axe devtools Accessibility testing in browser.
Contrast Checker contrast-ratio.com Check kleurcontrast (WCAG).
Coblis Coblis Kleurenblindheid simuleren.
Development Can I Use caniuse.com Browserondersteuning van CSS/JS features.
Regex101 regex101.com Reguliere expressies testen.
JSON Formatter jsonformatter.org JSON valideren en mooi tonen.
SVGOMG svgomg SVG’s optimaliseren voor web.
Lottie & Animations LottieFiles lottiefiles.com Gratis en premium Lottie-animaties.
Lordicon lordicon.com Animerende iconen met Lottie.
Haikei haikei.app SVG backgrounds en blobs.
UI Components CSS Buttons cssbuttons.io Voorbeeldbuttons met pure CSS.
Get Waves getwaves.io SVG wave generator.
Heroicons heroicons.com Gratis