Amazingly Simple and Beautiful. Brand spankin' new free SMF themes every month.

Creating a "About Me" page

Mick in Tutorials
Dec 17, 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>

Tagged with: smf snippet simpleportal css html 


Mick

Mick G

Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF 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 and has a weakness for Tacos and Pizza.

Website: https://www.idesignsmf.com/

    


2 Comments

michael.sears.351
Feb 03, 2013
nice work,
1

Mick
Feb 03, 2013



Connect with us:


Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.

  Receive our monthly newsletter right in your inbox.


Advertisement  




 Tutorials
In this section you will find in-depth how-to's involving common SMF development and design techniques.



go up