<style> /* Base styles */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } .relative { position: relative; } .top-md { top: 3.75rem; } .-right-lg { right: -6rem; } .bottom-md { bottom: 3.75rem; } .mx-auto { margin-left: auto; margin-right: auto; } .mt-6 { margin-top: 1.5rem; } .mt-sm { margin-top: 2rem; } .-mt-lg { margin-top: -6rem; } .mb-0 { margin-bottom: 0px; } .mb-4 { margin-bottom: 1rem; } .mb-sm { margin-bottom: 2rem; } .block { display: block; } .inline-block { display: inline-block; } .flex { display: flex; } .table { display: table; } .grid { display: grid; } .hidden { display: none; } .h-40 { height: 10rem; } .w-14 { width: 3.5rem; } .w-40 { width: 10rem; } .w-full { width: 100%; } .flex-1 { flex: 1 1 0%; } @-webkit-keyframes spin { to { transform: rotate(360deg); } } @keyframes spin { to { transform: rotate(360deg); } } @-webkit-keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @-webkit-keyframes pulse { 50% { opacity: 0.5; } } @keyframes pulse { 50% { opacity: 0.5; } } @-webkit-keyframes bounce { 0%, 100% { transform: translateY(-25%); -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: none; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } } @keyframes bounce { 0%, 100% { transform: translateY(-25%); -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: none; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .flex-wrap { flex-wrap: wrap; } .items-start { align-items: flex-start; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-8 { gap: 2rem; } .gap-10 { gap: 2.5rem; } .space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); } .overflow-x-hidden { overflow-x: hidden; } .rounded { border-radius: 0.25rem; } .rounded-md { border-radius: 0.375rem; } .rounded-full { border-radius: 9999px; } .rounded-l-md { border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; } .border { border-width: 1px; } .border-opacity-20 { --tw-border-opacity: 0.2; } .bg-green { --tw-bg-opacity: 1; background-color: rgba(28, 184, 149, var(--tw-bg-opacity)); } .bg-blue { --tw-bg-opacity: 1; background-color: rgba(24, 106, 171, var(--tw-bg-opacity)); } .bg-grey-100 { --tw-bg-opacity: 1; background-color: rgba(245, 248, 252, var(--tw-bg-opacity)); } .bg-white { --tw-bg-opacity: 1; background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); } .p-6 { padding: 1.5rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-sm { padding-top: 2rem; padding-bottom: 2rem; } .py-md { padding-top: 3.75rem; padding-bottom: 3.75rem; } .pt-2 { padding-top: 0.5rem; } .pt-6 { padding-top: 1.5rem; } .pt-sm { padding-top: 2rem; } .pb-sm { padding-bottom: 2rem; } .text-center { text-align: center; } .text-sm { font-size: 0.875rem; } .text-lg { font-size: 1.125rem; } .text-xl { font-size: 1.25rem; } .text-2xl { font-size: 1.5rem; } .text-3xl { font-size: 2rem; } .font-bold { font-weight: 700; } .uppercase { text-transform: uppercase; } .leading-tight { line-height: 1.25; } .tracking-wide { letter-spacing: 0.025em; } .text-blue { --tw-text-opacity: 1; color: rgba(24, 106, 171, var(--tw-text-opacity)); } .text-grey-700 { --tw-text-opacity: 1; color: rgba(121, 136, 163, var(--tw-text-opacity)); } .text-white { --tw-text-opacity: 1; color: rgba(255, 255, 255, var(--tw-text-opacity)); } .opacity-40 { opacity: 0.4; } .hover\:opacity-50:hover { opacity: 0.5; } .hover\:opacity-60:hover { opacity: 0.6; } .hover\:opacity-80:hover { opacity: 0.8; } *, ::before, ::after { --tw-shadow: 0 0 #0000; } *, ::before, ::after { --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgba(59, 130, 246, 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; } .transition { transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } @media (min-width: 640px) { } @media (min-width: 780px) { .md\:absolute { position: absolute; } .md\:mr-6 { margin-right: 1.5rem; } .md\:mb-0 { margin-bottom: 0px; } .md\:block { display: block; } .md\:flex { display: flex; } .md\:w-1\/2 { width: 50%; } .md\:w-1\/4 { width: 25%; } .md\:w-3\/4 { width: 75%; } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:border-r-2 { border-right-width: 2px; } .md\:border-grey-700 { --tw-border-opacity: 1; border-color: rgba(121, 136, 163, var(--tw-border-opacity)); } .md\:p-12 { padding: 3rem; } .md\:p-sm { padding: 2rem; } .md\:py-lg { padding-top: 6rem; padding-bottom: 6rem; } .md\:pr-6 { padding-right: 1.5rem; } .md\:pb-0 { padding-bottom: 0px; } .md\:text-2xl { font-size: 1.5rem; } .md\:text-3xl { font-size: 2rem; } .md\:text-4xl { font-size: 3rem; } } /* Custom styles */ body { font-family: 'Roboto', Arial, Helvetica, sans-serif; margin: 0; font-size: 1rem; } h1, h2, h3, h4 { font-weight: bold; margin-top: 0; margin-bottom: 0; } a { text-decoration: none; transition: all 0.3s ease; color: #186AAB; } a:hover { color: #1CB895; } .bg-blue a { color: #fff; } footer a { color: #7988a3; } .bg-blue a:hover { color: #fff; } .container { max-width: 1240px; padding-left: 1rem; padding-right: 1rem; } header { background: url(https://idiligo.com/wp-content/uploads/2021/11/map-side-l-1.png) no-repeat bottom left, url(https://idiligo.com/wp-content/uploads/2021/11/map-side-r-1.png) no-repeat bottom right; } header p { font-size: 1.5rem; color: #0e5199; } @media (min-width: 770px) { .container { margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } header { min-height: 540px; } header p { font-size: 2rem; color: #0e5199; } } .btn-outline, .btn-full { display: inline-block; position: relative; padding: 10px 24px; line-height: 100%; border-radius: 4px; } .btn-full-lg { padding: 16px 24px; } .btn-full { background: #1cb895; color: #fff; } .btn-full:hover { opacity: 0.8; } .btn-outline { color: #1cb895; border: 2px solid #1cb895; } .btn-outline:hover { background: #1cb895; color: #fff; } /* Responsive videos */ .embed-container { position: relative; height: 0; padding-bottom: 56.25%; } .embed-container-vimeo { position: relative; height: 0; padding-bottom: 74%; } .embed-container iframe, .embed-container-vimeo iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #photo img { width:auto; height:100px; border-radius: 12px; } </style> <div class="elfsight-app-1b7ae886-7607-4d10-a1fe-84607b47e65f"></div> <div class="text-blue overflow-x-hidden"> <header class="py-md relative"> <div class="container flex items-center"> <div class="w-full md:w-1/2"> <img src="https://idiligo.com/wp-content/themes/idiligo/images/idiligo-logo.svg" alt="idiligo logo" data-image="tz31aoangkcj"> <div class="py-sm"> <h1 class="text-3xl md:text-2xl font-bold">Hello [flow:clientFirstName],</h1> <div class="text-2xl md:text-3xl pt-sm font-bold"> <p>It was a pleasure meeting you. Here the discussed information. Please check below if there are any open actions for you to proceed.</p> </div> </div> <a class="hover:opacity-50 text-white" href="#content"><svg width="53" height="51" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M52 25.5C52 38.995 40.62 50 26.5 50S1 38.995 1 25.5 12.38 1 26.5 1 52 12.005 52 25.5Z" fill="#fff" stroke="#186AAB" stroke-width="2"></path> <path stroke="#186AAB" stroke-width="2" d="M26.52 15v21M32.041 30.035l-5.52 5.521L21 30.036"></path> </svg></a> </div> </div> <div class="hidden md:block md:absolute w-full md:w-1/2 top-md bottom-md rounded-l-md bg-green -right-lg" style="background: url(https://idiligo.com/wp-content/uploads/2021/11/pedro-lastra-Nyvq2juw4_o-unsplash-scaled.jpg) no-repeat center; background-size: cover;"></div> </header> <main id="content" class="py-md md:py-lg bg-grey-100"> <section class="w-full"> <div class="container md:flex gap-10 pb-sm items-start"> <div class="bg-blue mb-sm md:mb-0 p-6 md:p-sm pb-sm rounded md:w-1/4 text-center text-white "> <div class="h-40 w-40 rounded-full mx-auto inline-block -mt-lg mb-4" style="background-size: cover;"><p id="photo">[user:ProfilePicture]</p> </div> <h4 class="uppercase opacity-40 text-sm tracking-wide">Your Idiligo contact</h4> <span class="text-xl md:text-2xl font-bold leading-tight block pt-6">[user:Voornaam] [user:Name]</span> <span class="text-lg block pt-2">[user:PhoneNumber]</span> <span class="text-lg block pt-2"><a href="mailto:[user:Email]">[user:Email]</a></span> <div class="pt-sm"><a href="https://outlook.office365.com/owa/calendar/Idiligo@idiligo.com/bookings/" class="btn-full btn-full-lg text-lg">Schedule a meeting</a></div> </div> <div class="w-full md:w-3/4 p-6 md:p-12 bg-white rounded-md"> <div class="flex gap-3 items-center pb-sm"> <svg width="43" height="43" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="21.5" cy="21.5" r="21.5" fill="#186AAB"></circle> <path d="M17.2 16.1h9.3M17.2 20h9.3M17.2 23.8h5.3" stroke="#fff" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path> <rect x="12.9" y="10.626" width="18" height="22" rx="2" stroke="#fff" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></rect> </svg> <h2 class="md:text-3xl text-2xl mb-0">Documents</h2> </div> <div> <div class="md:pr-6 md:mr-6 pb-sm md:pb-0"> <h4 class="uppercase text-sm tracking-wide">To sign</h4> <div class="space-y-2 pt-6"> <div class="bg-grey-100 flex justify-between py-2 px-4 rounded-md items-center gap-4"> <div class="flex-1">[call:Signatures]</div> </div> </div> </div> </div> <div> <div> <h4 class="uppercase text-sm tracking-wide"><br><br>To download</h4> <div class="space-y-2 pt-6"> [flow:document1][flow:document2][flow:document3] </div> </div> </div> </div> </div> <div class="container"> <div class="p-6 md:p-12 bg-white rounded-md"> <div class="flex gap-3 items-center pb-sm"> <svg width="43" height="43" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="21.5" cy="21.5" r="21.5" fill="#186AAB"></circle> <path d="m25 21.55-5.25-3.94v7.88L25 21.55Z" fill="#fff"></path> <rect x="10" y="13" width="23" height="17" rx="3" stroke="#fff" stroke-width="2"></rect> </svg> <h2 class="md:text-3xl text-2xl mb-0">Videos</h2> </div> <div> [flow:video0][flow:video1][flow:video2][flow:video3] </div> </div> </div> </section> </main> <footer class="text-center py-sm text-grey-700"> Visit <a class="hover:opacity-60" href="http://www.idiligo.com">www.idiligo.com</a> to learn more </footer> </div>