Skip to content

Instantly share code, notes, and snippets.

/index.html

Created December 14, 2015 14:53
Show Gist options
  • Save anonymous/3e49f8954545f13f39db to your computer and use it in GitHub Desktop.
Save anonymous/3e49f8954545f13f39db to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/cevazihowu
Raw
index.html
<!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="http://placehold.it/300x300" alt="Gato">
<img src="http://placehold.it/300x400" alt="Gato">
<img src="http://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>
Raw
jsbin.cevazihowu.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%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment