Mijn website (3D interface)

Status
Niet open voor verdere reacties.
S

Skipito

Gebruiker
Lid geworden
3 jul 2009
Berichten
81
Beste,

Ik heb in een 3D programma een kamer gemaakt waarin objecten zijn gezet. De bezoeker kan met behulp van deze objecten navigeren, of ook een menu gebruiken (mocht hij of zij de weg niet vinden of geen afbeeldingen ingeschakeld hebben op zijn browser).

Nog een reden waarom ik een menu heb toegevoegd bovenaan de website is omdat ik geen mystery meat navigatie website wil. Zonder menu is dat het wel, maar ik wil nog steeds dat leuke interactieve gevoel behouden.

Ik weet dat mijn website veel rotzooi bevat (zoals het prikbord & radio). Deze waren eigenlijk als test bedoelt voor een project voor school.

Graag zou ik willen weten wat jullie ervan vinden en of het ook duidelijk is.

Heel erg bedankt!
 
Laatst bewerkt:
Deze heb ik al eens eerder voorbij zien komen! :eek:

Nogsteeds leuk, gelukkig heeft het html-link-fallback. Jammergenoeg werkt de contact pagina niet zonder plaatjes, maar de rest heeft wel redelijke fallback.

Als ik echter stylesheets uitzet blijft de site PRECIES hetzelfde. Je moet dus CSS gebruiken, ipv. tables en inline stijl.

Ohja, en mischien is het een idee om headers te gebruiken (h1 - h6). Je about pagina is in mijn fangs echt één grote brij text.
 
Vegras zei:
Deze heb ik al eens eerder voorbij zien komen! :eek:

Nogsteeds leuk, gelukkig heeft het html-link-fallback. Jammergenoeg werkt de contact pagina niet zonder plaatjes, maar de rest heeft wel redelijke fallback.

Als ik echter stylesheets uitzet blijft de site PRECIES hetzelfde. Je moet dus CSS gebruiken, ipv. tables en inline stijl.

Ohja, en mischien is het een idee om headers te gebruiken (h1 - h6). Je about pagina is in mijn fangs echt één grote brij text.
Klik om te vergroten...

Hartelijk dank voor je reactie!!! :)
Inderdaad, ik heb vaker gelezen dat CSS beter is dan die tables. Ik ben nu een beetje dreamweaver aan het leren zodat ik het plaatje naar een CSS standaard kan ''exporteren''.

De website zelf is gemaakt met 3DSmax, maar gesliced in Photoshop & imageready. Deze exporteert het naar een HTML met tables en helaas javascript waar ik ook niet echt blij mee ben.
Ik hoop dat ik met dreamweaver een betere kan maken.

Ook bedankt voor je tip @ contact pagina. Dat is namelijk een hele plaatje ipv tekst! Dit ga ik ook zsm fixen.
 
Als je het helemaal goed wilt doen, leer dan HTML en CSS zelf in plaats van programma's leren die dat voor je doen. Krijg je een stuk betere kwaliteit sites.
 
Vegras zei:
Als je het helemaal goed wilt doen, leer dan HTML en CSS zelf in plaats van programma's leren die dat voor je doen. Krijg je een stuk betere kwaliteit sites.
Klik om te vergroten...

Klopt inderdaad. :)

Maar ik heb een klein vraag, zoals je al kan zien is de website zelf volledig met tables geexporteerd. Ik kan dit ook mbv imageready naar een div exporteren (css). Natuurlijk is de code dan niet top.

Alleen 1 ding:
Ik bewerk de site nooit meer qua template zelf omdat het een 3d kamer achtig ding is. Ofterwel, als ik de ''layout'' zelf verander, moet ik de kamer zelf eerst weer modellen en bewerken en daarna zoiezo slicen.
Ik bewerk voornamelijk alleen de tekst zelf die in de tabel zit. De layout/template/kamer raak ik dus nooit aan.

Zou ik CSS dan wel gebruiken of niet? Of zou ik het gebruiken speciaal voor die divs?

Alvast bedankt!

Edit
Mag ik vragen met welke browser u werkt zodat ik ook de stylesheet kan uitschakelen? :)
 
