Adding new sections
This commit is contained in:
sairaj mote
parent
23f7a611a5
commit
21d602216f
20
css/main.css
20
css/main.css
@ -153,6 +153,22 @@ header ul {
|
||||
display: flex;
|
||||
gap: 0.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 0.3s;
|
||||
}
|
||||
header ul a:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
header ul .icon {
|
||||
display: flex;
|
||||
}
|
||||
@ -185,10 +201,10 @@ section {
|
||||
section:nth-of-type(2) {
|
||||
overflow: hidden;
|
||||
}
|
||||
section:nth-of-type(3) {
|
||||
section:nth-of-type(4) {
|
||||
text-align: center;
|
||||
}
|
||||
section:nth-of-type(3) p {
|
||||
section:nth-of-type(4) p {
|
||||
max-width: 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 .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(3){text-align:center}section:nth-of-type(3) 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}.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}}
|
||||
@ -126,6 +126,24 @@ header {
|
||||
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;
|
||||
background: var(--accent-color);
|
||||
transition: width 0.3s;
|
||||
}
|
||||
&:hover {
|
||||
&::after {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
display: flex;
|
||||
}
|
||||
@ -156,7 +174,7 @@ section {
|
||||
&:nth-of-type(2) {
|
||||
overflow: hidden;
|
||||
}
|
||||
&:nth-of-type(3) {
|
||||
&:nth-of-type(4) {
|
||||
text-align: center;
|
||||
p {
|
||||
max-width: none;
|
||||
|
||||
136
index.html
136
index.html
@ -10,6 +10,7 @@
|
||||
<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">
|
||||
<script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -17,6 +18,88 @@
|
||||
<header>
|
||||
<h4>Project B</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" target="_blank">
|
||||
Services
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">
|
||||
News
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
<section id="above_fold" class="gap-4">
|
||||
<img id="hero_illustration" src="assets/cityscape.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 id="payment_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 id="bitcoin_lineart" src="assets/bitcoin line art.svg" alt="">
|
||||
</section>
|
||||
<section>
|
||||
<div class="grid">
|
||||
<h4>Why</h4>
|
||||
<h2>El Salvador?</h2>
|
||||
</div>
|
||||
</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">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>
|
||||
<ul id="team_members"></ul>
|
||||
<dialog id="member_details">
|
||||
<img src="" alt="" id="member_image">
|
||||
<h2 id="member_name">Sairaj Mote</h2>
|
||||
<p id="member_title">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam voluptatum aliquam unde dignissimos
|
||||
hic non quae dolores quibusdam illo excepturi dolore repellat asperiores, nihil vel libero
|
||||
architecto veniam et dicta?
|
||||
</p>
|
||||
</dialog>
|
||||
</section>
|
||||
<section>
|
||||
<h4 class="section-header">Partners</h4>
|
||||
</section>
|
||||
<section>
|
||||
<h4 class="section-header">Get in Touch</h4>
|
||||
<ul id="social_links">
|
||||
<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">
|
||||
@ -46,58 +129,10 @@
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
<section id="above_fold" class="gap-4">
|
||||
<img id="hero_illustration" src="assets/cityscape.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 id="payment_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 id="bitcoin_lineart" 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 { html, render: renderElem } = uhtml;
|
||||
const teamMembers = [
|
||||
{
|
||||
name: 'Carlos Javier Castellanos Flores',
|
||||
@ -140,6 +175,9 @@
|
||||
`
|
||||
teamMembersList.appendChild(memberItem)
|
||||
})
|
||||
document.getElementById('team_members').addEventListener('click', e => {
|
||||
|
||||
})
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user