Created
April 1, 2017 20:49
-
-
Save akakiev/8cb3fe9fa6d28a2f10273131b2f6c02b to your computer and use it in GitHub Desktop.
Composition II in Red, Blue, and Yellow, 1930
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body class=""> | |
| <div id="painting"> | |
| <div id= "toprow"> | |
| <div id= "bigbox" class= "red right"></div> | |
| <div id= "divider1" class= "black right"></div> | |
| <div id= "topleftcolumn" class= "right"> | |
| <div id= "mediumbox"></div> | |
| <div id= "divider2" class= "black"></div> | |
| <div id= "mediumbox"></div> | |
| </div> | |
| </div> | |
| <div id= "middlerow" class= "black"></div> | |
| <div id= "bottomrow"> | |
| <div id= "bottomrightcolumn" class= "right"> | |
| <div id= "tinybox"></div> | |
| <div id= "divider4" class= "black"></div> | |
| <div id= "tinybox" class= "yellow"></div> | |
| </div> | |
| <div id= "divider3" class= "black right"> </div> | |
| <div id= "widebox" class= "right"> </div> | |
| <div id= "divider3"class= "black right"> </div> | |
| <div id= "smallbox"class= "blue right"> </div> | |
| </div> | |
| </div> | |
| <div class="pagecontent"></div> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .pagecontent { | |
| padding: 24px; | |
| } | |
| body, html { | |
| background-color: #f6f6f6; | |
| } | |
| #painting{ | |
| background-color:#fff4db; | |
| width:400px; | |
| height:400px; | |
| margin-top:30px; | |
| margin-left:auto; | |
| margin-right:auto; | |
| box-shadow: 10px 10px 0px #8d8d8d; | |
| } | |
| #toprow { | |
| height: 290px; | |
| } | |
| #middlerow { | |
| height: 10px; | |
| } | |
| #bottomrow { | |
| height: 100px; | |
| } | |
| /*These are the two columns within the rows that help hold an additional subset of boxes*/ | |
| #lefttopcolumn { | |
| width: 100px; | |
| } | |
| #bottomrightcolumn{ | |
| width: 20px; | |
| } | |
| /*These are the boxes that give the painting its shape, including the black dividers*/ | |
| #bigbox { | |
| height: 290px; | |
| width: 290px; | |
| } | |
| #mediumbox { | |
| width: 100px; | |
| height: 140px; | |
| } | |
| #smallbox { | |
| width: 100px; | |
| height: 100px; | |
| } | |
| #widebox { | |
| width: 260px; | |
| height: 100px; | |
| } | |
| #tinybox { | |
| width: 20px; | |
| height: 45px; | |
| } | |
| #divider1 { | |
| height: 290px; | |
| width: 10px; | |
| } | |
| #divider2 { | |
| height: 10px; | |
| width: 100px; | |
| } | |
| #divider3 { | |
| height: 100px; | |
| width: 10px; | |
| } | |
| #divider4 { | |
| height: 10px; | |
| width: 20px; | |
| } | |
| /*color classes. These are the CSS classes that will color in the blocks*/ | |
| .red { | |
| background-color: #cc3333; | |
| } | |
| .blue { | |
| background-color: #2f7fd8; | |
| } | |
| .yellow { | |
| background-color: #feda09; | |
| } | |
| .black { | |
| background-color: #393939; | |
| } | |
| /*position class. This class helps make sure the elements line up next to each other*/ | |
| .right { | |
| float: right; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment