<div class="container">
<div class="row">
<div class="col-xl-4">
<div class="item">
<div class="s">Text 1</div>
<h6>Title</h6>
<h5>$ 50000</h5>
<div class="s">Text 1</div>
<p>Text text</p>
<p class="list">25 el</p>
<ul>
<li><span>1</span>text 1</li>
<li><span>2</span>text 2</li>
<li><span>3</span>text 3</li>
<li><span>3</span>text 4</li>
<li><span>45</span>text 5</li>
</ul>
</div>
</div>
<div class="col-xl-4">
<div class="item">
<div class="s">Text 1</div>
<h6>Title</h6>
<h5>$ 50000</h5>
<div class="s">Text 1</div>
<p>Text text</p>
<p class="list">25 el</p>
<ul>
<li><span>1</span>text 1</li>
<li><span>2</span>text 2</li>
<li><span>3</span>text 3</li>
<li><span>3</span>text 4</li>
<li><span>45</span>text 5</li>
</ul>
</div>
</div>
<div class="col-xl-4">
<div class="item">
<div class="s">Text 1</div>
<h6>Title</h6>
<h5>$ 50000</h5>
<div class="s">Text 1</div>
<p>Text text</p>
<p class="list">25 el</p>
<ul>
<li><span>1</span>text 1</li>
<li><span>2</span>text 2</li>
<li><span>3</span>text 3</li>
<li><span>3</span>text 4</li>
<li><span>45</span>text 5</li><li><span>45</span>text 5</li><li><span>45</span>text 5</li><li><span>45</span>text 5</li><li><span>45</span>text 5</li><li><span>45</span>text 5</li>
</ul>
</div>
</div>
</div>
</div>
.item {
padding: 10px;
text-align: center;
box-shadow: 0 0 10px #ccc;
.s {
color: #ccc;
font-size: 12px;
}
h6 {
font-size: 14px;
}
h5 {
color: green;
font-style: 30px;
}
.list {
font-weight: 700;
}
ul {
text-align: left;
li {
padding: 5px 10px;
list-style: none;
&:nth-child(odd){
background-color: #ccc;
}
span {
display: inline-block;
width: 20px;
margin: 0 10px 0 0;
background-color: rgba(0, 128, 0, 0.49);
}
}
}
}
View Compiled
This Pen doesn't use any external JavaScript resources.