Css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
/* Alerta Erro ----------------------------------------------- */ /* Geral */ .alerta { padding: 25px; border: 1px solid gray; border-radius: 3px; margin: 10px; font-size: 18px; } .error { border-color: #e8273b; color: #FFF; background-color: #ed5565; } .sucesso { border-color: #87c940; color: #FFF; background-color: #a0d468; } .atencao { border-color: #f4a911; color: #FFF; background-color: #f6bb42; } .info { border-color: #2f80e7; color: #FFF; background-color: #5d9cec; } |
Html para utilizar, só editar as informações, alerta, erro, sucesso, atenção, Info
|
1 2 3 4 |
<div class="alerta error">Oh não! Isso foi em forma de pera.</div> <div class="alerta sucesso">Parabéns! Você fez alguma coisa.</div> <div class="alerta atencao">Segurem-se, você pode querer verificar isso.</div> <div class="alerta info">Eu tinha torradas para o café da manhã.</div> |
Código em execução
Oh não! Isso foi em forma de pera.
Parabéns! Você fez alguma coisa.
Segurem-se, você pode querer verificar isso.
Eu tinha torradas para o café da manhã.