Untitled

@charset"UTF-8";
@import url(h)
@fonte-face{
    font-family:'fontelogo';
    src:url("../_fonts/PinyonScript-Regular.otf");
}
body {
    font-family:Arial, sans-serif;
    background-color:#dddddd;
    color:rgba(0,0,0,1);
}
div#interface{
    width:900px;
    background-color:#ffffff;
    margin:-20px auto 0px auto;
    box-shadow:0px 0px 10px rgba(0,0,0,.5);
    padding:10px 10px 10px 10px;
}
 p
{
text-align: justify;
text-indent: 50px;
}
a{/* aqui da erro no index */
    color:#606060;
    text-decoration: none;
}
a:hover {
    text-decoration:underline;
}
header#cabecalho img#icone{
    position:absolute;
    left:780px;
    top:70px;
}
header#cabecalho{
    border-bottom:1px #606060 solid;
    height:150px;
    background:url("../_imagens/glass-logo-peq.jpg")no-repeat 0px 80px;
}
header#cabecalho h1{
    font-family:'fonteLogo',Pinyon Script;cursive;/* nao consegui alterar a fonte para buble*/
    font-size:30pt;
    color:#606060;
    text-shadow:1px 1px 1px rgba(0,0,0,.6);
    padding:0px;
    margin-bottom:0px;
}
header#cabecalho h2{
    font-family:Arial,sans-serif;
    color:#888888;
    font-size:15pt;
    padding:0px;
    margin-top:0px;
}
/*formatação de imagens com legendas*/
figure.foto-legenda{
    position:relative;
    border:8px solid white;
    box-shadow:1px 1px 0px black;
    }
figure.foto-legenda img{
width:100%;
height:100%;
}
figure.foto-legenda figcaption{
    opacity:0;
    position:absolute;
    top:0px;
    background-color:rgba(0,0,0,.4);
    color:white;
    width:100%;
    height:100%;
    padding:1px;
    box-sizing:border-box;
    transition:opacity 1s;
}
figure.foto-legenda:hover figcaption{
    opacity:1;
}
nav#menu{/* formatação de menu*/
    display:block;
}
nav#menu ul{
    list-style:none;
    text-transform:uppercase;
    position:absolute;
    top:-20px;
    left:500px;
}
nav#menu li{
    display: inline-block;
    background-color:#dddddd;
    padding:10px;
    margin:2px;
    transition:background-color 1s;
}
nav#menu li:hover{
background-color:#606060;

}
nav#menu h1{
    display:none;
}
nav#menu a{
    color:#000000;
    text-decoration:none;
}
nav#menu  a:hover{
    color:#ffffff;
    text-decoration: underline;
}
section#corpo{
display:block;
width:520px;
float:left;
border-right:1px solid #606060;
padding-right:15px;
}
article#noticia-principal h2 {
    font-size:12pt;
    color:#606060;
    background-color:#dddddd;
    padding: 5px 0px 5px 10px;
    margin: 10x 0px 10px 0px;
}
header#cabecalho-artigo h1{
    font-family:'fonteLogo',sans-serif;
    font-size:20pt;
    color:#606060;
    margin-bottom:0px;
    margin-top:0px;
}
.direita {
    text-align: right;
}
header#cabecalho-artigo h2{
    font-size:13pt;
    color:#cecece;
    background-color:#ffffff;
}
header#cabecalho-artigo h3{
    font-size:12px;
    color:#606060;
}
table#tabelaspec{
border:1px solid #606060;
border-spacing:0px;
margin-left:auto;
margin-right:auto;
}
table#tabelaspec td {
border:1px solid #606060;
padding:10px;
text-align:right;
vertical-align: middle;

}
table#tabelaspec td.ce {
    color:#ffffff;
    background-color:#606060;
    vertical-align: top;
    font-weight: bold;
}
table#tabelaspec td.cd{
    background-color:#cecece;
    vertical-align:left;
    text-align:left;
}
table#tabelaspec caption {
    color:#888888;
    font-size: 13pt;
    font-weight:bolder;
}
table#tabelaspec caption span{
    display: block;
    float: right;
    color: #888888;
    font-size: 8pt;
    margin-top: 10pt;
}
aside#lateral{
    display:block;
    width:350px;
    float:right;
}
footer#rodape{
    clear:both;
    border-top:1px solid #606060;
}
footer#rodape p {
    text-align:center;
}
-------------------------
    <!DOCTYPE html>
<html lang=pt-br>
<head>
    <meta charset="UTF-8"/>
<title>Tudo sobre Google Glas</title>
    <link rel="stylesheet"href="_css/estilo.css"/>
</head>
<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="_imagens/glass-oculos-preto-peq.png">
    <nav id="menu">

    <h1>Menu Principal</h1>

        <ul type="disc">

    <li><a href="index.html">Home<a/></li>

    <li><a href="specs.html">Especificações<a/></li>
    <li><a href="fotos.html">Fotos<a/></li>

    <li><a href="multimidia.html">Multimídia<a/></li>
    <li><a href="Fale-conosco.html">Fale conosco<a/></li>

        </ul>
    </nav>
</header> <!--- header e a tag pa criar cabeçalho--->

    <section id="corpo">
    <article id="noticia-principal">
    <header id="cabecalho-artigo">
    <hgroup>
    <h3>Tecnologia >Inovações</h3>
<!----'&nbsp'; tag pra dar espaço--->
    <h1>Saiba tudo sobre o Google Glass</h1>
    <h2>por Gustavo Guanabara</h2>
    <h3 class="direita">Atualizado em 23/Abril/2013</h3>
    </hgroup>
    </header>

    <h2>O que é</h2>

    <p>O <span style="font-weight:900;">Google Glass</span> é um acessório em forma de óculos que possibilita a interação dos usuários com diversos conteúdos em realidade aumentada. Também chamado de <a href="http://glass.google.com"target="_blank">Project Glass</a>**<!-- do começo do paragrafo ate aqui fica tudo sublinhado e com a cor diferente-->**, o eletrônico é capaz de tirar fotos a partir de comandos de voz, enviar mensagens instantâneas e realizar vídeo&shy;con&shyferên&shycias.Seu lançamento está previsto para 2014, e seu preço deve ser de US$ 1,5 mil.Atualmente o <em>Google&shy;Glass</em> encontra-se em fase de testes e já possui um vídeo totalmente gravado com o dispositivo.Além disso, a companhia de buscas registrou novas patentes anti-furto e de desbloqueio de tela para o acessório.</p>
    <figure class="foto-legenda">
    <img src="_imagens/glass-quadro-homem-mulher.jpg"/>
    <figcaption>
    <h3>Google Glass</h3>
    <p>Uma nova maneira de ver o mundo </p>
    </figcaption>
    </figure>
    <h2>Data de lançamento</h2>
    <p>Não há uma data específica e oficial para o dispositivo ser lançado, ainda. Pode ser que ele esteja disponível em demonstrações a partir de 2013, mas seu lançamento para as lojas fica para, pelo menos, 2014.</p>
    <h2>Especificações Técnicas</h2>
    <table id="tabelaspec">
    <caption>Tabela Técnica do Google Glass <span>Mar/2013</span></caption>
    <tr><td class="ce">Tela</td><td class="cd">Resolução equivalente a tela de 25"</td></tr>
    <tr><td rowspan="2"class="ce">Camera</td> <td class="cd"> 5MP para fotos</td></tr>
    <tr><td class="cd"> 720p para vídeos</td></tr>
    <tr><td rowspan="2" class="ce">Conectividade</td><td class="cd"> Wi-Fi</td></tr>
    <tr><td  class="cd">Bluetooth</td></tr>
    <tr><td class="ce">Memória Interna</td><td  class="cd"> 12GB</td></tr>
    </table>

    <h2>Como funciona</h2>
    <p>De acordo com fontes próximas do Google, os óculos vão contar com uma pequena tela de LCD ou AMOLED na parte superior e em frente aos olhos do usuário.Com o uso de uma câmera e GPS, você pode se situar, assim como selecionar opções com o movimento da cabeça</p>
    <h2>O que você pode fazer com o Google Glasses</h2>
    <p>O vídeo de divulgação do Google mostra que você pode se transformar em uma espécie de “super-<wbr/>humano”,já que o aparelho pode indicar a quantos metros você está de seu destino, se o metrô está aberto ou fechado, mostrar o clima, agenda e até mesmo permitir que você marque encontros apenas com comandos de voz.</p>

    [AQUI ENTRA UM VÍDEO]
    </article>
    </section>
<aside id="lateral">
    <h1>Outras Notícias</h1>
    Vídeo mais recente

[AQUI ENTRA UM VÍDEO]

    <h2>Novidades no Glass</h2>
    <p>O Google enfim revelou as especificações completas do Google Glass, e com ele uma surpresa ainda inédita no mercado: a gigante das buscas usará um sistema de áudio baseado na transdução por condução. Através das hastes dos óculos, o som será transmitido para o ouvido do usuário   por meio de microvibrações em determinados ossos de sua cabeça, sem usar nenhum tipo de alto-falante.</p>
    <p> Além da surpresa do áudio, a tela montada a frente do olho do usuário também chamou atenção.    Serão 640 x 360 pixels de resolução que, em proporção, equivaleria a um monitor de 25 polegadas de alta definição colocado a 2,5 metros de distância do espectador.</p>
</aside>
<footer id="rodape">

    <p>Copyright &copy; 2013 - by Gustavo Guanabara<br/>
    <a href="http://facebook.com/cursoemvideo"target="blank">Facebook</a> |
    <a href="http://twitter.com/cursoemvideo"target="blank">Twitter</a></p>
</footer>
</div>
</body>
</html>