Skip to content

Instantly share code, notes, and snippets.

@jw56578

jw56578/index.html

Created November 14, 2016 01:27
Show Gist options
  • Save jw56578/9e2a702db5e4b8efa7f4eb0298555802 to your computer and use it in GitHub Desktop.
Save jw56578/9e2a702db5e4b8efa7f4eb0298555802 to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=9e2a702db5e4b8efa7f4eb0298555802
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!--Lets make our canvas -->
<div id="canvas">
<!--working from left to right, where can we make complete rectangles based on the given bricks, don't cut into bricks -->
<div id="one">
<div id="three">
3
</div>
</div>
<div id="two">
<div id="four">
<div id="six">
<div id="twelve">
12
</div>
</div>
<div id="seven">
7
</div>
<div id="eight">
<div id="thirteen">
13
</div>
</div>
</div>
<div id="five">
<div id="nine">
9
</div>
<div id="ten">
10
</div>
<div id="eleven">
11
</div>
</div>
</div>
</div>
</body>
</html>
Raw
styles.css
div:not(#canvas){
float:left;
outline:3px black solid;
}
#canvas{
width:500px;
height:300px;
background-color:lightgrey
}
#one{
background-color:yellow;
width:10%;
height:100%;
}
#two{
background-color:lightblue;
width:90%;
height:100%;
}
#three{
background-color:blue;
width:100%;
height:30%;
}
#four{
background-color:lightgreen;
width:100%;
height:60%;
}
#five{
background-color:white;
width:100%;
height:40%;
}
#six{
background-color:white;
width:15%;
height:100%;
}
#seven{
background-color:red;
width:30%;
height:100%;
}
#eight{
background-color:blue;
width:55%;
height:100%;
}
#nine{
background-color:white;
width:25%;
height:100%;
}
#ten{
background-color:white;
width:35%;
height:100%;
}
#eleven{
background-color:red;
width:40%;
height:100%;
}
#twelve{
background-color:yellow;
width:100%;
height:60%;
}
#thirteen{
background-color:white;
width:100%;
height:60%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment