tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

grid-gap-decorations-051-ref.html (2695B)

      1 <!DOCTYPE html>
      2 <link rel="help" href="https://www.w3.org/TR/css-gaps-1/#lists-repeat">
      3 <link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com">
      4 <style>
      5  body {
      6    margin: 0px;
      7  }
      8 
      9  .grid-container {
     10    display: grid;
     11    grid-gap: 10px;
     12    grid-template-columns: repeat(6, 100px);
     13    height: 650px;
     14    width: 650px;
     15  }
     16 
     17  .row-gap {
     18    height: 0px;
     19    width: 650px;
     20    position: absolute;
     21 
     22  }
     23 
     24  .row-gap1 {
     25    border-bottom: 10px solid red;
     26    top: 100px;
     27  }
     28 
     29  .row-gap2 {
     30    border-bottom: 8px solid red;
     31    top: 211px;
     32  }
     33 
     34  .row-gap3 {
     35    border-bottom: 2px solid red;
     36    top: 324px;
     37  }
     38 
     39  .row-gap4 {
     40    border-bottom: 2px solid yellow;
     41    top: 434px;
     42  }
     43 
     44  .row-gap5 {
     45    border-bottom: 5px solid yellow;
     46    top: 542.5px;
     47  }
     48 
     49  .col-gap {
     50    width: 0px;
     51    height: 650px;
     52    position: absolute;
     53    top: 0px;
     54  }
     55 
     56  .col-gap1 {
     57    border-left: 2px solid teal;
     58    left: 104px;
     59  }
     60 
     61  .col-gap2 {
     62    border-left: 5px solid indigo;
     63    left: 212.5px;
     64  }
     65 
     66  .col-gap3 {
     67    border-left: 2px solid violet;
     68    left: 324px;
     69  }
     70 
     71  .col-gap4 {
     72    border-left: 10px solid blue;
     73    left: 430px;
     74  }
     75 
     76  .col-gap5 {
     77    border-left: 10px solid purple;
     78    left: 540px;
     79  }
     80 
     81  .item {
     82    background: gray;
     83    opacity: 0.5;
     84  }
     85 </style>
     86 <div class="grid-container">
     87  <div class="item"></div>
     88  <div class="item"></div>
     89  <div class="item"></div>
     90  <div class="item"></div>
     91  <div class="item"></div>
     92  <div class="item"></div>
     93  <div class="item"></div>
     94  <div class="item"></div>
     95  <div class="item"></div>
     96  <div class="item"></div>
     97  <div class="item"></div>
     98  <div class="item"></div>
     99  <div class="item"></div>
    100  <div class="item"></div>
    101  <div class="item"></div>
    102  <div class="item"></div>
    103  <div class="item"></div>
    104  <div class="item"></div>
    105  <div class="item"></div>
    106  <div class="item"></div>
    107  <div class="item"></div>
    108  <div class="item"></div>
    109  <div class="item"></div>
    110  <div class="item"></div>
    111  <div class="item"></div>
    112  <div class="item"></div>
    113  <div class="item"></div>
    114  <div class="item"></div>
    115  <div class="item"></div>
    116  <div class="item"></div>
    117  <div class="item"></div>
    118  <div class="item"></div>
    119  <div class="item"></div>
    120  <div class="item"></div>
    121  <div class="item"></div>
    122  <div class="item"></div>
    123 </div>
    124 
    125 <div class="col-gap col-gap1"> </div>
    126 <div class="col-gap col-gap2"> </div>
    127 <div class="col-gap col-gap3"> </div>
    128 <div class="col-gap col-gap4"> </div>
    129 <div class="col-gap col-gap5"> </div>
    130 
    131 <div class="row-gap row-gap1"> </div>
    132 <div class="row-gap row-gap2"> </div>
    133 <div class="row-gap row-gap3"> </div>
    134 <div class="row-gap row-gap4"> </div>
    135 <div class="row-gap row-gap5"> </div>