Tenho conhecimento muito básico em html e css, por isso quero a ajuda de vocês para a construção de alguns pontos do layout abaixo usando HTML e CSS.
O img trata de uma imagem de tamanho 100px por 100px.
Observação: O texto A,B e F tem que ter um espaço entre as imagens e estar centralizado conforme a imagem abaixo.
O texto C,D e F, tem que estar embaixo da imagem, porém centralizado conforme é mostrado.
Conto com a ajuda de vocês ! Obrigada.
No codigo abaixo iniciei a implementação, porém não sei como deixar igual ao demonstrado acima quanto ao espaço e pular linha para cada imagem dos Texto A e Texto B.
<div id="tudo" >
<div style=" height:72px; float:left; background-color:yellow" >
<img src="images.png" alt="" style="width:100px; height:100px; "/>
<p style="float:right; background-color:white"> Ler</p>
</div>
<div style=" height:72px; float:left; background-color:yellow" >
<img src="images.png" alt="" style="width:100px; height:100px; "/>
<p style="float:right; background-color:white"> Ler</p>
</div>
</div>