WordPress.org

1. winger15mk
   Member
   Posted 1 year ago #

   Hi Guys i am working in my new portfolio website using the 'simplefolio' theme.

   I want the top of my 'about' to look the same as this website:

   http://niittymaa.com/ansioluettelo/

   but not sure how to style it like that with the image/headings/dashed lines layout.

   I have got as far as recreating the box by using the blockquote tag but that is about it.

   Thanks for your help in advance!

   Gary

2. miocene22
   Member
   Posted 1 year ago #

   here's something I rustled up quickly:

   html:

   <div id="about">
   	<div class="name">
   		<img alt="me" class="pic" src="http://niittymaa.com/wp-content/uploads/2010/03/omakuva_small.png" />
   		<div>
   			<h2>My Name</h2>
   			<h3>My description</h3>
   		</div>
   	</div>
   	<div class="contact">
   		<h3>contact</h3>
   		<p><span class="contact1">Phone:</span> 012345675</p>
   		<p><span class="contact1">email:</span> la@la.com</p>
   	</div>
   	<div class="clear">
   	</div>
   </div>

   css:

   #about {
   	width: 80%;
   	background-color: #dddddd;
   	border: 1px #aaaaaa solid;
   	margin-left: auto;
   	margin-right: auto;
   	font-family: Arial, Helvetica, sans-serif;
   }
   .name {
   	float: left;
   	width: 60%;
   	border-right: 1px #ccc dashed;
   }
   .name div {
   	float: left;
   }
   .name .pic {
   	float: left;
   	margin: 5px;
   	padding: 4px;
   	border: 2px #ccc solid;
   	background-color: #fff;
   }
   .name h3 {
   	margin-top: 4px;
   }
   .name h2 {
   	border-bottom: 2px green dashed;
   	margin-bottom: 0px;
   }
   .contact {
   	float: right;
   	padding: 10px;
   	width: 30%;
   }
   .clear {
   	clear: both;
   }

   Obviously I'm not gonna do it all but it shouldn't be too hard to get it looking similar to that on the page you linked to.

3. winger15mk
   Member
   Posted 1 year ago #

   Thats fantastic! Thank you so much for your help :D

Topic Closed

This topic has been closed to new replies.