Added news section
This commit is contained in:
sairaj mote
parent
21d602216f
commit
360f0a8f5d
95
css/main.css
95
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;
|
||||
}
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
@ -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}}
|
||||
*{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}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
213
index.html
213
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user