long.html (1879B)
1 <!doctype html> 2 <!-- This Source Code Form is subject to the terms of the Mozilla Public 3 - License, v. 2.0. If a copy of the MPL was not distributed with this 4 - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> 5 <html lang="en"> 6 <head> 7 <meta charset="utf-8" /> 8 <meta name="viewport" content="width=device-width, initial-scale=1" /> 9 <title>Long Page</title> 10 <style> 11 :root { 12 --sat: 85%; 13 --light: 55%; 14 } 15 * { 16 box-sizing: border-box; 17 } 18 html, 19 body { 20 margin: 0; 21 padding: 0; 22 } 23 .panel { 24 height: 100vh; 25 } 26 27 .panel:nth-child(1) { 28 background: hsl(0 var(--sat) var(--light)); 29 } 30 .panel:nth-child(2) { 31 background: hsl(36 var(--sat) var(--light)); 32 } 33 .panel:nth-child(3) { 34 background: hsl(72 var(--sat) var(--light)); 35 } 36 .panel:nth-child(4) { 37 background: hsl(108 var(--sat) var(--light)); 38 } 39 .panel:nth-child(5) { 40 background: hsl(144 var(--sat) var(--light)); 41 } 42 .panel:nth-child(6) { 43 background: hsl(180 var(--sat) var(--light)); 44 } 45 .panel:nth-child(7) { 46 background: hsl(216 var(--sat) var(--light)); 47 } 48 .panel:nth-child(8) { 49 background: hsl(252 var(--sat) var(--light)); 50 } 51 .panel:nth-child(9) { 52 background: hsl(288 var(--sat) var(--light)); 53 } 54 .panel:nth-child(10) { 55 background: hsl(324 var(--sat) var(--light)); 56 } 57 </style> 58 </head> 59 <body> 60 <div class="panel"></div> 61 <div class="panel"></div> 62 <div class="panel"></div> 63 <div class="panel"></div> 64 <div class="panel"></div> 65 <div class="panel"></div> 66 <div class="panel"></div> 67 <div class="panel"></div> 68 <div class="panel"></div> 69 <div class="panel"></div> 70 </body> 71 </html>