Entrar Ainda não tem acesso?
3
respostas

Aula 5 sombras e opacidade - Opacidade no rodapé

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Sombras e opacidade e atividade Opacidade no rodapé

por Andréia Gabriel Benavides
| 300.1k xp | 68 posts
Em busca de novas oportunidades profissionais

Olá, fiz e refiz o exercício da opacidade no rodapé, porém meu rodapé está perdendo a propriedade fixed e fica abaixo da section saudação. Segue o código:

HTML:

<!DOCTYPE html>
<html lang="pt">
    <head>
        <meta charset="UTF-8">
        <title>João da Silva - Desenvolvedor Web</title>
        <link rel="shortcut icon" href="imagens/favicon.png">
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/site.css">
        <link rel="stylesheet" href="css/index.css">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Shadows+Into+Light">
        <link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light" rel="stylesheet">
    </head>
    <body>
        <header class="titulo-principal">
            <img class="foto-home" src="imagens/eu.jpg" alt="Foto de João da Silva">
            <h1>João da Silva</h1>
            <p class="subtitulo-principal">Desenvolvedor web</p>
            <ul class="palavras-home">
                <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>
            <a class="banner-twitter" href="http://twitter.com/joaodasilva">Siga-me no Twitter</a>
        </header>
        <main>
            <container>
                <section class="secao-inicio saudacao">
                    <p class="saudacao"><span class="saudacao-inicio">Olá,</span> meu nome é <strong>João da Silva</strong><br><span class="saudacao-ultima-linha">e eu construo <em class="saudacao">sites maravilhosos</em></span></p>
                    <a class="botao-index" href="bio.html">Conheça mais um pouco sobre mim</a>
                </section>
            </container>    
            <section class="secao-inicio trabalhos">
                <h1>Trabalhos</h1>
                <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-index2" href="portfolio.html">Veja mais</a>
            </section>
            <section class="secao-inicio blog">
                <h2>Blog</h2>
                <small>Últimos posts</small>
                <ol> 
                    <li>
                        <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>
            </section>
        </main>
        <footer class="rodape-pagina">       
            <h2>Vamos conversar?</h2>
            <p>Você pode entrar em contato comigo <a href="contato.html">por e-mail</a> ou pelo telefone <a href="tel:+551234567890">(12) 3456-7890</a></p>      
        </footer>
    </body>
</html>

index.css :

.foto-home {
    height: 200px;
    border-radius: 50%;
}
.saudacao p {
    font-size: 1.5em;
    color: #99A;
    line-height: 1;
    padding: 2em;
}
.saudacao-inicio {
    font-size: 3em;
    color: #889;
}
.saudacao-ultima-linha {
    text-align: right;
    display: block;
}
.saudacao strong {
    font-size: 2em;
    color: #000;
}
.saudacao em {
    color: #851944;
    font-size: 4em;
    -webkit-transform: rotate(-5deg) skew(-10deg);
            transform: rotate(-5deg) skew(-10deg);
    display: inline-block;
}
.botao-index {
    font-size: 1.25em;
    background-color: #851944;
    color: #FFF;
    padding: .5em;
    box-shadow: 10px 10px black, -10px -10px orange;
    width: 40ch;
    margin: 2em auto;
    display: block;
    text-align: center;
}
.botao-index2 {
    font-size: 1.25em;
    background-color: #851944;
    color: #FFF;
    padding: .5em;
    box-shadow: 0 0 0 5px black, 0 0 0 10px #3C1D3D, 0 0 0 15px black, 0 0 0 20px #3C1D3D, 0 0 0 25px black;
    width: 40ch;
    margin: 2em auto;
    display: block;
    text-align: center;
}

.secao-inicio {
    padding: 2em;
}
.secao-inicio h2 {
    font-size: 3em;
    text-transform: uppercase;
    margin-bottom: .5em;
}
.trabalhos {
    background-color: #3C1D3D;
    border-top: .5em solid #000;
    border-bottom: .5em solid #000;
}
.trabalhos h1 {
    color: #FFF;
    text-shadow:3px 3px #000;
}
.trabalhos h2 {
    color: #FFF;
}
.trabalhos ul {
    overflow: hidden;
    border: .5em solid black;
}
.trabalhos li {
    float: left;
    width: 33.333%;
}
.trabalhos img {
    width: 100%;
    display: block;
    box-shadow: 1px 1px 4px #000;
}
.blog {
    background-color: #999;
    position: relative;
    color: #FFF;
    border-bottom: .5em solid #851944;
}

