toolbox grid & video

socialmediabuttons

"<div style="text-align:right; padding:50px"><h2>deel deze pagina:</h2><div class="socialsharelinks"><a class="socialsharelinks__link facebook applycolor js-share-page-facebook" href="#"><i class="fab fa-facebook-square"></i></a> <a class="socialsharelinks__link twitter applycolor js-share-page-twitter" href="#"><i class="fab fa-twitter-square"></i></a> <a class="socialsharelinks__link linkedin applycolor js-share-page-linkedin" href="#"><i class="fab fa-linkedin"></i></a> <a class="socialsharelinks__link whatsapp applycolor js-share-page-whatsapp" href="#"><i class="fab fa-whatsapp-square"></i></a></div></div>"

gekleurde balk met logo

"<div style="text-align:center; padding:30pt 6pt 30pt 6pt; background-color:#019fcb;" width="100%"><img alt="" border="0" height="auto" src="https://www.rotary.nl/d1590/nieuws/Reservemap/logo/1590-lockup-t2324-rgb.png" style="width:50%; margin:0pt 0pt 0pt 0pt; clear:both"/></div>"

grid

<style>

.grid-container {

  display: grid;

  grid-template-columns: 50% auto;

  background-color: #000;

  padding: 0px;

}

@media screen and (max-width:768px) {

  .grid-container { grid-template-columns: auto; }

}

.grid-item {

  background-color: #00246c;

  color: #ffffff;

  font-size: 30px;

  text-align: left;

  padding: 0px;

}

</style>

<div class="grid-container">

grid-item met Plaatje

<div class="grid-item" style="padding: 0pt 0pt 0pt 0pt">

<img alt="" border="0" height="100%" src="https://www.rotary.nl/d1590/nieuws/Reservemap/FotosWW/afbeelding3.jpg" style="clear:both" width="100%"/>

</div>

grid-item met youtube 

<div class="grid-item">

<div style="padding:56.25% 0 0 0;position:relative;">

    <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0"

        src="https://www.youtube.com/embed/80VGvGbienY?rel=0&autoplay=1&vq=hd720"

        style="position:absolute;top:0;left:0;width:100%;height:100%; ">

    </iframe>

</div>

</div>

grid-item met video 

<div class="grid-item" style="padding: 0pt 0pt 0pt 0pt; margin: 0pt;">

<video autoplay="" controls="" loop="" muted=""

style=" width: 100%; height: 100%; padding: 0pt 0pt 0pt 0pt; margin: 0pt;">

<source src="https://www.rotary.nl/d1590/nieuws/Reservemap/video-map/vocserv.mp4"

type="video/mp4"> dit videoformaat wordt niet ondersteund door uw browser…</source>

</video>

</div>

grid-item met tekst 

<div class="grid-item" style="padding: 100pt 30pt 30pt 200pt; margin: 0pt;">

<h1 style="text-align:left">vocational service</h1>

<ul>

<li><h2>ethiek</h2></li>

<li><h2>vakmanschap</h2></li>

<li><h2>bevlogenheid</h2></li>

</ul>

</div>

</div> [einde grid-container]

YouTube video + autoplay + loop + mute

<div style="padding:56.25% 0 0 0; position:relative;">

<iframe allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="" frameborder="0"

src="https://www.youtube.com/embed/WHBg3WcCai8?rel=0&#38;mute=1&#38;autoplay=1&#38;loop=1&#38;playlist=WHBg3WcCai8" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Rotary Supports Education ">

</iframe>

</div>

ander filmpje

<div style="padding:56.25% 0 0 0; position:relative;">

<iframe allowfullscreen="" frameborder="0" height="432" mozallowfullscreen="" msallowfullscreen="" oallowfullscreen="" onload="this.src += &#39;#!referrer=&#39;+encodeURIComponent(location.href)+&#39;&#38;realReferrer=&#39;+encodeURIComponent(document.referrer)" src="https://omropfryslan.bbvms.com/p/regiogroei_fryslan_web_videoplayer_noconsent/c/4868305.html?inheritDimensions=true" style="position:absolute;top:0;left:0;width:100%;height:100%;" webkitallowfullscreen="" width="768"></iframe></div>

smaller filmpje

<div class="grid-item" style="padding-top: 35.25%; margin: 0pt; background-color: #000; width: 100%; position: relative; overflow: hidden;">

<video autoplay="" loop="" muted="" style=" width: 100%; height: 100%; padding: 0pt; margin: 0pt; object-fit: cover;position: absolute; top: 0; left: 0;">

<source src="https://www.rotary.nl/d1590/nieuws/Reservemap/video-map/poa.mp4" type="video/mp4"> dit videoformaat wordt niet ondersteund door uw browser…</source>

</video></div>

aftelklok

<style>

p { text-align: center; font-size: 60px; margin-top: 0px; }

</style>

<p id="demo"></p>

<script>

// Set the date we're counting down to

var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();

// Update the count down every 1 second

var x = setInterval(function() {

// Get today's date and time

var now = new Date().getTime();

// Find the distance between now and the count down date

var distance = countDownDate - now;

// Time calculations for days, hours, minutes and seconds

var days = Math.floor(distance / (1000 * 60 * 60 * 24));

var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

var seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Output the result in an element with id="demo"

document.getElementById("demo").innerHTML = days + "d " + hours + "u "

+ minutes + "m " + seconds + "s ";

// If the count down is over, write some text

if (distance < 0) { clearInterval(x); document.getElementById("demo").innerHTML = "EXPIRED"; }

}, 1000);

</script>