<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blog-Joao da Silva</title>
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="site.css">
<link rel="stylesheet" href="bio.css">
<!-- carrega a fonte Crimson Text nas versoes normal, italico e negrito -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
<!-- carrega a fonte Open Sans Condensed na versao negrito, -->
<!-- que a unica necessaria para os cabeçalhos
-->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
</head>
<body>
<main>
<h1>Blog</h1>
<h2>O essencial de design responsivo</h2>
<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="#">Desing Responsivo</a>, <a href="#">Mobile</a>, <a href="#">CSS</a></footer>
<time datetime="2013-07-14"> 14 de Julho de 2013</time>
<h2>Por que fazer páginas acessíveis?</h2>
<p>Tem se falado cada vez sobre <strong>acessibilidade na web</strong>. Há diversas técnicas e diretivas a serem seguidas, inclusive da própria <strong>W3C</strong>. Mas vale a pena investir nisso?</p>
<a href="#">Leia Mais</a>
<footer>Tags:<a href="#">acessibilidade</a>, <a href="#">boas praticas</a></footer>
<time datetime="2013-07-14"> 14 de Julho de 2013</time>
<h2>JavaScript não obstrusivo</h2>
<p>JavaScript é uma linguagem essencial hoje em dia para criar páginas <em>ricas</em>, <em>interativas</em> e <em>dinâmicas</em>. 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 praticas</a></footer>
<time datetime="2013-07-14"> 14 de Julho de 2013</time>
</main>
<img src="eu.jpg" alt="Foto de Joao da Silva">
<aside>
<h1>Joao 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>
© Joao da Silva 2014
</footer>
</body>
</html>
css
body{
font-family: "Crimson Text", sans-serif;
background-color: #F2FFFC;
}
h1,
h2{
font-family: "Open Sans Condensed" sans-serif;
}
main h1{
text-align: center;
background-color: #851944;
color: #ffffff;
}
p{
text-align: justify;
}
h1 {
font-family: "Open Sans Condensed";
color: white;}
blockquote {background-color: #D9E5E3;
}
aside{
background-color: #3C1D3D;
color: #851944;
font-family: "Open Sans Condensed";
}
footer{
background-color: #000;
color:#F2FFFC;
}
nav a{
color: #F2FFFC;
}
ul{
color: #851944;
}
ul li a{
color: inherit;
}
