Advertisement
Guest User

Untitled

a guest
Oct 17th, 2019
84
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.83 KB | None | 0 0
  1. .container {
  2.     height: 100%;
  3.     margin: 2rem;
  4.     display: flex;
  5.     border-radius: 20px;
  6.     grid-gap: 10px 10px;
  7.     background-color: rgba(80,80,80,0.2);
  8.     grid-template-columns: 1fr 1fr 1fr;
  9.     grid-template-rows: 0.25fr 1fr 1fr;
  10. }
  11. footer p {
  12.     font-size: large;
  13.     font-weight: bold;
  14.     color: rgba(0,0,255,0.4);
  15.     float:  left;
  16. }
  17.  
  18. .widget_title {
  19.     float:  left;
  20.     width: 100%;
  21.     padding: 1rem;
  22.     grid-row: 1;
  23.     grid-column: 1;
  24. }
  25. .cell {
  26.     color: black;
  27.     font-size: 3rem;
  28.     text-align: left;
  29.     padding: 1rem 1rem 1rem 1rem;
  30. }
  31. .cell img{
  32.     width: 200px;
  33.     height: 200px;
  34.  
  35. }
  36. .cell .data{
  37.     font-size: x-large;
  38.     font-weight: bold;
  39.     font-family: sans-serif;
  40. }
  41.  
  42. .cell-1 {
  43.     grid-row: 2;
  44.     grid-column: 0;
  45. }
  46. .cell-2 {
  47.     grid-row: 2;
  48.     grid-column: 2;
  49. }
  50. .cell-3 {
  51.     grid-row: 2;
  52.     grid-column: 3;
  53. }
  54. .cell-4 {
  55.     grid-row: 3;
  56.     grid-column: 1;
  57. }
  58. .cell-5 {
  59.     grid-row: 3;
  60.     grid-column: 2;
  61. }
  62. .cell-6 {
  63.     grid-row: 3;
  64.     grid-column: 3;
  65. }
  66.  
  67.  
  68. @media only screen and (min-width: 640px) and (max-width: 1024px) {
  69.     .container{
  70.  
  71.         grid-template-columns: 1fr;
  72.         grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  73.         margin: auto;
  74.         width: 70%;
  75.         padding: 10px;
  76.     }
  77.  
  78.     .widget_title {
  79.         text-align: left;
  80.         width: 100%;
  81.         padding: 1rem;
  82.         grid-row: 1;
  83.  
  84.     }
  85.     .cell-1 {
  86.         grid-row: 2;
  87.         grid-column: 1;
  88.     }
  89.     .cell-2 {
  90.         grid-row: 3;
  91.         grid-column: 1;
  92.     }
  93.     .cell-3 {
  94.         grid-row: 4;
  95.         grid-column: 1;
  96.     }
  97.     .cell-4 {
  98.         grid-row: 5;
  99.         grid-column: 1;
  100.     }
  101.     .cell-5 {
  102.         grid-row: 6;
  103.         grid-column: 1;
  104.     }
  105.     .cell-6 {
  106.         grid-row: 7;
  107.         grid-column: 1;
  108.     }
  109.  
  110. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement