<div class="elfsight-app-1b7ae886-7607-4d10-a1fe-84607b47e65f"></div>
<style>
* {
box-sizing: border-box;
}
/* Style the body */
body {
font-family: Mukta, Arial, Helvetica, sans-serif;
background-image: url("https://idiligo.com/wp-content/themes/idiligo/images/mapv2.png");
font-size:18px;
margin: 0;
}
/* Header/logo Title */
.header {
padding: 20px;
text-align: left;
/* background: #09C; */
/* color: white; */
max-width: 760px;
/* text-align: center; */
margin: 0 auto;
padding-bottom: 96px;
}
/* Increase the font size of the heading */
.header h1 {
font-size: 42px;
font-weight: bold;
padding-bottom: 32px;
color: #00589c;
}
.header p {
font-size: 20px;
line-height: 130%;
color: #5a5d60;
}
.header-wrap {
background: url(<img class="redactor-autoparser-object" src="https://idiligo.files.wordpress.com/2021/05/banner-light.png">) center bottom no-repeat;
background-size: contain;
}
h2 {
color: #00589c;
font-weight: 600;
font-style: normal;
}
h5 {
color: #00589c;
font-weight: 400;
font-style: normal;
}
/* Sticky navbar - toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. However, for these versions the navbar will inherit default position */
.navbar {
overflow: hidden;
position: sticky;
position: -webkit-sticky;
top: 0;
border-color: #333;
display: flex;
justify-content: center;
padding-top: 24px;
}
/* Style the navigation bar links */
.navbar a {
/* float: left; */
display: inline-block;
color: #0078a1;
text-align: center;
padding: 12px 20px;
text-decoration: none;
border: 1px solid #ebebec;
border-radius: 4px;
}
a {
transition: all .2s ease;
}
/* Left-aligned link */
.navbar a.left {
/* float: left; */
}
/* Change color on hover */
.navbar a:hover {
background-color: #0078a1;
color: fff;
}
/* Active/current link */
.navbar a.active {
background-color: #666;
color: white;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
background: #00589c;
border-top: 1px solid #ebebec;
padding: 36px;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
background-color: #00589c;
color: #fff;
padding-right: 32px;
}
.side h1 {
font-size: 42px;
font-weight: bold;
padding-bottom: 12px;
color: #fff;
}
.side p {
font-size: 20px;
font-weight: normal;
color: #fff;
}
.side h2 {
color: #fff;
}
.side a {
color: #fff;
text-decoration: none;
}
.img-row {
display: flex;
align-items: center;
padding-bottom: 16px;
}
.img-round {
border-radius: 4px;
}
#photo img {
width:auto;
height:100px;
}
/* Main column */
.main {
background-color: white;
padding: 20px;
}
.main h1 {
font-size: 42px;
font-weight: bold;
padding-bottom: 32px;
color: #00589c;
}
.main p {
font-size: 20px;
font-weight: normal;
color: #fff;
}
/* Sidebar/right column */
.sideright {
background-color: white;
padding: 20px;
}
.sideright h1 {
font-size: 42px;
font-weight: bold;
padding-bottom: 12px;
color: #00589c;
}
/* Fake image, just for this example */
.fakeimg {
background-color: #f1f1f1;
width: 100%;
padding: 20px;
border: 1px solid #ebebec;
}
/* Footer */
.signature {
padding: 5px;
text-align: left;
background: #fff;
width: 500px;
}
/* To be signed documents */
.footer {
padding: 20px;
text-align: center;
font-size: 20px;
color: #5a5d60;
background: #fff;
border-top: 1px solid #ebebec;
}
.footer p {
color: #00589c;
font-size: 32px;
}
.footer a {
color: #0078a1;
text-decoration: none;
}
.footer a:hover {
color: #5a5d60;
text-decoration: none;
}
/* Extra classes */
.text-center {
text-align: center;
}
.max-w-2x {
max-width: 700px;
margin: 0 auto;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.inline-block {
display: inline-block;
}
.block {
display: block;
}
.w-12 {
width: 20%;
padding: 0 8px;
padding-top: 20px;
}
.w-13 {
width: 40%;
padding: 0 8px;
}
.w-14 {
width: 40%;
padding: 0 8px;
}
.border-grey {
border: 5px solid #00589c;
}
.w-full {
width: 100%;
}
.mt-6 {
margin-top: 24px;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
.w-13 {
width: 100%;
padding: 0 8px;
margin: 16px 0;
}
.w-14 {
width: 100%;
padding: 0 8px;
}
.row {
padding: 16px;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
</style>
<div class="header-wrap">
<img class="text-center mx-auto block" src="https://idiligo.files.wordpress.com/2020/11/logo-idiligo-offerte.png" alt="Idiligo" style="width:auto;height:60px;" data-image="zh8x6q2ejqr6">
<div class="header">
<h1>Hallo [flow:clientFirstName] [flow:clientLastName],</h1>
<p>hier die besprochenen Informationen.</p>
<p>Bitte überprüfen Sie unten, ob es offene Aktionen für Sie gibt.</p>
<p>Freundliche Grüße,</p>
<p>[user:Voornaam] [user:Name]</p>
</div>
</div>
<div class="row">
<div class="w-12">
<div class="side">
<h1>Ihr Idiligo-Kontakt</h1>
<p id="photo">[user:ProfilePicture]</p><p>[user:Voornaam] [user:Name]</p><p>P: [user:PhoneNumber]</p><p>E: [user:Email]</p>
<p><a href="https://outlook.office365.com/owa/calendar/Idiligo@idiligo.com/bookings/" target="_blank">Klicken Sie <u>hier</u>, um einen Termin zu vereinbaren</a></p>
</div>
</div>
<div class="w-13">
<div class="main border-grey">
<h1>[flow:micrositeConfigure01][call:Signatures][flow:micrositeConfigure02][attachment:9001offeridiligoent][flow:idOrderPartnerAccount]</h1>
</div>
</div>
<div class="w-14">
<div class="sideright border-grey">
<h1>Video<br>[flow:video0][flow:video1][flow:video2][flow:video3]<br>Dokumente<span STYLE="font-size:20.0pt;color: #5a5d60;">[flow:document1][flow:document2][flow:document3]</span></h1>
</div>
</div>
</div>
<div class="footer">
<p>Besuchen Sie <a href="http://www.idiligo.com/de">www.idiligo.com</a>, um mehr zu erfahren</p>
</div>