1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>CBS News</title> 8 9 <!-- Favicon --> 10 <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" /> 11 <link rel="apple-touch-icon" href="img/apple-touch-icon.png"> 12 13 <!-- Mobile Metas --> 14 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no"> 15 16 <!-- Web Fonts --> 17 <link id="googleFonts" href="https://fonts.googleapis.com/css2?family=Lexend:[email protected]&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" 18 rel="stylesheet" type="text/css"> 19 20 <!-- Vendor CSS --> 21 <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css"> 22 <link rel="stylesheet" href="vendor/fontawesome-free/css/all.min.css"> 23 <link rel="stylesheet" href="vendor/animate/animate.compat.css"> 24 <link rel="stylesheet" href="vendor/simple-line-icons/css/simple-line-icons.min.css"> 25 <link rel="stylesheet" href="vendor/owl.carousel/assets/owl.carousel.min.css"> 26 <link rel="stylesheet" href="vendor/owl.carousel/assets/owl.theme.default.min.css"> 27 <link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.min.css"> 28 29 <!-- Theme CSS --> 30 <link rel="stylesheet" href="css/theme.css"> 31 <link rel="stylesheet" href="css/theme-elements.css"> 32 <link rel="stylesheet" href="css/theme-blog.css"> 33 <link rel="stylesheet" href="css/theme-shop.css"> 34 35 <!-- Demo CSS --> 36 <link rel="stylesheet" href="css/demos/demo-cbs.css"> 37 38 <!-- Skin CSS --> 39 <link id="skinCSS" rel="stylesheet" href="css/skins/skin-cbs.css"> 40 41 <!-- Theme Custom CSS --> 42 <link rel="stylesheet" href="css/custom.css"> 43 44 <style> 45 #header { 46 position: sticky; 47 top: 0; 48 z-index: 9999; 49 } 50 </style> 51 52</head> 53 54 55 56<body> 57 58 <div class="body"> 59 60 61 <!--Header--> 62 <header id="header" data-plugin-options="{'stickyScrollUp':false, 'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': false, 'stickyChangeLogo': false, 'stickyStartAt': 100, 'stickyHeaderContainerHeight': 100}"> 63 <div class="header-body border-top-0 h-auto box-shadow-none"> 64 <div class="container-fluid px-3 px-lg-5 p-static"> 65 <div class="row align-items-center py-3"> 66 <div class="col-auto col-lg-2 col-xxl-3 me-auto me-lg-0"> 67 <div class="header-logo" data-clone-element-to="#offCanvasLogo"> 68 <a href="index.html"> 69 <img alt="CBS" width="100" height="80" src="img/demos/cbs/logo.png"> 70 </a> 71 </div> 72 </div> 73 <div class="col-auto col-lg-8 col-xxl-6 justify-content-lg-center"> 74 <div class="header-nav header-nav-links justify-content-lg-center"> 75 <div class="header-nav-main header-nav-main-text-capitalize header-nav-main-arrows header-nav-main-effect-2"> 76 <nav class="collapse"> 77 <ul class="nav nav-pills" id="mainNav"> 78 <li> 79 <a href="index.html" class="nav-link active"> 80 Home 81 </a> 82 </li> 83 84 <li class="dropdown"> 85 <a class="nav-link" href="about.html"> 86 Who We Are 87 </a> 88 <ul class="dropdown-menu"> 89 90 <li><a href="about.html#ourstory" class="dropdown-item anim-hover-translate-right-5px transition-3ms bg-transparent text-color-hover-primary text-lg-2 py-lg-2">About Us</a></li> 91 92 <li><a href="about.html#ourteam" class="dropdown-item anim-hover-translate-right-5px transition-3ms bg-transparent text-color-hover-primary text-lg-2 py-lg-2">Our Team</a></li> 93 94 <li><a href="about.html#boardmembers" class="dropdown-item anim-hover-translate-right-5px transition-3ms bg-transparent text-color-hover-primary text-lg-2 py-lg-2">Board Members</a></li> 95 96 <li><a href="about.html#partners" class="dropdown-item anim-hover-translate-right-5px transition-3ms bg-transparent text-color-hover-primary text-lg-2 py-lg-2">Our Partners</a></li> 97 98 99 </ul> 100 101 </li> 102 103 104 <li class="dropdown"> 105 <a class="nav-link" href="ourwork.html"> 106 Our Work 107 </a> 108 <ul class="dropdown-menu"> 109 <li class="dropdown"> 110 <a class="nav-link" href="ourwork.html"> 111 CBS Approach </a> 112 <ul class="dropdown-menu"> 113 <!-- LINK MODIFIED TO INCLUDE THE PAGE AND THE SECTION ID --> 114 <li><a href="ourwork.html#cbs-approach" class="dropdown-item anim-hover-translate-right-5px transition-3ms bg-transparent text-color-hover-primary text-lg-2 py-lg-2">CBS Approach</a></li> 115 </ul> 116 </li> 117 118 119 <li><a href="researchescopy.html" class="dropdown-item anim-hover-translate-right-5px transition-3ms bg-transparent text-color-hover-primary text-lg-2 py-lg-2">Research</a></li> 120 121 . 122 <li><a href="ourwork.html#ourcommunity" class="dropdown-item anim-hover-translate-right-5px transition-3ms bg-transparent text-color-hover-primary text-lg-2 py-lg-2">Our Community</a></li> 123 124 125 126 <li><a href="project.html" class="dropdown-item anim-hover-translate-right-5px transition-3ms bg-transparent text-color-hover-primary text-lg-2 py-lg-2">Projects</a></li> 127 128 129 130 131 </ul> 132 133 </li> 134 135 136 <li class="dropdown"> 137 <a>Publications</a> 138 <ul class="dropdown-menu"> 139 140 <li><a href="news.html" class="dropdown-item anim-hover-translate-right-5px transition-3ms bg-transparent text-color-hover-primary text-lg-2 py-lg-2">News</a></li> 141 142 <li><a href="storiesofchange.html" class="dropdown-item anim-hover-translate-right-5px transition-3ms bg-transparent text-color-hover-primary text-lg-2 py-lg-2">Stories of changes</a></li> 143 144 <li><a href="researches.html#researches" class="dropdown-item anim-hover-translate-right-5px transition-3ms bg-transparent text-color-hover-primary text-lg-2 py-lg-2">Researches</a></li> 145 146 <li><a href="newsletters.html" class="dropdown-item anim-hover-translate-right-5px transition-3ms bg-transparent text-color-hover-primary text-lg-2 py-lg-2">Newsletters</a></li> 147 148 149 150 151 </ul> 152 </li> 153 154 155 156 157 158 <li> 159 <a class="nav-link" href="contact.html"> 160 Contact 161 </a> 162 </li> 163 164 <li> 165 <a class="nav-link" href="donate.html"> 166 Donate 167 </a> 168 </li> 169 170 171 172 173 174 175 </ul> 176 </nav> 177 </div> 178 </div> 179 </div> 180 181 182 183 184 </div> 185 </div> 186 </div> 187 </header> 188 <!--End Of Header--> 189 190 191 192 193 194 195 196 197 <!-- Page Header --> 198 199 200 201 <!-- News Section --> 202 <div class="bg-grey-100 px-3 px-xl-0 border-radius-2-bottom p-relative overflow-hidden"> 203 <div class="container py-5"> 204 <div class="row" id="news-container"> 205 <p class="text-center w-100">Loading news...</p> 206 </div> 207 208 <!-- Pagination 209 <div class="pt-3 pb-5"> 210 <ul class="pagination pagination-rounded pagination-md justify-content-center"> 211 <li class="page-item"><a class="page-link bg-transparent text-dark" href="#"><i class="fas fa-angle-left"></i></a></li> 212 <li class="page-item active"><a class="page-link bg-secondary text-light border-color-secondary" href="#">1</a></li> 213 <li class="page-item"><a class="page-link bg-transparent text-dark" href="#">2</a></li> 214 <li class="page-item"><a class="page-link bg-transparent text-dark" href="#">3</a></li> 215 <li class="page-item"><a class="page-link bg-transparent text-dark" href="#"><i class="fas fa-angle-right"></i></a></li> 216 </ul> 217 </div>--> 218 </div> 219 </div> 220 221 222 223 224 225 <!--Footer--> 226 227 <iframe src="footer.html" style="width:100%; 228 margin:0; 229 padding:0; 230 border:0; 231 display:block;height:380px;"> 232 233 </iframe> 234 235 236 237 238 239 <!--End Of Footer--> 240 241 242 243 244 245 <!-- Offcanvas --> 246 <div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasMain" aria-labelledby="offcanvasMain"> 247 <div class="offcanvas-header"> 248 <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button> 249 </div> 250 <div class="offcanvas-body"> 251 <div class="mb-4" id="offCanvasLogo"></div> 252 <nav class="offcanvas-nav w-100" id="offCanvasNav"></nav> 253 </div> 254 </div> 255 256 <!-- JS Vendors --> 257
257<script src="vendor/plugins/js/plugins.min.js"></script>
257 258
258<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
258 259
259<script src="js/theme.js"></script>
259 260
260<script src="js/custom.js"></script>
260 261 262 <!-- News Loader --> 263
263<script> 264 const newsContainer = document.getElementById("news-container"); 265 266 fetch("data/news.json") 267 .then(res => res.json()) 268 .then(newsList => { 269 newsContainer.innerHTML = ""; // clear loading 270 newsList.forEach((news, index) => { 271 const [day, month] = news.date.split(" "); 272 const col = document.createElement("div"); 273 col.className = "col-md-6 col-lg-4 mb-4"; 274 col.innerHTML = ` 275 <article class="post"> 276 <div class="card rounded-3 border-0 bg-transparent box-shadow-10 box-shadow-1 box-shadow-1-hover anim-hover-translate-top-10px transition-3ms"> 277 <div class="p-relative rounded-3 overflow-hidden"> 278 <div class="post-date p-absolute top-20 left-20"> 279 <span class="day py-1 text-4 font-weight-bold text-secondary">${day}</span> 280 <span class="month bg-secondary">${month}</span> 281 </div> 282 <a href="news-post.html?id=${index}"> 283 <img class="card-img-top" src="${news.image}" loading="lazy" alt="${news.title}"> 284 </a> 285 <div class="card-body bg-light p-4"> 286 <span class="badge badge-dark badge-sm rounded-pill text-uppercase me-1">${news.category}</span> 287 <h4 class="my-2"> 288 <a href="news-post.html?id=${index}" class="text-decoration-none text-dark text-color-hover-primary"> 289 ${news.title} 290 </a> 291 </h4> 292 <p class="card-text text-3-5 mb-1">${news.excerpt}</p> 293 <a href="news-post.html?id=${index}" class="read-more text-color-secondary font-weight-semibold text-2"> 294 Read More <i class="fas fa-angle-right position-relative top-1 ms-1"></i> 295 </a> 296 <div class="d-flex align-items-center mt-3 pt-1"> 297 <img src="img/avatars/avatar.jpg" loading="lazy" class="img-fluid rounded-circle me-2" width="25" alt=""> 298 <strong class="text-color-dark text-2">by ${news.author}</strong> 299 </div> 300 </div> 301 </div> 302 </div> 303 </article> 304 `; 305 newsContainer.appendChild(col); 306 }); 307 }) 308 .catch(err => { 309 newsContainer.innerHTML = "<p class='text-center w-100'>Failed to load news.</p>"; 310 console.error(err); 311 }); 312 </script>
312 313 314 </div> 315 316</body> 317 318 319</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.