<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Organization Structure</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f5f5f5;
margin: 0;
padding: 20px;
text-align: center;
}
.org-chart {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
}
.level {
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
}
.card {
background: white;
width: 250px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
overflow: hidden;
text-align: left;
}
.header {
background: #003366;
color: white;
padding: 10px;
font-size: 18px;
font-weight: bold;
text-align: center;
}
.vp-header {
background: #0092d1;
}
.manager-header {
background: #b0c426;
}
.card-content {
padding: 15px;
font-size: 14px;
}
.avatar {
width: 70px;
height: 70px;
border-radius: 50%;
float: right;
margin-left: 10px;
background: #ddd;
}
</style>
</head>
<body>
<div class="org-chart">
<!-- President -->
<div class="level">
<div class="card">
<div class="header">President</div>
<div class="card-content">
<img src="https://i.imgur.com/4Z7b8Dg.png" class="avatar">
<strong>John Smith</strong><br>
555-3010<br>
jsmith@abc.com
</div>
</div>
</div>
<!-- VPs -->
<div class="level">
<div class="card">
<div class="header vp-header">VP Marketing</div>
<div class="card-content">
<img src="https://i.imgur.com/w1X9FQg.png" class="avatar">
<strong>Kate Williams</strong><br>
555-3042<br>
sjones@abc.com
</div>
</div>
<div class="card">
<div class="header vp-header">VP Sales</div>
<div class="card-content">
<img src="https://i.imgur.com/Euvq1Yl.png" class="avatar">
<strong>Holly Greene</strong><br>
555-3017<br>
hgreene@abc.com
</div>
</div>
<div class="card">
<div class="header vp-header">VP Production</div>
<div class="card-content">
<img src="https://i.imgur.com/3P55m5c.png" class="avatar">
<strong>Tom Allen</strong><br>
555-3021<br>
tallen@abc.com
</div>
</div>
</div>
<!-- Managers -->
<div class="level">
<!-- Marketing Managers -->
<div>
<div class="card">
<div class="header manager-header">Manager</div>
<div class="card-content">
<img src="https://i.imgur.com/d2QFqS4.png" class="avatar">
<strong>Alice Johnson</strong><br>
555-3033<br>
ajohnson@abc.com
</div>
</div>
<br>
<div class="card">
<div class="header manager-header">Manager</div>
<div class="card-content">
<img src="https://i.imgur.com/aX3zdTj.png" class="avatar">
<strong>Mike Fox</strong><br>
555-3022<br>
mfox@abc.com
</div>
</div>
</div>
<!-- Sales Managers -->
<div>
<div class="card">
<div class="header manager-header">Manager</div>
<div class="card-content">
<img src="https://i.imgur.com/bQd4oqR.png" class="avatar">
<strong>Lou Silva</strong><br>
555-3018<br>
lsilva@abc.com
</div>
</div>
<br>
<div class="card">
<div class="header manager-header">Manager</div>
<div class="card-content">
<img src="https://i.imgur.com/fA1bHG1.png" class="avatar">
<strong>Kate Bush-White</strong><br>
555-3009<br>
kbushwhite@abc.com
</div>
</div>
</div>
<!-- Production Managers -->
<div>
<div class="card">
<div class="header manager-header">Manager</div>
<div class="card-content">
<img src="https://i.imgur.com/AWW3rCt.png" class="avatar">
<strong>Cassie Bonne</strong><br>
555-3007<br>
cbonne@abc.com
</div>
</div>
<br>
<div class="card">
<div class="header manager-header">Manager</div>
<div class="card-content">
<img src="https://i.imgur.com/2sJqZ3U.png" class="avatar">
<strong>Lydia Chance</strong><br>
555-3015<br>
lchance@abc.com
</div>
</div>
</div>
</div>
</div>
</body>
</html>