{"id":29,"date":"2026-03-28T19:22:28","date_gmt":"2026-03-28T19:22:28","guid":{"rendered":"https:\/\/barolwedding.nl\/?page_id=29"},"modified":"2026-03-30T11:24:04","modified_gmt":"2026-03-30T09:24:04","slug":"schedule","status":"publish","type":"page","link":"https:\/\/barolwedding.nl\/?page_id=29","title":{"rendered":"Schedule"},"content":{"rendered":"\n<!-- Fun Interactive Horizontal Wedding Schedule with \u2764\ufe0f Floating Hearts -->\n<style>\n  \/* White card wrapper to make timeline pop *\/\n  .timeline-card {\n    background: white;\n    padding: 40px 20px;\n    border-radius: 15px;\n    box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n    max-width: 1000px;\n    margin: 50px auto; \/* centers the card *\/\n    position: relative;\n    overflow: visible;\n  }\n\n  \/* Container and background hearts *\/\n  .timeline-wrapper {\n    position: relative;\n    padding: 0; \/* remove extra padding because card has it *\/\n    overflow: visible;\n  }\n\n  \/* Floating heart emojis *\/\n  .floating-heart-emoji {\n    position: absolute;\n    font-size: 24px;\n    pointer-events: none;\n    animation: floatUpEmoji linear infinite;\n  }\n\n  @keyframes floatUpEmoji {\n    0% { transform: translateY(0) scale(1); opacity: 0.8; }\n    50% { transform: translateY(-80px) scale(1.2); opacity: 1; }\n    100% { transform: translateY(-160px) scale(0.8); opacity: 0; }\n  }\n\n  \/* Base horizontal timeline *\/\n  .timeline-horizontal {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    font-family: 'Arial', sans-serif;\n    position: relative;\n    z-index: 1;\n  }\n\n  \/* Line behind the icons *\/\n  .timeline-horizontal::before {\n    content: '';\n    position: absolute;\n    top: 40px;\n    left: 0;\n    right: 0;\n    height: 4px;\n    background: #b48c5a;\n    z-index: 0;\n  }\n\n  .timeline-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    position: relative;\n    flex: 1;\n    text-align: center;\n    transition: transform 0.3s ease;\n    cursor: pointer;\n  }\n\n  .timeline-item:hover {\n    transform: scale(1.1);\n  }\n\n  .timeline-icon {\n    background: #DDE5D8;\n    color: white;\n    font-size: 24px;\n    width: 60px;\n    height: 60px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 10px;\n    box-shadow: 0 2px 6px rgba(0,0,0,0.1);\n    animation: popIn 0.8s ease forwards;\n  }\n\n  @keyframes popIn {\n    0% { transform: scale(0); opacity: 0; }\n    100% { transform: scale(1); opacity: 1; }\n  }\n\n  .timeline-time {\n    font-weight: bold;\n    margin-bottom: 5px;\n  }\n\n  .timeline-description {\n    background: #F7F3EE;\n    padding: 8px 12px;\n    border-radius: 6px;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n    position: relative;\n    transition: all 0.3s ease;\n  }\n\n  \/* Confetti on hover *\/\n  .timeline-item:hover .timeline-description::after {\n    content: '\ud83c\udf89\u2728';\n    position: absolute;\n    top: -20px;\n    left: 50%;\n    transform: translateX(-50%);\n    font-size: 20px;\n    animation: confetti 0.8s ease forwards;\n  }\n\n  @keyframes confetti {\n    0% { transform: translate(-50%, 0) scale(0); opacity: 0; }\n    50% { transform: translate(-50%, -15px) scale(1.2); opacity: 1; }\n    100% { transform: translate(-50%, -30px) scale(1); opacity: 0; }\n  }\n\n  \/* Arrows between items *\/\n  .timeline-item:not(:last-child)::after {\n    content: '\u2794';\n    position: absolute;\n    right: -20px;\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 24px;\n    color:#b48c5a;\n    z-index: 0;\n  }\n\n  @media (max-width: 700px) {\n    .timeline-horizontal {\n      flex-direction: column;\n      align-items: flex-start;\n    }\n\n    .timeline-item {\n      flex-direction: row;\n      align-items: center;\n      margin-bottom: 30px;\n      text-align: left;\n    }\n\n    .timeline-item:not(:last-child)::after {\n      content: '';\n    }\n\n    .timeline-time, .timeline-description {\n      margin-left: 15px;\n    }\n  }\n<\/style>\n\n<div class=\"timeline-card\">\n  <div class=\"timeline-wrapper\" id=\"timeline-wrapper\">\n    <div class=\"timeline-horizontal\">\n      <div class=\"timeline-item\">\n        <div class=\"timeline-icon\">\ud83e\udd1d<\/div>\n        <div class=\"timeline-time\">13:30 &#8211; 14:00<\/div>\n        <div class=\"timeline-description\">Arrival<\/div>\n      <\/div>\n\n      <div class=\"timeline-item\">\n        <div class=\"timeline-icon\">\ud83d\udc8d<\/div>\n        <div class=\"timeline-time\">14:00 &#8211; 15:00<\/div>\n        <div class=\"timeline-description\">Ceremony<\/div>\n      <\/div>\n\n      <div class=\"timeline-item\">\n        <div class=\"timeline-icon\">\ud83e\udd42\ud83c\udf70<\/div>\n        <div class=\"timeline-time\">15:00 &#8211; 16:30<\/div>\n        <div class=\"timeline-description\">Toast &#038; Cake<\/div>\n      <\/div>\n\n      <div class=\"timeline-item\">\n        <div class=\"timeline-icon\">\ud83c\udf78<\/div>\n        <div class=\"timeline-time\">16:30 &#8211; 17:30<\/div>\n        <div class=\"timeline-description\">Cocktail Hour<\/div>\n      <\/div>\n\n      <div class=\"timeline-item\">\n        <div class=\"timeline-icon\">\ud83c\udf7d\ufe0f<\/div>\n        <div class=\"timeline-time\">17:30 &#8211; 20:30<\/div>\n        <div class=\"timeline-description\">Dinner<\/div>\n      <\/div>\n\n      <div class=\"timeline-item\">\n        <div class=\"timeline-icon\">\ud83c\udf89\ud83e\udea9<\/div>\n        <div class=\"timeline-time\">20:30 &#8211; 00:30<\/div>\n        <div class=\"timeline-description\">Party time!!<\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n  \/\/ Floating \u2764\ufe0f emojis\n  const wrapper = document.getElementById('timeline-wrapper');\n  function createHeartEmoji() {\n    const heart = document.createElement('div');\n    heart.className = 'floating-heart-emoji';\n    heart.textContent = '\u2764\ufe0f';\n    heart.style.left = Math.random() * wrapper.offsetWidth + 'px';\n    heart.style.top = Math.random() * 100 + 'px';\n    heart.style.fontSize = (16 + Math.random() * 24) + 'px';\n    heart.style.animationDuration = (4 + Math.random() * 4) + 's';\n    wrapper.appendChild(heart);\n    setTimeout(() => heart.remove(), parseFloat(heart.style.animationDuration) * 1000);\n  }\n  setInterval(createHeartEmoji, 400);\n<\/script>\n\n\n\n<!-- Important Notice Highlight -->\n<style>\n  .highlight-note {\n    background: #fefcf7; \/* soft green pastel *\/\n    border-left: 6px solid #b48c5a; \/* accent color *\/\n    padding: 15px 20px;\n    margin: 30px 0;\n    border-radius: 8px;\n    box-shadow: 0 2px 6px rgba(0,0,0,0.1);\n    font-family: 'Arial', sans-serif;\n    font-size: 1.1rem;\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n  }\n\n  .highlight-note-icon {\n    font-size: 28px;\n    margin-top: 2px;\n  }\n\n  .highlight-note-text {\n    line-height: 1.5;\n  }\n<\/style>\n\n<div class=\"highlight-note\">\n  <div class=\"highlight-note-icon\">\ud83e\udd29<\/div>\n  <div class=\"highlight-note-text\">\n    We are so excited to celebrate this special day with all of you!\nFrom the ceremony to the last dance, every moment will be full of love, laughter, and a little magic \u2728.\nMake sure to bring your smiles, your dancing shoes, and your happy hearts!\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\ud83e\udd1d 13:30 &#8211; 14:00 Arrival \ud83d\udc8d 14:00 &#8211; 15:00 Ceremony \ud83e\udd42\ud83c\udf70 15:00 &#8211; 16:30 Toast &#038; Cake \ud83c\udf78 16:30 &#8211; 17:30 Cocktail Hour \ud83c\udf7d\ufe0f 17:30 &#8211; 20:30 Dinner \ud83c\udf89\ud83e\udea9 20:30 &#8211; 00:30 Party time!! \ud83e\udd29 We are so excited to celebrate this special day with all of you! From the ceremony to the last dance, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-29","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/barolwedding.nl\/index.php?rest_route=\/wp\/v2\/pages\/29","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/barolwedding.nl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/barolwedding.nl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/barolwedding.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/barolwedding.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=29"}],"version-history":[{"count":47,"href":"https:\/\/barolwedding.nl\/index.php?rest_route=\/wp\/v2\/pages\/29\/revisions"}],"predecessor-version":[{"id":607,"href":"https:\/\/barolwedding.nl\/index.php?rest_route=\/wp\/v2\/pages\/29\/revisions\/607"}],"wp:attachment":[{"href":"https:\/\/barolwedding.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}