From 360f0a8f5dc34520ce090e2e4f26c0a666d0723b Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Thu, 15 Jun 2023 00:24:41 +0530
Subject: [PATCH] Added news section

---
 css/main.css     |  95 ++++++++++++++++++---
 css/main.min.css |   2 +-
 css/main.scss    |  69 +++++++++++++--
 index.html       | 213 ++++++++++++++++++++++++++++++++++++++++-------
 4 files changed, 329 insertions(+), 50 deletions(-)

diff --git a/css/main.css b/css/main.css
index ecfff55..de82170 100644
--- a/css/main.css
+++ b/css/main.css
@@ -74,6 +74,10 @@ img {
      object-fit: contain;
 }
 
+ul {
+  list-style: none;
+}
+
 .icon {
   width: 1.2rem;
   height: 1.2rem;
@@ -132,44 +136,52 @@ img {
   gap: 4rem;
 }
 
+article {
+  padding-top: 4rem;
+}
 article > * {
   padding: max(1rem, 2vw) var(--inline-padding);
 }
 
-header {
+#main_header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  position: -webkit-sticky;
-  position: sticky;
+  position: fixed;
+  left: 0;
+  right: 0;
   top: 0;
   background-color: rgba(var(--foreground-color), 0.5);
   z-index: 2;
   -webkit-backdrop-filter: blur(1rem);
           backdrop-filter: blur(1rem);
+  padding: max(1rem, 2vw) var(--inline-padding);
 }
-header ul {
+#main_header a {
+  color: rgba(var(--text-color), 0.9);
+  text-decoration: none;
+}
+#main_header ul {
   list-style: none;
   display: flex;
   gap: 0.8rem;
 }
-header ul a {
+#main_header ul a {
   font-weight: 500;
-  color: rgba(var(--text-color), 0.9);
-  text-decoration: none;
 }
-header ul a::after {
+#main_header ul a::after {
   content: "";
   display: block;
   width: 0;
-  height: 2px;
+  height: 0.15rem;
   background: var(--accent-color);
   transition: width 0.3s;
+  margin: auto;
 }
-header ul a:hover::after {
-  width: 100%;
+#main_header ul a.active::after, #main_header ul a:hover::after {
+  width: 1rem;
 }
-header ul .icon {
+#main_header ul .icon {
   display: flex;
 }
 
@@ -301,6 +313,62 @@ section:nth-of-type(4) p {
   font-size: 0.9rem;
 }
 
