daily pastebin goal
14%
SHARE
TWEET

Untitled

a guest Nov 16th, 2018 89 Never
Upgrade to PRO!
ENDING IN00days00hours00mins00secs
 
  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>
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