Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Blog - João da Silva</title>
    <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="css/blog.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="post-blog">
                <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="post-blog">
                <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="post-blog">
                <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="imagens/eu.jpg" alt="Minha foto" 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 href="https://github.com/joaodasilva" class="github">
                    Github
                </a>
            </li>
            <li>
                <a href="https://twitter.com/joaodasilva" class="twitter">
                    Twitter
                </a>
            </li>
            <li>
                <a href="https://br.linkedin.com/pub/joão-da-silva/32/4/508" class="linkedin">
                    LinkedIn
                </a>
            </li>
        </ul>
    </aside>
    <footer class="rodape-pagina">
        &copy; João da Silva 2014
    </footer>
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers