Creating a "About Me" page

in Tutorials on 17 Dec 2012


Creating an 'about me' page...

Create a HTML page using SimplePortal and add this code. Then populate it with your own info.
Remember to replace the image URL's.

Demo: About Me

<style type="text/css">
.container {
width: 980px;
border: 0px;
margin: 5px 5px 5px 5px;
padding: 0px;
}
.column p {
margin-bottom: 18px;
}
p {
line-height: 1.6;
margin: 0px;
display: block;
}
.column {
width: 460px;
margin: 5px 5px 5px 5px;
float: left;
position: relative;
}
.block {
width: 460px;
height: 240px;
margin: 5px 5px 5px 5px;
float: left;
position: relative;
background: #f1f1f1;
border: 1px solid #efefef;
background: whiteSmoke;
border: 1px solid #DBE1E6;
z-index: 10;
}
.img-small {
width: 80px;
height: 80px;
float: left;
margin: 5px 22px 0px 0px;
          -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
              -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
                         box-shadow: 0px 0px 10px rgba(0,0,0,.8);
}
img {
border-style: none;
margin: 0px;
}
.tabular {
width: 420px;
margin: 0px 0px 0px 10px;
padding: 0px;
display: table;
}
h2 {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
margin-bottom: 15px;
padding-top: 7px;
line-height: normal;
text-transform: uppercase;
letter-spacing: 3px;
}
h3 {
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: #444;
margin: 22px 0px 16px 25px;
}
</style>

<div class="container">

<!--Column A-->
<div class="column">

<h2>Profile</h2>
<img class="img-small" src="URL TO IMAGE" width="80" height="80" alt="Mick G" />

<p>Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio.</p>

<p>Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio.</p>
</div>


<!--Column B-->
<div class="column">

<h2>Bragging Rights</h2>
        <p>Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio.</p>

<p>Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio.</p>
</div>


<!--Block A-->
<div class="block">
<h3>Experience</h3>

<div class="tabular">
<table>
<tr>
<td class="left">Ongoing</td>
<td class="right">Proin metus odio, aliquam eget molestie nec, gravida ut sapien. </td>
</tr>
<tr>
<td class="left">2011</td>
<td class="right">Proin metus odio, aliquam eget molestie nec, gravida ut sapien. </td>
</tr>
<tr>
<td class="left">2009 - Present</td>
<td class="right">Proin metus odio, aliquam eget molestie nec, gravida ut sapien. </td>
</tr>
<tr>
<td class="left">2006 - Present</td>
<td class="right">Proin metus odio, aliquam eget molestie nec, gravida ut sapien. </td>
</tr>
</table>
</div>
</div>


<!--Block B-->
<div class="block">

<img src="URL TO IMAGE" width="460" height="240" alt="" />
</div>
   </div>




idesignSMF Team
Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF.com and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time.

idesignSMF.com | SimpleMachines.org



2 Comments


rocket_launch

Find the right theme for you. Browse through our gallery of expertly-crafted free SMF themes to find the perfect one for your needs.