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>Anatomy</title> 7 <style> 8 * { 9 margin: 0; 10 padding: 0; 11 box-sizing: border-box; 12 } 13 14 body { 15 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 16 line-height: 1.6; 17 color: #333; 18 background-color: #f5f5f5; 19 } 20 21 /* Sticky Navigation Bar with Centered Logo */ 22 .navbar { 23 position: sticky; 24 top: 0; 25 background-color: #ffffff; 26 padding: 1.5rem; 27 box-shadow: 0 2px 8px rgba(0,0,0,0.1); 28 z-index: 1000; 29 display: flex; 30 justify-content: center; 31 align-items: center; 32 } 33 34 /* Back Button */ 35 .back-button { 36 position: absolute; 37 left: 1.5rem; 38 background-color: #2c3e50; 39 color: white; 40 padding: 0.6rem 1rem; 41 border-radius: 8px; 42 text-decoration: none; 43 display: flex; 44 align-items: center; 45 gap: 0.5rem; 46 transition: all 0.3s ease; 47 font-weight: 500; 48 font-size: 0.95rem; 49 } 50 51 .back-button:hover { 52 background-color: #34495e; 53 transform: translateX(-3px); 54 } 55 56 .back-arrow { 57 font-size: 1.2rem; 58 } 59 60 .logo { 61 height: 50px; 62 width: auto; 63 } 64 65 /* Content Section */ 66 .content-section { 67 max-width: 1200px; 68 margin: 3rem auto; 69 padding: 0 2rem; 70 } 71 72 .content-section h1 { 73 font-size: 2.5rem; 74 color: #2c3e50; 75 margin-bottom: 1.5rem; 76 text-align: center; 77 } 78 79 .content-section p { 80 font-size: 1.1rem; 81 color: #555; 82 line-height: 1.8; 83 text-align: justify; 84 margin-bottom: 3rem; 85 } 86 87 /* Image Grid Gallery */ 88 .gallery-grid { 89 display: grid; 90 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 91 gap: 2rem; 92 margin-top: 2rem; 93 } 94 95 .gallery-item { 96 background: white; 97 border-radius: 12px; 98 overflow: hidden; 99 box-shadow: 0 4px 6px rgba(0,0,0,0.1); 100 transition: all 0.3s ease; 101 } 102 103 104 105 .gallery-item a { 106 text-decoration: none; 107 color: inherit; 108 display: block; 109 } 110 111 .image-container { 112 width: 100%; 113 position: relative; 114 padding-top: 56.25%; /* 16:9 aspect ratio */ 115 overflow: hidden; 116 background-color: #e0e0e0; 117 } 118 119 .gallery-image { 120 position: absolute; 121 top: 0; 122 left: 0; 123 width: 100%; 124 height: 100%; 125 object-fit: cover; 126 transition: transform 0.3s ease; 127 } 128 129 130 131 .placeholder-image { 132 font-size: 3rem; 133 color: #999; 134 } 135 136 .gallery-info { 137 padding: 1.5rem; 138 } 139 140 .gallery-title { 141 font-size: 1.3rem; 142 font-weight: 600; 143 color: #2c3e50; 144 margin-bottom: 0.5rem; 145 } 146 147 .gallery-description { 148 font-size: 0.95rem; 149 color: #777; 150 } 151 152 /* Footer */ 153 .footer { 154 background-color: #2c3e50; 155 color: white; 156 text-align: center; 157 padding: 2rem; 158 margin-top: 4rem; 159 } 160 161 .footer p { 162 font-size: 0.95rem; 163 } 164 165 /* Responsive Design */ 166 @media (max-width: 768px) { 167 .navbar { 168 padding: 1rem; 169 } 170 171 .back-button { 172 left: 1rem; 173 padding: 0.5rem 0.8rem; 174 font-size: 0.85rem; 175 } 176 177 .logo { 178 height: 40px; 179 } 180 181 .content-section { 182 margin: 2rem auto; 183 padding: 0 1.5rem; 184 } 185 186 .content-section h1 { 187 font-size: 2rem; 188 } 189 190 .content-section p { 191 font-size: 1rem; 192 } 193 194 .gallery-grid { 195 grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); 196 gap: 1.5rem; 197 } 198 199 200 } 201 202 @media (max-width: 480px) { 203 .back-button { 204 left: 0.5rem; 205 padding: 0.4rem 0.6rem; 206 font-size: 0.8rem; 207 } 208 209 .back-arrow { 210 font-size: 1rem; 211 } 212 213 .logo { 214 height: 35px; 215 } 216 217 .content-section h1 { 218 font-size: 1.6rem; 219 } 220 221 .gallery-grid { 222 grid-template-columns: 1fr; 223 gap: 1.5rem; 224 } 225 226 .gallery-info { 227 padding: 1rem; 228 } 229 230 .gallery-title { 231 font-size: 1.1rem; 232 } 233 } 234 </style> 235</head> 236<body> 237 <!-- Sticky Navigation Bar with Back Button and Centered Logo --> 238 <nav class="navbar"> 239 <a href="index.html" class="back-button">
240 <span class="back-arrow">â</span> 241 <span>Back</span> 242 </a> 243 <img src="img/brand-logo.png" alt="Brand Logo" class="logo"> 244 </nav> 245 246 <!-- Content Section with Header and Paragraph --> 247 <section class="content-section"> 248 <h1>ANATOMY AND PHYSIOLOGY</h1> 249 250 <!-- Image Grid Gallery --> 251 <div class="gallery-grid"> 252 <!-- Gallery Item 1 --> 253 <div class="gallery-item"> 254 <a href="anatomy/Junior-Animated-Atlas.html"> 255 <div class="image-container"> 256 <img src="img/jaa.jpg" alt="Junior Animated Atlas" class="gallery-image"> 257 </div> 258 <div class="gallery-info"> 259 <div class="gallery-title">Junior Animated Atlas</div> 260 </div> 261 </a> 262 </div> 263 264 <!-- Gallery Item 2 --> 265 <div class="gallery-item"> 266 <a href="anatomy/Essential-Animated-Atlas.html"> 267 <div class="image-container"> 268 <img src="img/eaa.jpg" alt="Essential Animated Atlas" class="gallery-image"> 269 </div> 270 <div class="gallery-info"> 271 <div class="gallery-title">Essential Animated Atlas</div> 272 </div> 273 </a> 274 </div> 275 276 <!-- Gallery Item 3 --> 277 <div class="gallery-item"> 278 <a href="anatomy/Digital-Anatomy-Atlas.html"> 279 <div class="image-container"> 280 <img src="img/daa.jpg" alt="Digital Animaed Atlas" class="gallery-image"> 281 </div> 282 <div class="gallery-info"> 283 <div class="gallery-title">Digital Animated Atlas</div> 284 </div> 285 </a> 286 </div> 287 288 <!-- Gallery Item 4 --> 289 <div class="gallery-item"> 290 <a href="anatomy/Fundamentals-of-biology.html"> 291 <div class="image-container"> 292 <img src="img/fob.jpg" alt="Fundamentals of Biology" class="gallery-image"> 293 </div> 294 <div class="gallery-info"> 295 <div class="gallery-title">Fundamentals of Biology</div> 296 </div> 297 </a> 298 </div> 299 300 <!-- Gallery Item 5 --> 301 <div class="gallery-item"> 302 <a href="anatomy/cell-biology-and-genetics.html"> 303 <div class="image-container"> 304 <img src="img/cell-biology-genetics.png" alt="Cell Biology and Genetics" class="gallery-image"> 305 </div> 306 <div class="gallery-info"> 307 <div class="gallery-title">Cell Biology and Genetics</div> 308 </div> 309 </a> 310 </div> 311 312 <!-- Gallery Item 6 --> 313 <div class="gallery-item"> 314 <a href="anatomy/children-series/index.html"> 315 <div class="image-container"> 316 <img src="img/antomy-for-children.png" alt="Anatomy for Children" class="gallery-image"> 317 </div> 318 <div class="gallery-info"> 319 <div class="gallery-title">Anatomy for Children</div> 320 </div> 321 </a> 322 </div> 323 </div> 324 </section> 325 326 <!-- Footer with Copyright --> 327 <footer class="footer"> 328 <p>© <span id="year"></span> Focus Medica India Pvt. Ltd. All rights reserved.</p> 329 </footer> 330 331
331<script> 332 document.getElementById('year').textContent = new Date().getFullYear(); 333 </script>
333 334</body> 335</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.