index.html 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Blockly Demo: Resizable Blockly (Part 1)</title>
  6. <style>
  7. html, body {
  8. height: 100%;
  9. margin: 0;
  10. }
  11. body {
  12. background-color: #fff;
  13. font-family: sans-serif;
  14. overflow: hidden;
  15. }
  16. h1 {
  17. font-weight: normal;
  18. font-size: 140%;
  19. }
  20. table {
  21. height: 100%;
  22. width: 100%;
  23. }
  24. #blocklyArea {
  25. height: 99%;
  26. background: #fc9;
  27. text-align: center;
  28. }
  29. </style>
  30. </head>
  31. <body>
  32. <table>
  33. <tr>
  34. <td>
  35. <h1><a href="https://developers.google.com/blockly/">Blockly</a> &gt;
  36. <a href="../index.html">Demos</a> &gt; Resizable Blockly (Part 1)</h1>
  37. <p>The first step in creating a resizable Blockly workspace is to use
  38. CSS or tables to create an area for it.
  39. Next, <a href="overlay.html">inject Blockly</a> over that area.</p>
  40. <p>&rarr; More info on <a href="https://developers.google.com/blockly/guides/configure/web/resizable">injecting resizable Blockly</a>&hellip;</p>
  41. </td>
  42. </tr>
  43. <tr>
  44. <td id="blocklyArea">
  45. Blockly will be positioned here.
  46. </td>
  47. </tr>
  48. </table>
  49. </body>
  50. </html>