daily pastebin goal
86%
SHARE
TWEET

Untitled

a guest Sep 24th, 2018 55 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width">
  6.   <title>JS Bin</title>
  7. <style id="jsbin-css">
  8. #canvas {
  9.   width: 300px;
  10.   height: 300px;
  11.   background-color: ivory;
  12.   margin: 0 auto;
  13.   box-shadow: 15px 15px 10px gray;
  14. }#first-row {
  15.   height: 75%;
  16.   width: 100%;
  17.   background-color: brown;
  18. }
  19. #big-rectangle {
  20.   height: 100%;
  21.   width: 75%;
  22. }
  23. .red {
  24.   background-color: red;
  25. }
  26. .right
  27. {
  28.   float:right;
  29. }
  30. #first-divider {
  31.   height: 100%;
  32.   width: 3%;
  33. }
  34. .black {
  35.   background-color: black;
  36. }
  37. .black {
  38.   float: right;
  39. }
  40. #first-column {
  41.   height: 100%;
  42.   width: 22%;
  43. }
  44. #second-divider {
  45.   height: 3%;
  46.   width: 100%;
  47. }
  48. #first-medium-rectangle {
  49.   height: 48.5%;
  50.   width: 100%;
  51. }
  52. #second-medium-rectangle {
  53.   height: 48.5%;
  54.   width: 100%;
  55. }
  56. #second-row {
  57.   height: 3%;
  58.   width: 100%;
  59. }
  60.  
  61. #third-row {
  62.   height: 22%;
  63.   width: 100%;
  64. }
  65.  
  66. #last-column {
  67.   height: 100%;
  68.   width: 5%;
  69. }
  70.  
  71. #first-tiny-rectangle {
  72.   height: 45%;
  73.   width: 100%;
  74. }
  75.  
  76. #second-tiny-rectangle {
  77.   height: 45%;
  78.   width: 100%;
  79. }
  80.  
  81. #third-divider {
  82.   height: 10%;
  83.   width: 100%;
  84. }
  85.  
  86. #fourth-divider {
  87.   height: 100%;
  88.   width: 3%;
  89. }
  90.  
  91. #fifth-divider {
  92.   height: 100%;
  93.   width: 3%;
  94. }
  95.  
  96. #wide-rectangle {
  97.   height: 100%;
  98.   width: 67%;
  99. }
  100.  
  101. #small-rectangle {
  102.   height: 100%;
  103.   width: 22%;
  104. }
  105.  
  106. .yellow {
  107.   background-color: yellow;
  108. }
  109.  
  110. .blue {
  111.   background-color: blue;
  112. }
  113. </style>
  114. </head>
  115. <body>
  116. <div id="canvas">
  117.   <div id="first-row">
  118.     <div id="big-rectangle" class="red right"></div>
  119.     <div id="first-divider" class="black right"></div>
  120.   <div id="second-row" class="black"></div>
  121.   </div>
  122.   <div id="first-column" class="right">
  123.     <div id="first-medium-rectangle"></div>
  124.     <div id="second-divider" class="black"></div>
  125.     <div id="second-mediumdiv" id="last-rectangle"></div>
  126.   <div id="third-row">
  127.   <div id="last-column" class="right">
  128.     <div id="first-tiny-rectangle"></div>
  129.     <div id="third-divider" class="black"></div>
  130.     <div id="second-tiny-rectangle" class="yellow"></div>
  131.   </div>
  132.   <div id="fourth-divider" class="black right"></div>
  133.   <div id="wide-rectangle" class="right"></div>
  134.   <div id="fifth-divider" class="black right"></div>
  135.   <div id="small-rectangle" class="blue right"></div>
  136. </div>
  137. </html>
  138.  
  139. <script id="jsbin-source-css" type="text/css">#canvas {
  140.   width: 300px;
  141.   height: 300px;
  142.   background-color: ivory;
  143.   margin: 0 auto;
  144.   box-shadow: 15px 15px 10px gray;
  145. }#first-row {
  146.   height: 75%;
  147.   width: 100%;
  148.   background-color: brown;
  149. }
  150. #big-rectangle {
  151.   height: 100%;
  152.   width: 75%;
  153. }
  154. .red {
  155.   background-color: red;
  156. }
  157. .right
  158. {
  159.   float:right;
  160. }
  161. #first-divider {
  162.   height: 100%;
  163.   width: 3%;
  164. }
  165. .black {
  166.   background-color: black;
  167. }
  168. .black {
  169.   float: right;
  170. }
  171. #first-column {
  172.   height: 100%;
  173.   width: 22%;
  174. }
  175. #second-divider {
  176.   height: 3%;
  177.   width: 100%;
  178. }
  179. #first-medium-rectangle {
  180.   height: 48.5%;
  181.   width: 100%;
  182. }
  183. #second-medium-rectangle {
  184.   height: 48.5%;
  185.   width: 100%;
  186. }
  187. #second-row {
  188.   height: 3%;
  189.   width: 100%;
  190. }
  191.  
  192. #third-row {
  193.   height: 22%;
  194.   width: 100%;
  195. }
  196.  
  197. #last-column {
  198.   height: 100%;
  199.   width: 5%;
  200. }
  201.  
  202. #first-tiny-rectangle {
  203.   height: 45%;
  204.   width: 100%;
  205. }
  206.  
  207. #second-tiny-rectangle {
  208.   height: 45%;
  209.   width: 100%;
  210. }
  211.  
  212. #third-divider {
  213.   height: 10%;
  214.   width: 100%;
  215. }
  216.  
  217. #fourth-divider {
  218.   height: 100%;
  219.   width: 3%;
  220. }
  221.  
  222. #fifth-divider {
  223.   height: 100%;
  224.   width: 3%;
  225. }
  226.  
  227. #wide-rectangle {
  228.   height: 100%;
  229.   width: 67%;
  230. }
  231.  
  232. #small-rectangle {
  233.   height: 100%;
  234.   width: 22%;
  235. }
  236.  
  237. .yellow {
  238.   background-color: yellow;
  239. }
  240.  
  241. .blue {
  242.   background-color: blue;
  243. }
  244.  
  245.  
  246.  
  247.  
  248.  
  249.  
  250.  
  251.  
  252.  
  253.  
  254. </script>
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