<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css" />
<script src="lib/script.js"></script>
</head>
<body>
<div class="table">
<div class="tr">
<span class="th">Quarter 1</span>
<span class="td">Profit: +5%, Net Income: +2.5%</span>
</div>
<div class="tr">
<span class="th">Quarter 2</span>
<span class="td">Profit: +10%, Net Income: +5.6%</span>
</div>
<div class="tr">
<span class="th">Quarter 3</span>
<span class="td warning">Profit: -2.3%, Net Income: -1.5%</span>
</div>
<div class="tr">
<span class="th">Quarter 4</span>
<span class="td">Profit: +5%, Net Income: +7.5%</span>
</div>
</div>
<br/>
<br/>
<div class="table">
<div class="tr">
<span class="th">East Division</span><span class="td">+11% Increase Revenue</span>
</div>
<div class="tr">
<span class="th">West Division</span><span class="td">+69% Increase Revenue</span>
</div>
<div class="tr">
<span class="th">South Division</span><span class="td warning">-5% Decrease Revenue</span>
</div>
<div class="tr">
<span class="th">North Division</span><span class="td">+10% Increase Revenue</span>
</div>
</div>
</body>
</html>
/* Add your styles here */
body{
font-family:"Arial Narrow",sans-serif;
font-size:120%;
}
div.table{
border:1px solid rgb(50, 65, 96);
display:table;
width:90%;
padding:5px;
height:auto;
}
div.tr{
display:table-row;
width:100%;
height:30px;
}
span.th,span.td{
display:table-cell;
vertical-align: bottom;
border-bottom:1px dotted rgb(50, 65, 96);
padding-top:5px;
}
span.th{
font-weight:bold;
width:15%;
text-align: left;
padding-left:5px;
background-color: #e8e8e8;
}
span.td{
padding-left:10px;
text-align:left;
}
.warning {
color:red;
}
// Add your code here