<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="wrap">
<div class="nae grid" style="width: 3010px;">
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 1</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 2</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 3</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 4</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 5</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 6</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 7</div>
</div>
</div>
</div>
<div class="wrap">
<div class="nae grid" style="width: 3010px;">
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 1</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 2</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 3</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 4</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 5</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 6</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 7</div>
</div>
</div>
</div>
<div class="wrap">
<div class="nae grid" style="width: 3010px;">
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 1</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 2</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 3</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 4</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 5</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 6</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 7</div>
</div>
</div>
</div>
<div class="wrap">
<div class="nae grid" style="width: 3010px;">
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 1</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 2</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 3</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 4</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 5</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 6</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 7</div>
</div>
</div>
</div>
<div class="wrap">
<div class="nae grid" style="width: 3010px;">
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 1</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 2</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 3</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 4</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 5</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 6</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 7</div>
</div>
</div>
</div>
<div class="wrap">
<div class="nae grid" style="width: 3010px;">
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 1</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 2</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 3</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 4</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 5</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 6</div>
</div>
<div class="item">
<div class="itemTopImageArea"></div>
<div class="itemBottomTextArea">Test Item 7</div>
</div>
</div>
</div>
</body>
</html>
// Code goes here
.grid .item {
background-color: #595959;
display: block;
float: left;
font-size: 0.8em;
margin-bottom: 10px;
margin-left: 0;
margin-right: 10px;
margin-top: 10px;
text-align: center;
text-decoration: none;
text-shadow: none;
vertical-align: middle;
white-space: normal !important;
}
.grid .item:nth-child(2n+2) {
background-color: #003F72;
color: #fff;
}
.grid .item:first-child{
margin-left: 10px;
}
.item, .itemTopImageArea{
height: 160px;
}
.item, .itemBottomTextArea, .itemTopImageArea{
width: 140px;
}
.itemBottomTextArea{
text-shadow: none;
color: #fff;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.8);
height: 60px;
}
.itemTopImageArea{
color: #fff;
background-position: top center;
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: -60px;
}
.wrap{
background-color: transparent;
color: #000;
height: 200px;
max-width: 1200px;
overflow-x: scroll;
white-space: nowrap;
width: 100%;
}