+#news_list {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.news-item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-areas: " icon ." "icon ." "icon ." "icon .";
+  gap: 0.5rem 1rem;
+  border: solid thin rgba(var(--text-color), 0.5);
+  border-radius: 0.5rem;
+  padding: max(1rem, 2vw);
+  text-decoration: none;
+  color: rgba(var(--text-color), 0.9);
+  -webkit-animation: slide-up 0.5s ease var(--delay) forwards;
+          animation: slide-up 0.5s ease var(--delay) forwards;
+  opacity: 0;
+}
+.news-item__icon {
+  grid-area: icon;
+}
+.news-item__icon .icon {
+  height: 2rem;
+  width: 2rem;
+}
+.news-item__date {
+  background-color: rgba(var(--text-color), 0.1);
+  margin-right: auto;
+  padding: 0.1rem 0.5rem;
+  border-radius: 0.3rem;
+  font-weight: 500;
+  font-size: 0.8rem;
+}
+
+@-webkit-keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 @media screen and (max-width: 768px) {
   .hide-on-small {
     display: none !important;
@@ -317,4 +385,7 @@ section:nth-of-type(4) p {
   .hide-on-large {
     display: none !important;
   }
+}
+.hidden {
+  display: none;
 }
\ No newline at end of file
diff --git a/css/main.min.css b/css/main.min.css
index 0119ac5..4a4fdc7 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #3d5afe;--secondary-color: #ffac2e;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);--inline-padding: max(1rem, 6vw)}body[data-theme=dark]{--accent-color: #6d83ff;--secondary-color: #d60739;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}h1{font-size:max(1.8rem,4vw)}h2{font-size:max(1.5rem,3vw)}h3{font-size:max(1.2rem,2vw)}h4{font-size:max(1rem,1.3vw)}img{-o-object-fit:contain;object-fit:contain}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.9)}.flex{display:flex}.align-items-center{align-items:center}.justify-content-center{justify-content:center}.flex-column{flex-direction:column}.flex-1{flex:1}.grid{display:grid}.gap-0-3{gap:.3rem}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.gap-4{gap:4rem}article>*{padding:max(1rem,2vw) var(--inline-padding)}header{display:flex;align-items:center;justify-content:space-between;position:-webkit-sticky;position:sticky;top:0;background-color:rgba(var(--foreground-color), 0.5);z-index:2;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem)}header ul{list-style:none;display:flex;gap:.8rem}header ul a{font-weight:500;color:rgba(var(--text-color), 0.9);text-decoration:none}header ul a::after{content:"";display:block;width:0;height:2px;background:var(--accent-color);transition:width .3s}header ul a:hover::after{width:100%}header ul .icon{display:flex}#above_fold{padding-top:0;height:calc(100vh - 6rem);text-align:center;align-content:center}#above_fold h2{margin:auto;max-width:46rem}#above_fold p{max-width:none}#hero_illustration{width:min(100%,26rem);margin:auto}section{display:grid;position:relative;min-height:90vh;align-content:center}section:nth-of-type(2){overflow:hidden}section:nth-of-type(4){text-align:center}section:nth-of-type(4) p{max-width:none}.section-header{display:flex;flex-direction:column;text-align:center}.section-header::after{content:"•••";line-height:.5}#bitcoin_lineart{position:absolute;opacity:.2;height:80vh;width:auto;align-self:center;right:0}#poc_images{display:grid;gap:1vw;grid-template-columns:repeat(4, 1fr)}#poc_images .span-2{grid-column:span 2}#poc_images img{height:24vw;-o-object-fit:cover;object-fit:cover;border-radius:.5rem;transition:all .2s ease;filter:brightness(0.8)}#poc_images img:hover{filter:brightness(1)}#poc_stats{list-style:none;display:flex;gap:1rem;border:solid thin rgba(var(--text-color), 0.5);padding:max(1.5rem,2vw) max(1rem,2vw);border-radius:1rem;margin:auto}#poc_stats .stat{display:flex;flex-direction:column;gap:.5rem;flex:1}#poc_stats .stat__number{font-size:max(1.5rem,2.5vw);font-weight:700}#poc_stats .stat__title{font-size:.9rem}#team_members{display:grid;grid-template-columns:repeat(auto-fill, minmax(max(8rem, 12vw), 1fr));margin-top:3rem;gap:3rem 1.5rem}.team-member{display:flex;flex-direction:column;text-align:center}.team-member img{-o-object-fit:cover;object-fit:cover;width:100%;aspect-ratio:3/3.5;border-radius:1rem;margin-bottom:1.2rem}.team-member__name{font-weight:700;font-size:1rem;line-height:1.2}.team-member__title{line-height:normal;font-weight:500;font-size:.9rem}@media screen and (max-width: 768px){.hide-on-small{display:none !important}}@media screen and (min-width: 768px){body{--inline-padding: max(1rem, 12vw)}#bitcoin_lineart{opacity:.6;left:calc(100% - 50vw)}.hide-on-large{display:none !important}}
\ No newline at end of file
+*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #3d5afe;--secondary-color: #ffac2e;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);--inline-padding: max(1rem, 6vw)}body[data-theme=dark]{--accent-color: #6d83ff;--secondary-color: #d60739;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}h1{font-size:max(1.8rem,4vw)}h2{font-size:max(1.5rem,3vw)}h3{font-size:max(1.2rem,2vw)}h4{font-size:max(1rem,1.3vw)}img{-o-object-fit:contain;object-fit:contain}ul{list-style:none}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.9)}.flex{display:flex}.align-items-center{align-items:center}.justify-content-center{justify-content:center}.flex-column{flex-direction:column}.flex-1{flex:1}.grid{display:grid}.gap-0-3{gap:.3rem}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.gap-4{gap:4rem}article{padding-top:4rem}article>*{padding:max(1rem,2vw) var(--inline-padding)}#main_header{display:flex;align-items:center;justify-content:space-between;position:fixed;left:0;right:0;top:0;background-color:rgba(var(--foreground-color), 0.5);z-index:2;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);padding:max(1rem,2vw) var(--inline-padding)}#main_header a{color:rgba(var(--text-color), 0.9);text-decoration:none}#main_header ul{list-style:none;display:flex;gap:.8rem}#main_header ul a{font-weight:500}#main_header ul a::after{content:"";display:block;width:0;height:.15rem;background:var(--accent-color);transition:width .3s;margin:auto}#main_header ul a.active::after,#main_header ul a:hover::after{width:1rem}#main_header ul .icon{display:flex}#above_fold{padding-top:0;height:calc(100vh - 6rem);text-align:center;align-content:center}#above_fold h2{margin:auto;max-width:46rem}#above_fold p{max-width:none}#hero_illustration{width:min(100%,26rem);margin:auto}section{display:grid;position:relative;min-height:90vh;align-content:center}section:nth-of-type(2){overflow:hidden}section:nth-of-type(4){text-align:center}section:nth-of-type(4) p{max-width:none}.section-header{display:flex;flex-direction:column;text-align:center}.section-header::after{content:"•••";line-height:.5}#bitcoin_lineart{position:absolute;opacity:.2;height:80vh;width:auto;align-self:center;right:0}#poc_images{display:grid;gap:1vw;grid-template-columns:repeat(4, 1fr)}#poc_images .span-2{grid-column:span 2}#poc_images img{height:24vw;-o-object-fit:cover;object-fit:cover;border-radius:.5rem;transition:all .2s ease;filter:brightness(0.8)}#poc_images img:hover{filter:brightness(1)}#poc_stats{list-style:none;display:flex;gap:1rem;border:solid thin rgba(var(--text-color), 0.5);padding:max(1.5rem,2vw) max(1rem,2vw);border-radius:1rem;margin:auto}#poc_stats .stat{display:flex;flex-direction:column;gap:.5rem;flex:1}#poc_stats .stat__number{font-size:max(1.5rem,2.5vw);font-weight:700}#poc_stats .stat__title{font-size:.9rem}#team_members{display:grid;grid-template-columns:repeat(auto-fill, minmax(max(8rem, 12vw), 1fr));margin-top:3rem;gap:3rem 1.5rem}.team-member{display:flex;flex-direction:column;text-align:center}.team-member img{-o-object-fit:cover;object-fit:cover;width:100%;aspect-ratio:3/3.5;border-radius:1rem;margin-bottom:1.2rem}.team-member__name{font-weight:700;font-size:1rem;line-height:1.2}.team-member__title{line-height:normal;font-weight:500;font-size:.9rem}#news_list{display:grid;gap:.5rem}.news-item{display:grid;grid-template-columns:auto 1fr;grid-template-areas:" icon ." "icon ." "icon ." "icon .";gap:.5rem 1rem;border:solid thin rgba(var(--text-color), 0.5);border-radius:.5rem;padding:max(1rem,2vw);text-decoration:none;color:rgba(var(--text-color), 0.9);-webkit-animation:slide-up .5s ease var(--delay) forwards;animation:slide-up .5s ease var(--delay) forwards;opacity:0}.news-item__icon{grid-area:icon}.news-item__icon .icon{height:2rem;width:2rem}.news-item__date{background-color:rgba(var(--text-color), 0.1);margin-right:auto;padding:.1rem .5rem;border-radius:.3rem;font-weight:500;font-size:.8rem}@-webkit-keyframes slide-up{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes slide-up{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@media screen and (max-width: 768px){.hide-on-small{display:none !important}}@media screen and (min-width: 768px){body{--inline-padding: max(1rem, 12vw)}#bitcoin_lineart{opacity:.6;left:calc(100% - 50vw)}.hide-on-large{display:none !important}}.hidden{display:none}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index 3c64532..82136ad 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -63,6 +63,9 @@ h4 {
 img {
   object-fit: contain;
 }
+ul {
+  list-style: none;
+}
 .icon {
   width: 1.2rem;
   height: 1.2rem;
@@ -109,38 +112,46 @@ img {
 }
 
 article {
+  padding-top: 4rem;
   & > * {
     padding: max(1rem, 2vw) var(--inline-padding);
   }
 }
-header {
+#main_header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  position: sticky;
+  position: fixed;
+  left: 0;
+  right: 0;
   top: 0;
   background-color: rgba(var(--foreground-color), 0.5);
   z-index: 2;
   backdrop-filter: blur(1rem);
+  padding: max(1rem, 2vw) var(--inline-padding);
+  a {
+    color: rgba(var(--text-color), 0.9);
+    text-decoration: none;
+  }
   ul {
     list-style: none;
     display: flex;
     gap: 0.8rem;
     a {
       font-weight: 500;
-      color: rgba(var(--text-color), 0.9);
-      text-decoration: none;
       &::after {
         content: "";
         display: block;
         width: 0;
-        height: 2px;
+        height: 0.15rem;
         background: var(--accent-color);
         transition: width 0.3s;
+        margin: auto;
       }
+      &.active,
       &:hover {
         &::after {
-          width: 100%;
+          width: 1rem;
         }
       }
     }
@@ -267,6 +278,48 @@ section {
     font-size: 0.9rem;
   }
 }
+#news_list {
+  display: grid;
+  gap: 0.5rem;
+}
+.news-item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-areas: " icon ." "icon ." "icon ." "icon .";
+  gap: 0.5rem 1rem;
+  border: solid thin rgba(var(--text-color), 0.5);
+  border-radius: 0.5rem;
+  padding: max(1rem, 2vw);
+  text-decoration: none;
+  color: rgba(var(--text-color), 0.9);
+  animation: slide-up 0.5s ease var(--delay) forwards;
+  opacity: 0;
+  &__icon {
+    grid-area: icon;
+    .icon {
+      height: 2rem;
+      width: 2rem;
+    }
+  }
+  &__date {
+    background-color: rgba(var(--text-color), 0.1);
+    margin-right: auto;
+    padding: 0.1rem 0.5rem;
+    border-radius: 0.3rem;
+    font-weight: 500;
+    font-size: 0.8rem;
+  }
+}
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 
 @media screen and (max-width: 768px) {
   .hide-on-small {
@@ -285,3 +338,7 @@ section {
     display: none !important;
   }
 }
+
+.hidden {
+  display: none;
+}
diff --git a/index.html b/index.html
index 6aebabf..3eda8ee 100644
--- a/index.html
+++ b/index.html
@@ -13,23 +13,25 @@
     <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
 </head>
 
-<body>
-    <article>
-        <header>
+<body class="hidden">
+    <header id="main_header">
+        <a href="">
             <h4>Project B</h4>
-            <ul>
-                <li>
-                    <a href="#" target="_blank">
-                        Services
-                    </a>
-                </li>
-                <li>
-                    <a href="#" target="_blank">
-                        News
-                    </a>
-                </li>
-            </ul>
-        </header>
+        </a>
+        <ul>
+            <li>
+                <a href="#/services">
+                    Services
+                </a>
+            </li>
+            <li>
+                <a href="#/news">
+                    News
+                </a>
+            </li>
+        </ul>
+    </header>
+    <article id="home" class="page">
         <section id="above_fold" class="gap-4">
             <img id="hero_illustration" src="assets/cityscape.svg" alt="">
             <div class="grid gap-0-5">
@@ -131,8 +133,95 @@
             </ul>
         </section>
     </article>
+    <article id="news" class="page hidden">
+        <h2>News</h2>
+        <ul id="news_list"></ul>
+    </article>
     <script>
         const { html, render: renderElem } = uhtml;
+        class Router {
+            constructor(options = {}) {
+                const { routes = {}, state = {}, routingStart, routingEnd } = options
+                this.routes = routes
+                this.state = state
+                this.routingStart = routingStart
+                this.routingEnd = routingEnd
+                window.addEventListener('hashchange', e => this.routeTo(window.location.hash))
+            }
+            addRoute(route, callback) {
+                this.routes[route] = callback
+            }
+            async routeTo(path) {
+                let page
+                let wildcards = []
+                let queryString
+                let params
+                [path, queryString] = path.split('?');
+                if (path.includes('#'))
+                    path = path.split('#')[1];
+                if (path.includes('/'))
+                    [, page, ...wildcards] = path.split('/')
+                else
+                    page = path
+                this.state = { page, wildcards }
+                if (queryString) {
+                    params = new URLSearchParams(queryString)
+                    this.state.params = Object.fromEntries(params)
+                }
+                if (this.routingStart) {
+                    this.routingStart(this.state)
+                }
+                if (this.routes[page]) {
+                    await this.routes[page](this.state)
+                    this.state.lastPage = page
+                } else {
+                    this.routes['404'](this.state)
+                }
+                if (this.routingEnd) {
+                    this.routingEnd(this.state)
+                }
+            }
+        }
+        const router = new Router({
+            routingStart(state) {
+                if ("scrollRestoration" in history) {
+                    history.scrollRestoration = "manual";
+                }
+                window.scrollTo(0, 0);
+            },
+            routingEnd(state) {
+                console.log(state)
+                const pages = document.querySelectorAll('.page')
+                pages.forEach(page => {
+                    if (page.id === (state.page === '' ? 'home' : state.page)) {
+                        page.classList.remove('hidden')
+                        document.querySelector(`[href="#/${page.id}"]`)?.classList.add('active')
+                    } else {
+                        page.classList.add('hidden')
+                        document.querySelector(`[href="#/${page.id}"]`)?.classList.remove('active')
+                    }
+                })
+            }
+        })
+        router.addRoute('', () => {
+            const teamMembersList = document.getElementById('team_members')
+            teamMembers.sort((a, b) => a.name.localeCompare(b.name))
+            teamMembers.forEach(member => {
+                const { image, name, title } = member
+                const memberItem = document.createElement('li')
+                memberItem.classList.add('team-member')
+                memberItem.innerHTML = `
+                <img src="${image}" alt="${name} profile picture" loading="lazy">
+                <p class="team-member__name">${name},</p>
+                <p class="team-member__title">${title}</p>
+                `
+                teamMembersList.appendChild(memberItem)
+            })
+            document.getElementById('team_members').addEventListener('click', e => {
+
+            })
+        })
+
         const teamMembers = [
             {
                 name: 'Carlos Javier Castellanos Flores',
@@ -161,23 +250,85 @@
             },
         ]
 
-        window.onload = () => {
-            const teamMembersList = document.getElementById('team_members')
-            teamMembers.sort((a, b) => a.name.localeCompare(b.name))
-            teamMembers.forEach(member => {
-                const { image, name, title } = member
-                const memberItem = document.createElement('li')
-                memberItem.classList.add('team-member')
-                memberItem.innerHTML = `
-                    <img src="${image}" alt="${name} profile picture" loading="lazy">
-                    <p class="team-member__name">${name},</p>
-                    <p class="team-member__title">${title}</p>
-                `
-                teamMembersList.appendChild(memberItem)
-            })
-            document.getElementById('team_members').addEventListener('click', e => {
+        const news = [
+            {
+                headline: 'Pilot project launched at El Zonte, El Salvador',
+                date: '24 Jun 2023',
+                content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
+                link: '#'
+            },
+            {
+                headline: 'Pilot project launched at El Zonte, El Salvador',
+                date: '24 Jun 2023',
+                content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
+                link: '#'
+            },
+            {
+                headline: 'Pilot project launched at El Zonte, El Salvador',
+                date: '24 Jun 2023',
+                content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
+                link: '#'
+            },
+            {
+                headline: 'Pilot project launched at El Zonte, El Salvador',
+                date: '24 Jun 2023',
+                content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
+                link: '#'
+            },
+            {
+                headline: 'Pilot project launched at El Zonte, El Salvador',
+                date: '24 Jun 2023',
+                content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
+                link: '#'
+            },
+            {
+                headline: 'Pilot project launched at El Zonte, El Salvador',
+                date: '24 Jun 2023',
+                content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
+                link: '#'
+            },
+            {
+                headline: 'Pilot project launched at El Zonte, El Salvador',
+                date: '24 Jun 2023',
+                content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
+                link: '#'
+            },
+            {
+                headline: 'Pilot project launched at El Zonte, El Salvador',
+                date: '24 Jun 2023',
+                content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
+                link: '#'
+            },
+            {
+                headline: 'Pilot project launched at El Zonte, El Salvador',
+                date: '24 Jun 2023',
+                content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
+                link: '#'
+            },
+        ]
 
+        router.addRoute('news', () => {
+            const newsList = document.getElementById('news_list')
+            const renderedNews = news.map((item, index) => {
+                const { headline, date, content, link } = item
+                return html`
+                <li>
+                    <a class="news-item" href=${link} style=${`--delay: ${index * 0.1}s`}>
+                        <div class="news-item__icon">
+                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M22,3l-1.67,1.67L18.67,3L17,4.67L15.33,3l-1.66,1.67L12,3l-1.67,1.67L8.67,3L7,4.67L5.33,3L3.67,4.67L2,3v16 c0,1.1,0.9,2,2,2l16,0c1.1,0,2-0.9,2-2V3z M11,19H4v-6h7V19z M20,19h-7v-2h7V19z M20,15h-7v-2h7V15z M20,11H4V8h16V11z"/></g></svg>
+                        </div>
+                        <p class="news-item__date">${date}</p>
+                        <h4 class="news-item__headline">${headline}</h4>
+                        ${content ? html`<p class="news-item__content">${content}</p>` : ''}
+                    </a>
+                </li>
+                `
             })
+            renderElem(newsList, html`${renderedNews}`)
+        })
+        window.onload = () => {
+            document.body.classList.remove('hidden')
+            router.routeTo(window.location.hash)
         }
     </script>
 </body>