Eu coloquei estou fazendo os exercicios, coloquei exatamente o mesmo código, mas o alinhamento do texto está diferente como mostrado no vídeo.
body {
/*fonte do corpo do site e a cor*/
font-family: "Crimson Text", "Times New Roman", serif;
background-color: #F2FFFC;
font-size: 120%;
/*espaço entre as linhas*/
line-height: 1.5;
}
h1,h2 {
/*familia da fonte*/
font-family: "Open Sans Condensed", "Arial", sans-serif;
}
/*localiza o main e pega só o h1*/
main h1 {
/*cor de fundo*/
background-color: #851944;
/*cor da letra*/
color: #FFF;
/*alinhamento de texto*/
text-align: center;
/*espaço interno do h1 */
padding: 25px;
/*tipo de borda do main*/
border-bottom: 10px solid black;
}
/*localiza o menu e só pega os que possuem a tag a*/
main a {
color: #851944;
}
/*pega a parte de texto do html, todos que tem a tag p*/
p{
text-align: justify;
}
/*bloco da citação*/
blockquote {
background-color: #D9E5E3;
/*tamanho, tipo e cor da espessura da borda*/
border: 10px solid #C2CCCA;
box-sizing: border-box;
width: 250px;
}
/*conteúdo auxiliar do conteúdo principal*/
aside {
background-color: #3C1D3D;
color: #F2FFFC;
text-align: center;
}
/*conteúdo do bloco de tópicos*/
aside a {
color: inherit;
font-family: "Open Sans Condensed", sans-serif;
}
/*cabeçalho do rodape*/
footer {
background-color: #000;
color: #F2FFFC;
}
/*todo mundo que tem a tag navegação*/
nav a {
color: #F2FFFC;
}
/*espaço interno nos comentarios, rodape e barra de navegação*/
blockquote, aside, footer {
padding: 20px;
}
/*posicionando uma div no main*/
main div {
/*tamanho total da div*/
width: 720px;
/*definindo a margem para ser automatica*/
margin : auto;
}html
<!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>Blog</h1>
<div>
<article>
<h2>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 href="#">Leia mais</a>
<footer>Tags: <a href="#">design responsivo</a>, <a href="#">mobile</a>, <a href="#">css</a></footer>
</article>
<article>
<h2>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 href="#">Leia mais</a>
<footer>Tags: <a href="#">acessibilidade</a>, <a href="#">boas práticas</a></footer>
</article>
<article>
<h2>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 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">
<aside>
<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>
</aside>
<footer>
© João da Silva 2014
</footer>
</body>
</html>O alinhamento do texto da página está centralizado.
