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.