Skip to content

Html, Css  #19

@BigshowBiel

Description

@BigshowBiel

Html:
!DOCTYPE html>

<title>Treinando Seletores</title>

Controle de Alimentos

  <div class="content"> 
  <h2>Saúdavel</h2> 
  <p>Água: Importante saber que a água é primordial para hidratar o corpo. Ela é a fonte de <b>energia</b> para as células e também é essencial para a manutenção da temperatura corporal.
  Ovo: Não diria que é o alimento mais querido, no entanto é fácil de encontrar e de baixo custo, além de fornecer variadas formas de consumo. Também temos o Café, Aveia, Banana, Oleaginosas, Peixes e Feijão. </p>     
 
<img src="alimentos/vitamina.jfif" ALT="Alimento Limpo" width="400" height="200">
  </div>
</section>

<section id="exemplo">
  <h2>Prejudicial</h2>
  <p> Entram nessa lista os salgadinhos, sorvete, refrigerante, embutidos e achocolatados. A nutricionista infantil Gabriela Kapim, que apresentou o programa “Socorro” meu filho come mal”, no canal a cabo GNT, explica que eles são, na maioria, alimentos <b>ultraprocessados.</b> </p>
  <img src="alimentos/simpons.webp" alt="Exemplo" widht="300" height="200" >
</section>

<section id="exemplo">
  <h2>Consumir Moderadamente</h2>
  <p><li> Granola e barra de cereais. As duas são ótimas opções para o lanchinho entre as refeições! Mesmo assim, fique atento aos rótulos de cada produto.</li>

  • Oleaginosas, como castanhas, nozes, amêndoas e avelãs.
  • Frutas secas ou desidratadas. Ao contrário das consumidas in natura, as frutas secas representam uma fonte mais concentrada de fibras e outros nutrientes. Elas também possuem mais calorias e, por serem menores e mais leves, tendemos a exagerar nas porções.
  • açúcar mascavo. Ele está sempre presente na lista das dietas de emagrecimento! Mesmo assim, esse ingrediente possui quantidades semelhantes de calorias, se comparado ao açúcar refinado. Por isso, é preciso controlar as quantidades ingeridas da mesma forma.
  • light e diet.

  • Exemplo

    © 2024 - Saúde e Bem-estar

    CSS:
    /* Estilo Geral da Página */
    body{
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
    }

    header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
    }

    h1{
    font-size: 2.5em;
    margin-bottom: 10px;
    }

    nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }

    nav li{
    display: inline-block;
    margin-right: 20px;
    }

    nav a{
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    }

    /* Estilos para seções*/
    main{
    padding: 20px;
    }

    section{
    margin-bottom: 30px;
    }

    h2{
    font-size: 1.8em;
    margin-bottom: 15px;
    }

    p{
    text-align: justify;
    }

    img{
    width: 250px;
    height: 250px;
    object-fit: cover; /* Ajuste proporcional da imagem*/
    margin-bottom: 10px;
    }

    /* Estilo para o rodapé*/
    footer{
    text-align: center;
    padding: 10px;
    background-color: #ddd;

    Metadata

    Metadata

    Assignees

    No one assigned

      Labels

      No labels
      No labels

      Type

      No type

      Projects

      No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions