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>"

powerpointpresentatie

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>

grid-item met youtube

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

style="position:absolute;top:0;left:0;width:100%;height:100%; object-fit: cover;">

</iframe>

</div>

grid-item met video

<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

<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

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

</iframe>

</div>

ander filmpje

rotary foundation showcase

TRF thank you 2023

TRF-video

https://youtu.be/z9cVs-nl030

D1560

wsZdL4aHtIE

smaller filmpje

<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>

// 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>