Laatst bewerkt:
Ik gebruik Firefox met de addons 'web developer' en 'firebug'. Met 'web developer' kan je de css uitschakelen.

Het hele idee is dit: je HTML is de daadwerkelijke inhoud, en met CSS maakt je het op. Idealiter maak je dus een website door eerst alleen HTML te gebruiken, en deze dan met CSS op te maken.

Table-layout is zo 1997, dat kan je eigenlijk niet meer maken.

Je 3d kamer kan je ook met een image map maken; die zijn speciaal voor dat soort dingen gemaakt. En dan hoef je niet eens tabellen te gebruiken; je geeft 1 plaatje aan en codeert daarna de 'randen' van de klikbare items.



:thumb:
 
Vegras zei:
Ik gebruik Firefox met de addons 'web developer' en 'firebug'. Met 'web developer' kan je de css uitschakelen.

Het hele idee is dit: je HTML is de daadwerkelijke inhoud, en met CSS maakt je het op. Idealiter maak je dus een website door eerst alleen HTML te gebruiken, en deze dan met CSS op te maken.

Table-layout is zo 1997, dat kan je eigenlijk niet meer maken.

Je 3d kamer kan je ook met een image map maken; die zijn speciaal voor dat soort dingen gemaakt. En dan hoef je niet eens tabellen te gebruiken; je geeft 1 plaatje aan en codeert daarna de 'randen' van de klikbare items.



:thumb:
Klik om te vergroten...

Heel erg bedankt!!! Ik weet genoeg. :D :)
 
Nog even een kleine tip:

je terug knop gebruikt javascript ipv een gewone link waardoor de navigatie van je website afhangt van js wat niet echt een stabiele factor is
 
Hoi Skipito,
Ik blijf even op de eerste pagina (over de tabellen en CSS-gebruik zijn al eerdere reacties geweest, daar sluit dit op aan).
Mijn eerste reactie op een site-check vraag is altijd mijn html-check vraag: wat zegt de html-validator?
Even kijken ... AI! :shocked: Die ene fout is dat het zó'n incorrecte html is, dat de validator zijn werk niet kan doen. Er kunnen verder dus nog tig html-fouten in zitten.
Op naar het bezichtigen van de html-code. Inderdaad, dat is wel shocking. Hou je vast!
  • Er is geen DOC-type declaratie.
  • Zonder boe of bah wordt begonnen met het invoegen van twee tabellen.
  • Die twee tabellen hebben geen <tr>'s, geen </td>, geen </tr> en geen </table>. En ze zijn leeg.
  • Midden in de <head> staat een <body bgcolor="000000">.
  • Midden in de <head> staan tekst-regels met links, en nog een <body link="white" alink="white" vlink="white">
  • Na de <head> komt nog een <body bgcolor="#FFFFFF" ...>
  • Er zitten flink wat afgekeurde, ongeldige en niet crossbrowser codes in. En missende eind-tags.
Samengevat: deze pagina is een groot wonder ... hij komt nog op het scherm ook! :d

Dan de tabel met "het betere slice-werk" (voorzien van de nodige "spacer.gif" cellen):

amplaza-screen-old.png

Met de mouseover-images mee zijn er 24 images voor nodig.
Maar het totaal-plaatje hoeft helemaal niet gesliced te worden, en de 5 hover-plaatjes zijn genoeg (= samen 6 i.p.v. 24), als je het met CSS aanpakt:

amplaza-screen-nw.png

