1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>National Library Portal</title> 7 <link rel="preconnect" href="https://fonts.googleapis.com" /> 8 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> 9 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" /> 10 11 <style> 12 *, *::before, *::after { 13 box-sizing: border-box; 14 margin: 0; 15 padding: 0; 16 } 17 18 :root { 19 --page-blue: #163c82; 20 --overlay-blue: rgba(20, 55, 120, 0.79); 21 --overlay-deep: rgba(8, 20, 48, 0.68); 22 --gold: #d5a436; 23 --white: #ffffff; 24 --card-bg: rgba(8, 15, 31, 0.84); 25 --card-border: rgba(255, 255, 255, 0.08); 26 --card-shadow: 0 18px 40px rgba(3, 9, 24, 0.32); 27 --max-width: 1220px; 28 } 29 30 body { 31 min-height: 100vh; 32 font-family: 'Inter', sans-serif; 33 color: var(--white); 34 background: #0e2452; 35 overflow-x: hidden; 36 } 37 38 .landing { 39 position: relative; 40 min-height: 100vh; 41 isolation: isolate; 42 display: flex; 43 align-items: center; 44 justify-content: center; 45 padding: 40px 24px; 46 overflow: hidden; 47 } 48 49 .landing-bg, 50 .landing-overlay { 51 position: absolute; 52 inset: 0; 53 pointer-events: none; 54 } 55 56 .landing-bg { 57 background: url('src/background.jpg') center center / cover no-repeat; 58 transform: scale(1.01); 59 opacity: 1; 60 z-index: -3; 61 } 62 63 .landing-overlay { 64 background: 65 linear-gradient(180deg, rgba(17, 48, 104, 0.42), rgba(12, 33, 76, 0.52)), 66 linear-gradient(120deg, rgba(19, 56, 123, 0.36), rgba(7, 19, 46, 0.44)), 67 radial-gradient(circle at top center, rgba(255, 255, 255, 0.07), transparent 34%); 68 z-index: -2; 69 } 70 71 .hero-shell { 72 width: min(100%, var(--max-width)); 73 display: grid; 74 gap: 40px; 75 justify-items: center; 76 text-align: center; 77 padding: 24px 0; 78 } 79 80 .hero-copy { 81 display: grid; 82 gap: 14px; 83 justify-items: center; 84 animation: rise-in 0.8s ease-out both; 85 } 86 87 .welcome-line { 88 display: flex; 89 flex-wrap: wrap; 90 justify-content: center; 91 align-items: baseline; 92 gap: 18px; 93 font-family: 'Poppins', sans-serif; 94 font-size: clamp(1.9rem, 3.5vw, 3.2rem); 95 font-weight: 700; 96 line-height: 1.1; 97 letter-spacing: -0.03em; 98 text-shadow: 0 10px 24px rgba(0, 0, 0, 0.22); 99 } 100 101 .accent-divider { 102 display: inline-flex; 103 align-items: center; 104 gap: 10px; 105 margin-top: 2px; 106 } 107 108 .accent-divider::before, 109 .accent-divider::after { 110 content: ''; 111 width: clamp(72px, 11vw, 110px); 112 height: 4px; 113 border-radius: 999px; 114 background: var(--gold); 115 } 116 117 .accent-divider span { 118 width: 10px; 119 height: 10px; 120 border-radius: 50%; 121 background: var(--gold); 122 } 123 124 .identity-row { 125 display: inline-flex; 126 align-items: center; 127 gap: 12px; 128 max-width: 100%; 129 padding: 0 12px; 130 } 131 132 .identity-mark { 133 width: 100px; 134 height: 36px; 135 flex: 0 0 auto; 136 object-fit: contain; 137 filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.18)); 138 } 139 140 .identity-text { 141 font-size: clamp(0.9rem, 1.2vw, 1rem); 142 font-weight: 700; 143 letter-spacing: 0.06em; 144 text-transform: uppercase; 145 color: rgba(255, 255, 255, 0.92); 146 } 147 148 .portal-grid { 149 width: 100%; 150 display: grid; 151 grid-template-columns: repeat(4, minmax(0, 1fr)); 152 gap: 14px; 153 animation: rise-in 0.95s ease-out both 0.12s; 154 } 155 156 .portal-card { 157 position: relative; 158 min-height: 180px; 159 background: var(--card-bg); 160 border: 1px solid var(--card-border); 161 border-radius: 0 38px 0 18px; 162 padding: 22px 18px 18px; 163 box-shadow: var(--card-shadow); 164 backdrop-filter: blur(4px); 165 display: flex; 166 flex-direction: column; 167 justify-content: space-between; 168 overflow: hidden; 169 text-align: left; 170 text-decoration: none; 171 color: inherit; 172 transition: transform 180ms ease, background 180ms ease, border-color 180ms ease; 173 } 174 175 .portal-card::before { 176 content: ''; 177 position: absolute; 178 inset: auto -18% -40% 45%; 179 height: 120px; 180 background: radial-gradient(circle, rgba(213, 164, 54, 0.16), transparent 65%); 181 pointer-events: none; 182 } 183 184 .portal-card:hover { 185 transform: translateY(-4px); 186 background: rgba(9, 18, 37, 0.92); 187 border-color: rgba(255, 255, 255, 0.14); 188 } 189 190 .portal-title { 191 font-family: 'Poppins', sans-serif; 192 font-size: clamp(1rem, 1.28vw, 1.32rem); 193 font-weight: 700; 194 line-height: 1.1; 195 max-width: 16ch; 196 } 197 198 .portal-link { 199 display: inline-flex; 200 align-items: center; 201 justify-content: center; 202 align-self: flex-end; 203 width: 44px; 204 height: 44px; 205 background: url('src/chevron-direction-right-round-filled-white-icon.webp') center center / contain no-repeat; 206 filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.22)); 207 } 208
209 @keyframes rise-in { 210 from { 211 opacity: 0; 212 transform: translateY(24px); 213 } 214 215 to { 216 opacity: 1; 217 transform: translateY(0); 218 } 219 } 220 221 @media (max-width: 860px) { 222 .portal-grid { 223 grid-template-columns: repeat(2, minmax(0, 1fr)); 224 } 225 } 226 227@media (max-width: 560px) { 228 .landing { 229 padding: 28px 18px; 230 } 231 232 .hero-shell { 233 gap: 30px; 234 } 235 236 .welcome-line { 237 gap: 10px; 238 } 239 240 .identity-row { 241 flex-direction: column; 242 align-items: center; 243 text-align: center; 244 gap: 14px; 245 } 246 247 .identity-mark { 248 width: 90px; 249 height: auto; 250 } 251 252 .identity-text { 253 line-height: 1.5; 254 font-size: 0.95rem; 255 } 256 257 .portal-grid { 258 grid-template-columns: 1fr; 259 } 260 261 .portal-card { 262 min-height: 150px; 263 } 264} 265 </style> 266</head> 267<body> 268 269<main class="landing"> 270 <div class="landing-bg" aria-hidden="true"></div> 271 <div class="landing-overlay" aria-hidden="true"></div> 272 <section class="hero-shell" aria-label="National Library portal links"> 273 <div class="hero-copy"> 274 <h1 class="welcome-line">à¶à¶ºà·à¶¶à·à·à¶±à· <span>வணà®à¯à®à®®à¯</span> <span>Welcome</span></h1> 275 <div class="accent-divider" aria-hidden="true"> 276 <span></span> 277 </div> <br> 278 <img class="identity-mark" style="width: 125px;" src="src/NLSL Logo (white).png" alt="National Library logo" /> 279 280 <p class="identity-text" style="font-size: 19px;">ජà·à¶à·à¶ පà·à·à·à¶à¶à·à¶½ à·à· පà·âරලà·à¶à¶± à·à·à·à· මණà·à¶©à¶½à¶º</p> 281 <p class="identity-text"style="margin-top: -8px;">தà¯à®à®¿à®¯ நà¯à®²à® à®à®µà®£à®µà®¾à®à¯à®à®²à¯ à®à¯à®µà¯à®à®³à¯ à®à®ªà¯</p> 282 <p class="identity-text"style="margin-top: -3px;">National Library and Documentation Services Board</p> 283 </div> 284 285 <div class="portal-grid"> 286 <a class="portal-card" href="https://www.natlib.lk/NLDSB" target="_blank" rel="noopener noreferrer"> 287 <h2 class="portal-title">National Library and Documentation Services Board</h2> 288 <span class="portal-link" aria-hidden="true"></span> 289 </a> 290 291 <a class="portal-card" href="https://www.natlib.lk/NLSL" target="_blank" rel="noopener noreferrer"> 292 <h2 class="portal-title">National Library of Sri Lanka</h2> 293 <span class="portal-link" aria-hidden="true"></span> 294 </a> 295 296 <a class="portal-card" href="https://www.natlib.lk/ICNATLIB2026" target="_blank" rel="noopener noreferrer"> 297 <h2 class="portal-title">Annual Research Conference</h2> 298 <span class="portal-link" aria-hidden="true"></span> 299 </a> 300 301 <a class="portal-card" href="https://isbn.lk/" target="_blank" rel="noopener noreferrer"> 302 <h2 class="portal-title">ISBN/ISSN/ISMN</h2> 303 <span class="portal-link" aria-hidden="true"></span> 304 </a> 305 </div> 306 </section> 307</main> 308</body> 309</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.