Guest User

Untitled

a guest
Nov 16th, 2018
120
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.15 KB | None | 0 0
  1. <style id="jsbin-css">
  2. .item-1 {
  3. grid-area: header;
  4. background-color: #83CAFE;
  5. }
  6. .item-2 {
  7. grid-area: menu;
  8. background-color: #CB99CC;
  9. width: 65px;
  10. }
  11. .item-3 {
  12. grid-area: content;
  13. background-color: #FECCCB;
  14. width:368px;
  15. }
  16. .item-4 {
  17. grid-area: ad;
  18. background-color: #CB99CC;
  19. width: 65px;
  20. }
  21. .item-5 {
  22. grid-area: footer;
  23. background-color: #82CBFE;
  24. }
  25.  
  26. .grid-container {
  27. width: 500px;
  28. height: 200px;
  29. display: grid;
  30. text-align: center;
  31. background-color: black;
  32. grid-gap: 1px;
  33. padding: 1px;
  34. grid-template-areas: 'header header header header'
  35. 'menu content content ad'
  36. 'menu content content ad'
  37. 'menu content content ad'
  38. 'footer footer footer footer';
  39. }
  40. </style>
  41. <html>
  42. <body>
  43. <div class="grid-container">
  44. <div class="item-1">HEADER</div>
  45. <div class="item-2">MENU</div>
  46. <div class="item-3">CONTENT</div>
  47. <div class="item-4">AD</div>
  48. <div class="item-5">FOOTER</div>
  49. </div>
  50.  
  51. <script id="jsbin-source-html" type="text/html"><html>
  52. <body>
  53. <div class="grid-container">
  54. <div class="item-1">HEADER</div>
  55. <div class="item-2">MENU</div>
  56. <div class="item-3">CONTENT</div>
  57. <div class="item-4">AD</div>
  58. <div class="item-5">FOOTER</div>
  59. </div>
  60. </body>
  61. </html>
  62. </script>
  63.  
  64. <script id="jsbin-source-css" type="text/css">.item-1 {
  65. grid-area: header;
  66. background-color: #83CAFE;
  67. }
  68. .item-2 {
  69. grid-area: menu;
  70. background-color: #CB99CC;
  71. width: 65px;
  72. }
  73. .item-3 {
  74. grid-area: content;
  75. background-color: #FECCCB;
  76. width:368px;
  77. }
  78. .item-4 {
  79. grid-area: ad;
  80. background-color: #CB99CC;
  81. width: 65px;
  82. }
  83. .item-5 {
  84. grid-area: footer;
  85. background-color: #82CBFE;
  86. }
  87.  
  88. .grid-container {
  89. width: 500px;
  90. height: 200px;
  91. display: grid;
  92. text-align: center;
  93. background-color: black;
  94. grid-gap: 1px;
  95. padding: 1px;
  96. grid-template-areas: 'header header header header'
  97. 'menu content content ad'
  98. 'menu content content ad'
  99. 'menu content content ad'
  100. 'footer footer footer footer';
  101. }
  102.  
  103.  
  104. </script>
  105. </body>
  106. </html>
Add Comment
Please, Sign In to add comment