Página interna

Nesta videoaula, iremos criar uma página HTML com o conteúdo de uma postagem. Para isso, manteremos a estrutura da página principal, alterando o conteúdo central.

Acompanhe a videoaula para compreender todo o processo de construção. Nas próximas seções, alguns trechos de códigos produzidos serão destacados.

Topo

No início de cada postagem, vamos destacar o título e informações adicionais da postagem. Veja o código produzido:

<h1 class="mb-4">Como programar CSS</h1>
<p class="lead">Postado por <a href="#">João</a></p>
<hr>
<p class="text-muted">postado em 1 de Janeiro de 2019</p>
<hr>

Corpo

O corpo da postagem deverá conter uma imagem ilustrativa e o conteúdo da postagem. Para uma primeira etapa, vamos adicionar apenas conteúdo textual. Veja no código:

<img class="img-fluid rounded mb-4" src="imgs/img-destaque-post-01.jpg" alt="Computador">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum incidunt delectus, consequatur
    accusamus enim voluptas atque magni blanditiis quasi culpa voluptatem impedit ratione dicta! Porro
    iure unde repudiandae ut non.</p>

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et cum quibusdam itaque quae deleniti
    vitae, eos quia incidunt facilis, ducimus illo adipisci provident soluta possimus, mollitia qui
    libero quam quisquam?</p>

Perceba que na imagem adicionamos uma margem inferior (mp-4) e arredondamos as bordas através da classe do Bootstrap "rounded".

Download do exemplo

Clique aqui para download