Oi Eduardo, tudo bem?

Pessoalmente eu usaria um humilde position: absolute junto com o transform: rotate().

Abcs!

Olá Natan,

Tentei usar a forma como disse acima, porem nao consigo acertar o banner no topo direito, utilizei o position absolute, mas o top e right , mas nao consigo , está faltando alguma coisa?

.etiqueta {
    width:9em;
    line-height:1;
    padding:.2em;
    box-sizing: border-box;

    text-align: center;
    text-decoration:none;
    background-color:#3C1D3D;
    color: white;
    border:.1em solid black;


    font-size:.8em;
    font-family: "Open Sans Condensed", sans-serif;

    position:absolute;
    top:0;
    right: 0;
    transform:rotate(45deg);


}

João da Silva

Desenvolvedor web

• Eficiência
• Boas práticas
• Código limpo
• CSS3
• HTML5
• JavaScript
• Acessibilidade
• Responsivo
• Otimizações
• Agilidade
• Design

Oi Eduardo,

Pelo que consegui ver pelo menos no CSS, só diminuir mais o right.

Fiz esse Jsbin aqui de exemplo.

Repare que mudando apenas o font-size, tudo muda proporcionalmente pois foi usado a medida EM nas outras propriedades.

Abcs!

Consegui, vlw Natan.

Só mais uma dúvida (acho que a ultima kk), é normal ficar a barra de rolagem na horizontal?

Eduardo,

Boa, que bom que conseguiu!

Relaxa! Olha... não é muito comum não.

O que você pode ir fazendo ou é analisar seu código e ver se tem algum CSS largura 3000px por exemplo, ou ir deletando parte por parte pra identificar o problema quando ele sumir no navegador.

Abcs!

Cara,

Vi meu código e não tem nenhuma largura com este tamanho, porem percebi q este problema aconteceu depois que coloquei esse banner do twitter. Mas mesmo retirando a largura, continua acontecendo.

header {
    position: relative;
}



.palavra-home {
    color: #D5447E;
    font-family:Shadows Into Light, cursive;
    font-weight: bold;
    color: #D5447E;
    font-size:.4em;


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

.eficiencia {
    position: absolute;
    top: 30%;
    left: 70%;
    -webkit-transform: rotate(-5deg);
    transform:translate(-50%,-50%) translateZ(2px) rotate(-5deg);

}

.responsivo {
    position: absolute;
    top:17%;
    left:10%;
     -webkit-transform: rotate(-10deg);
    transform: rotate(10deg);
    transform: translate(-50%,-50%);
}
.agilidade {
    position: absolute;
    top:12%;
    left:30%; 
     -webkit-transform: rotate(5deg);
    transform:rotate(5deg);
}
.acessibilidade {
    position: absolute;
    top:30%;
    left: 23%;
     -webkit-transform: rotate(-7deg);
    transform: rotate(-7deg);
}

.codigo-limpo {
    position: absolute;
    top:40%;
    left: 7%;
     -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
.css3 {
    position: absolute;
    top:44%;
    left: 24%;
     -webkit-transform: rotate(5deg);
    transform: rotate(5deg);

}
.boas-praticas {
    position: absolute;
    top: 55%;
    left:17%;
     -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
}
.javascript {
    position: absolute;
    top:12%;
    right:27%;
     -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
}
.design {
    position: absolute;
    top:32%;
    right:27%;
     -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
}
.html5 {
    position: absolute;
    top:35%;
    right:12%;
     -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
}
.otimizacoes{
    position: absolute;
    top:45%;
    right:20%;
     -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);    

}

.etiqueta {
    width:11em;
    line-height:1;
    padding:.4em;
    box-sizing: border-box;

    text-align: center;
    text-decoration:none;
    background-color:#3C1D3D;
    color: white;
    border:.1em solid black;


    font-size:.6em;
    font-family: "Open Sans Condensed", sans-serif;

    position:absolute;
    top:2em;
    right:-2.5em;
    transform:rotate(45deg);


}


.foto-home {
    height:4.588em;
    -webkit-border-radius:50%;
    -moz-border-radius:120px;
    border-radius: 120px; 
}

html {
    font-size:16px;
}
.titulo-nome {
    font-size:3.750rem;

}
.saudacao p {
    color: #99A;
    line-height:1;
    font-size:3.750rem;
}
.saudacao-inicio {
    color: #889;
}
.saudacao-ultima-linha {
    text-align: right;
    display: block;
}
.saudacao strong {
    color: #000;
}
.saudacao em {
    color: #851944;
    display: inline-block;
    transform:rotate(-5deg) skew(-10deg);
}
.botao-index {
   font-size: 1.25em;
    background-color: #851944;
    color: #FFF;
    padding: .5em;
    border: .2em solid black;
    width: 40ch;
    margin: 2em auto;
    display: block;
    text-align: center;

}

.secao-inicio h2 {
    text-transform: uppercase;

}
.trabalhos {
    background-color: #3C1D3D;
    border-top: 0.625em solid #000;
    border-bottom: 0.625em  solid #000;
    padding: 4.375em;

}
.trabalhos h2 {
    color: #FFF;
    font-size: 300%;
    padding-bottom: 30px;
}
.trabalhos ul {
    overflow: hidden;
    border: 0.500em  solid black;
}
.trabalhos li {
    float:left;
    width: 33.333%;
}
.trabalhos img {
    width:100%;
    height:12em;
    display: block;

}


.blog {
     background-color: #999;
    color: #FFF;
    border-bottom: .5em solid #851944;
    position: relative;
}
.blog li {
    width: 30%;
}
.blog h2{
    font-size: 300%;
}
.blog li a {
    color: #FCF;
    padding:10px;
}
.blog small {
    position: relative;
    top: -1em;
}
.blog li a {
    color:#EE82EE;
    padding: .5em;
    display: block;
    text-decoration: underline;
}
.inicio-post {
    color: black;
    background-color:#F2FFFC;
    position:absolute;
    top:.5em;
    right:7em;
    height:8em;
    padding:1em;
    width: 70%;
    padding: 1.5em;
}
.mais-recente {
    background-color: #F2FFFC;    
}
footer {
    background-color: #000;
    color: #FFF;
    padding:5em;
}
footer a {
    color: #F99;

}
footer h2 {
    font-size:3em; 
}
main {
    width: 100%;
    padding-bottom: 0;
    float: none;
}

Oi Eduardo,

Faz assim, cria um Jsbin com seu codigo mas abre outra duvida? Ah, e marca esse topico como solucao.

Ai ajuda outros alunos a acharem essa mesma duvida.

Abcs!