SHARE
TWEET

Untitled

a guest Sep 18th, 2019 67 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. }
  15. #first-row {
  16.   height: 75%;
  17.   width: 100%;
  18. }
  19. #big-rectangle {
  20.   height: 100%;
  21.   width: 75%;
  22. }
  23. .red{
  24.   background-color: red;
  25. }
  26. .right{
  27.   float: right;
  28. }
  29. .black {
  30.   background-color: black;
  31. }
  32. #first-divider {
  33.   height: 100%;
  34.   width: 3%;
  35. }
  36. #first-column {
  37.   height: 100%;
  38.   width: 22%;
  39. }
  40. #second-divider {
  41.   height: 3%;
  42.   width: 100%;
  43. }
  44. #first-medium-rectangle {
  45.   height: 48.5%;
  46.   width: 100%;
  47. }
  48. #second-medium-rectangle {
  49.   height: 48.5%;
  50.   width: 100%;
  51. }
  52. #second-row {
  53.   height: 3%;
  54.   width: 100%;
  55. }
  56. </style>
  57. </head>
  58. <body>
  59.  <div id="canvas">
  60.    <div id="first-row">
  61.     <div id="big-rectangle" class="red right"></div>
  62.     <div id="first-divider" class="black right"></div>
  63.    </div>
  64.    <div id="first-column" class="right">
  65.     <div id="first-medium-rectangle"></div>
  66.     <div id="second-divider" class="black"></div>
  67.     <div id="second-medium-rectangle"></div>
  68.    </div>
  69.    <div id="second-row" class="black"></div>
  70.  </div>
  71.  
  72.  
  73. <script id="jsbin-source-css" type="text/css">#canvas {
  74.   width: 300px;
  75.   height: 300px;
  76.   background-color: ivory;
  77.   margin: 0 auto;
  78.   box-shadow: 15px 15px 10px gray;
  79. }
  80. #first-row {
  81.   height: 75%;
  82.   width: 100%;
  83. }
  84. #big-rectangle {
  85.   height: 100%;
  86.   width: 75%;
  87. }
  88. .red{
  89.   background-color: red;
  90. }
  91. .right{
  92.   float: right;
  93. }
  94. .black {
  95.   background-color: black;
  96. }
  97. #first-divider {
  98.   height: 100%;
  99.   width: 3%;
  100. }
  101. #first-column {
  102.   height: 100%;
  103.   width: 22%;
  104. }
  105. #second-divider {
  106.   height: 3%;
  107.   width: 100%;
  108. }
  109. #first-medium-rectangle {
  110.   height: 48.5%;
  111.   width: 100%;
  112. }
  113. #second-medium-rectangle {
  114.   height: 48.5%;
  115.   width: 100%;
  116. }
  117. #second-row {
  118.   height: 3%;
  119.   width: 100%;
  120. }</script>
  121. </body>
  122. </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