Arquivo: spec.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tudo sobre o Google Glass</title>
    <link rel="stylesheet" href="_css/estilo.css">
    <link rel="stylesheet" href="_css/specs.css">
</head>
<script src="_javascript/funcoes.js"></script>
<body>
    <div id="interface">
        
        <header id="cabecalho">
            <hgroup>
                <h1>Google Glass</h1>
                <h2>A revolução do Google está chegando</h2>
            </hgroup>
    
            <img id="icone" src="/curso-html5-pacote01/projeto-glass-html5/
            _imagens/glass-oculos-preto-peq.png" alt="oculos preto do google glass">
            <nav id="menu">
                <h1>Menu Principal</h1>
                <ul type="disc">   
                    <li onmouseover="mudaFoto('_imagens/home.png')" 
                    onmouseout="mudaFoto('_imagens/especificacoes.png')">
                        <a href="index.html">Home</a>
                    </li>
                    <li onmouseover="mudaFoto('_imagens/especificacoes.png')" 
                    onmouseout="mudaFoto('_imagens/especificacoes.png')">
                        <a href="specs.html">Especificações</a>
                    </li>
                    <li onmouseover="mudaFoto('_imagens/fotos.png')" 
                    onmouseout="mudaFoto('_imagens/especificacoes.png')">
                        <a href="fotos.html">Fotos</a>
                    </li>
                    <li onmouseover="mudaFoto('_imagens/multimidia.png')" 
                    onmouseout="mudaFoto('_imagens/especificacoes.png')">
                        <a href="multimidia.html">Multimídia</a>
                    </li>
                    <li onmouseover="mudaFoto('_imagens/contato.png')" 
                    onmouseout="mudaFoto('_imagens/especificacoes.png')">
                        <a href="fale-conosco.html">Fale conosco</a>
                    </li>
                </ul>
            </nav>
        </header>

    <section id="corpo-full">
        <article id="noticia-principal">
            <header id="cabecalho-artigo">
                <hgroup>
                    <h3>Glass > Especificações</h3>
                    <h1>Raio-X no Google Glass</h1>
                    <h2>por Gustavo Guanabara</h2>
                    <h3 class="direita">Atualizado em 01/Maio/2013</h3>
                </hgroup>
            </header>

            <p>Clique em qualquer área destacada da imagem para ter mais informações 
            sobre os recursos do Google Glass. Qualquer ponto vermelho vai te levar a 
            um lugar cheio de novas informações.</p>

            <section id="conteudo">
                <img src="_imagens/glass-esquema-marcado.jpg" alt="">
                <iframe src="google-glass.html" name="janela" id="frame-spec"></iframe>
            </section>
        
        </article>
    </section>

            <footer id="rodape">
                <p>Copyright &copy; 2013 - by Gustavo Guanabara <br> 
                <a href="<https://facebook.com/cursosemvideo>" target="_blank">Facebook
                </a> | <a href="<https://twitter.com/cursosemvideo>" target="_blank">
                Twitter</a></p>
            </footer>
        </div>
    </body>
</html>

`<iframe>` : é usada para incorporar outro documento HTML na página HTML atual. Isso permite que você carregue e exiba conteúdo de outra página da web dentro de uma página da web atual.

Arquivo: specs.css

@charset "UTF-8";

section#conteudo {
    width: 1000px;
    margin: auto;
}

iframe#frame-spec {
    width: 400px;
    height: 280px;
    border: none;
    overflow: hidden;
}

iframe#frame-spec::-webkit-scrollbar {
    display: none;
}

`overflow: hidden;` : é usada para controlar o que acontece com o conteúdo que é muito grande para caber em uma área especificada.

Especificamente, overflow: hidden; faz com que qualquer conteúdo que exceda a área delimitada seja cortado e não visível para o usuário. Nenhuma barra de rolagem é fornecida; o conteúdo simplesmente desaparece no limite da caixa do elemento.

`::-webkit-scrollbar` : é uma extensão não padrão do CSS usada para personalizar a aparência da barra de rolagem em navegadores WebKit, como Chrome, Safari e o novo Microsoft Edge.

Arquivo: spec.html

<iframe> : é usada para incorporar outro documento HTML na página HTML atual. Isso permite que você carregue e exiba conteúdo de outra página da web dentro de uma página da web atual.

Arquivo: specs.css

overflow: hidden; : é usada para controlar o que acontece com o conteúdo que é muito grande para caber em uma área especificada.

::-webkit-scrollbar : é uma extensão não padrão do CSS usada para personalizar a aparência da barra de rolagem em navegadores WebKit, como Chrome, Safari e o novo Microsoft Edge.

`<iframe>` : é usada para incorporar outro documento HTML na página HTML atual. Isso permite que você carregue e exiba conteúdo de outra página da web dentro de uma página da web atual.

`overflow: hidden;` : é usada para controlar o que acontece com o conteúdo que é muito grande para caber em uma área especificada.

`::-webkit-scrollbar` : é uma extensão não padrão do CSS usada para personalizar a aparência da barra de rolagem em navegadores WebKit, como Chrome, Safari e o novo Microsoft Edge.