Added new sections and page
This commit is contained in:
sairaj mote
parent
1e2df32b79
commit
04e7491f12
57
css/main.css
57
css/main.css
@ -136,6 +136,10 @@ ul {
|
||||
gap: 4rem;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
article {
|
||||
padding-top: 4rem;
|
||||
}
|
||||
@ -225,6 +229,7 @@ section:nth-of-type(4) p {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.section-header::after {
|
||||
content: "•••";
|
||||
@ -298,10 +303,25 @@ section:nth-of-type(4) p {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
#economics_section ul {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
||||
}
|
||||
#economics_section li {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
border-radius: 0.5rem;
|
||||
padding: max(1rem, 2vw);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#team_members {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(max(8rem, 12vw), 1fr));
|
||||
margin-top: 3rem;
|
||||
gap: 3rem 1.5rem;
|
||||
}
|
||||
|
||||
@ -334,7 +354,6 @@ section:nth-of-type(4) p {
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
margin: auto;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
#partners li {
|
||||
display: flex;
|
||||
@ -357,7 +376,6 @@ section:nth-of-type(4) p {
|
||||
#social_links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 3rem;
|
||||
gap: 0.5rem;
|
||||
justify-items: center;
|
||||
width: 100%;
|
||||
@ -387,9 +405,33 @@ section:nth-of-type(4) p {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#services ul {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
|
||||
}
|
||||
#services li {
|
||||
display: grid;
|
||||
aspect-ratio: 1/1;
|
||||
padding: max(1rem, 2vw);
|
||||
border: solid thin rgba(var(--text-color), 0.2);
|
||||
border-radius: 0.5rem;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
align-content: flex-end;
|
||||
align-items: flex-end;
|
||||
-webkit-animation: slide-up 0.5s ease var(--delay) forwards;
|
||||
animation: slide-up 0.5s ease var(--delay) forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#news_list {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
||||
}
|
||||
#news_list li {
|
||||
container: news-item/inline-size;
|
||||
}
|
||||
|
||||
.news-item {
|
||||
@ -443,6 +485,15 @@ section:nth-of-type(4) p {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@container news-item (max-width: 400px) {
|
||||
.news-item {
|
||||
grid-template-areas: none;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.news-item__icon {
|
||||
grid-area: unset;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
#poc_images img:nth-of-type(5) {
|
||||
grid-area: 3/2/4/3;
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -110,7 +110,9 @@ ul {
|
||||
.gap-4 {
|
||||
gap: 4rem;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
article {
|
||||
padding-top: 4rem;
|
||||
& > * {
|
||||
@ -197,6 +199,7 @@ section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
&::after {
|
||||
content: "•••";
|
||||
line-height: 0.5;
|
||||
@ -264,11 +267,27 @@ section {
|
||||
}
|
||||
}
|
||||
}
|
||||
#economics_section {
|
||||
ul {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
||||
}
|
||||
li {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
border-radius: 0.5rem;
|
||||
padding: max(1rem, 2vw);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
#team_members {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(max(8rem, 12vw), 1fr));
|
||||
margin-top: 3rem;
|
||||
gap: 3rem 1.5rem;
|
||||
}
|
||||
.team-member {
|
||||
@ -299,7 +318,6 @@ section {
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
margin: auto;
|
||||
margin-top: 3rem;
|
||||
li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -324,7 +342,6 @@ section {
|
||||
#social_links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 3rem;
|
||||
gap: 0.5rem;
|
||||
justify-items: center;
|
||||
width: 100%;
|
||||
@ -353,9 +370,34 @@ section {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
#services {
|
||||
ul {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
|
||||
}
|
||||
li {
|
||||
display: grid;
|
||||
aspect-ratio: 1/1;
|
||||
padding: max(1rem, 2vw);
|
||||
border: solid thin rgba(var(--text-color), 0.2);
|
||||
border-radius: 0.5rem;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
align-content: flex-end;
|
||||
align-items: flex-end;
|
||||
animation: slide-up 0.5s ease var(--delay) forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
#news_list {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
||||
li {
|
||||
container: news-item / inline-size;
|
||||
}
|
||||
}
|
||||
.news-item {
|
||||
display: grid;
|
||||
@ -395,6 +437,15 @@ section {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@container news-item (max-width: 400px) {
|
||||
.news-item {
|
||||
grid-template-areas: none;
|
||||
grid-template-columns: 1fr;
|
||||
&__icon {
|
||||
grid-area: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
#poc_images {
|
||||
img {
|
||||
|
||||
142
index.html
142
index.html
@ -9,7 +9,7 @@
|
||||
<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">
|
||||
<link rel="stylesheet" href="css/main.min.css">
|
||||
<script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
|
||||
</head>
|
||||
|
||||
@ -57,32 +57,99 @@
|
||||
<h2>El Salvador?</h2>
|
||||
</div>
|
||||
</section>
|
||||
<section class="gap-2">
|
||||
<section>
|
||||
<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 class="grid gap-2">
|
||||
<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">Nights invested</div>
|
||||
</li>
|
||||
<li class="stat">
|
||||
<div class="stat__number">20</div>
|
||||
<div class="stat__title">Nights consumed</div>
|
||||
</li>
|
||||
<li class="stat">
|
||||
<div class="stat__number">4</div>
|
||||
<div class="stat__title">Invested nights consumed</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h4 class="section-header">
|
||||
Structure
|
||||
</h4>
|
||||
</section>
|
||||
<section id="economics_section">
|
||||
<h4 class="section-header">
|
||||
Economics
|
||||
</h4>
|
||||
<div class="grid gap-1">
|
||||
<div class="text-center">Key concepts</div>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Production Valuation</strong>
|
||||
<p>
|
||||
Production valuation encompasses all operational expenses. Token sales must cover these
|
||||
costs.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Consumption Valuation</strong>
|
||||
<p>
|
||||
Consumption valuation reflects the system's value derived from providing essential goods or
|
||||
services for consumption. It represents the overall profits and earnings generated by the
|
||||
system's operation.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Reserve Pool</strong>
|
||||
<p>
|
||||
Reserve Pool is a Bitcoin Multisig address that serves as the bank account for this system.
|
||||
All
|
||||
system-related payments and expenses occur there.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Ownership token</strong>
|
||||
<p>
|
||||
Ownership tokens entitle holders to the system's profits.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Market valuation</strong>
|
||||
<p>
|
||||
Market valuation represents the anticipated future consumption valuation.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<strong>System Valuation</strong>
|
||||
<p>
|
||||
The higher value between production valuation and consumption valuation.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Investments</strong>
|
||||
<p>
|
||||
Investments help in providing for the initial production valuation and they add to the
|
||||
reserve
|
||||
pool.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul id="poc_stats">
|
||||
<li class="stat">
|
||||
<div class="stat__number">1030</div>
|
||||
<div class="stat__title">Nights invested</div>
|
||||
</li>
|
||||
<li class="stat">
|
||||
<div class="stat__number">20</div>
|
||||
<div class="stat__title">Nights consumed</div>
|
||||
</li>
|
||||
<li class="stat">
|
||||
<div class="stat__number">4</div>
|
||||
<div class="stat__title">Invested nights consumed</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h4 class="section-header">Team</h4>
|
||||
@ -290,6 +357,29 @@
|
||||
</ul>
|
||||
</section>
|
||||
</article>
|
||||
<article id="services" class="page hidden">
|
||||
<h2>Services</h2>
|
||||
<ul>
|
||||
<li style="--delay: 0s">
|
||||
Real Estate Tokenization
|
||||
</li>
|
||||
<li style="--delay: 0.1s">
|
||||
Autonomous Tokenization Projects
|
||||
</li>
|
||||
<li style="--delay: 0.2s">
|
||||
Corporate Tokenization
|
||||
</li>
|
||||
<li style="--delay: 0.3s">
|
||||
Smartcontract Applications
|
||||
</li>
|
||||
<li style="--delay: 0.4s">
|
||||
Startup Tokenization Enablement
|
||||
</li>
|
||||
<li style="--delay: 0.5s">
|
||||
Third party blockchain valuation support
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article id="news" class="page hidden">
|
||||
<h2>News</h2>
|
||||
<ul id="news_list"></ul>
|
||||
@ -483,6 +573,8 @@
|
||||
})
|
||||
renderElem(newsList, html`${renderedNews}`)
|
||||
})
|
||||
router.addRoute('services', () => {
|
||||
})
|
||||
window.onload = () => {
|
||||
document.body.classList.remove('hidden')
|
||||
router.routeTo(window.location.hash)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user