Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Dúvida no Ex. 4 da Aula 4 - Transformações

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Transformações e atividade Banner do Twitter

por RAYSSA FREITAS
| 39.7k xp | 24 posts

Meu "siga-me no twitter" e as Li's da header, não estão responsivas!!!!!!! me ajudem.

CSS

``` html, body{ overflow-x: hidden; height: 100%; } .titulo-principal { position: relative; } .banner-twitter{ background-color: #3C1D3D; font-size: 20px; color: #fff; font-family: "Open Sans Condensed", "Arial", sans-serif; width: 20%; padding: 10px; position: absolute; top: 0; right: 0; border: solid #000 5px; transform-origin: 0 0; transform: translate(6.5765em, -2.4745em) rotate(45deg); } .banner-twitter a{ color: #fff; text-align: center; } .palavra-home { font-family: "Shadows Into Light", cursive; font-weight: bold; color: #D5447E; position: absolute; font-size: 30px;

} .palavras{ perspective: 6px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.eficiencia { font-size: 400%; top: 40%; left: 64%; transform: translate(-50%, -50%) rotate(-5deg) translateZ(3px) scale(0.15);

} .boas-praticas { top: 70%; left: 20%; transform: rotate(-18deg); -webkit-transform: rotate(-18deg); } .codigo-limpo { font-size: 400%; top: 51%; left: 31%; transform: translate(-50%, -50%) rotate(-5deg) translateZ(3px) scale(0.15); } .css3 { top: 50%; left: 30%; transform: rotate(18deg); -webkit-transform: rotate(18deg); } .html5 { top: 40%; left: 80%; transform: rotate(-28deg); -webkit-transform: rotate(-28deg); } .javascript { top: 10%; left: 60%; transform: rotate(20deg); -webkit-transform: rotate(20deg); } .acessibilidade { top: 30%; left: 25%; } .responsivo { top: 15%; left: 15%; transform: rotate(15deg); -webkit-transform: rotate(15deg); } .otimizacoes { top: 60%; left: 70%;

} .agilidade { top: 10%; left: 30%; -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } .design { top: 35%; left: 65%; -webkit-transform: rotate(25deg); transform: rotate(25deg); } ```

5 respostas
por Natan Souza
| 2099.2k xp | 3697 posts
Instrutor Product Design Lead na Alura

Oi Rayssa, tudo bem?

Faz a gentileza de postar seu código HTML também por favor? Testei aqui o seu CSS e aparentemente está ok!

Não esqueça de colocar tudo entre ```.

Numa linha o ```, na outra todo o código, e depois numa outra linha repita os três backticks.

Abcs!

por RAYSSA FREITAS
| 39.7k xp | 24 posts

``` <!DOCTYPE html>

Foto de João da Silva

João da Silva

Desenvolvedor web

    <ul class="palavras">
        <li class="palavra-home eficiencia">Eficiência</li>
        <li class="palavra-home boas-praticas">Boas práticas</li>
        <li class="palavra-home codigo-limpo">Código limpo</li>
        <li class="palavra-home css3">CSS3</li>
        <li class="palavra-home html5">HTML5</li>
        <li class="palavra-home javascript">JavaScript</li>
        <li class="palavra-home acessibilidade">Acessibilidade</li>
        <li class="palavra-home responsivo">Responsivo</li>
        <li class="palavra-home otimizacoes">Otimizações</li>
        <li class="palavra-home agilidade">Agilidade</li>
        <li class="palavra-home design">Design</li>
    </ul>
    <div class="banner-twitter">
        <a href="http://www.twitter.com/joaodasilva">Siga-me no Twitter</a>    
    </div>
</header>
<main>
    <section class="secao-inicio saudacao">
        <p class="saudacao"><span class="saudacao-inicio">Olá,</span> meu nome é <strong>João da Silva</strong> <span class="saudacao-ultima-linha">e eu construo <em>sites maravilhosos</em></span></p>
        <a class="botao-index" href="bio.html">Conheça mais um pouco sobre mim</a>
    </section>
    <section class="secao-inicio trabalhos">
        <h2>Trabalhos</h2>
        <ul>
            <li><img src="imagens/bmw.png" alt="Site da BMW"></li>
            <li><img src="imagens/ibm.png" alt="Site da IBM"></li>
            <li><img src="imagens/uol.png" alt="Site da UOL"></li>
        </ul>
        <a class="botao-index" href="portfolio.html">Veja mais</a>
    </section>
    <section class="secao-inicio blog">
        <h2>Blog</h2>
        <small>Últimos posts</small>
        <ol>
            <<li class="mais-recente">
            <a href="blog.html">O essencial de design responsivo</a>
            <p class="inicio-post">
              Design responsivo tem ganho cada vez mais atenção como técnica de desenvolvimento de páginas web para dispositivos móveis. Mas como começar?
          </p>
      </li> 
      <li>
        <a href="blog.html">Por que fazer páginas acessíveis?</a>
    </li>
    <li>
        <a href="blog.html">JavaScript não obstrusivo</a>
    </li>
</ol>
<a class="botao-index" href="blog.html">Veja mais</a>

Vamos conversar?

Você pode entrar em contato comigo por e-mail ou pelo telefone (12) 3456-7890

```

por RAYSSA FREITAS
| 39.7k xp | 24 posts

está cortando a parte da header ``` Foto de João da Silva

João da Silva

Desenvolvedor web

````
solução!
por Natan Souza
| 2099.2k xp | 3697 posts
Instrutor Product Design Lead na Alura

Rayssa,

Mudei os valores do padding da classe do banner-twitter de 10px para 1em 3em, aqui ficou ok!

Seus LI estão normais, não tenho certeza do ponto do curso que você está (desculpe algum spoiler), mas o código final ficaria dessa forma:

.palavras-home {
    -webkit-transform-style: preserve-3d;
                  transform-style: preserve-3d;
    position: absolute;
    bottom: 0;
    right: 0;
    top: 0;
    left: 0;
}
.palavra-home {
    font-family: "Shadows Into Light", cursive;
    font-weight: bold;
    font-size: 400%;
    color: rgba(255, 127, 127, .5);
    position: absolute;
    -webkit-animation: aparece 2s;
                   animation: aparece 2s;
}

Abcs!

por RAYSSA FREITAS
| 39.7k xp | 24 posts

Muito obrigada pela ajuda.