D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
kuroisuna
Full window
Github gist
JS Bin // source https://jsbin.com/cevazihowu
<!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>