#mm-root *, #mm-root *::before, #mm-root *::after { box-sizing: border-box; margin: 0; padding: 0; }
#mm-root {
--taupe: #5b534f;
--taupe-light: #8a7f7a;
--taupe-dark: #3d3532;
--cream: #f0ede5;
--cream-dark: #e2ddd3;
--accent: #9e8f85;
--white: #faf9f7;
--error: #b85c4a;
--success: #5a8a6e;
}#mm-root html { scroll-behavior: smooth; }#mm-root body {
font-family: Tahoma, sans-serif;
font-weight: 300;
background: var(--cream);
color: var(--taupe);
min-height: 100vh;
}#mm-root /* HERO */
.hero {
background: var(--taupe-dark);
padding: 3rem 1.5rem 2.5rem;
text-align: center;
}#mm-root .hero h1 {
font-family: Tahoma, sans-serif;
font-weight: 300;
font-size: clamp(1.9rem, 5vw, 2.8rem);
color: var(--cream);
line-height: 1.15;
margin-bottom: 0.8rem;
}#mm-root .hero h1 em { font-style: italic; color: #d4c9c0; }#mm-root .hero p {
font-size: 0.85rem;
color: #b0a8a2;
max-width: 400px;
margin: 0 auto;
line-height: 1.8;
}#mm-root .meet-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,0.07);
border: 0.5px solid rgba(255,255,255,0.15);
border-radius: 2px;
padding: 0.3rem 0.9rem;
font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #c4b9b2;
margin-top: 1.2rem;
}#mm-root /* STAP INDICATOR */
.steps-wrap {
background: var(--white);
border-bottom: 1px solid var(--cream-dark);
padding: 1rem 1.5rem;
position: sticky;
top: 0;
z-index: 10;
}#mm-root .steps {
display: flex;
align-items: center;
max-width: 540px;
margin: 0 auto;
}#mm-root .sdot {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
flex: 1;
position: relative;
}#mm-root .sdot::after {
content: '';
position: absolute;
top: 12px; left: 50%;
width: 100%; height: 1px;
background: var(--cream-dark);
z-index: 0;
}#mm-root .sdot:last-child::after { display: none; }#mm-root .dot {
width: 24px; height: 24px;
border-radius: 50%;
border: 1.5px solid var(--cream-dark);
background: var(--white);
display: flex; align-items: center; justify-content: center;
font-size: 0.65rem; font-weight: 500;
color: var(--taupe-light);
position: relative; z-index: 1;
transition: all 0.3s;
}#mm-root .dot.active { border-color: var(--taupe); background: var(--taupe); color: var(--cream); }#mm-root .dot.done { border-color: var(--success); background: var(--success); color: white; }#mm-root .slabel {
font-size: 0.58rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--taupe-light);
text-align: center;
}#mm-root .sdot.cur .slabel { color: var(--taupe); font-weight: 500; }#mm-root /* HOOFD LAYOUT */
.main {
max-width: 600px;
margin: 0 auto;
padding: 2rem 1.25rem 4rem;
}#mm-root .screen { display: none; }#mm-root .screen.on { display: block; }#mm-root /* SECTIE TITELS */
.stitle {
font-family: Tahoma, sans-serif;
font-weight: 400;
font-size: 1.5rem;
color: var(--taupe-dark);
margin-bottom: 0.2rem;
}#mm-root .ssub {
font-size: 0.8rem;
color: var(--taupe-light);
margin-bottom: 1.5rem;
line-height: 1.6;
}#mm-root /* PRODUCT KAARTJES */
.prod-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}#mm-root .prod-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 520px) {
.prod-grid { grid-template-columns: repeat(4, 1fr); }#mm-root }
.prod-card {
border: 1.5px solid var(--cream-dark);
border-radius: 8px;
overflow: hidden;
background: var(--white);
cursor: pointer;
transition: border-color 0.2s, transform 0.15s;
position: relative;
text-align: center;
}#mm-root .prod-card:hover { border-color: var(--taupe-light); transform: translateY(-2px); }#mm-root .prod-card.sel { border-color: var(--taupe); }#mm-root .prod-card.sel::after {
content: '✓';
position: absolute;
top: 6px; right: 8px;
font-size: 0.7rem;
color: var(--taupe);
background: rgba(250,249,247,0.85);
border-radius: 50%;
width: 18px; height: 18px;
display: flex; align-items: center; justify-content: center;
font-weight: 600;
}#mm-root .prod-img {
width: 100%;
aspect-ratio: 1;
overflow: hidden;
}#mm-root .prod-img.landscape { aspect-ratio: 4/3; }#mm-root .prod-img img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}#mm-root .prod-info {
padding: 0.65rem 0.5rem 0.75rem;
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}#mm-root .prod-card {
display: flex;
flex-direction: column;
}#mm-root .prod-name {
font-family: Tahoma, sans-serif;
font-size: 0.9rem;
color: var(--taupe-dark);
display: block;
text-align: center;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.15rem;
}#mm-root .prod-size { font-size: 0.65rem; color: var(--taupe-light); display: block; text-align: center; margin-bottom: 0.35rem; }#mm-root .prod-price { font-size: 0.82rem; font-weight: 500; color: var(--taupe); text-align: center; margin-top: auto; }#mm-root /* GELEGENHEID OPTIES */
.occ-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}#mm-root .occ-opt {
border: 1.5px solid var(--cream-dark);
border-radius: 8px;
overflow: hidden;
background: var(--white);
cursor: pointer;
transition: border-color 0.2s;
position: relative;
}#mm-root .occ-opt:hover { border-color: var(--taupe-light); }#mm-root .occ-opt.sel { border-color: var(--taupe); }#mm-root .occ-opt .occ-check {
position: absolute;
top: 6px; right: 8px;
font-size: 0.7rem;
color: var(--taupe);
background: rgba(250,249,247,0.85);
border-radius: 50%;
width: 18px; height: 18px;
align-items: center; justify-content: center;
font-weight: 600;
z-index: 2;
display: none;
}#mm-root .occ-opt.sel .occ-check {
display: flex;
}#mm-root .occ-img {
width: 100%;
aspect-ratio: 1;
overflow: hidden;
background: var(--cream);
display: flex;
align-items: center;
justify-content: center;
}#mm-root .occ-img img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}#mm-root .occ-img img.magneet-img {
object-fit: contain;
padding: 4px;
}#mm-root .occ-info { padding: 0.6rem 0.75rem 0.75rem; }#mm-root .occ-name {
font-family: Tahoma, sans-serif;
font-size: 0.95rem;
color: var(--taupe-dark);
display: block;
margin-bottom: 0.1rem;
}#mm-root .occ-desc { font-size: 0.7rem; color: var(--taupe-light); line-height: 1.4; }#mm-root /* KLEUR KEUZE */
.kleur-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-top: 1rem;
}#mm-root .kleur-opt {
border: 1.5px solid var(--cream-dark);
border-radius: 6px;
overflow: hidden;
cursor: pointer;
background: var(--white);
transition: border-color 0.2s, transform 0.15s;
text-align: center;
}#mm-root .kleur-opt:hover { border-color: var(--taupe-light); transform: translateY(-1px); }#mm-root .kleur-opt.sel { border-color: var(--taupe); }#mm-root .kleur-img {
width: 100%;
aspect-ratio: 1;
overflow: hidden;
}#mm-root .kleur-img img { width: 100%; height: 100%; object-fit: cover; display: block; }#mm-root .kleur-naam { font-size: 0.68rem; color: var(--taupe-light); padding: 0.35rem 0.25rem; display: block; }#mm-root /* UPLOAD */
.upload-zone {
border: 1.5px dashed var(--cream-dark);
border-radius: 8px;
padding: 1.75rem 1.5rem;
text-align: center;
background: var(--white);
cursor: pointer;
position: relative;
transition: border-color 0.2s, background 0.2s;
margin-bottom: 1rem;
}#mm-root .upload-zone:hover, #mm-root .upload-zone.drag { border-color: var(--taupe); background: #f0ece4; }#mm-root .upload-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }#mm-root .upload-hint { font-size: 0.82rem; color: var(--taupe-light); line-height: 1.7; }#mm-root .upload-hint strong { color: var(--taupe); }#mm-root .upload-preview { display: none; margin-top: 0.75rem; }#mm-root .upload-preview img { max-height: 110px; border-radius: 4px; border: 1px solid var(--cream-dark); }#mm-root .upload-fname { font-size: 0.72rem; color: var(--taupe-light); margin-top: 0.3rem; }#mm-root .upload-change { font-size: 0.72rem; color: var(--taupe-light); text-decoration: underline; cursor: pointer; margin-top: 0.3rem; display: block; }#mm-root /* FORM VELDEN */
.field { margin-bottom: 1.1rem; }#mm-root .lbl {
display: block;
font-size: 0.72rem; font-weight: 500;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--taupe); margin-bottom: 0.4rem;
}#mm-root .lbl .opt { font-weight: 300; text-transform: none; letter-spacing: 0; color: var(--taupe-light); font-size: 0.7rem; }#mm-root .req { color: var(--error); }#mm-root input[type=text], #mm-root input[type=email], #mm-root input[type=tel], #mm-root textarea {
width: 100%;
padding: 0.7rem 0.9rem;
border: 1px solid var(--cream-dark);
border-radius: 6px;
background: var(--white);
color: var(--taupe);
font-family: Tahoma, sans-serif;
font-size: 0.88rem; font-weight: 300;
outline: none;
transition: border-color 0.2s;
appearance: none;
}#mm-root input:focus, #mm-root textarea:focus { border-color: var(--taupe); }#mm-root input::placeholder, #mm-root textarea::placeholder { color: var(--accent); opacity: 0.5; }#mm-root textarea { resize: vertical; min-height: 85px; }#mm-root .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 420px) { .two-col { grid-template-columns: 1fr; }#mm-root }
/* SAMENVATTING */
.summary-card {
background: var(--white);
border: 1px solid var(--cream-dark);
border-radius: 8px;
overflow: hidden;
margin-bottom: 1.5rem;
}#mm-root .summary-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 0.6rem 1rem;
border-bottom: 0.5px solid var(--cream-dark);
font-size: 0.82rem;
}#mm-root .summary-row:last-child { border-bottom: none; }#mm-root .sum-k { color: var(--taupe-light); flex-shrink: 0; margin-right: 1rem; }#mm-root .sum-v { color: var(--taupe); text-align: right; word-break: break-word; }#mm-root .summary-total {
background: var(--cream);
padding: 0.75rem 1rem;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--cream-dark);
}#mm-root .summary-total span:first-child { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--taupe-light); }#mm-root .summary-total span:last-child {
font-family: Tahoma, sans-serif;
font-size: 1.4rem; color: var(--taupe-dark);
}#mm-root /* KNOPPEN */
.btn-row { display: flex; gap: 10px; margin-top: 1.5rem; }#mm-root .btn {
flex: 1; padding: 0.85rem;
border: 1.5px solid var(--cream-dark);
border-radius: 6px;
font-family: Tahoma, sans-serif;
font-size: 0.78rem; font-weight: 500;
letter-spacing: 0.1em; text-transform: uppercase;
cursor: pointer; transition: all 0.2s;
background: transparent; color: var(--taupe-light);
}#mm-root .btn:hover { border-color: var(--taupe-light); color: var(--taupe); }#mm-root .btn.primary {
background: var(--taupe); color: var(--cream) !important;
border-color: var(--taupe);
}#mm-root .btn.primary:hover { background: var(--taupe-dark); border-color: var(--taupe-dark); }#mm-root .btn.primary:disabled { background: var(--accent); border-color: var(--accent); cursor: not-allowed; }#mm-root /* FOUTMELDING */
.err {
display: none;
background: #f7ebe8; border: 1px solid #d4998a;
color: var(--error);
padding: 0.65rem 0.9rem;
border-radius: 6px; font-size: 0.8rem;
margin-top: 0.75rem; line-height: 1.5;
}#mm-root .err.on { display: block; }#mm-root /* SUCCESS */
.success-wrap {
display: none; text-align: center;
padding: 3rem 1rem 2rem;
}#mm-root .success-moon {
width: 64px; height: 64px; border-radius: 50%;
background: #eaf3ee;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 1.5rem;
}#mm-root .success-wrap h2 {
font-family: Tahoma, sans-serif;
font-weight: 400; font-size: 1.8rem;
color: var(--taupe-dark); margin-bottom: 0.6rem;
}#mm-root .success-wrap p {
font-size: 0.85rem; color: var(--taupe-light);
line-height: 1.9; max-width: 380px;
margin: 0 auto 1rem;
}#mm-root .success-detail {
background: var(--white); border: 1px solid var(--cream-dark);
border-radius: 8px; padding: 1rem 1.25rem;
font-size: 0.8rem; color: var(--taupe);
line-height: 1.7; max-width: 380px;
margin: 0 auto; text-align: left;
}#mm-root .success-detail strong { font-weight: 500; color: var(--taupe-dark); }#mm-root /* FOOTER */
.foot {
text-align: center; padding: 1.5rem 1rem;
border-top: 0.5px solid var(--cream-dark);
font-size: 0.72rem; color: var(--taupe-light);
}#mm-root .foot a { color: var(--taupe-light); text-decoration: none; }#mm-root .foot a:hover { color: var(--taupe); }
#mm-root #s1 .btn-row { display: none !important; }
#mm-root #s2 .btn-row .btn.primary { display: none; }
Persoonlijk Cadeau
Soms wil je iets geven dat écht van jou komt. Bij House of Moon kun je hier een gepersonaliseerd tegeltje of magneetje laten maken met jouw eigen foto, naam of tekst erop. Uniek, persoonlijk en een cadeau dat bijblijft.
Zo werkt het — in een paar stappen
Gebruik de besteltool hieronder om jouw persoonlijke item samen te stellen. Je kiest eerst je product, geeft de gelegenheid aan zoals een verjaardag, geboorte of bruiloft, en levert je eigen foto of tekst aan. Daarna vul je je gegevens in en verstuurt je de aanvraag. Monika neemt vervolgens contact met je op om alles te bevestigen en af te stemmen.
Liefs, Moon
1
Product2
Gelegenheid3
Foto & wens4
Gegevens5
VersturenKies je product
Welk formaat past het beste bij jouw wens?
Full color — eigen foto of afbeelding
Magneetje 7 × 5 cm 5,95
Tegeltje 10 × 10 cm 14,95
Tegeltje 15 × 15 cm 18,95
Tegeltje 15 × 20 cm 19,95
↑ Full color tegeltjes en magneetjes — jouw foto of afbeelding in alle kleuren afgedrukt op keramiek.
Tekst tegeltje 10 × 10 cm — één kleur tekst
Tekst tegeltje 10 × 10 cm — kies kleur in stap 2 8,95
↑ Tekst tegeltjes — jouw naam, quote of tekst in zwart of goud op een gekleurd tegeltje.
Kies een product om verder te gaan.
Volgende stap →
Wat is de gelegenheid?
Kies het soort aanvraag dat het beste past
✓
Eigen foto Jouw mooiste moment op een tegel of magneet
✓
Geboortetegeltje Van geboortekaartje naar blijvende herinnering
✓
Trouwtegeltje Van trouwkaartje naar een blijvende herinnering
✓
Tekst / naam Een naam, quote of simpel plaatje
✓
Foto + tekst Combineer een foto met jouw eigen tekst
Kies een achtergrondkleur
In welke kleur wil je de tegel hebben?
Kleur van de tekst
Wil je de tekst in zwart of in goud?
Zwart Klassiek en sterk contrast
Goud Warm en luxueus
Kies een gelegenheid om verder te gaan.
← TerugVolgende stap →
Jouw foto & wens
Upload je afbeelding en vertel wat je wilt
Foto of kaartje *
Klik om te uploaden of sleep je bestand hierheen
JPG, PNG of PDF — max. 10 MB
Ander bestand kiezen
Tekst op het product *
Lettervoorkeur (optioneel)
Bijzondere wens (optioneel)
Vul je wens in of upload een afbeelding om verder te gaan.
← TerugVolgende stap →
Jouw gegevens
Zodat Monika persoonlijk contact met je kan opnemen
Naam *
Telefoonnummer *
E-mailadres *
Vul je naam en e-mailadres in om verder te gaan.
← TerugNaar overzicht →
Controleer je aanvraag
Klopt alles? Dan versturen we je aanvraag naar Monika.
Prijs —
Er ging iets mis. Probeer opnieuw of mail info@houseofmoon.nl
← AanpassenAanvraag versturen
Aanvraag ontvangen!
Monika heeft je aanvraag ontvangen en neemt zo snel mogelijk persoonlijk contact met je op.
Wat gebeurt er nu?
Monika bekijkt je aanvraag en stuurt je een berichtje over de levertijd en eventuele details. Je betaalt pas nadat alles is bevestigd.
Vragen? Stuur een appje via WhatsApp of mail naar info@houseofmoon.nl
Monika bekijkt je aanvraag en stuurt je een berichtje over de levertijd en eventuele details. Je betaalt pas nadat alles is bevestigd.
Vragen? Stuur een appje via WhatsApp of mail naar info@houseofmoon.nl
Veelgestelde vragen over gepersonaliseerde Moon Made items
Wat kan ik laten personaliseren?Op dit moment kun je tegeltjes en magneetjes laten personaliseren. Je kunt kiezen voor een eigen foto, een geboortekaartje, een trouwfoto of een zelfgekozen tekst. Ook een combinatie van foto én tekst is mogelijk.
Welke afmetingen heeft een gepersonaliseerd tegeltje?
We maken gepersonaliseerde tegeltjes in twee formaten: 10x10 cm en 15x15 cm. Bij het invullen van de besteltool geef je aan welk formaat je wilt.
Hoe werkt de besteltool?
De besteltool op deze pagina begeleidt je stap voor stap. Je kiest eerst je product en formaat, geeft de gelegenheid aan zoals een verjaardag, geboorte of bruiloft en uploadt je foto of vult je tekst in. Daarna vul je je naam en contactgegevens in en verstuur je de aanvraag. Monika neemt vervolgens contact met je op om alles te bevestigen.
Welke bestandsindeling moet mijn foto hebben?
Upload je foto bij voorkeur als JPG of PNG bestand. Hoe hoger de resolutie, hoe scherper het eindresultaat. Een foto van minimaal 1 megapixel geeft het beste resultaat.
Kan ik een voorbeeld zien voordat het gemaakt wordt?
Ja, na ontvangst van je aanvraag maakt Monika een digitaal voorbeeld voor je. Je geeft goedkeuring voordat het item definitief wordt gemaakt.
Hoe lang duurt het maken van een gepersonaliseerd item? De gemiddelde maaktijd is 1 tot 3 werkdagen na goedkeuring van het digitale voorbeeld. Bij speciale gelegenheden zoals feestdagen kan dit iets langer zijn. Heb je een specifieke deadline? Vermeld dit dan in je aanvraag.
Na verzending is de levertijd afhankelijk van de bezorgdienst. Wij hebben hier helaas geen invloed op. Houd hier rekening mee als je een item op een bepaalde datum in huis wilt hebben — bestel dan op tijd!
De prijs is afhankelijk van het formaat en het type product. Je ziet de prijs automatisch tijdens het invullen van de besteltool.
Kan ik meerdere tegeltjes tegelijk bestellen?
Ja, dat is mogelijk. Vul bij je aanvraag aan hoeveel stuks je wilt en of ze allemaal hetzelfde of verschillend moeten zijn. Monika neemt contact op om de details door te spreken.
Zijn gepersonaliseerde items ook te retourneren?
Nee. Omdat elk item speciaal op maat voor jou wordt gemaakt, is retourneren of ruilen helaas niet mogelijk. Zorg daarom dat je foto of tekst correct is voordat je de aanvraag instuurt. Bij twijfel kun je altijd eerst contact opnemen.
Ik heb een vraag die hier niet bij staat, wat nu?
Geen probleem! Stuur een bericht via WhatsApp of e-mail naar info@houseofmoon.nl en Monika helpt je graag verder.
Nieuwsbrief House of Moon
Meld je aan voor de nieuwsbrief, ontvang 10% korting en blijf op de hoogte!
Naam:
Email
Aanmelden