Op deze pagina kun je de logo's van de deelnemers downloaden om te plaatsen op je website.

enkhuizermotorclub.png
haagsemotorclub.png
motortoerclublimburg.png
motorclubhoogeveen.png

Het heeft de voorkeur om elkaars logo op een aparte pagina op de website te zetten. Dus liever niet tussen logo's van sponsors of andere links. Een effectieve naam voor de pagina titel is: Vrienden Met menunaam: vrienden (https://www.jewebsite.nl/vrienden) Zo houden we een klein beetje uniformiteit waardoor we de webring toch een beetje onderscheiden.

---

Code

De onderstaande code zet de logo's overzichtelijk en responsive in een kader. Je kunt onderstaande code kopieren en plakken naar de pagina op je website. Maar je bent hier natuurlijk volledig vrij in. Hou er rekening mee dat als er een deelnemer bijkomt, de code aangepast wordt. Tot we 12 deelnemers hebben. Je ontvangt automatisch een mailtje als er een update staat.

<!-- CODE MOTORCLUB WEBRING -->

<style>
.h1 {font-size:11px; font-weight:bold; color:rgb(212,92,46);}
.mwrTile {position:relative; background-color:rgb(255,255,255); border:1px solid rgb(64,64,64); 
 -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; color:rgb(0,0,0,1.0); padding:1px; height:155px;}
.mwrTile:hover {border:2px solid rgb(212,92,46);}
.mwrTiles {max-width:1200px; margin:0 auto; display:grid; grid-gap:5px;}
.mwrTileMiddle {margin:0; padding-top:10px; position:absolute; top:50%; left:50%; -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%);}
.mwrZoom {transition:transform .2s;}
.mwrZoom:hover {transform:scale(1.0);}
.mwrFade {filter: grayscale(0%);}
.mwrFade:hover {filter: grayscale(0%);}
.mwrHead { text-align:center; font-weight:normal; color:rgb(0,0,0); font-size:10px; padding-top:1px;}
@media (min-width:600px) {.mwrTiles {grid-template-columns:repeat(2, 1fr);}}
@media (min-width:750px) {.mwrTiles {grid-template-columns:repeat(3, 1fr);}}
@media (min-width:900px) {.mwrTiles {grid-template-columns:repeat(4, 1fr);}}
</style>

<h1 class="h1">JOUW WEBSITE NAAM - Vrienden</h1>
<div class="mwrTiles">

<!-- FIRST ROW OF FOUR -->
 <div onclick="window.open('https://www.motorclubhoogeveen.nl', '_vrienden');" style="cursor:pointer;"  class="mwrTile">
  <div class="mwrHead">Drenthe</div>
  <div class="mwrTileMiddle">
   <img src="https://motorclubwebring.nl/logos/motorclubhoogeveen.png" 
   class="mwrFade mwrZoom" width="120" alt="Motor Toer Club Limburg is vriend van ons" /><br />
  </div>
 </div>
 
 <div onclick="window.open('https://enkhuizermotorclub.nl', '_vrienden');" style="cursor:pointer;" class="mwrTile" />
  <div class="mwrHead">Noord Holland</div><br />
  <div class="mwrTileMiddle">
   <img src="https://motorclubwebring.nl/logos/enkhuizermotorclub.png" 
   class="mwrFade mwrZoom" width="125" alt="De Enkhuizer Motorclub is vriend van ons" /><br />
  </div>
 </div>
 
 <div onclick="window.open('https://www.motortoerclublimburg.nl', '_vrienden');" style="cursor:pointer;"  class="mwrTile">
  <div class="mwrHead">Limburg</div>
  <div class="mwrTileMiddle">
   <img src="https://motorclubwebring.nl/logos/motortoerclublimburg.png" 
   class="mwrFade mwrZoom" width="130" alt="Motor Toer Club Limburg is vriend van ons" /><br />
  </div>
 </div>
 
 <div onclick="window.open('https://www.haagsemotorclub.nl', '_vrienden');" style="cursor:pointer;"  class="mwrTile">
  <div class="mwrHead">Zuid Holland</div>
  <div class="mwrTileMiddle">
   <img src="https://motorclubwebring.nl/logos/haagsemotorclub.png" 
   class="mwrFade mwrZoom" width="132" alt="Haagse Motor Club is vriend van ons" /><br />
  </div>
 </div>
 <!-- END -->

 <!-- SECOND ROW OF FOUR -->
 <!-- END -->

 <!-- THIRD ROW OF FOUR -->
 <!-- END -->

</div>
<!-- EIND CODE HAVE A NICE LIFE -->

---

Voorbeeld



Je kunt de volgende instellingen wijzigen in de <style> .. </style> tag van je code:

h1

font-size:11px; color:rgb(255,255,255,1.0) Hiermee verander je de kleur en de lettergrootte boven de tegels. Je kunt hier een kleur kiezen.

mwrTile

background-color: rgb(255,255,255,1.0) Achtergrond van de tegels RGB 255 255 255 = wit Als je geen waarde invult dan is deze tranparant en dus de achtergrondkleur van je website. De logo's moeten dan ook wel een transparante achtergrond hebben. Met height:155 px wijzig je de hoogte van de tegel.
color: rgb(0,0,0,1.0)) De tekstkleur in de tegels. RGB 0 0 0 = zwart Als je geen waarde invult dan wordt de textkleur van je website gebruikt

border:1px solid rgb(64,64,64,0.6) Hiermee kun je de rand van de tegel veranderen. 1 px Solid is de dikte van rand. RGBa de kleur.

mwrTile:hover

border: 1px solid rgba(212,92,46,1.0); De kleur van de rand om de tegel als je er met de muis overheen (hover) beweegt. Meestal gebruik je de kleur die past bij de huisstijl van de website stijl.

mwrZoom:hover

transform:scale(1.1) Dit zorgt ervoor dat het logo iets groter wordt als je er met de muis over heen (hover) beweegt. Bij scale(1.0) blijft het logo zoals het was.

mwrFade

filter: grayscale(0%) Dit zorgt ervoor dat het logo in kleur wordt weergegeven. grayscale(100%) is het logo in zwart/wit.

mwrFade:hover

filter: grayscale(0%) Dit zorgt ervoor dat het logo in kleur wordt weergegeven als je er met de muis over heen (hover) beweegt. Als je de vorige optie op grayscale(100%) dan onstaat er een leuk effect.

head

font-weight:bold Hiermee maak je een de letters vet. font-weight:normal Is normaal. (duh;) color:rgb(0,0,0) Hiermee geef je de letters een andere kleur. Let op deze tekst moet nog worden aangepast.

En de volgende instellingen in de <div mwrTileMiddle> .. </div>

img src - Het path en de naam van het logo bestand.
img alt - Een omschrijving van het logo.
img width - Hier kun je het formaat van het logo wijzigen zodat ze allemaal even hoog zijn.

Je bent vrij om het logo van Motorclub Webring te gebruiken. Het logo is zwart/wit maar je kunt deze stylen met de css tag: <img src="images/mcwr.png" style="filter: opacity(0.9) drop-shadow(0 0 0 red);" width="130">