{"id":290,"date":"2026-07-17T10:39:20","date_gmt":"2026-07-17T10:39:20","guid":{"rendered":"https:\/\/carolinebraillon.com\/?post_type=elemenfolio&#038;p=290"},"modified":"2026-07-27T18:40:15","modified_gmt":"2026-07-27T18:40:15","slug":"margherita-roberto-wedding-website","status":"publish","type":"elemenfolio","link":"https:\/\/carolinebraillon.com\/?elemenfolio=margherita-roberto-wedding-website","title":{"rendered":"Margherita &amp; Roberto \u2014 Wedding website"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"290\" class=\"elementor elementor-290\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ec91c9e e-con-full e-flex e-con e-parent\" data-id=\"ec91c9e\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e7da58d elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"e7da58d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Margherita &amp; Roberto<\/strong> is a one-page wedding website I designed and developed for a May 2023 celebration in Vietri sul Mare, Italy.<\/p><p><strong>My role:<\/strong> visual direction, information architecture, responsive web design and WordPress development.<\/p><p>The goal was to give guests a warm, easy-to-use experience with all practical details in one elegant flow. Built with WordPress and Elementor, the site combined full-width photography and handwritten typography with a live countdown, add-to-calendar action, conditional RSVP form, story-in-numbers section, honeymoon carousel and venue map.<\/p><p>The original website is now archived; the interactive previews below preserve the desktop and mobile experience.<\/p><p class=\"cb-project-actions\"><a class=\"cb-button cb-button-secondary\" href=\"https:\/\/carolinebraillon.com\/?page_id=182\">Back to portfolio<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3898384 elementor-widget elementor-widget-html\" data-id=\"3898384\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- STEP 1: upload scrollable\/desktop-full.jpg and scrollable\/mobile-full.jpg to WP Media.\n     STEP 2: replace __DESKTOP_SRC__ and __MOBILE_SRC__ with their Media File URLs.\n     STEP 3: paste into a 'Custom HTML' block (Gutenberg) or 'HTML' widget (Elementor). -->\n<!-- Margherita & Roberto - interactive responsive preview -->\n<div class=\"mrshow\">\n  <figure class=\"mrshow-item\">\n    <div class=\"mrshow-browser\">\n      <div class=\"mrshow-bar\"><span class=\"d r\"><\/span><span class=\"d y\"><\/span><span class=\"d g\"><\/span>\n        <span class=\"mrshow-url\">margheritaeroberto.it<\/span><\/div>\n      <div class=\"mrshow-win mrshow-win-desk\"><img data-mr-src=\"https:\/\/carolinebraillon.com\/wp-content\/uploads\/2026\/07\/desktop-full.jpg\" loading=\"lazy\" decoding=\"async\" alt=\"Margherita and Roberto wedding website on desktop\"><\/div>\n    <\/div>\n    <figcaption>Desktop &middot; scroll to explore<\/figcaption>\n  <\/figure>\n  <figure class=\"mrshow-item\">\n    <div class=\"mrshow-phone\"><span class=\"mrshow-notch\"><\/span>\n      <div class=\"mrshow-win mrshow-win-phone\"><img data-mr-src=\"https:\/\/carolinebraillon.com\/wp-content\/uploads\/2026\/07\/mobile-full-3.jpg\" loading=\"lazy\" decoding=\"async\" alt=\"Margherita and Roberto wedding website on mobile\"><\/div>\n    <\/div>\n    <figcaption>Mobile &middot; scroll to explore<\/figcaption>\n  <\/figure>\n<\/div>\n<style>\n.mrshow{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start;justify-content:center;\n  padding:48px 24px;box-sizing:border-box;font-family:inherit;}\n.mrshow *{box-sizing:border-box;}.mrshow-item{margin:0;text-align:center;}\n.mrshow-item figcaption{margin-top:16px;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:#4f5e67;}\n.mrshow-browser{width:680px;max-width:88vw;border-radius:14px;overflow:hidden;background:#fff;border:1px solid #e2e5e8;box-shadow:0 30px 60px rgba(20,25,30,.18);}\n.mrshow-bar{height:42px;background:#f3f4f6;display:flex;align-items:center;gap:8px;padding:0 16px;}\n.mrshow-bar .d{width:11px;height:11px;border-radius:50%;}.mrshow-bar .r{background:#ff5f56;}.mrshow-bar .y{background:#ffbd2e;}.mrshow-bar .g{background:#27c93f;}\n.mrshow-url{flex:1;margin-left:10px;height:22px;line-height:22px;background:#fff;border:1px solid #e6e9ec;border-radius:12px;font-size:12px;color:#9aa6ad;padding:0 12px;text-align:left;overflow:hidden;white-space:nowrap;}\n.mrshow-phone{width:300px;max-width:78vw;background:#0c0d10;border-radius:44px;padding:14px;position:relative;box-shadow:0 30px 60px rgba(20,25,30,.22);}\n.mrshow-notch{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:120px;height:22px;background:#0c0d10;border-radius:12px;z-index:3;}\n.mrshow-win{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;background:#fff;}\n.mrshow-win img{width:100%;height:auto;display:block;}.mrshow-win-desk{height:460px;}.mrshow-win-phone{height:600px;border-radius:30px;}\n.mrshow-win::-webkit-scrollbar{width:9px;}.mrshow-win::-webkit-scrollbar-thumb{background:rgba(120,135,145,.5);border-radius:9px;}\n.mrshow-win{scrollbar-width:thin;scrollbar-color:rgba(120,135,145,.5) transparent;}\n@media(max-width:720px){.mrshow{gap:32px;padding:28px 12px;}.mrshow-win-desk{height:320px;}.mrshow-win-phone{height:460px;}}\n<\/style>\n<script>\n(function(){function originalImage(src){return src.replace(\/-scaled(?=\\.[a-z0-9]+(?:[?#]|$))\/i,'');}document.querySelectorAll('.mrshow img[data-mr-src]').forEach(function(img){img.src=originalImage(img.dataset.mrSrc);});function init(w){if(w.dataset.mrInit)return;w.dataset.mrInit='1';var raf=null;\n function stop(){if(raf)cancelAnimationFrame(raf);raf=null;}\n function go(t,d){stop();var s=w.scrollTop,t0=null,dist=t-s;function st(ts){if(!t0)t0=ts;var p=Math.min(1,(ts-t0)\/d);w.scrollTop=s+dist*p;if(p<1)raf=requestAnimationFrame(st);else raf=null;}raf=requestAnimationFrame(st);}\n w.addEventListener('mouseenter',function(){var m=w.scrollHeight-w.clientHeight;go(m,Math.max(3000,m*5));});\n w.addEventListener('mouseleave',function(){go(0,900);});w.addEventListener('wheel',stop);w.addEventListener('touchstart',stop);}\n (document.querySelectorAll('.mrshow-win')||[]).forEach(init);})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"featured_media":292,"template":"","elemenfoliocategory":[7],"uagb_featured_image_src":{"full":["https:\/\/carolinebraillon.com\/wp-content\/uploads\/2026\/07\/thumbnail-margherita-roberto.jpg",1200,750,false],"thumbnail":["https:\/\/carolinebraillon.com\/wp-content\/uploads\/2026\/07\/thumbnail-margherita-roberto-150x150.jpg",150,150,true],"medium":["https:\/\/carolinebraillon.com\/wp-content\/uploads\/2026\/07\/thumbnail-margherita-roberto-300x188.jpg",300,188,true],"medium_large":["https:\/\/carolinebraillon.com\/wp-content\/uploads\/2026\/07\/thumbnail-margherita-roberto-768x480.jpg",768,480,true],"large":["https:\/\/carolinebraillon.com\/wp-content\/uploads\/2026\/07\/thumbnail-margherita-roberto-1024x640.jpg",800,500,true],"1536x1536":["https:\/\/carolinebraillon.com\/wp-content\/uploads\/2026\/07\/thumbnail-margherita-roberto.jpg",1200,750,false],"2048x2048":["https:\/\/carolinebraillon.com\/wp-content\/uploads\/2026\/07\/thumbnail-margherita-roberto.jpg",1200,750,false]},"uagb_author_info":{"display_name":"admin_cb","author_link":"https:\/\/carolinebraillon.com\/?author=0"},"uagb_comment_info":0,"uagb_excerpt":"Margherita &amp; Roberto is a one-page wedding website I designed and developed for a May 2023 celebration in Vietri sul Mare, Italy. My role: visual direction, information architecture, responsive web design and WordPress development. The goal was to give guests a warm, easy-to-use experience with all practical details in one elegant flow. Built with WordPress&hellip;","_links":{"self":[{"href":"https:\/\/carolinebraillon.com\/index.php?rest_route=\/wp\/v2\/elemenfolio\/290"}],"collection":[{"href":"https:\/\/carolinebraillon.com\/index.php?rest_route=\/wp\/v2\/elemenfolio"}],"about":[{"href":"https:\/\/carolinebraillon.com\/index.php?rest_route=\/wp\/v2\/types\/elemenfolio"}],"version-history":[{"count":28,"href":"https:\/\/carolinebraillon.com\/index.php?rest_route=\/wp\/v2\/elemenfolio\/290\/revisions"}],"predecessor-version":[{"id":420,"href":"https:\/\/carolinebraillon.com\/index.php?rest_route=\/wp\/v2\/elemenfolio\/290\/revisions\/420"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/carolinebraillon.com\/index.php?rest_route=\/wp\/v2\/media\/292"}],"wp:attachment":[{"href":"https:\/\/carolinebraillon.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=290"}],"wp:term":[{"taxonomy":"elemenfoliocategory","embeddable":true,"href":"https:\/\/carolinebraillon.com\/index.php?rest_route=%2Fwp%2Fv2%2Felemenfoliocategory&post=290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}