projectb/index.html
2023-06-08 01:00:50 +05:30

151 lines
8.5 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" viewBox="0 0 1365.333 1365.333">
width="1365.333" height="1365.333">
<path
d="M1365.33 682.668C1365.33 305.643 1059.691.003 682.665.003S0 305.643 0 682.668c0 340.738 249.641 623.158 575.999 674.372V880.001H402.666V682.668h173.333v-150.4c0-171.093 101.917-265.599 257.853-265.599 74.689 0 152.813 13.333 152.813 13.333v168h-86.082c-84.804 0-111.25 52.623-111.25 106.609v128.057h189.333l-30.267 197.333H789.331v477.039c326.358-51.213 575.999-333.634 575.999-674.372"
fill="#100f0d" />
<path
d="M948.398 880.001l30.267-197.333H789.331V554.611c0-53.987 26.447-106.609 111.25-106.609h86.082v-168s-78.124-13.333-152.813-13.333c-155.936 0-257.853 94.506-257.853 265.599v150.4H402.666v197.333h173.333v477.039c34.756 5.453 70.378 8.293 106.666 8.293s71.91-2.84 106.666-8.293V880.001h159.066"
fill="#fff" />
</svg>
</a>
</li>
<li>
<a href="https://instagram.com/projectbsv?igshid=ZDdkNTZiNTM=" target="_blank">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1"
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">
</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>
<section>
<h2>Tokenized Real Estate</h2>
</section>
</article>
<script>
const teamMembers = [
{
name: 'Carlos Javier Castellanos Flores',
title: 'Principal director and shareholder',
image: 'assets/craig-mckay-jmURdhtm7Ng-unsplash.jpg'
},
{
name: 'John Giannakos',
title: 'Shareholder',
image: 'assets/Rohit Tripathy.jpg'
},
{
name: 'Iris Avalos',
title: 'Principal director',
image: 'assets/Puneet Sondh.jpg'
},
{
name: 'Puneet Sondh',
title: 'Principal director',
image: 'assets/Ruchir Gupta.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>