BoxTest

for beginner frontend

by Laurel Bruggeman

HTML

<div class="box blue">Box1</div>
    <div class="box red">Box2</div>
    <div class="box green">Box3</div>

CSS

.box{
    box-sizing: border-box;
    display: inline-block;
    width: 100px; /*width: 32%;*/
    height: 100px;
    border: 1px solid #000;
    padding: 10px;
    padding-top: 40px;
    color: black;
    font: 0.8em Arial;
    text-align: center;
    margin-left: 1%;
    margin-bottom: 10px;
}
.box:first-child{
    margin-left: 0;
}
.red{
    background-color: #F5A9A9;
}
.green{
    background-color: #81F7BE;
}
.blue{
    background-color: #A9BCF5;
}
@media screen and (max-width:450px){
    .box{
        width: 49%;
        margin-left: 0;
    }
}
@media screen and (max-width:300px){
    .box{
        width: 100%;
        margin-left: 0;
    }
}