Circle Boxes

Circles inside of boxes

by Christian Juth

HTML

<div class="row">
    <div class="circle"></div>
</div>
<div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
</div>
<div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>
<div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
</div>
<div class="row">
    <div class="circle"></div>
</div>

CSS

.circle {
    border-style: solid;
    border-color: red;
    height: 70px;
    width: 70px;
    border-radius: 40px;
    margin: 2px;
    display:inline-block;
    vertical-align: middle;
}
.row {
    border-style: solid;
    border-color: black;
    height: 100px;
    line-height: 100px;
    width: 700px;
    margin: 10px;
    text-align: center;
}