Mar 11, 2021   ,

Many of you showed interest in knowing how I made biography pages looking so stylish and nice with photos and quick info (see an example here).
I debated whether to build a script out of it and selling or selling the template but hey, we live once only, so here’s the basic template all for free.

TOP PART

It’s a game of tables that balance everything.
<table style="clear: both;" width="100%" cellspacing="6" cellpadding="6"><tbody><tr>
<td width="24%"><img style="width: 100%; height: auto;" src="your-image-link" alt="" /></td>
<td width="1%"></td>
<td style="font-size: 12px;" valign="top" width="38%">PUT ANY INFO YOU'D LIKE HERE</td>
<td valign="top" width="37%">Quick Menu
PUT ANY LINK YOU THINK IT'S USEFUL (official socials/websites, filmography....)</td>
</tr></tbody></table>

CONTENT WITH IMAGES PART

Here is all about alternating images on left and right and positioning in the right place, unfortunately there’s no specific saying where to put, you’ll have to try and see how it looks with images a little higher or lower than where you put but the codes are these

Right Side Image
<div style="float: right; margin-left: 5px; padding-right: 12px; width: 18%; text-align: center; font-size: 10px; font-style: italic;"><img src="your-image-link" alt="" width="100%" />Your text here</div>

Left Side Image
<div style="float: left; margin-right: 25px; padding-left: 12px; width: 18%; text-align: center; font-size: 10px; font-style: italic;"><img src="your-image-link" alt="" width="100%" />Your text here</div>

You can obviously change the width: 18% to anything smaller or bigger, but be aware that the text will also adapt to it so if you write Gates it might fit in just one line, but if you write Gates McFadden is one of the most beautiful women walking Earth it’ll go on several lines.