Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Sumiu os blockquotes

Fiz as alterações dessa forma:

Foi criada uma pasta do curso e dentro dela foram criadas as seguintes pastas: css, html, imagens.

Dentro da pasta do CSS, foram criadas arquivos separados por página e um genérico. Com o html segue da mesma forma.

O problema é que os blockquotes da bio sumiram e também foi pro espaço tudo na página do blog.

O que eu fiz de errado? Estou quebrando a cabeça aqui a muito tempo e não consigo arrumar.

Segue códigos:

HTML bio:

<!DOCTYPE html>
<html>
    <head>
        <title>Biografia - João da Silva</title>
        <meta charset="utf-8">
        <link rel="icon" href="../imagens/favicon.png">
        <link rel="stylesheet" href="../css/reset.css">
        <link rel="stylesheet" href="../css/site.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">
    </head>
    <body>
        <main>
            <h1 class="titulo-principal">Sobre mim</h1>

            <div class="container">
                <p>Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de <em>qualidade</em>, <em>durabilidade</em> e que <em>agregam valor</em> para meus clientes.</p>

                <p>Trabalho usando a web como plataforma, ou seja, respiro HTML5, CSS3 e JavaScript (ou melhor: ECMASCript). Crio sites para todos, seguindo as principais diretivas de acessibilidade, responsividade e web semântica, sem descuidar da qualidade de código.</p>

                <h2 class="subtitulo-texto">Como trabalho</h2>

                <blockquote class="citacao-bio fiat">
                    <p>João é o melhor desenvolvedor front-end com quem já trabalhei. Muito eficiente e muito capaz. Recomendo sem dúvidas!</p>
                    <cite>José Souza, Fiat</cite>
                </blockquote>

                <p>Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo. <strong>Não trabalho com escopo fechado</strong>: o cliente é que decide quando o produto está pronto.</p>

                <p>Também não trabalho com prazos fechados: <strong>qualidade é importante demais para ser sacrificada</strong>.</p>

                <h2 class="subtitulo-texto">Experiência</h2>

                <blockquote class="citacao-bio petrobras">
                    <p>João domina as tecnologias como ninguém. Eu apresentava um problema, ele tinha na ponta da língua a solução mais adequada com as tecnologias mais recentes.</p>
                    <cite>Manoel Santos, Petrobrás</cite>
                </blockquote>

                <p>Já desenvolvi projetos para grandes empresas como <a href="http://www.bmw.com">BMW</a>, <a href="http://www.uol.com.br">UOL</a> e <a href="http://www.ibm.com.br">IBM</a>. Neles, o foco principal era entregar uma experiência imersiva e impactante para o usuário final sem descuidar do desempenho e da acessibilidade da página.</p>

                <p>Também já fui contratado para transformar grandes portais, como <a href="http://www.terra.com.br">Terra</a> e <a href="http://www.g1.globo.com">G1</a>, em páginas responsivas. Fui responsável por renovar o layout, reorganizar o conteúdo e re-escrever o código de forma mais reaproveitável.</p>

                <h2 class="subtitulo-texto">Comunidade</h2>

                <p>Procuro repassar meu conhecimento para a comunidade. Para isso, já dei <a href="portfolio.html">diversas palestras</a> e mantenho um <a href="../html/blog.html">blog</a>.</p>
            </div>
        </main>
        <img src="../imagens/eu.jpg" alt="Foto de João da Silva" class="minha-foto">
        <aside class="navegacao-site">
            <h1>João da Silva</h1>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="../html/portfolio.html">Portfolio</a></li>
                    <li><a href="../html/bio.html">Sobre mim</a></li>
                    <li><a href="../html/blog.html">Blog</a></li>
                    <li><a href="contato.html">Contato</a></li>
                </ul>
            </nav>
            <ul class="icones-redes-sociais">
                <li>
                    <a class="github" href="https://github.com/joaodasilva">
                        Github
                    </a>
                </li>
                <li>
                    <a class="twitter" href="https://twitter.com/joaodasilva">
                        Twitter
                    </a>
                </li>
                <li>
                    <a class="linkedin" href="https://br.linkedin.com/pub/joão-da-silva/32/4/508">
                        LinkedIn
                    </a>
                </li>
            </ul>
        </aside>
        <footer class="rodape-pagina">
            &copy; João da Silva 2014
        </footer>
    </body>
</html>

CSS bio:

.citacao-bio {
    background-color: #D9E5E3;
    border: 10px solid #C2CCCA;
    width: 250px;
    box-sizing: border-box;
    margin: 20px 40px;
}

main a {
    color: #851944;
}

.citacao-bio fiat, .citacao-bio petrobras {
    padding: 20px;
}

.fiat {
    float: right;
}

.petrobras {
    float: left;
}

cite {
    font-style: italic;
    float: right;
}

CSS site (genérico):

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

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

.titulo-principal {
    text-align: center;
    background-color: #851944;
    color: #FFF;
    padding: 25px;
    border-bottom: 10px solid black;
    font-size: 60px;
    text-transform: uppercase;
}

p {
    text-align: justify;
    margin: 20px 0;
}

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

.rodape-pagina {
    background-color: #000;
    color: #F2FFFC;
    clear: both;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

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

.navegacao-site, .rodape-pagina {
    padding: 20px;
}

.container {
    width: 720px;
    margin: auto;
    padding: 30px 0;
}

.navegacao-site h1 {
    font-size: 30px;
    margin-bottom: 25px;
}

strong {
    font-weight: bold;
}

em {
    font-style: italic;
}

.subtitulo-texto {
    font-size: 30px;
    clear: both;
}

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

nav a {
    text-transform: lowercase;
}

.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 {
    float: left;
    width: 85%;
    padding-bottom: 80px;
}

.minha-foto, .navegacao-site {
    float: right;
    box-sizing: border-box;
    border-left: 10px solid black;
    border-bottom: 10px solid black;
}

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

.navegacao-site {
    width: 15%;
    position: relative;
    top: 310px;
}

CSS blog:

<!DOCTYPE html>
<html>
    <head>
        <title>Blog - João da Silva</title>
        <meta charset="utf-8">
        <link rel="icon" href="favicon.png">
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="site.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">
    </head>
    <body>
        <main>
            <h1 class="titulo-principal">Blog</h1>

            <div class="container">
                <article class="artigo">
                    <h2 class="subtitulo-texto">O essencial de design responsivo</h2>
                    <time datetime="2014-07-01">01 de julho de 2014</time>

                    <p>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>

                    <a class="leia-mais" href="#">Leia mais</a>
                    <footer>Tags: <a href="#">design responsivo</a>, <a href="#">mobile</a>, <a href="#">css</a></footer>
                </article>

                <article class="artigo">
                    <h2 class="subtitulo-texto">Por que fazer páginas acessíveis?</h2>
                    <time datetime="2014-06-15">15 de junho de 2014</time>

                    <p>Tem se falado cada vez sobre acessibilidade na web. Há diversas técnicas e diretivas a serem seguidas, inclusive da própria W3C. Mas vale a pena investir nisso?</p>

                    <a class="leia-mais" href="#">Leia mais</a>
                    <footer>Tags: <a href="#">acessibilidade</a>, <a href="#">boas práticas</a></footer>
                </article>

                <article class="artigo">
                    <h2 class="subtitulo-texto">JavaScript não obstrusivo</h2>
                    <time datetime="2014-05-28">28 de maio de 2014</time>

                    <p>JavaScript é uma linguagem essencial hoje em dia para criar páginas ricas, interativas e dinâmicas. Porém, há alguns cuidados que devem ser tomados ao colocarmos código JavaScript em nossas páginas.</p>

                    <a class="leia-mais" href="#">Leia mais</a>
                    <footer>Tags: <a href="#">javascript</a>, <a href="#">boas práticas</a></footer>
                </article>
            </div>
        </main>
        <img src="eu.jpg" alt="Foto de João da Silva" class="minha-foto">
        <aside class="navegacao-site">
            <h1>João da Silva</h1>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="bio.html">Sobre mim</a></li>
                    <li><a href="blog.html">Blog</a></li>
                    <li><a href="contato.html">Contato</a></li>
                </ul>
            </nav>
            <ul class="icones-redes-sociais">
                <li>
                    <a class="github" href="https://github.com/joaodasilva">
                        Github
                    </a>
                </li>
                <li>
                    <a class="twitter" href="https://twitter.com/joaodasilva">
                        Twitter
                    </a>
                </li>
                <li>
                    <a class="linkedin" href="https://br.linkedin.com/pub/joão-da-silva/32/4/508">
                        LinkedIn
                    </a>
                </li>
            </ul>
        </aside>
        <footer class="rodape-pagina">
            &copy; João da Silva 2014
        </footer>
    </body>
</html>

Outra coisa que está acontecendo também é que eu deletei o text-transform: lowercase do menu de navegação e mesmo assim as letras estão em minusculas.

O que seria?

Pessoal desculpa eu colocar aqui várias perguntas, é que realmente to com dificuldade em entender tais pontos.

Obrigado!

3 respostas
solução!

Olá Leandro!

Como assim "sumiram"? Um elemento HTML não some assim, do nada. Se a página carregou, o blockquote tem que estar sendo gerado.

Outra coisa, os links para os arquivos CSS no blog estão errados. Ele está procurando os arquivos na mesma pasta dos HTML. Você tem que voltar uma pasta antes e depois entrar no diretório CSS e procurar lá dentro, do jeito que você fez no primeiro HTML.

Abraços!

Tu pode postar como esta organizado os diretorios, exemplos.

Projeto> HTML, CSS e IMG HTML> Páginas CSS> Estilos IMG> Imagens.

Obrigado pela ajuda pessoal, consegui resolver... Não tinha colocado o novo link css no head. Agora deu certo...

Abraços!