projectb/index.html
2023-06-08 01:43:48 +05:30

147 lines
8.3 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project B</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<article>
<header>
<h4>Project B</h4>
<ul>
<li>
<a href="https://twitter.com/ProjectBSV" target="_blank">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 248 204">
<path
d="M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07 7.57 1.46 15.37 1.16 22.8-.87-23.56-4.76-40.51-25.46-40.51-49.5v-.64c7.02 3.91 14.88 6.08 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71c25.64 31.55 63.47 50.73 104.08 52.76-4.07-17.54 1.49-35.92 14.61-48.25 20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26-3.77 11.69-11.66 21.62-22.2 27.93 10.01-1.18 19.79-3.86 29-7.95-6.78 10.16-15.32 19.01-25.2 26.16z">
</path>
</svg>
</a>
</li>
<li>
<a href="https://www.facebook.com/profile.php?id=100091526117221&amp;mibextid=ZbWKwL"
target="_blank">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"
fill="none">
<path
d="M10.3389 0.0400085C4.83887 0.0400085 0.338867 4.54804 0.338867 10.1003C0.338867 15.1203 3.99887 19.287 8.77887 20.04V13.0119H6.23887V10.1003H8.77887V7.88138C8.77887 5.36129 10.2689 3.97575 12.5589 3.97575C13.6489 3.97575 14.7889 4.16652 14.7889 4.16652V6.64643H13.5289C12.2889 6.64643 11.8989 7.41953 11.8989 8.2127V10.1003H14.6789L14.2289 13.0119H11.8989V20.04C14.2553 19.6664 16.4011 18.4592 17.9488 16.6365C19.4965 14.8137 20.3442 12.4955 20.3389 10.1003C20.3389 4.54804 15.8389 0.0400085 10.3389 0.0400085Z" />
</svg>
</a>
</li>
<li>
<a href="https://instagram.com/projectbsv?igshid=ZDdkNTZiNTM=" target="_blank">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
<path
d="M295.42,6c-53.2,2.51-89.53,11-121.29,23.48-32.87,12.81-60.73,30-88.45,57.82S40.89,143,28.17,175.92c-12.31,31.83-20.65,68.19-23,121.42S2.3,367.68,2.56,503.46,3.42,656.26,6,709.6c2.54,53.19,11,89.51,23.48,121.28,12.83,32.87,30,60.72,57.83,88.45S143,964.09,176,976.83c31.8,12.29,68.17,20.67,121.39,23s70.35,2.87,206.09,2.61,152.83-.86,206.16-3.39S799.1,988,830.88,975.58c32.87-12.86,60.74-30,88.45-57.84S964.1,862,976.81,829.06c12.32-31.8,20.69-68.17,23-121.35,2.33-53.37,2.88-70.41,2.62-206.17s-.87-152.78-3.4-206.1-11-89.53-23.47-121.32c-12.85-32.87-30-60.7-57.82-88.45S862,40.87,829.07,28.19c-31.82-12.31-68.17-20.7-121.39-23S637.33,2.3,501.54,2.56,348.75,3.4,295.42,6m5.84,903.88c-48.75-2.12-75.22-10.22-92.86-17-23.36-9-40-19.88-57.58-37.29s-28.38-34.11-37.5-57.42c-6.85-17.64-15.1-44.08-17.38-92.83-2.48-52.69-3-68.51-3.29-202s.22-149.29,2.53-202c2.08-48.71,10.23-75.21,17-92.84,9-23.39,19.84-40,37.29-57.57s34.1-28.39,57.43-37.51c17.62-6.88,44.06-15.06,92.79-17.38,52.73-2.5,68.53-3,202-3.29s149.31.21,202.06,2.53c48.71,2.12,75.22,10.19,92.83,17,23.37,9,40,19.81,57.57,37.29s28.4,34.07,37.52,57.45c6.89,17.57,15.07,44,17.37,92.76,2.51,52.73,3.08,68.54,3.32,202s-.23,149.31-2.54,202c-2.13,48.75-10.21,75.23-17,92.89-9,23.35-19.85,40-37.31,57.56s-34.09,28.38-57.43,37.5c-17.6,6.87-44.07,15.07-92.76,17.39-52.73,2.48-68.53,3-202.05,3.29s-149.27-.25-202-2.53m407.6-674.61a60,60,0,1,0,59.88-60.1,60,60,0,0,0-59.88,60.1M245.77,503c.28,141.8,115.44,256.49,257.21,256.22S759.52,643.8,759.25,502,643.79,245.48,502,245.76,245.5,361.22,245.77,503m90.06-.18a166.67,166.67,0,1,1,167,166.34,166.65,166.65,0,0,1-167-166.34"
transform="translate(-2.5 -2.5)" />
</svg>
</a>
</li>
</ul>
</header>
<section id="above_fold" class="gap-4">
<img id="hero_illustration" src="assets/hero illustrator.svg" alt="">
<div class="grid gap-0-5">
<h2>Real estate tokenization through the power of Blockchain technology.</h2>
<p>A global reference of tokenization aiming financial inclusiveness</p>
</div>
</section>
<section class="gap-1-5">
<div class="grid">
<h4>International Payments</h4>
<h2>Pay with Bitcoin</h2>
</div>
<p>
Explore the world with seamless property rentals,
powered by Bitcoin payments from anywhere on the globe!
</p>
<img src="assets/bitcoin line art.svg" alt="">
</section>
<section class="gap-2">
<h4 class="section-header">Proof of Concept</h4>
<p>
A tokenized room at El Zonte beach, El Salvador
</p>
<div id="poc_images">
<img src="assets/poc/poc3.jpg" class="span-2" alt="">
<img src="assets/poc/poc1.jpg" class="span-2" alt="">
<img src="assets/poc/poc6.jpg" alt="">
<img src="assets/poc/poc2.jpg" class="span-2" alt="">
<img src="assets/poc/poc5.jpg" alt="">
</div>
<ul id="poc_stats">
<li class="stat">
<div class="stat__number">1030</div>
<div class="stat__title">Stays invested</div>
</li>
<li class="stat">
<div class="stat__number">20</div>
<div class="stat__title">Stays consumed</div>
</li>
<li class="stat">
<div class="stat__number">4</div>
<div class="stat__title">Invested stays consumed</div>
</li>
</ul>
</section>
<section>
<h4 class="section-header">Team</h4>
<ul id="team_members"></ul>
</section>
</article>
<script>
const teamMembers = [
{
name: 'Carlos Javier Castellanos Flores',
title: 'Principal director and shareholder',
image: 'assets/people/carlos.jpg'
},
{
name: 'John Giannakos',
title: 'Shareholder',
image: 'assets/Rohit Tripathy.jpg'
},
{
name: 'Iris Avalos',
title: 'Principal director',
image: 'assets/people/Iris-Avalos.jpg'
},
{
name: 'Puneet Sondh',
title: 'Principal director',
image: 'assets/people/Puneet Sondh.jpg'
},
{
name: 'Erika Pérez Cañas',
title: 'Principal director',
image: 'assets/Ruchir Gupta.jpg'
},
]
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)
})
}
</script>
</body>
</html>