Untitled

mail@pastecode.io avatarunknown
plain_text
a month ago
2.1 kB
2
Indexable
Never
<style>
.angry-grid {
   display: grid; 

   grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   
   grid-template-areas: 
	'ad-leaderboard ad-leaderboard ad-leaderboard ad-leaderboard'
	'header header header header'
	'Latest-news Latest-news Latest-news top-mpu'
	'Latest-news Latest-news Latest-news top-mpu'
	'Latest-news Latest-news Latest-news watch-it-live'
	'Latest-news Latest-news Latest-news watch-it-live'
	'latest-videos latest-videos latest-videos latest-videos'
	'latest-videos latest-videos latest-videos latest-videos'
	'bottom-banner bottom-banner bottom-banner bottom-banner'
	'fixtures-and-results fixtures-and-results fixtures-and-results bottom-mpu'
	'standings standings standings bottom-mpu'
	'footer footer footer footer';
   
   gap: 1px;
   height: 100%;
   
}
  
#item-0 {

   background-color: #a755bc; 
   grid-area: Latest-news;
   
}
#item-1 {

   background-color: #dad65d; 
   grid-area: ad-leaderboard;
   
}
#item-2 {

   background-color: #57bbfd; 
   grid-area: header;
   
}
#item-3 {

   background-color: #e6d6de; 
   grid-area: latest-videos;
   
}
#item-4 {

   background-color: #6c95bf; 
   grid-area: top-mpu;
   
}
#item-5 {

   background-color: #ba5d95; 
   grid-area: watch-it-live;
   
}
#item-6 {

   background-color: #795dfe; 
   grid-area: bottom-banner;
   
}
#item-7 {

   background-color: #db69ea; 
   grid-area: fixtures-and-results;
   
}
#item-8 {

   background-color: #87fce7; 
   grid-area: bottom-mpu;
   
}
#item-9 {

   background-color: #a1a1a1; 
   grid-area: standings;
   
}
#item-10 {

   background-color: #dc7668; 
   grid-area: footer;
   
}
</style>

<div class="angry-grid">
  <div id="item-0">&nbsp;</div>
  <div id="item-1">&nbsp;</div>
  <div id="item-2">&nbsp;</div>
  <div id="item-3">&nbsp;</div>
  <div id="item-4">&nbsp;</div>
  <div id="item-5">&nbsp;</div>
  <div id="item-6">&nbsp;</div>
  <div id="item-7">&nbsp;</div>
  <div id="item-8">&nbsp;</div>
  <div id="item-9">&nbsp;</div>
  <div id="item-10">&nbsp;</div>
</div>