De oude lap tabel-code (110 html-regels) ...:
HTML: 
<!-- ImageReady Slices (imagereadyindex.psd) -->
<table id="Table_01" width="757" height="444" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="7">
			<img src="images/index_01.jpg" width="531" height="69" alt=""></td>

		<td rowspan="6">
			<a href="/portfolio"
				onmouseover="changeImages('index_projector', 'images/index_projector-over.jpg'); return true;"
				onmouseout="changeImages('index_projector', 'images/index_projector.jpg'); return true;"
				onmousedown="changeImages('index_projector', 'images/index_projector-over.jpg'); return true;"
				onmouseup="changeImages('index_projector', 'images/index_projector-over.jpg'); return true;">
				<img name="index_projector" src="images/index_projector.jpg" width="225" height="280" border="0" alt=""></a></td>
		<td>
			<img src="images/spacer.gif" width="1" height="69" alt=""></td>
	</tr>
	<tr>
		<td colspan="4" rowspan="2">
			<a href="/billboard"
				onmouseover="changeImages('index_prikbord', 'images/index_prikbord-over.jpg'); return true;"
				onmouseout="changeImages('index_prikbord', 'images/index_prikbord.jpg'); return true;"
				onmousedown="changeImages('index_prikbord', 'images/index_prikbord-over.jpg'); return true;"
				onmouseup="changeImages('index_prikbord', 'images/index_prikbord-over.jpg'); return true;">

				<img name="index_prikbord" src="images/index_prikbord.jpg" width="216" height="161" border="0" alt=""></a></td>
		<td colspan="3">
			<img src="images/index_04.jpg" width="315" height="80" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="80" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/index_05.jpg" width="24" height="86" alt=""></td>

		<td rowspan="3">
			<a href="/computer"
				onmouseover="changeImages('index_computer', 'images/index_computer-over.jpg'); return true;"
				onmouseout="changeImages('index_computer', 'images/index_computer.jpg'); return true;"
				onmousedown="changeImages('index_computer', 'images/index_computer-over.jpg'); return true;"
				onmouseup="changeImages('index_computer', 'images/index_computer-over.jpg'); return true;">
				<img name="index_computer" src="images/index_computer.jpg" width="129" height="91" border="0" alt=""></a></td>
		<td rowspan="4">
			<img src="images/index_07.jpg" width="162" height="131" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="81" alt=""></td>
	</tr>
	<tr>

		<td colspan="3" rowspan="3">
			<img src="images/index_08.jpg" width="152" height="50" alt=""></td>
		<td rowspan="4">
			<a href="/radio"
				onmouseover="changeImages('index_radio', 'images/index_radio-over.jpg'); return true;"
				onmouseout="changeImages('index_radio', 'images/index_radio.jpg'); return true;"
				onmousedown="changeImages('index_radio', 'images/index_radio-over.jpg'); return true;"
				onmouseup="changeImages('index_radio', 'images/index_radio-over.jpg'); return true;">
				<img name="index_radio" src="images/index_radio.jpg" width="64" height="56" border="0" alt=""></a></td>
		<td>
			<img src="images/spacer.gif" width="1" height="5" alt=""></td>
	</tr>
	<tr>

		<td rowspan="3">
			<img src="images/index_10.jpg" width="24" height="51" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="5" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/index_11.jpg" width="129" height="46" alt=""></td>
		<td>

			<img src="images/spacer.gif" width="1" height="40" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/index_12.jpg" width="70" height="35" alt=""></td>
		<td rowspan="2">
			<a href="/contact"
				onmouseover="changeImages('index_contact', 'images/index_contact-over.jpg'); return true;"
				onmouseout="changeImages('index_contact', 'images/index_contact.jpg'); return true;"
				onmousedown="changeImages('index_contact', 'images/index_contact-over.jpg'); return true;"
				onmouseup="changeImages('index_contact', 'images/index_contact-over.jpg'); return true;">
				<img name="index_contact" src="images/index_contact.jpg" width="62" height="35" border="0" alt=""></a></td>
		<td>

			<img src="images/index_14.jpg" width="20" height="6" alt=""></td>
		<td colspan="2">
			<img src="images/index_15.jpg" width="387" height="6" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="6" alt=""></td>
	</tr>
	<tr>
		<td colspan="6">
			<img src="images/index_16.jpg" width="624" height="29" alt=""></td>

		<td>
			<img src="images/spacer.gif" width="1" height="29" alt=""></td>
	</tr>
	<tr>
		<td colspan="8">
			<img src="images/index_17.jpg" width="756" height="129" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="129" alt=""></td>
	</tr>

</table>
<!-- End ImageReady Slices -->
... kan simpelweg worden:
HTML: 
<body id="home">

<div id="header">
	<h1>AM-PlaZa</h1>
	<ul>
		<li><a class="home" href="amplaza_sitecheck-new.htm">Home</a></li>
		<li><a class="about" href="amplaza_about.htm">About</a></li>
		<li><a class="portfolio" href="amplaza_portfolio.htm">Portfolio</a></li>
		<li><a class="contact" href="amplaza_contact.htm">Contact</a></li>
	</ul>
	<p>or move your cursor across the room to enter the menu</p>
</div>
		
<div id="content">
	<ul>
		<li><a id="computer" title="Home" href="amplaza_sitecheck-new.htm">Home</a></li>
		<li><a id="prikbord" title="About" href="amplaza_about.htm">About</a></li>
		<li><a id="beamer" title="Portfolio" href="amplaza_portfolio.htm">Portfolio</a></li>
		<li><a id="stekker" title="Contact" href="amplaza_contact.htm">Contact</a></li>
		<li><a id="radio" title="Music"  href="amplaza_radio.htm">Music</a></li>
	</ul>
</div>

<div id="footer">
	<p>Copyright © 2010 AM-PlaZa - All Rights Reserved</p>
</div>

</body>
thats-all-folks.gif
Waar is het javascript gebleven? Weg! :)
Javascript mag gerust uit staan, want de mouseovers worden met CSS-hovers geregeld.
En als CSS uit staat? Dan blijft er een keurige tekstpagina over:

amplaza-no-css.gif

Harde bewijzen van dit alles? ;)
Met vriendelijke groet,
CSShunter

PS: Het zou handig zijn als er dezelfde links bovenaan staan als in het plaatjesgedeelte.
 
Beste...

Dat is geniaaaal!!!! Ik zit nu serieus met een bigsmile te kijken.. XD Wooooowww!!!!:D:D:D:d:d:shocked::shocked::thumb:
Zoo bedankt voor deze grote tip!!!
Is dit gewoon uit het hoofd gemaakt of met een programma XD? Dit is gewoon te gek. Ik had niet gedacht om het plaatje als kamer achtergrond te gebruiken en gewoon de links daarop te zetten. Zeer zeer zeeeeeeeer vet dit!!!! Zonder javascript zelfs!!!:shocked::D:D:D

Ik was al een tijdje bezig met een vernieuwing (met css) en helaas wel javascript..

www.am-plaza.com/alleswerkend

Als u hier bijvoorbeeld over ''contact'' heen gaat in het menu ziet u dat het plaatje in de kamer gaat gloeien. Dit is een verbetering ten opzichte van ''or move your mouse over'' etc.
Ik neem aan dat dit mogelijk is in CSS toch? Daarvoor heb je wel Javascript nodig? Ach anders skip ik dit idee gewoon :p.

Nogmaals ontzettend veel bedankt!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! :D:D:D

csshunter = Superman
Klik om te vergroten...
Helemaal waar.:cool:
 
Laatst bewerkt:
Vervolg!

@A Search en Skipito: dank voor de loftrompetten. Ik vind het heel leuk (als ik tijd ervoor heb: nu even wel) om html/css-mogelijkheden te laten zien aan de hand van een voorbeeld uit de levende praktijk. Wat ik ontdekt heb, komt ook voor 75% van internet (de rest is experimenteren) - zo doe ik weer eens wat terug. ;)

Ik was nog even bezig met wat finishing touch, want ik zag nog wat dingetjes die verbeterd kunnen worden.
In m'n testpagina werden voor de css-hovers 5 plaatjes gebruikt. Met de zogenaamde "css-sprite" techniek (artikeltje en voorbeeld in de praktijk) kan het er ook één zijn. Dit werkt als volgt:
  • Je maakt één plaatje waar alle hovers tegelijk in zitten. Wat niet afwijkt van de normale kleuren, wordt transparant gemaakt (dat scheelt weer een aantal kB's). Daarvoor is een transparante gif gebruikt. Deze.
  • Met css rangeer je de verschillende onderdelen naar hun positie. Het hover-plaatje wordt als achtergrond-img van de links in het plaatje gebruikt, dan valt bij een bepaalde link alles weg wat buiten het link-oppervlak zit. Het link-oppervlak werkt hier als een patrijspoort, waardoor je naar (een deel van) de achtergrond-img kijkt. Zie ook artikeltje: De patrijspoort-theorie.
  • Overigens heb ik het link-oppervlak steeds wat groter dan het hover-plaatje gemaakt, dan is het voor de bezoeker makkelijker om bij een link te komen. Screenshotje met de hover-oppervlakken. Daarbinnen dus het rangeren met de background-posities (makkelijkste methode: proefondervindelijk in de browser bepalen, dan op de pixel precies uit te mikken).
Nu hebben we dus nog maar 4 bestandjes: de html, het css-stylesheet, en de twee images (normaal/hover). :)
  • Om geen wachttijd te hebben als je de eerste keer over iets hovert (bij de volgende hovers is het ene hoverplaatje al gedownload!), is het hover-img al meteen bij het laden van de pagina onzichtbaar binnengehaald. D.w.z. een "css-preload", door het hover-plaatje als "buiten beeld vallend achtergond-img" in te monteren in de <ul> van het rijtje links in de #content; zie stylesheet.
Al met al is de pagina enorm veel sneller geworden! Dit was 'm:


(Daar zitten de javascript mouseover-images nog niet bij, want die kan dit tooltje niet zien.)

En dit is 'm geworden:


Verder met a:focus en a:active in het stylesheet nog even in orde gemaakt dat je ook met alleen de tab-toets (gevolgd door Enter) de links in het plaatje kan bedienen. Zo is de pagina ook mooi toegankelijk voor mensen die geen muis kunnen hanteren. Test een willekeurige internet-pagina: leg de muis op z'n kop, en druk steeds de tab-toets in. See what happens! Als je geen verspringende links op het scherm ziet, is de pagina zonder muis niet te bedienen. Terwijl dat toch zo makkelijk zo te maken is...

Kortom:
Nu de vragen!
Is dit gewoon uit het hoofd gemaakt of met een programma?
Klik om te vergroten...
Ik ben al een jaar of 6/7 met css aan het pielen, en kwam tot de conclusie: tegen zelf coderen kan geen programma op. Daarom rechtstreeks in de broncode gemaakt. Vroeger wel eens FrontPage gebruikt, maar met een grote boog weggegooid; nooit een html-editor gekocht: lekker goedkoop ook.
Mijn programma heet: Kladblok! :d
D.w.z. de betere versie Notepad++.

www.am-plaza.com/alleswerkend Als u hier bijvoorbeeld over ''contact'' heen gaat in het menu ziet u dat het plaatje in de kamer gaat gloeien. Dit is een verbetering ten opzichte van ''or move your mouse over'' etc.
Ik neem aan dat dit mogelijk is in CSS toch? Daarvoor heb je wel Javascript nodig? Ach anders skip ik dit idee gewoon.
Klik om te vergroten...
Ja, dat kan met javascript, maar het kan ook met css. :)
Dat is dan een andere css-hover techniek, waarmee je iets op een willekeurig plek kunt laten verschijnen als je over een link gaat. Dit is bedacht door Eric Meyer, één van de oer-guru's van css:
In het tweede voorbeeld zijn het geen aanklikbare links, maar die zijn er gauw van gemaakt (zie broncode). Bij beide voorbeelden staan de plaatjes steeds op dezelfde plaats, maar ook dat is te verhelpen: alweer met css-positionering (in dit geval: van de <span>).
Zo zie je maar weer: met css kan (bijna) alles! :love:

Met vriendelijke groet,
CSShunter

O ja, nog een tip uit de fotografie/schilderswereld: op het platte vlak lijken dingen dichterbij als ze lichter zijn. Bij hovers moet het voorwerp er uit springen, dus maak je het lichter, dan komt het naar voren. Met een donkere hover druk je iets naar achteren.
 
Laatst bewerkt:
Dit is echt ongelooflijk.. Ik wist niet eens dat dit mogelijk is!!! En kijk uw kleine html script t.o.v. de mijne. Zo netjes en perfect!:shocked::cool::cool::cool:D:D

