I would like to know how these fields are created, I created an example, but I do not know if that is how it is actually created. Here is an example of what I created:
.nota {
background-color: #CCC;
width: 500px;
height: 50px;
font-family: tahoma, arial;
font-weight: 100;
}
.cor-inicio-nota {
background-color: #0F0;
width: 5px;
height: 50px;
float: left;
}
.texto-nota {
width: 495px;
height: 50px;
background-color: #FF0;
display: inline-block;
text-indent: 15px;
}
<!DOCTYPE html>
<html>
<head>
<title>teste</title>
</head>
<body>
<div class="nota">
<div class="cor-inicio-nota">
</div>
<div class="texto-nota">
<p><b>Nota:</b> observações importantes irão aqui...</p>
</div>
</div>
</body>
</html>
Would you like to reduce the amount of code and get that same effect?