Although I'm new to this, I've been struggling to achieve a specific layout for a team page. My goal is to display a picture on the left side and text on the right for each team member. The design includes the person's name, title, and a set of badge links (for email, LinkedIn, and Twitter) positioned neatly below the title using a table. I have managed to create the layout for one person successfully with the following HTML:
<div class="left">
<img src="url"/>
</div>
<div class="right">
<H3>Name</H3>
<H4>Title</H4>
<table>
<tr>
<td><a href="mailto:email"><img src="url"/></td>
<td><a href="http://linkedin.com/url"><img src="url"/></a></td>
<td><a href="url"><img src="url"/></a></td>
</tr>
</table>
<p>Experience</p>
<p>Experience</p>
<p>Experience</p>
</div>
Here is the CSS code used:
.left img{
position:relative;
float:left;
height:15%;
width:15%;
top:50px;
}
.right{
position: relative;
float:left;
margin-top:10px;
}
.right h3{
color:#39c388;
font-weight:bold;
font-family:Arial,sans-serif;
font-size:28px;
position:relative;
top:30px;
left:20px;
}
.right h4{
color:#818286;
font-family:Arial,sans-serif;
font-size:24px;
position:relative;
top:20px;
left:20px;
}
.right td img{
width:20px;
height:20px;
position:relative;
top:20px;
left:20px;
}
.right td{
width:30px;
}
.right p{
color:#818286;
font-family:Arial,sans-serif;
font-size:20px;
position:relative;
top:40px;
left:20px;
}
Now, I want to repeat this layout for multiple team members stacked on top of each other. How can I achieve this? I've tried enclosing the HTML code in a div with a specified class and playing around with properties like position and z-index, but I haven't had any luck.