Damn! Dit ziet er ook echt ingewikkeld uit eigenlijk. Ik kan nog steeds niet geloven dat dit gewoon zonder programma is gemaakt hahaha XD:D. Heeft u de plaatjes (de hover uit het eerste voorbeeld) gewoon met de hand gepotioneerd? Dus of u gerekend hebt met de coordinaten of is dit gewoon trial en error? :o Echt super vet!!!!!!

En dan het idee om de hovers op 1 plaatje te zetten met een transparante achtergrond. Hoe verzint u dit. XD:D:D:cool: Zoo vet.

Helaas ben ik echt een noob in CSS. Ik was al helemaal blij en rond aan het rennen dat ik de mouseovers kon besturen via de menu. En nu ik dit zie denk ik whaaaat. XD:d:d:d Echt ingwikkeld maar vet. XD Ik moet dit echt leren.

Heeeeeeeeeeeeeeeeeeeeeeeeeeeeel heeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeel heeeeel erg bedankt voor je tijd en moeite CSShunter!!!!!!!!!!!!!!!!!!!:cool::cool::cool::cool::cool:
Dit heeft me echt zeker geholpen!!!!!!!!!!!!!!!!!! Echt top!! :):D :) dank je wel.
 
Joho! CSS is :cool:
Heeft u de plaatjes (de hover uit het eerste voorbeeld) gewoon met de hand gepotioneerd? Dus of u gerekend hebt met de coordinaten of is dit gewoon trial en error?
Klik om te vergroten...
Zeg maar je tegen u. ;)
De truc is om alles zo veel mogelijk in één plaatjesbestand aan te maken in een tekenprogramma dat laagjes boven elkaar kan vertonen. D.w.z. het achtergrondplaatje als laagje onderop, en dan per hover een plaatje in een laagje erboven. Ik doe dat met PaintShopPro (een gratis ouwe nr.6; meer heb ik niet nodig), het kan ook met Photoshop of een ander programma.
Ik ben begonnen met een screenshot van jouw pagina. Dan hoefde ik alle geslicede afbeeldingen niet zelf aan elkaar te plakken. Ik had natuurlijk niet het origineel, dus moest het doen met je jpg's die de afbeelding vormden. Die in een aantal stadia wat opgepoetst, zodat het als één plaatje weer als nieuwe jpg gecomprimeerd kon worden (zonder teveel verlies aan kwaliteit).
Iets verkleind:
amplaza-psp-start.jpg

Toen in verschillende laagjes de hover-varianten:
amplaza-psp-hover.jpg

Toen in PSP de gele randjes van de hover-oppervlakjes ingetekend/vastgesteld, en opgemeten. Dat geeft de ruwe afstand van elk hover-oppervlak tot de linkerbovenhoek, bv. voor de computer-hover:
amplaza-psp-position.jpg

Het gele randje kan je tijdelijk in de css opnemen met #content a { outline: 1px dotted yellow; } om te controleren of je goed zit. Even online bekijken, en eventueel de margins bijstellen met trial and error. Maar de errors zullen niet heel erg groot zijn.
Op dezelfde manier doe je de hover background-posities.
Tenslotte haal je de tijdelijke randjes weer weg, en check je of alles nog goed zit. Eventueel nog 1 pixeltje opschuiven ofzo, en: klaar!

Het is dus een combi van tekenwerk, eenvoudige meetkunde, logische volgorde, en weten hoe de css-regeltjes in elkaar zitten. Het laatste is het ingewikkeldst. Vooral in het begin van het bestuderen van css komt er heel veel tegelijk op je af. Maar later wordt het allemaal (bijna) "vanzelfsprekend", en als je eenmaal de smaak te pakken krijgt, laat het je niet meer los!
Voor het betere begrip kan je er ook altijd de css-specificaties op na slaan (hoewel hun taalgebruik even wennen is). En ken je deze al? En deze? Aan te bevelen!

Succes verders!
CSShunter

[edit]O ja, en bij alles: de Golden Rules. Alles stukje voor stukje, en steeds maar weer testen-testen-testen![/edit]
 
Laatst bewerkt:
Suppppppppper!!!!!!!!!!!! :O :D :D Heeeeeeeeeeeeeel heeeeeel heeeeeeeeeeeeeel erg bedankt :D:D:D:D. Je bent de beste. :thumb::thumb::thumb::cool:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan