Exercício (Consolidando o seu conhecimento) 17

Arquivo: index.html

/*Resto do código*/
<section class="mapa">
                <h2 class="titulo-principal">Nosso estabelecimento</h2>
                <p>Nosso estabelecimento está localizado no coração da cidade.</p>

                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d58507.74228578761!2d-46.67790995779376!3d-23.57799895542647!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5a2b2ed7f3a1%3A0xab35da2f5ca62674!2sCaelum%20-%20Escola%20de%20Tecnologia!5e0!3m2!1spt-PT!2sbr!4v1644667840431!5m2!1spt-PT!2sbr"
                 width="80%" height="200" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</section>

<section class="beneficios">
                <h3 class="titulo-principal">Benefícios</h3>

                <ul>
                    <li class="itens">Atendimento aos Clientes</li>
                    <li class="itens">Espaço diferenciado</li>
                    <li class="itens">Localização</li>
                    <li class="itens">Profissionais Qualificados</li>
                </ul>

                <img src="Imagens/beneficios.jpg" class="imagembeneficios">
                <div class="video">
                    <iframe width="560" height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>            
</section>

/*Resto do código*/

Arquivo: style.css

.mapa {
  text-align: center;
  padding: 3em 0;
}

.mapa p {
  margin: 0 0 2em;
}

.video {
  width: 560px;
  margin: 3em auto;
}