Skip to main content

Search

Articles in this section

See more

Onboarding Template 2

Avatar
Product Team
  • Updated

Sample illustration

mceclip0.png

 

Sample HTML


<style>ul li::before {
content: "\2022";
color: #456AE3;
font-weight: bold;
display: inline-block;
width: 1em;
margin-left: -1em;
}
</style>

<div class="container"><div class="row d-flex align-items-center"><div class="col-md"><div class="my-3 position-relative border-bottom"><div class="title-underline position-absolute"></div><h3 class="font-weight-light">Sub heading 1</h3>
</div></div><div class="col-md"></div></div><div class="row d-flex align-items-center mb-5"><div class="col-md"><p class="font-size-16 font-weight-medium text-platinum">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac interdum libero. Vivamus imperdiet, urna non maximus congue.</p>
<p class="font-size-16 text-platinum">Morbi consequat felis et lacinia semper. Maecenas quis posuere lectus, a placerat leo.</p>
<p class="font-size-16 text-platinum">Donec nulla nisi, sollicitudin at purus et, tincidunt accumsan est. Aenean magna justo, 
accumsan a accumsan nec, facilisis sed ex. Donec ullamcorper ex volutpat felis feugiat vestibulum.</p>
</div><div class="col-md"><img src="https://via.placeholder.com/404x273.png?text=Place+your+image+or+video+here" style="border-radius:10px;max-width:100%;" /></div></div><div class="row d-flex align-items-center"><div class="col-md"></div><div class="col-md"><div class="my-3 position-relative border-bottom"><div class="title-underline position-absolute"></div><h3 class="font-weight-light">Sub heading 2</h3>
</div></div></div><div class="row d-flex align-items-center mb-5"><div class="col-md"><img src="https://via.placeholder.com/404x273.png?text=Place+your+image+or+video+here" style="border-radius:10px;max-width:100%;" /></div><div class="col-md"><p class="font-size-16 text-platinum">Pellentesque non ornare lorem. Donec consectetur lacus in maximus rutrum. Vestibulum posuere massa non ligula euismod, vitae feugiat lorem placerat.</p>
<p class="font-size-16 text-platinum">Proin nulla quam, faucibus imperdiet libero sed, posuere hendrerit lectus. Sed imperdiet augue non rhoncus posuere. Morbi feugiat pellentesque aliquet. Morbi porta vel mauris et ultricies. Sed lectus leo, ultricies in luctus id, fermentum ac elit.</p>
</div></div><div class="row d-flex align-items-center"><div class="col-md pr-5"><div class="my-3 position-relative border-bottom"><div class="title-underline position-absolute"></div><h3 class="font-weight-light">Sub heading 3</h3>
</div></div><div class="col-md"></div></div><div class="row d-flex align-items-center mb-5"><div class="col-md pr-5"><p class="font-size-16 text-platinum">Nullam vitae fringilla tortor, sed pretium diam. Fusce tempus justo mollis ipsum aliquam gravida. </p>
<p class="font-size-16 font-weight-medium text-platinum">This includes:</p>
<ul class="font-size-16 font-weight-light text-platinum" style="list-style:none;">
<li class="mb-3">Phasellus accumsan risus in mauris viverra, at semper eros consequat</li>
<li class="mb-3">Nam eu lorem euismod, suscipit justo vel, ultrices metus</li>
<li class="mb-3">Vivamus non magna sit amet enim finibus volutpat at id massa</li>
</ul>
</div>
<div class="col-md">
<img src="https://via.placeholder.com/404x273.png?text=Place+your+image+or+video+here" style="border-radius:10px;max-width:100%;" />
</div>
</div>
</div>


Related articles