Neopets: Card 01

<div class="wrapper">

<div class="card"><div class="card-container">

<div class="header"><img src="https://i.imgur.com/xJEKpEe.jpg"></div>

<table><tr><td><b>Layout 01</b>
<br>A simple profile card</td></tr>

<tr>

<td><div class="tc"><div class="text"><b>Date Started</b>
<br>July 22</div></div></td>

<td><div class="tc"><div class="text"><b>Date Completed</b>
<br>July 22
</div></div></td>

<td><div class="tc"><div class="text"><b>Other</b>
<br>Something</div></div></td>

</tr>
</table>

</div></div>

</div>

<style>

/* CSS by Milkwash ask for any assistance */

body { margin: 0; padding: 0;
    font-family: Trebuchet MS, Calibri, Arial, Sans-Serif; color: #b2969a;
    font-size: 12px; background: none;
text-align: center;
}

* { border: 0; padding: 0; box-sizing: border-box; }

b {}

.wrapper { width: 100%; height: 100%;
background-color: #f3d9d8;
display: table;
    vertical-align: top;
    text-align: center;
}

.card {
    height: 100%;
width: 100%;
    vertical-align: middle;
    display: table-cell;
    text-align: center;
}

.card-container { margin: auto; width: 500px;

background-color: #f9ecec;
border: 1px solid #fff;
}

.header { width: 100%; height: 250px;
background-color: #fff;
overflow: hidden;border-bottom: 1px solid #fff; }

.header img { margin-top: -250px; width: 100%; }

table {
font-family: Verdana; font-size: 11px; width: 100%;
 table-layout: fixed;
  width: 100%;
    border-spacing: 10px;
}

table tr { width: 100%; display: inline-table;
table-layout: fixed;
    border-spacing: 10px; }

table tr td {
padding: 10px;
text-align: center; }

.tc { width: 100%; height: 100%;
background-color: rgba(255, 255, 255, 0.5); }

.alll { background-color: #fff; }
</style>