SHARE
TWEET

Untitled

a guest Apr 19th, 2019 70 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width">
  7.   <link rel="stylesheet" href="style.css">
  8.   <title>ObrazMondriana</title>
  9. <style id="jsbin-css">
  10. #canvas {
  11.     width: 400px;
  12.     height: 400px;
  13.     background-color: white;
  14.     margin: auto;
  15.     box-shadow: 15px 15px 10px black;
  16.     border:groove 10.5px black;
  17.  
  18. }
  19.  
  20. #first-row {
  21.     height: 75%;
  22.     width: 100%;
  23. }
  24. #big-rectangle {
  25.     height: 100%;
  26.     width: 75%;
  27. }
  28. #first-divider{
  29.     height: 100%;
  30.     width: 3%;
  31. }
  32. #first-column{
  33.     height: 100%;
  34.     width: 22%;
  35. }
  36. #second-divider{
  37.     height: 3%;
  38.     width: 100%;
  39. }
  40. #first-medium-rectangle{
  41.     height: 48.5%;
  42.     width: 100%;
  43. }
  44. #second-medium-rectangle{
  45.     height: 48.5%;
  46.     width: 100%;
  47. }
  48. #second-row{
  49.     height: 3%;
  50.     width: 100%;
  51. }
  52. #third-row{
  53.     height: 22%;
  54.     width: 100%;
  55.     background-color: beige;
  56. }
  57. #last-column{
  58.     height: 100%;
  59.     width: 15%;
  60. }
  61. #third-medium-rectangle{
  62.     height: 45%;
  63.     width: 100%;
  64. }
  65. #third-divider{
  66.     height: 10%;
  67.     width: 100%;
  68. }
  69. #four-medium-rectangle{
  70.     height: 45%;
  71.     width: 100%;
  72. }
  73. #four-row{
  74.     height: 100%;
  75.     width: 3%;
  76. }
  77. #second-big-rectangle{
  78.     height: 100%;
  79.     width: 56.7%;
  80. }
  81. #four-divider{
  82.     height: 100%;
  83.     width: 3%;
  84. }
  85. #small-left-rectangle{
  86.     height: 100%;
  87.     width: 22.3%;
  88. }
  89. /* colors */
  90. .red{
  91.     background-color: red;
  92. }
  93. .black{
  94.     background-color: black;
  95. }
  96. .yellow{
  97.     background-color: yellow;
  98. }
  99. .blue{
  100.     background-color: blue;
  101. }
  102. /*positions*/
  103. .right{
  104.     float: right;
  105. }
  106. </style>
  107. </head>
  108.  
  109. <body>
  110.   <div id="canvas">
  111.     <div id="first-row">
  112.       <div id="big-rectangle" class="red right"></div>
  113.       <div id="first-divider" class="right black"></div>
  114.       <div id="first-column" class="right">
  115.         <div id="first-medium-rectangle"></div>
  116.         <div id="second-divider" class="black"></div>
  117.         <div id="second-medium-rectangle"></div>
  118.       </div>
  119.     </div>
  120.     <div id="second-row" class="black"></div>
  121.     <div id="third-row">
  122.       <div id="last-column" class="right">
  123.         <div id="third-medium-rectangle"></div>
  124.         <div id="third-divider" class="black"></div>
  125.         <div id="four-medium-rectangle" class="yellow"></div>
  126.       </div>
  127.       <div id="four-row" class="right black"></div>
  128.       <div id="second-big-rectangle" class="right yellow"></div>
  129.       <div id="four-divider" class=" right black"></div>
  130.       <div id="small-left-rectangle" class="blue"></div>
  131.     </div>
  132.   </div>
  133.  
  134.  
  135. <script id="jsbin-source-css" type="text/css">
  136. #canvas {
  137.     width: 400px;
  138.     height: 400px;
  139.     background-color: white;
  140.     margin: auto;
  141.     box-shadow: 15px 15px 10px black;
  142.     border:groove 10.5px black;
  143.  
  144. }
  145.  
  146. #first-row {
  147.     height: 75%;
  148.     width: 100%;
  149. }
  150. #big-rectangle {
  151.     height: 100%;
  152.     width: 75%;
  153. }
  154. #first-divider{
  155.     height: 100%;
  156.     width: 3%;
  157. }
  158. #first-column{
  159.     height: 100%;
  160.     width: 22%;
  161. }
  162. #second-divider{
  163.     height: 3%;
  164.     width: 100%;
  165. }
  166. #first-medium-rectangle{
  167.     height: 48.5%;
  168.     width: 100%;
  169. }
  170. #second-medium-rectangle{
  171.     height: 48.5%;
  172.     width: 100%;
  173. }
  174. #second-row{
  175.     height: 3%;
  176.     width: 100%;
  177. }
  178. #third-row{
  179.     height: 22%;
  180.     width: 100%;
  181.     background-color: beige;
  182. }
  183. #last-column{
  184.     height: 100%;
  185.     width: 15%;
  186. }
  187. #third-medium-rectangle{
  188.     height: 45%;
  189.     width: 100%;
  190. }
  191. #third-divider{
  192.     height: 10%;
  193.     width: 100%;
  194. }
  195. #four-medium-rectangle{
  196.     height: 45%;
  197.     width: 100%;
  198. }
  199. #four-row{
  200.     height: 100%;
  201.     width: 3%;
  202. }
  203. #second-big-rectangle{
  204.     height: 100%;
  205.     width: 56.7%;
  206. }
  207. #four-divider{
  208.     height: 100%;
  209.     width: 3%;
  210. }
  211. #small-left-rectangle{
  212.     height: 100%;
  213.     width: 22.3%;
  214. }
  215. /* colors */
  216. .red{
  217.     background-color: red;
  218. }
  219. .black{
  220.     background-color: black;
  221. }
  222. .yellow{
  223.     background-color: yellow;
  224. }
  225. .blue{
  226.     background-color: blue;
  227. }
  228. /*positions*/
  229. .right{
  230.     float: right;
  231. }</script>
  232. </body>
  233.  
  234. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top