6
respostas

Problema ao aplicar o reset.css

<!DOCTYPE html>
<html>
    <head>
        <title>Biografia</title>
        <link rel="icon" href="favicon.png">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="site.css">
        <link href="https://fonts.googleapis.com/css?family=Crimson+Text|Open+Sans+Condensed:300&display=swap" rel="stylesheet">
        </head>
    <body>
        <main>
<h1>Sobre mim</h1>

<p>Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de <em>qualidade, 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>Como trabalho</h2>

    <blockquote>

    <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>Experiência</h2>
    <blockquote>
    <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="https://www.bmw.com.br/"> BMW</a> , <a href="https://www.uol.com.br/">UOL</a> e <a href="https://www.ibm.com/br-pt">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.
Também já fui contratado para transformar grandes portais, como Terra e G1, 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>Comunidade</h2>

<p>Procuro repassar meu conhecimento para a comunidade. Para isso, já dei diversas palestras e mantenho um blog.</p>
        </main>
<img src="eu.jpg" alt="foto de joão da silva">
    <aside>
    <h1>João da Silva</h1>
<nav>
    <ul>
        <li><a href="#">Home </a></li>
        <li><a href="#">Porfólio</a></li>
        <li><a href="#">Sobre mim</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contato </a></li>
    </ul>
</nav>
    </aside>
<footer>
    © João da Silva 2014
</footer>
<time datetime="29/07/2019">29 de julho de 2019</time>

</body>
</html>

insira seu código aqui

6 respostas
body {
    background-color: #F2FFFC;
    font-size:120%;
}
main h1 {
    font-family: "Open Sans Condensed", sans-serif;
    text-align: center;
    color:white;
    background-color: #851944;
    padding:20px;
    margin:0;
}
h2 {
    font-family:"Open Sans Condensed", sans-serif;
}
p {
    font-family: "Crimson Text", serif;  
    text-align: justify;
}
blockquote {
    background-color: #D9E5E3;
    padding:12px;
    border:gray solid 5px;
    width:200px;
    margin:0;
}
aside {
    background-color: #3C1D3D;
} 
footer {
    background-color:black;
    color: #F2FFFC;
}
nav a {
    color: #F2FFFC;
}
ul {
    color:pink;
}
ul li a {
    color: inherit;
}

Ao aplicar o reset.css o site perde todas as formatações, mesmo aplicando antes do site.css

Oi, Rodrigo, tudo bem?

Você poderia publicar aqui ou no GitHub o seu arquivo reset.css para podermos identificar entender o que pode estar acontecendo?

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) / html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } / HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

Quando o tutor do video aplica o reset,css antes do site.css o site dele fica certinho sem os espaços, porém o meu perde as fontes e todos os espaçamentos

Oi, Rodrigo.

Vi o seu código e o problema não está no reset.css mas na estilização da tag blockquote no arquivo site.css que está com medidas que estão fazendo com as citação fique diferente, deixa-a assim:

blockquote {
    background-color: #D9E5E3;
}

Espero ter te ajudado :}

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software