Skip to content

Instantly share code, notes, and snippets.

@playwellsteve

playwellsteve/index.html

Forked from anonymous/index.html
Created November 2, 2015 14:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save playwellsteve/6947fa6cea09a9425b0e to your computer and use it in GitHub Desktop.
Save playwellsteve/6947fa6cea09a9425b0e to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/befowodagu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://vuejs.org/js/vue.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.container {
display: flex
}
.outer-box {
background: red;
height: 200px;
width: 100px;
display: flex;
flex-direction: column;
flex: 1;
margin-right: 2px;
}
.outer-box:nth-child(2) {
flex: 4;
}
.outer-box:nth-child(3) {
flex: 2;
}
.inner-box {
width: 100%
height: 50px;
display: flex;
flex-direction: row;
flex: 1;
border-bottom: 2px solid;
align-items: left;
background: blue;
}
.inner-box:nth-child(3) {
flex: 2;
}
h5: {
color: grey;
}
.sub-box {
height: 100%;
background: green;
display: flex;
flex: 1;
margin-right: 2px;
}
.sub-box:first-child {
flex: 2;
}
</style>
</head>
<body>
<nav>
<div class="container">
<div class="outer-box">Item 1</div>
<div class="outer-box">
<div class="inner-box">
<h5>Story</h5>
<p>The droid foreces..</p></div>
<div class="inner-box">
<div class="sub-box"><h5>Type</h5></div>
<div class="sub-box"><h5>Program</h5></div>
</div>
<div class="inner-box">
<div class="sub-box"><h5>Warmups</h5></div>
<div class="sub-box"><h5>Projects 1</h5></div>
</div>
</div>
<div class="outer-box">
<div class="inner-box">Characters</div>
<div class="inner-box">Setting</div>
<div class="inner-box">Projects 2</div>
</div>
</div>
<script id="jsbin-source-css" type="text/css">.container {
display: flex
}
.outer-box {
background: red;
height: 200px;
width: 100px;
display: flex;
flex-direction: column;
flex: 1;
margin-right: 2px;
}
.outer-box:nth-child(2) {
flex: 4;
}
.outer-box:nth-child(3) {
flex: 2;
}
.inner-box {
width: 100%
height: 50px;
display: flex;
flex-direction: row;
flex: 1;
border-bottom: 2px solid;
align-items: left;
background: blue;
}
.inner-box:nth-child(3) {
flex: 2;
}
h5: {
color: grey;
}
.sub-box {
height: 100%;
background: green;
display: flex;
flex: 1;
margin-right: 2px;
}
.sub-box:first-child {
flex: 2;
}</script>
</body>
</html>
Raw
jsbin.befowodagu.css
.container {
display: flex
}
.outer-box {
background: red;
height: 200px;
width: 100px;
display: flex;
flex-direction: column;
flex: 1;
margin-right: 2px;
}
.outer-box:nth-child(2) {
flex: 4;
}
.outer-box:nth-child(3) {
flex: 2;
}
.inner-box {
width: 100%
height: 50px;
display: flex;
flex-direction: row;
flex: 1;
border-bottom: 2px solid;
align-items: left;
background: blue;
}
.inner-box:nth-child(3) {
flex: 2;
}
h5: {
color: grey;
}
.sub-box {
height: 100%;
background: green;
display: flex;
flex: 1;
margin-right: 2px;
}
.sub-box:first-child {
flex: 2;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment