<div class="box borda1 cor1 fundo1"> <h2 class="h2 cor1h2">Lorem ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit.</p> <p>Ut sollicitudin sodales purus.</p> </div> <div class="box borda2 cor2 fundo2"> <h2 class="h2 cor2h2">Lorem ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit.</p> <p>Ut sollicitudin sodales purus.</p> </div> <div class="box borda3 cor3 fundo3"> <h2 class="h2 cor3h2">Lorem ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit.</p> <p>Ut sollicitudin sodales purus.</p> </div>
html, body { margin: 0; padding: 0; font: 62.5%/1.3 sans-serif; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .box { width: 20%; float:left; min-height:20rem; margin:2% 1%; padding: 0.5% 2%; line-height:1.2; border-radius: 1rem; } .borda1 { border: 0.5rem solid #900; } /* marrom */ .borda2 { border: 0.5rem solid #060; } /* verde */ .borda3 { border: 0.5rem solid #f00; } /* vermelho */ .cor1 { color: #0b0ce8; } /* azul */ .cor2 { color: #000000; } /* preto */ .cor3 { color: #cc3300; } /* vermelho */ .fundo1 { background: #ffffc3; } /* amarelo */ .fundo2 { background: #87c2e8; } /* azul */ .fundo3 { background: #a2ff94; } /* verde */ .box h2 { margin:0; font-size:2rem; } .box p { margin:3% 0; font-size:1.4rem; }