D3 Examples - JS Bin // source https://jsbin.com/cevazihowu

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<style id="jsbin-css">
header {
  padding: 60px 0;
  text-align: center;
  color: #2196F3;
  font-size: 38px;
  background: #EEE;
}
nav {
  padding: 12px;
  background: #EEE;
  border-top: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
}
div[role=main] {
  margin-top: 12px;
}
aside {
  width: 40%;
  padding: 12px;
  border-right:  1px solid #CCC;
  float: left;
}
aside img {
  display: block;
  max-width: 100%;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  background: #fff;
}
section {
  float: right;
  width: 50%;
}
</style>
</head>
<body>
  <header>Alexa</header>
  <nav>home / news / gallery</nav>
  
  <div role="main">
    <aside>
      <img src="https://placehold.it/300x300" alt="Gato">
      <img src="https://placehold.it/300x400" alt="Gato">
      <img src="https://placehold.it/300x100" alt="Gato">
    </aside>
    <section>
      <article>
        <h1>BIENVENIDO</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, autem deserunt. Cupiditate vero itaque, distinctio minima tempora pariatur quis in suscipit odio necessitatibus magnam, nobis hic, laudantium ullam eveniet, eum.</p>
        <p>Sit commodi rerum iure consectetur maiores repudiandae doloribus nemo pariatur error assumenda. Voluptatum cumque quo consequatur doloribus harum debitis cupiditate distinctio, quos tempora adipisci, quas animi hic neque, corrupti iure.</p>
        <p>Nemo aspernatur magnam vero adipisci, ullam quam, quos iste facilis pariatur incidunt eligendi. Sed, voluptatum, adipisci fuga quibusdam ipsam possimus optio. Neque dicta placeat natus nostrum ad reprehenderit in quos?</p>
        <p>Sit deleniti at quibusdam a ullam porro, odio exercitationem velit aspernatur id! Odio maxime voluptas iusto, illo quos dolor dicta quaerat eligendi! Itaque soluta rem saepe hic repudiandae similique inventore!</p>
      </article>
    </section>
  </div>
​
​
<script id="jsbin-source-css" type="text/css">header {
  padding: 60px 0;
  text-align: center;
  color: #2196F3;
  font-size: 38px;
  background: #EEE;
}
nav {
  padding: 12px;
  background: #EEE;
  border-top: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
}
div[role=main] {
  margin-top: 12px;
}
aside {
  width: 40%;
  padding: 12px;
  border-right:  1px solid #CCC;
  float: left;
}
aside img {
  display: block;
  max-width: 100%;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  background: #fff;
}
section {
  float: right;
  width: 50%;
}</script>
</body>
</html>
    