CodePen Embed - FontAwesome

<script src="https://kit.fontawesome.com/52d98fe718.js" crossorigin="anonymous"></script>
<div class="topo">
        <span>Bioparque</span>
    </div>  
    <div class="limita-largura">
        <div class="area apresentacao">
            <h2>Sobre o Bioparque</h2>

            <p>Diferente de tudo que você conhece sobre o antigo zoológico, o BioParque do Rio veio escrever um novo capítulo na história da conservação de espécies no Brasil e ser o cenário de diversas lembranças inesquecíveis que você vai construir com sua família!</p>

            <p>O BioParque do Rio está na Quinta da Boa Vista, no coração de São Cristóvão, também conhecido como Bairro Imperial. Local da antiga residência da família real, hoje a Quinta da Boa Vista reúne história, natureza, cultura e lazer, além de ser um dos maiores parques urbanos do Rio de Janeiro, com cerca de 155 mil metros quadrados.</p>

            <p>O mundo mudou, por isso, não podíamos continuar o mesmo! Deixando de lado toda a antiga concepção de zoológicos e coleções de animais, o BioParque do Rio prioriza o bem-estar e a conservação de espécies!</p>

            <p>Baseado no tripé de pesquisa, conservação e educação, contamos com uma equipe especializada que irá enriquecer sua visita com conhecimentos sobre a fauna e flora.</p>

            <p>Aproveite visitas ilimitadas durante o ano, descontos especiais nos produtos do parque e horários exclusivos, além de contribuir diretamente para nossos projetos de conservação!</p>

            <p>Você conhece os Animáximos? Eva e seus cinco amigos: Jack, Beca, Leo, Tom e Cati embarcam em aventuras radicais contra os vilões do meio ambiente em conteúdos que prometem muita diversão e aprendizado para a turminha.</p>

            <p>Bem-vindo a um novo conceito de zoológico. Diferente de tudo que você conhece sobre o antigo zoológico, o BioParque do Rio veio escrever um novo capítulo na história da conservação de espécies no Brasil e ser o cenário de diversas lembranças inesquecíveis que você vai construir com sua família!</p>
        </div>
        <div class="area galeria">
            <h2>Fotos</h2>
            
            <div class="area-tres-imagens">
                <img src="https://www.devmedia.com.br/arquivos/cursos/css_modf_elements/embed/aula-4/1.jpg">
                <img src="https://www.devmedia.com.br/arquivos/cursos/css_modf_elements/embed/aula-4/2.jpg">
                <img src="https://www.devmedia.com.br/arquivos/cursos/css_modf_elements/embed/aula-4/3.jpg">
                <img src="https://www.devmedia.com.br/arquivos/cursos/css_modf_elements/embed/aula-4/4.jpg">
                <img src="https://www.devmedia.com.br/arquivos/cursos/css_modf_elements/embed/aula-4/5.jpg">
            </div>
        </div>
    </div>
<div class="limita-largura">
    <div class="area redes-sociais">
      <h2>Nossas Redes Sociais</h2>
      <nav>
        <a href="https://www.facebook.com/BioParqueDoRio"><i class="fa-brands fa-square-facebook"></i>/BioParqueDoRio</a>
  <a href="https://www.instagram.com/bioparquedorio/"><i class="fa-brands fa-square-instagram"></i>/bioparquedorio</a>
<a href="https://twitter.com/bioparquedorio"><i class="fa-brands fa-square-twitter"></i>/bioparquedorio</a>
      </nav>
    </div>
  </div>
    <div class="rodape">
        Bioparque - 2022 &copy;
</div><script src="https://kit.fontawesome.com/52d98fe718.js" crossorigin="anonymous"></script>
<div class="topo">
        <span>Bioparque</span>
    </div>  
    <div class="limita-largura">
        <div class="area apresentacao">
            <h2>Sobre o Bioparque</h2>

            <p>Diferente de tudo que você conhece sobre o antigo zoológico, o BioParque do Rio veio escrever um novo capítulo na história da conservação de espécies no Brasil e ser o cenário de diversas lembranças inesquecíveis que você vai construir com sua família!</p>

            <p>O BioParque do Rio está na Quinta da Boa Vista, no coração de São Cristóvão, também conhecido como Bairro Imperial. Local da antiga residência da família real, hoje a Quinta da Boa Vista reúne história, natureza, cultura e lazer, além de ser um dos maiores parques urbanos do Rio de Janeiro, com cerca de 155 mil metros quadrados.</p>

            <p>O mundo mudou, por isso, não podíamos continuar o mesmo! Deixando de lado toda a antiga concepção de zoológicos e coleções de animais, o BioParque do Rio prioriza o bem-estar e a conservação de espécies!</p>

            <p>Baseado no tripé de pesquisa, conservação e educação, contamos com uma equipe especializada que irá enriquecer sua visita com conhecimentos sobre a fauna e flora.</p>

            <p>Aproveite visitas ilimitadas durante o ano, descontos especiais nos produtos do parque e horários exclusivos, além de contribuir diretamente para nossos projetos de conservação!</p>

            <p>Você conhece os Animáximos? Eva e seus cinco amigos: Jack, Beca, Leo, Tom e Cati embarcam em aventuras radicais contra os vilões do meio ambiente em conteúdos que prometem muita diversão e aprendizado para a turminha.</p>

            <p>Bem-vindo a um novo conceito de zoológico. Diferente de tudo que você conhece sobre o antigo zoológico, o BioParque do Rio veio escrever um novo capítulo na história da conservação de espécies no Brasil e ser o cenário de diversas lembranças inesquecíveis que você vai construir com sua família!</p>
        </div>
        <div class="area galeria">
            <h2>Fotos</h2>
            
            <div class="area-tres-imagens">
                <img src="https://www.devmedia.com.br/arquivos/cursos/css_modf_elements/embed/aula-4/1.jpg">
                <img src="https://www.devmedia.com.br/arquivos/cursos/css_modf_elements/embed/aula-4/2.jpg">
                <img src="https://www.devmedia.com.br/arquivos/cursos/css_modf_elements/embed/aula-4/3.jpg">
                <img src="https://www.devmedia.com.br/arquivos/cursos/css_modf_elements/embed/aula-4/4.jpg">
                <img src="https://www.devmedia.com.br/arquivos/cursos/css_modf_elements/embed/aula-4/5.jpg">
            </div>
        </div>
    </div>
<div class="limita-largura">
    <div class="area redes-sociais">
      <h2>Nossas Redes Sociais</h2>
      <nav>
        <a href="https://www.facebook.com/BioParqueDoRio"><i class="fa-brands fa-square-facebook"></i>/BioParqueDoRio</a>
  <a href="https://www.instagram.com/bioparquedorio/"><i class="fa-brands fa-square-instagram"></i>/bioparquedorio</a>
<a href="https://twitter.com/bioparquedorio"><i class="fa-brands fa-square-twitter"></i>/bioparquedorio</a>
      </nav>
    </div>
  </div>
    <div class="rodape">
        Bioparque - 2022 &copy;
    </div>

* {
    margin: 0;
    padding: 0;
}

.limita-largura {
    width: 100%;
    min-width: 320px;
    max-width: 1024px;
    margin: 0 auto;
}

.topo, .rodape {
    width: 100%;
    padding: 16px 0;
    text-align: center;
    background: #ff8014;
    color: #fff;
    font-size: 20px;
}

body {
    font-family: sans-serif;
}

.apresentacao {
    width: calc(100% - 70px);
    overflow-y: scroll;
    height: 315px;
}

.galeria{
    width: calc(100% - 70px);
}

.area {
    margin: 20px 35px;
}

.apresentacao img, .area p, .area-tres-imagens {
    width: 100%;
    margin: 15px 0;
}

.area-tres-imagens {
    display: flex;
    overflow-x: scroll;
}

.galeria img {
    width: calc((100% / 3) - 3px);
    margin: 0 1.5px;
}

.redes-sociais {
  height: 150px;
}

.redes-sociais h2 {
  margin-top: 25px;
  margin-bottom: 15px;
}

.redes-sociais nav {
  display: flex;
  flex-direction: column;
}

.redes-sociais nav a {
  margin-top: 10px;
  color: #333;
  text-decoration: none;
  transtion: filter 0.2s;
}

.redes-sociais nav a:hover {
  filter: brightness(2.0);
}

.redes-sociais nav a i {
  margin-right: 8px;
}

This Pen is owned by Eduardo Soares on CodePen.

See more by @eduscxbox on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.