Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<section class="container">
  <header></header>
  <nav></nav>
  <section></section>
  <aside></aside>
</section>
</body>
</html>
 
body * {
  border: 2px solid #444;
}
.container {
  position: relative;
  width: 300px;
  height: 300px;
  background: #FFC400;
  margin: 50px;
  border: 2px solid #000;
}
.container * {
  position: absolute;
}
.container header {
  left: 20px;
  top: 20px;
  width: 50px;
  height: 80px;
  background: #0095FF;
}
.container nav {
  right: 30px;
  top: 50px;
  width: 150px;
  height: 80px;
  background: #B5FFB8;
}
.container section {
  left: 10px;
  bottom: 50px;
  width: 170px;
  height: 70px;
  background: #FF75ED;
}
.container aside {
  right: 20px;
  bottom: 10px;
  width: 60px;
  height: 140px;
  background: #FF7575;
}
Output

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

Dismiss x
public
Bin info
gryzzlypro
0viewers