.blog h2 {
    text-shadow:3px 3px #000;
}
.blog small {
    position: relative;
    top: -2em;
}
.blog li {
    width: 30%;
}
.blog li a {
    color: #FCF;
    padding: .5em;
    display: block;
}
footer {
    background-color: #000;
    color: #FFF;
    padding: 2em;
}
footer h2 {
    font-size: 3em;
}
footer a {
    color: #F99;
}


main {
    width: 100%;
    padding-bottom: 0;
    float: none;
}
html,body {
    overflow-x: hidden;
    height: 100%;
}

body {
    -webkit-perspective: 6px;
            perspective:6px;
    -webkit-perspective-origin: 50% 160px;
            perspective-origin: 50% 160px;
}
.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: #D5447E;*/
    color: rgba(255, 127, 127, 0.5);
    position: absolute;
}
.eficiencia {
    top: 50%;
    left: 60%;
    -webkit-transform: translate(-50%, -50%) translateZ(4px) rotate(-5deg) scale(.25);
    transform: translate(-50%, -50%) translateZ(4px) rotate(-5deg) scale(.25);
    opacity: .8;
}

.boas-praticas {
    top: 70%;
    left: 20%;
    -webkit-transform: translate(-50%, -50%) translateZ(1px) rotate(10deg) scale(.25);
    transform: translate(-50%, -50%) translateZ(1px) rotate(10deg) scale(.25);
    opacity: .3;
}
.codigo-limpo {
    top: 45%;
    left: 25%;
    -webkit-transform: translate(-50%, -50%) translateZ(2px) rotate(-10deg) scale(.25);
    transform: translate(-50%, -50%) translateZ(2px) rotate(-10deg) scale(.25);
    opacity: .6;
}
.css3 {
    top: 55%;
    left: 35%;
    -webkit-transform: translate(-50%, -50%) translateZ(2px) rotate(5deg) scale(.25);
    transform: translate(-50%, -50%) translateZ(2px) rotate(5deg) scale(.25);
    opacity: .6;
}
.html5 {
    top: 30%;
    left: 65%;
    -webkit-transform: translate(-50%, -50%) translateZ(2px) rotate(10deg) scale(.25);
    transform: translate(-50%, -50%) translateZ(2px) rotate(10deg) scale(.25);
    opacity: .6;
}
.javascript {
    top: 15%;
    left: 60%;
    -webkit-transform: translate(-50%, -50%) translateZ(1px) rotate(-5deg) scale(.25);
    transform: translate(-50%, -50%) translateZ(1px) rotate(-5deg) scale(.25);
    opacity: .3;
}
.acessibilidade {
    top: 30%;
    left: 35%;
    -webkit-transform: translate(-50%, -50%) translateZ(3px) rotate(-5deg) scale(.25);
    transform: translate(-50%, -50%) translateZ(3px) rotate(-5deg) scale(.25);
    opacity: .8;
}
.responsivo {
    top: 40%;
    left: 40%;
    -webkit-transform: translate(-50%, -50%) translateZ(3px) rotate(10deg) scale(.25);
    transform: translate(-50%, -50%) translateZ(3px) rotate(10deg) scale(.25);
    opacity: .8;
}
.otimizacoes {
    top: 70%;
    left: 65%;
    -webkit-transform: translate(-50%, -50%) translateZ(2px) rotate(-5deg) scale(.25);
    transform: translate(-50%, -50%) translateZ(2px) rotate(-5deg) scale(.25);
    opacity: .6;
}
.agilidade {
    top: 75%;
    left: 35%;
    -webkit-transform: translate(-50%, -50%) translateZ(1px) rotate(5deg) scale(.25);
    transform: translate(-50%, -50%) translateZ(1px) rotate(5deg) scale(.25);
    opacity: .3;
}
.design {
    top: 40%;
    left: 60%;
    -webkit-transform: translate(-50%, -50%) translateZ(2px) rotate(10deg) scale(.25);
    transform: translate(-50%, -50%) translateZ(2px) rotate(10deg) scale(.25);
    opacity: .6;
}
.titulo-principal {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: relative;
}
.banner-twitter {
    position: absolute;
    top: 0;
    right: 0;

    line-height: 1;

    /* largura = 14em */
    /* altura = 3.5em */
    /* tx = .707 * h - .707 * w + w */
    /* ty = -.707 * h */
    -webkit-transform: translate(6.5765em, -2.4745em) rotate(45deg);
            transform: translate(6.5765em, -2.4745em) rotate(45deg);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;

    width: 14em;
    padding: 1em 0;
    box-sizing: border-box;

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

    font-size: 1.2em;
    font-family: "Open Sans Condensed", sans-serif;
}
.blog .inicio-post {
    position: absolute;
    top: 4em;
    height: 8em;
    left: 30%;
    right: 4em;
    background-color: #F2FFFC;
    color: #000;
    padding: 1.5em;
}
.blog .mais-recente {
    background-color: #F2FFFC;
}
.blog .mais-recente a {
    color: #F26;
}

site.css:

body {
    font-family: "Crimson Text", "Times New Roman", serif;
    background-color: #F2FFFC;
    font-size: 120%;
    line-height: 1.5;
}

h1,
h2,
.subtitulo-principal {
    font-family: "Open Sans Condensed", "Arial", sans-serif;
}

h1 {
    text-transform: uppercase;
    font-size: 3em;
}

.titulo-principal {
    text-align: center;
    background-color: #851944;
    color: #FFF;
    padding: 2rem;
    border-bottom: .5rem solid #000;
}

.titulo-principal h1 {
    text-shadow: 5px 5px #000;
}

.subtitulo-texto {
    font-size: 1.5em;
    clear: both;
}

main a {
    color: #851944;
}

main p {
    text-align: justify;
    margin: 1em 0;
}

.navegacao-site {
    text-align: center;
    background-color: #3C1D3D;
    color: #F2FFFC;
    padding: 1em;
}

.navegacao-site a {
    color: inherit;
    font-family: "Open Sans Condensed", "Arial", sans-serif;
    text-transform: lowercase;
}

.navegacao-site h1 {
    font-size: 1.5em;
    margin-bottom: 1em;
}



.container {
    width: 80ch;
    margin-left: auto;
    margin-right: auto;
    padding: 1.5em 0;
}

strong {
    font-weight: bold;
}

em {
    font-style: italic;
}

.icones-redes-sociais li {
    display: inline-block;
}

.icones-redes-sociais a {
    width: 40px;
    height: 40px;
    display: block;
    text-indent: -99999px;
}

.github {
    background-image: url(../imagens/github.png);
}

.twitter {
    background-image: url(../imagens/twitter.png);
}

.linkedin {
    background-image: url(../imagens/linkedin.png);
}

main {
    width: 80%;
    float: left;
    padding-bottom: 4em;
}

.minha-foto,
.navegacao-site {
    border-left: .5em solid black;
    border-bottom: .5em solid black;
    box-sizing: border-box;
}

.navegacao-site {
    width: 20%;
    float: right;
    position: relative;
    top: 300px;
}

.minha-foto {
    position: absolute;
    top: 0;
    right: 0;
    height: 300px;
}

.rodape-pagina {
    background-color: rgba(0, 0, 0, 0.8);
    color: #F2FFFC;
    padding: 1em;  
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    opacity: .3;
    clear: both;
}
3 respostas
por Yuri Padilha
| 152.5k xp | 226 posts
Instrutor Desenvolvedor e Instrutor

Oi Andréia, tudo bem?

Então, quando vc coloca position fixed em algo ele vai ficar fixado na tela, ou seja, quando vc tá na parte de cima do seu site ele vai ficar fixado no rodapé da sua tela, sobrepondo os outros elementos.

Vc pode tirar o position fixed pra ele continuar seguindo o fluxo normal do html e renderizar lá em baixo de tudo mesmo.

O opacity funciona normal aqui (:

Não tenho certeza se respondi mesmo a sua dúvida, pode me dar um feedback?

Att, Yuri.

por Andréia Gabriel Benavides
| 300.1k xp | 68 posts
Em busca de novas oportunidades profissionais

Olá Yuri! Então eu gostaria de deixar fixo no rodapé e com o efeito opacity.

Vou mandar o código ...Se puder dar uma olhada.

<!DOCTYPE html>
<html lang="pt">
    <head>
        <meta charset="UTF-8">
        <title>João da Silva - Desenvolvedor Web</title>
        <link rel="shortcut icon" href="imagens/favicon.png">
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/site.css">
        <link rel="stylesheet" href="css/index.css">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Shadows+Into+Light">
        <link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light" rel="stylesheet">
    </head>
    <body>
        <header class="titulo-principal">
            <img class="foto-home" src="imagens/eu.jpg" alt="Foto de João da Silva">
            <h1>João da Silva</h1>
            <p class="subtitulo-principal">Desenvolvedor web</p>
            <ul class="palavras-home">
                <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>
            <a class="banner-twitter" href="http://twitter.com/joaodasilva">Siga-me no Twitter</a>
        </header>
        <main>
            <container>
                <!--<div class="modal"> 
                    Modal aula 5
                </div>-->
                <section class="secao-inicio saudacao">
                    <p class="saudacao"><span class="saudacao-inicio">Olá,</span> meu nome é <strong>João da Silva</strong><br><span class="saudacao-ultima-linha">e eu construo <em class="saudacao">sites maravilhosos</em></span></p>
                    <a class="botao-index" href="bio.html">Conheça mais um pouco sobre mim</a>
                </section>
            </container>    
            <section class="secao-inicio trabalhos">
                <h1>Trabalhos</h1>
                <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-index2" href="portfolio.html">Veja mais</a>
            </section>
            <section class="secao-inicio blog">
                <h2>Blog</h2>
                <small>Últimos posts</small>
                <ol> 
                    <li>
                        <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>
            </section>
        </main>
        <footer class="rodape-pagina">       
            <h2>Vamos conversar?</h2>
            <p>Você pode entrar em contato comigo <a href="contato.html">por e-mail</a> ou pelo telefone <a href="tel:+551234567890">(12) 3456-7890</a></p>      
        </footer>
    </body>
</html>

.foto-home {
    height: 200px;
    border-radius: 50%;
}
.saudacao p {
    font-size: 1.5em;
    color: #99A;
    line-height: 1;
    padding: 2em;
}
.saudacao-inicio {
    font-size: 3em;
    color: #889;
}
.saudacao-ultima-linha {
    text-align: right;
    display: block;
}
.saudacao strong {
    font-size: 2em;
    color: #000;
}
.saudacao em {
    color: #851944;
    font-size: 4em;
    -webkit-transform: rotate(-5deg) skew(-10deg);
            transform: rotate(-5deg) skew(-10deg);
    display: inline-block;
}
.botao-index {
    font-size: 1.25em;
    background-color: #851944;
    color: #FFF;
    padding: .5em;
    box-shadow: 10px 10px black, -10px -10px orange;
    width: 40ch;
    margin: 2em auto;
    display: block;
    text-align: center;
}
.botao-index2 {
    font-size: 1.25em;
    background-color: #851944;
    color: #FFF;
    padding: .5em;
    box-shadow: 0 0 0 5px black, 0 0 0 10px #3C1D3D, 0 0 0 15px black, 0 0 0 20px #3C1D3D, 0 0 0 25px black;
    width: 40ch;
    margin: 2em auto;
    display: block;
    text-align: center;
}

.secao-inicio {
    padding: 2em;
}
.secao-inicio h2 {
    font-size: 3em;
    text-transform: uppercase;
    margin-bottom: .5em;
}
.trabalhos {
    background-color: #3C1D3D;
    border-top: .5em solid #000;
    border-bottom: .5em solid #000;
    background-image: linear-gradient(135deg, transparent, transparent 14px, rgba(0, 0, 0, .1) 15px,
    transparent 15px, transparent); 
    background-size: 20px 20px;
    background-attachment: fixed;
}
.trabalhos h1 {
    color: #FFF;
    text-shadow:3px 3px #000;
}
.trabalhos h2 {
    color: #FFF;
}
.trabalhos ul {
    overflow: hidden;
    border: .5em solid black;
}
.trabalhos li {
    float: left;
    width: 33.333%;
}
.trabalhos img {
    width: 100%;
    display: block;
    box-shadow: 1px 1px 4px #000;
}
.blog {
    background-color: #999;
    position: relative;
    color: #FFF;
    border-bottom: .5em solid #851944;
}

.blog h2 {
    text-shadow:3px 3px #000;
}
.blog small {
    position: relative;
    top: -2em;
}
.blog li {
    width: 30%;
}
.blog li a {
    color: #FCF;
    padding: .5em;
    display: block;
}
footer {
    background-color: #000;
    color: #FFF;
    padding: 2em;
}
footer h2 {
    font-size: 3em;
}
footer a {
    color: #F99;
}


main {
    width: 100%;
    padding-bottom: 0;
    float: none;
}
html,body {
    overflow-x: hidden;
    height: 100%;
}

body {
    -webkit-perspective: 6px;
            perspective:6px;
    -webkit-perspective-origin: 50% 160px;
            perspective-origin: 50% 160px;
}
.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: #D5447E;*/
    color: rgba(255, 127, 127, 0.5);
    position: absolute;
}
.eficiencia {
    top: 50%;
    left: 60%;
    -webkit-transform: translate(-50%, -50%) translateZ(4px) rotate(-5deg) scale(.25);
    transform: translate(-50%, -50%) translateZ(4px) rotate(-5deg) scale(.25);
    opacity: .8;
}

.boas-praticas {
    top: 70%;
    left: 20%;
    -webkit-transform: translate(-50%, -50%) translateZ(1px) rotate(10deg) scale(.25);
    transform: translate(-50%, -50%) translateZ(1px) rotate(10deg) scale(.25);
    opacity: .3;
}
.codigo-limpo {
    top: 45%;
    left: 25%;
    -webkit-transform: translate(-50%, -50%) translateZ(2px) rotate(-10deg) scale(.25);
    transform: translate(-50%, -50%) translateZ(2px) rotate(-10deg) scale(.25);
    opacity: .6;
}
.css3 {
    top: 55%;
    left: 35%;
    -webkit-transform: translate(-50%, -50%) translateZ(2px) rotate(5deg) scale(.25);
    transform: translate(-50%, -50%) translateZ(2px) rotate(5deg) scale(.25);
    opacity: .6;
}
.html5 {
    top: 30%;
    left: 65%;
    -webkit-transform: translate(-50%, -50%) translateZ(2px) rotate(10deg) scale(.25);
    transform: translate(-50%, -50%) translateZ(2px) rotate(10deg) scale(.25);
    opacity: .6;
}
.javascript {
    top: 15%;
    left: 60%;
    -webkit-transform: translate(-50%, -50%) translateZ(1px) rotate(-5deg) scale(.25);
    transform: translate(-50%, -50%) translateZ(1px) rotate(-5deg) scale(.25);
    opacity: .3;
}
.acessibilidade {
    top: 30%;
    left: 35%;
    -webkit-transform: translate(-50%, -50%) translateZ(3px) rotate(-5deg) scale(.25);
    transform: translate(-50%, -50%) translateZ(3px) rotate(-5deg) scale(.25);
    opacity: .8;
}
.responsivo {
    top: 40%;
    left: 40%;
    -webkit-transform: translate(-50%, -50%) translateZ(3px) rotate(10deg) scale(.25);
    transform: translate(-50%, -50%) translateZ(3px) rotate(10deg) scale(.25);
    opacity: .8;
}
.otimizacoes {
    top: 70%;
    left: 65%;
    -webkit-transform: translate(-50%, -50%) translateZ(2px) rotate(-5deg) scale(.25);
    transform: translate(-50%, -50%) translateZ(2px) rotate(-5deg) scale(.25);
    opacity: .6;
}
.agilidade {
    top: 75%;
    left: 35%;
    -webkit-transform: translate(-50%, -50%) translateZ(1px) rotate(5deg) scale(.25);
    transform: translate(-50%, -50%) translateZ(1px) rotate(5deg) scale(.25);
    opacity: .3;
}
.design {
    top: 40%;
    left: 60%;
    -webkit-transform: translate(-50%, -50%) translateZ(2px) rotate(10deg) scale(.25);
    transform: translate(-50%, -50%) translateZ(2px) rotate(10deg) scale(.25);
    opacity: .6;
}
.titulo-principal {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: relative;
    /*background-image: linear-gradient(to bottom, #d9608b, #991343 30%, #550623);*/
    background-image: linear-gradient(135deg, transparent, transparent 14px, rgba(0, 0, 0, .1) 15px,
    transparent 15px, transparent);
    background-size: 20px 20px;
    background-attachment: fixed;
    }

.banner-twitter {
    position: absolute;
    top: 0;
    right: 0;

    line-height: 1;

    /* largura = 14em */
    /* altura = 3.5em */
    /* tx = .707 * h - .707 * w + w */
    /* ty = -.707 * h */
    -webkit-transform: translate(6.5765em, -2.4745em) rotate(45deg);
            transform: translate(6.5765em, -2.4745em) rotate(45deg);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;

    width: 14em;
    padding: 1em 0;
    box-sizing: border-box;

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

    font-size: 1.2em;
    font-family: "Open Sans Condensed", sans-serif;
}
.blog .inicio-post {
    position: absolute;
    top: 4em;
    height: 8em;
    left: 30%;
    right: 4em;
    background-color: #F2FFFC;
    color: #000;
    padding: 1.5em;
}
.blog .mais-recente {
    background-color: #F2FFFC;
}
.blog .mais-recente a {
    color: #F26;
}

.modal{
    width: 40%;
    height: 300px;
    position: fixed;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    background-color: #ccc;
    box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.75);
    z-index: 9999;
    padding: 10% 3%;
    text-align: center;
    font-size: 2em;
}


body {
    font-family: "Crimson Text", "Times New Roman", serif;
    background-color: #F2FFFC;
    font-size: 120%;
    line-height: 1.5;
}

h1,
h2,
.subtitulo-principal {
    font-family: "Open Sans Condensed", "Arial", sans-serif;
}

h1 {
    text-transform: uppercase;
    font-size: 3em;
}

.titulo-principal {
    text-align: center;
    background-color: #851944;
    color: #FFF;
    padding: 2rem;
    border-bottom: .5rem solid #000;
}

.titulo-principal h1 {
    text-shadow: 5px 5px #000;
}

.subtitulo-texto {
    font-size: 1.5em;
    clear: both;
}

main a {
    color: #851944;
}

main p {
    text-align: justify;
    margin: 1em 0;
}

.navegacao-site {
    text-align: center;
    background-color: #3C1D3D;
    color: #F2FFFC;
    padding: 1em;
}

.navegacao-site a {
    color: inherit;
    font-family: "Open Sans Condensed", "Arial", sans-serif;
    text-transform: lowercase;
}

.navegacao-site h1 {
    font-size: 1.5em;
    margin-bottom: 1em;
}



.container {
    width: 80ch;
    margin-left: auto;
    margin-right: auto;
    padding: 1.5em 0;
}

strong {
    font-weight: bold;
}

em {
    font-style: italic;
}

.icones-redes-sociais li {
    display: inline-block;
}

.icones-redes-sociais a {
    width: 40px;
    height: 40px;
    display: block;
    text-indent: -99999px;
}

.github {
    background-image: url(../imagens/github.png);
}

.twitter {
    background-image: url(../imagens/twitter.png);
}

.linkedin {
    background-image: url(../imagens/linkedin.png);
}

main {
    width: 80%;
    float: left;
    padding-bottom: 4em;
}

.minha-foto,
.navegacao-site {
    border-left: .5em solid black;
    border-bottom: .5em solid black;
    box-sizing: border-box;
}

.navegacao-site {
    width: 20%;
    float: right;
    position: relative;
    top: 300px;
}

.minha-foto {
    position: absolute;
    top: 0;
    right: 0;
    height: 300px;
}

.rodape-pagina {
    background-color: rgba(0, 0, 0, 0.8);
    color: #F2FFFC;
    padding: 1em;  
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    opacity: .3;
    clear: both;
}
por Bianca Reis
| 46.4k xp | 6 posts
Moderador Desenvolvedora

Olá Andréia!

Dei uma olhada no seu código, e percebi que o rodapé não está aplicando o position: fixed corretamente por causa da propriedade perspective, que foi aplicada na tag body. Essas duas propriedades juntas acabam entrando em conflito, fazendo com que o rodapé fique na região do cabeçalho. Se você retirar o perspective, verá que o rodapé ficará fixo na parte de baixo da tela (acredito que era esse o seu objetivo).

Espero ter ajudado.

Att, Bianca.