From c3964499268c57ed8c5c01d89cda8c348db28550 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Sat, 24 Jun 2023 02:49:52 +0530 Subject: [PATCH] Added more content --- css/main.css | 154 +++++++++++++--- css/main.min.css | 2 +- css/main.scss | 150 ++++++++++++--- index.html | 462 +++++++++++++++++++++++++++-------------------- 4 files changed, 511 insertions(+), 257 deletions(-) diff --git a/css/main.css b/css/main.css index 40734b5..dc0dab1 100644 --- a/css/main.css +++ b/css/main.css @@ -43,7 +43,7 @@ p, strong { font-size: 0.9rem; max-width: 70ch; - line-height: 1.7; + line-height: 1.6; color: rgba(var(--text-color), 0.8); } @@ -97,6 +97,34 @@ ul { justify-content: center; } +.justify-content-center { + justify-content: center; +} + +.justify-self-start { + justify-self: start; +} + +.justify-self-end { + justify-self: end; +} + +.justify-self-center { + justify-self: center; +} + +.align-self-start { + align-self: start; +} + +.align-self-end { + align-self: end; +} + +.align-self-center { + align-self: center; +} + .flex-column { flex-direction: column; } @@ -219,12 +247,6 @@ section { 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; @@ -325,37 +347,102 @@ section:nth-of-type(4) p { cursor: pointer; } -#poc_images { +.carousel:has(.project) { + padding-bottom: 3rem; +} + +.project { display: grid; - gap: 1vw; - grid-template-columns: 1fr 1fr; + grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); + width: 100%; + border-radius: 0.8rem; + border: solid thin rgba(var(--text-color), 0.1); + background-color: rgba(var(--foreground-color), 1); + box-shadow: 0 0.5rem 1rem rgba(var(--text-color), 0.1); } -#poc_images .span-2 { - grid-column: span 2; +.project__images { + display: flex; + gap: 1rem; + flex-direction: column; + flex: 1; + overflow-x: hidden; + padding: 1rem; } -#poc_images .poc-wrapper { - overflow: hidden; - border-radius: 0.5rem; +.project__image { + display: flex; + flex: 1; + aspect-ratio: 4/3; + min-width: 12rem; + height: 30vmax; } -#poc_images img { - height: 24vmax; +.project__image img { + min-height: 30vmax; + width: 100%; -o-object-fit: cover; object-fit: cover; - transition: transform 0.3s; + border-radius: 0.5rem; } -#poc_images img:hover { - transform: scale(1.05); - transition: transform 0.5s; +.project__images-wrapper { + display: flex; + overflow-x: auto; + gap: 0.5rem; +} +.project .thumbnail-button { + width: 5rem; + aspect-ratio: 4/3; + border-radius: 0.5rem; + overflow: hidden; + cursor: pointer; + border: none; + flex-shrink: 0; + transition: transform 0.2s; +} +.project .thumbnail-button.active { + transform: scale(0.9); +} +.project .thumbnail { + -o-object-fit: cover; + object-fit: cover; +} +.project__content { + padding: max(1rem, 2vw); + text-align: left; + display: flex; + flex-direction: column; + gap: 1rem; + flex: 1; +} +.project__link { + font-size: 0.9rem; + font-weight: 500; + text-decoration: none; + text-transform: uppercase; + color: rgba(var(--text-color), 1); + background-color: rgba(var(--text-color), 0.1); + padding: 0.5rem 1rem; + border-radius: 1rem; + letter-spacing: 0.05em; + align-self: flex-end; +} + +.badge { + background-color: rgba(var(--text-color), 1); + color: rgba(var(--foreground-color), 1); + padding: 0.4rem 0.5rem; + align-self: flex-start; + border-radius: 0.3rem; + font-size: 0.9rem; + font-weight: 500; } #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; + margin: 1rem 0; + padding: 1rem; + background-color: rgba(var(--text-color), 0.06); + border-radius: 0.5rem; } #poc_stats .stat { display: flex; @@ -364,13 +451,16 @@ section:nth-of-type(4) p { flex: 1; } #poc_stats .stat__number { - font-size: max(1.5rem, 2.5vw); + font-size: max(1.2rem, 1.8vmax); font-weight: 700; } #poc_stats .stat__title { font-size: 0.9rem; } +#economics_section h2 { + margin-bottom: 3rem; +} #economics_section ul { -moz-columns: 3 16rem; columns: 3 16rem; @@ -385,7 +475,6 @@ section:nth-of-type(4) p { background-color: rgba(var(--text-color), 0.06); border-radius: 0.5rem; padding: max(1rem, 2vw); - text-align: center; page-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid; @@ -396,6 +485,7 @@ section:nth-of-type(4) p { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(8rem, 12vw), 1fr)); gap: 3rem 1.5rem; + margin-top: 3rem; } .team-member { @@ -449,12 +539,22 @@ section:nth-of-type(4) p { color: rgba(var(--text-color), 0.8); } +#media_coverage_section .carousel { + gap: 1rem; +} +#media_coverage_section .carousel > * { + flex-shrink: 0; + width: min(100% - 2rem, 32rem); + border-radius: 0.5rem; +} + #social_links { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-items: center; width: 100%; + margin-top: 3rem; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); } #social_links li { diff --git a/css/main.min.css b/css/main.min.css index e1c5062..3dd8fa6 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -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);background-color:rgba(var(--background-color), 1)}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:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}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}.text-center{text-align:center}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;font-size:.9rem}#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{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;margin-bottom:3rem}.section-header::after{content:"•••";line-height:.5}#bitcoin_lineart{position:absolute;opacity:.2;height:80vh;width:auto;align-self:center;right:0}#el_salvador_section{position:relative;overflow:hidden}#el_salvador_map{position:absolute;opacity:.06;top:0;width:max(100vh,90vw);height:auto;left:50%;transform:translateX(-50%)}.carousel{display:flex;overflow-x:auto;border-radius:.5rem;margin-top:1.5rem;scroll-snap-type:x mandatory;scroll-padding:0 calc(1*var(--inline-padding));margin:3rem calc(-1*var(--inline-padding));padding:1rem calc(1*var(--inline-padding));scrollbar-width:none}.carousel::-webkit-scrollbar{display:none}.milestone{position:relative;display:flex;flex-direction:column;gap:1rem;width:min(100% - 1rem,28rem);flex-shrink:0;scroll-snap-align:start;padding-right:3rem}.milestone:last-of-type{padding-right:0}.milestone:last-of-type .milestone__label::before{display:none}.milestone__label{display:flex;align-items:center;background-color:rgba(var(--text-color), 1);color:rgba(var(--foreground-color), 1);padding:.4rem .5rem;align-self:flex-start;border-radius:.3rem;font-size:.9rem}.milestone__label::before{position:absolute;content:"";display:block;width:100%;height:.1rem;background-color:rgba(var(--text-color), 0.3);z-index:-1}.milestone__title{margin-top:3rem}.carousel-control{display:flex;border:none;background:none;padding:.8rem;border:solid thin rgba(var(--text-color), 0.5);border-radius:50%;cursor:pointer}#poc_images{display:grid;gap:1vw;grid-template-columns:1fr 1fr}#poc_images .span-2{grid-column:span 2}#poc_images .poc-wrapper{overflow:hidden;border-radius:.5rem}#poc_images img{height:24vmax;-o-object-fit:cover;object-fit:cover;transition:transform .3s}#poc_images img:hover{transform:scale(1.05);transition:transform .5s}#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}#economics_section ul{-moz-columns:3 16rem;columns:3 16rem;-moz-column-gap:.5rem;column-gap:.5rem}#economics_section li{display:grid;gap:.5rem;align-items:flex-start;align-content:flex-start;background-color:rgba(var(--text-color), 0.06);border-radius:.5rem;padding:max(1rem,2vw);text-align:center;page-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid;margin-bottom:.5rem}#team_members{display:grid;grid-template-columns:repeat(auto-fill, minmax(max(8rem, 12vw), 1fr));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}#partners{display:flex;flex-wrap:wrap;gap:1rem;margin:auto;justify-content:space-evenly}#partners a,#partners li:not(li:has(a)){display:flex;flex-direction:column;gap:.8rem;text-align:center;align-items:center;padding:1rem;text-decoration:none}#partners a .icon,#partners li:not(li:has(a)) .icon{width:2rem;height:2rem}#partners span{font-weight:500;color:rgba(var(--text-color), 0.8)}#social_links{display:flex;flex-wrap:wrap;gap:.5rem;justify-items:center;width:100%;grid-template-columns:repeat(auto-fill, minmax(8rem, 1fr))}#social_links li{width:100%;justify-content:center;box-shadow:0 0 0 0 rgba(var(--text-color), 1);transition:box-shadow .1s ease;flex:1 1 8rem;border-radius:.5rem}#social_links li:hover{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1)}#social_links a{display:flex;width:100%;gap:.5rem;text-decoration:none;color:rgba(var(--text-color), 0.9);padding:1rem;justify-content:center;border-radius:inherit;background-color:rgba(var(--text-color), 0.06);font-weight:500}#services ul{-moz-columns:4 16rem;columns:4 16rem;-moz-column-gap:.5rem;column-gap:.5rem}#services li{display:grid;aspect-ratio:1/1;padding:max(1rem,2vw);border:solid thin rgba(var(--text-color), 0.2);border-radius:.5rem;text-align:center;font-weight:500;align-content:flex-end;align-items:flex-end;-webkit-animation:slide-up .5s ease var(--delay) forwards;animation:slide-up .5s ease var(--delay) forwards;opacity:0;margin-bottom:.5rem;-moz-column-break-inside:avoid;break-inside:avoid;page-break-inside:avoid}#news_list{display:grid;gap:.5rem}#news_list li{container:news-item/inline-size}.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)}}@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 .poc-wrapper:nth-of-type(5){grid-area:3/2/4/3}.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)}#poc_images{grid-template-columns:repeat(4, 1fr)}.hide-on-large{display:none !important}}@media screen and (any-hover: none){.carousel-controls{display:none}}@media screen and (any-hover: hover){#main_header ul a:hover::after{width:1rem}}.hidden{display:none} \ No newline at end of file +*{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);background-color:rgba(var(--background-color), 1)}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:70ch;line-height:1.6;color:rgba(var(--text-color), 0.8)}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}.justify-content-center{justify-content:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.justify-self-center{justify-self:center}.align-self-start{align-self:start}.align-self-end{align-self:end}.align-self-center{align-self: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}.text-center{text-align:center}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;font-size:.9rem}#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{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-header{display:flex;flex-direction:column;text-align:center;margin-bottom:3rem}.section-header::after{content:"•••";line-height:.5}#bitcoin_lineart{position:absolute;opacity:.2;height:80vh;width:auto;align-self:center;right:0}#el_salvador_section{position:relative;overflow:hidden}#el_salvador_map{position:absolute;opacity:.06;top:0;width:max(100vh,90vw);height:auto;left:50%;transform:translateX(-50%)}.carousel{display:flex;overflow-x:auto;border-radius:.5rem;margin-top:1.5rem;scroll-snap-type:x mandatory;scroll-padding:0 calc(1*var(--inline-padding));margin:3rem calc(-1*var(--inline-padding));padding:1rem calc(1*var(--inline-padding));scrollbar-width:none}.carousel::-webkit-scrollbar{display:none}.milestone{position:relative;display:flex;flex-direction:column;gap:1rem;width:min(100% - 1rem,28rem);flex-shrink:0;scroll-snap-align:start;padding-right:3rem}.milestone:last-of-type{padding-right:0}.milestone:last-of-type .milestone__label::before{display:none}.milestone__label{display:flex;align-items:center;background-color:rgba(var(--text-color), 1);color:rgba(var(--foreground-color), 1);padding:.4rem .5rem;align-self:flex-start;border-radius:.3rem;font-size:.9rem}.milestone__label::before{position:absolute;content:"";display:block;width:100%;height:.1rem;background-color:rgba(var(--text-color), 0.3);z-index:-1}.milestone__title{margin-top:3rem}.carousel-control{display:flex;border:none;background:none;padding:.8rem;border:solid thin rgba(var(--text-color), 0.5);border-radius:50%;cursor:pointer}.carousel:has(.project){padding-bottom:3rem}.project{display:grid;grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr));width:100%;border-radius:.8rem;border:solid thin rgba(var(--text-color), 0.1);background-color:rgba(var(--foreground-color), 1);box-shadow:0 .5rem 1rem rgba(var(--text-color), 0.1)}.project__images{display:flex;gap:1rem;flex-direction:column;flex:1;overflow-x:hidden;padding:1rem}.project__image{display:flex;flex:1;aspect-ratio:4/3;min-width:12rem;height:30vmax}.project__image img{min-height:30vmax;width:100%;-o-object-fit:cover;object-fit:cover;border-radius:.5rem}.project__images-wrapper{display:flex;overflow-x:auto;gap:.5rem}.project .thumbnail-button{width:5rem;aspect-ratio:4/3;border-radius:.5rem;overflow:hidden;cursor:pointer;border:none;flex-shrink:0;transition:transform .2s}.project .thumbnail-button.active{transform:scale(0.9)}.project .thumbnail{-o-object-fit:cover;object-fit:cover}.project__content{padding:max(1rem,2vw);text-align:left;display:flex;flex-direction:column;gap:1rem;flex:1}.project__link{font-size:.9rem;font-weight:500;text-decoration:none;text-transform:uppercase;color:rgba(var(--text-color), 1);background-color:rgba(var(--text-color), 0.1);padding:.5rem 1rem;border-radius:1rem;letter-spacing:.05em;align-self:flex-end}.badge{background-color:rgba(var(--text-color), 1);color:rgba(var(--foreground-color), 1);padding:.4rem .5rem;align-self:flex-start;border-radius:.3rem;font-size:.9rem;font-weight:500}#poc_stats{list-style:none;display:flex;gap:1rem;margin:1rem 0;padding:1rem;background-color:rgba(var(--text-color), 0.06);border-radius:.5rem}#poc_stats .stat{display:flex;flex-direction:column;gap:.5rem;flex:1}#poc_stats .stat__number{font-size:max(1.2rem,1.8vmax);font-weight:700}#poc_stats .stat__title{font-size:.9rem}#economics_section h2{margin-bottom:3rem}#economics_section ul{-moz-columns:3 16rem;columns:3 16rem;-moz-column-gap:.5rem;column-gap:.5rem}#economics_section li{display:grid;gap:.5rem;align-items:flex-start;align-content:flex-start;background-color:rgba(var(--text-color), 0.06);border-radius:.5rem;padding:max(1rem,2vw);page-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid;margin-bottom:.5rem}#team_members{display:grid;grid-template-columns:repeat(auto-fill, minmax(max(8rem, 12vw), 1fr));gap:3rem 1.5rem;margin-top:3rem}.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}#partners{display:flex;flex-wrap:wrap;gap:1rem;margin:auto;justify-content:space-evenly}#partners a,#partners li:not(li:has(a)){display:flex;flex-direction:column;gap:.8rem;text-align:center;align-items:center;padding:1rem;text-decoration:none}#partners a .icon,#partners li:not(li:has(a)) .icon{width:2rem;height:2rem}#partners span{font-weight:500;color:rgba(var(--text-color), 0.8)}#media_coverage_section .carousel{gap:1rem}#media_coverage_section .carousel>*{flex-shrink:0;width:min(100% - 2rem,32rem);border-radius:.5rem}#social_links{display:flex;flex-wrap:wrap;gap:.5rem;justify-items:center;width:100%;margin-top:3rem;grid-template-columns:repeat(auto-fill, minmax(8rem, 1fr))}#social_links li{width:100%;justify-content:center;box-shadow:0 0 0 0 rgba(var(--text-color), 1);transition:box-shadow .1s ease;flex:1 1 8rem;border-radius:.5rem}#social_links li:hover{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1)}#social_links a{display:flex;width:100%;gap:.5rem;text-decoration:none;color:rgba(var(--text-color), 0.9);padding:1rem;justify-content:center;border-radius:inherit;background-color:rgba(var(--text-color), 0.06);font-weight:500}#services ul{-moz-columns:4 16rem;columns:4 16rem;-moz-column-gap:.5rem;column-gap:.5rem}#services li{display:grid;aspect-ratio:1/1;padding:max(1rem,2vw);border:solid thin rgba(var(--text-color), 0.2);border-radius:.5rem;text-align:center;font-weight:500;align-content:flex-end;align-items:flex-end;-webkit-animation:slide-up .5s ease var(--delay) forwards;animation:slide-up .5s ease var(--delay) forwards;opacity:0;margin-bottom:.5rem;-moz-column-break-inside:avoid;break-inside:avoid;page-break-inside:avoid}#news_list{display:grid;gap:.5rem}#news_list li{container:news-item/inline-size}.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)}}@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 .poc-wrapper:nth-of-type(5){grid-area:3/2/4/3}.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)}#poc_images{grid-template-columns:repeat(4, 1fr)}.hide-on-large{display:none !important}}@media screen and (any-hover: none){.carousel-controls{display:none}}@media screen and (any-hover: hover){#main_header ul a:hover::after{width:1rem}}.hidden{display:none} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index edee18a..e3c26c4 100644 --- a/css/main.scss +++ b/css/main.scss @@ -41,7 +41,7 @@ p, strong { font-size: 0.9rem; max-width: 70ch; - line-height: 1.7; + line-height: 1.6; color: rgba(var(--text-color), 0.8); } img { @@ -81,6 +81,27 @@ ul { .justify-content-center { justify-content: center; } +.justify-content-center { + justify-content: center; +} +.justify-self-start { + justify-self: start; +} +.justify-self-end { + justify-self: end; +} +.justify-self-center { + justify-self: center; +} +.align-self-start { + align-self: start; +} +.align-self-end { + align-self: end; +} +.align-self-center { + align-self: center; +} .flex-column { flex-direction: column; } @@ -188,12 +209,6 @@ section { &:nth-of-type(2) { overflow: hidden; } - &:nth-of-type(4) { - text-align: center; - p { - max-width: none; - } - } } .section-header { display: flex; @@ -290,42 +305,104 @@ section { border-radius: 50%; cursor: pointer; } -#poc_images { +.carousel:has(.project) { + padding-bottom: 3rem; +} +.project { display: grid; - gap: 1vw; - grid-template-columns: 1fr 1fr; - .span-2 { - grid-column: span 2; + grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); + width: 100%; + border-radius: 0.8rem; + border: solid thin rgba(var(--text-color), 0.1); + background-color: rgba(var(--foreground-color), 1); + box-shadow: 0 0.5rem 1rem rgba(var(--text-color), 0.1); + &__images { + display: flex; + gap: 1rem; + flex-direction: column; + flex: 1; + overflow-x: hidden; + padding: 1rem; } - .poc-wrapper { - overflow: hidden; - border-radius: 0.5rem; - } - img { - height: 24vmax; - object-fit: cover; - transition: transform 0.3s; - &:hover { - transform: scale(1.05); - transition: transform 0.5s; + &__image { + display: flex; + flex: 1; + aspect-ratio: 4/3; + min-width: 12rem; + height: 30vmax; + img { + min-height: 30vmax; + width: 100%; + object-fit: cover; + border-radius: 0.5rem; } } + &__images-wrapper { + display: flex; + overflow-x: auto; + gap: 0.5rem; + } + .thumbnail-button { + width: 5rem; + aspect-ratio: 4/3; + border-radius: 0.5rem; + overflow: hidden; + cursor: pointer; + border: none; + flex-shrink: 0; + transition: transform 0.2s; + &.active { + transform: scale(0.9); + } + } + .thumbnail { + object-fit: cover; + } + &__content { + padding: max(1rem, 2vw); + text-align: left; + display: flex; + flex-direction: column; + gap: 1rem; + flex: 1; + } + &__link { + font-size: 0.9rem; + font-weight: 500; + text-decoration: none; + text-transform: uppercase; + color: rgba(var(--text-color), 1); + background-color: rgba(var(--text-color), 0.1); + padding: 0.5rem 1rem; + border-radius: 1rem; + letter-spacing: 0.05em; + align-self: flex-end; + } +} +.badge { + background-color: rgba(var(--text-color), 1); + color: rgba(var(--foreground-color), 1); + padding: 0.4rem 0.5rem; + align-self: flex-start; + border-radius: 0.3rem; + font-size: 0.9rem; + font-weight: 500; } #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; + margin: 1rem 0; + padding: 1rem; + background-color: rgba(var(--text-color), 0.06); + border-radius: 0.5rem; .stat { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; &__number { - font-size: max(1.5rem, 2.5vw); + font-size: max(1.2rem, 1.8vmax); font-weight: 700; } &__title { @@ -334,6 +411,9 @@ section { } } #economics_section { + h2 { + margin-bottom: 3rem; + } ul { columns: 3 16rem; column-gap: 0.5rem; @@ -346,7 +426,6 @@ section { background-color: rgba(var(--text-color), 0.06); border-radius: 0.5rem; padding: max(1rem, 2vw); - text-align: center; page-break-inside: avoid; break-inside: avoid; margin-bottom: 0.5rem; @@ -357,6 +436,7 @@ section { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(8rem, 12vw), 1fr)); gap: 3rem 1.5rem; + margin-top: 3rem; } .team-member { display: flex; @@ -407,6 +487,17 @@ section { } } +#media_coverage_section { + .carousel { + gap: 1rem; + & > * { + flex-shrink: 0; + width: min(calc(100% - 2rem), 32rem); + border-radius: 0.5rem; + } + } +} + #socials_section { } #social_links { @@ -415,6 +506,7 @@ section { gap: 0.5rem; justify-items: center; width: 100%; + margin-top: 3rem; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); li { width: 100%; diff --git a/index.html b/index.html index f46777a..6079ffa 100644 --- a/index.html +++ b/index.html @@ -73,202 +73,6 @@

A global reference of tokenization aiming financial inclusiveness

-
-
-

International Payments

-

Pay with Bitcoin

-
-

- Explore the world with seamless property rentals, - powered by Bitcoin payments from anywhere on the globe! -

- -
-
- -
-
-

Why

-

El Salvador?

-
-
-

- El Salvador is the first country to fully legalize Bitcoin with constitutional protections and - no - taxes on capital gains. They have established a comprehensive regulatory system for digital - assets - and aim to become a physical base for incubating and scaling new digital ideas using blockchain - technology. -

-

- By being an early adopter, El Salvador is gaining a first mover advantage in the crypto space - for - itself and its entrepreneurs. -

-

- They are also creating a global community of crypto enthusiasts - and - becoming a focal point for crypto infrastructure worldwide. -

-
-
-
-
-

Proof of Concept

-
-

- A tokenized room at El Zonte beach, El Salvador -

-
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
    -
  • -
    1030
    -
    Nights invested
    -
    • -
  • -
    20
    -
    Nights consumed
    -
    • -
  • -
    4
    -
    Invested nights consumed
    -
    • -
- -
-
-
-

- Methodology -

- -
- - -
-
-
-

- Structure -

-
-

- Client side team (Management, Technology, and Finance) -

-

- Formal approval from board Or higher management -

-

- Project B team (Technology, Financial Structure Design) -

-

- Regulatory Team (KYC, Financial Controls, AML) -

-

- Allocation of dedicated budget (by client) -

-
-
-
-

- Economics -

-
-
Key concepts
-
    -
  • - Production Valuation -

    - Production valuation encompasses all operational expenses. Token sales must cover these - costs. -

    -
    • -
  • - Consumption Valuation -

    - 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. -

    -
    • -
  • - Reserve Pool -

    - Reserve Pool is a Bitcoin Multisig address that serves as the bank account for this system. - All - system-related payments and expenses occur there. -

    -
    • -
  • - Ownership token -

    - Ownership tokens entitle holders to the system's profits. -

    -
    • -
  • - Market valuation -

    - Market valuation represents the anticipated future consumption valuation. -

    -
    • -
  • - System Valuation -

    - The higher value between production valuation and consumption valuation. -

    -
    • -
  • - Investments -

    - Investments help in providing for the initial production valuation and they add to the - reserve - pool. -

    -
    • -
-
-
-
-

Team

- - - -

Sairaj Mote

-

- 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? -

- -

Blockchain Network Partners

+
+
+

International Payments

+

Pay with Bitcoin

+
+

+ Explore the world with seamless property rentals, + powered by Bitcoin payments from anywhere on the globe! +

+ +
+
+ +
+
+

Why

+

El Salvador?

+
+
+

+ El Salvador is the first country to fully legalize Bitcoin with constitutional protections and + no + taxes on capital gains. They have established a comprehensive regulatory system for digital + assets + and aim to become a physical base for incubating and scaling new digital ideas using blockchain + technology. +

+

+ By being an early adopter, El Salvador is gaining a first mover advantage in the crypto space + for + itself and its entrepreneurs. +

+

+ They are also creating a global community of crypto enthusiasts + and + becoming a focal point for crypto infrastructure worldwide. +

+
+
+
+
+

Projects

+
+
+
+
+ +
+
+ + + + +
+
+
+
+
+ Proof of Concept +
+

Tokenroom

+
+

+ A tokenized room at El Zonte beach, El Salvador +

+
    +
  • +
    1030
    +
    Nights invested
    +
    • +
  • +
    20
    +
    Nights consumed
    +
    • +
  • +
    4
    +
    Invested nights consumed
    +
    • +
+ Learn more +
+
+
+
+
+

+ Methodology +

+ +
+ + +
+
+
+

+ Structure +

+
+

+ Client side team (Management, Technology, and Finance) +

+

+ Formal approval from board Or higher management +

+

+ Project B team (Technology, Financial Structure Design) +

+

+ Regulatory Team (KYC, Financial Controls, AML) +

+

+ Allocation of dedicated budget (by client) +

+
+
+
+

+ Economics +

+
+
Key concepts
+
    +
  • + Production Valuation +

    + Production valuation encompasses all operational expenses. Token sales must cover these + costs. +

    +
    • +
  • + Consumption Valuation +

    + 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. +

    +
    • +
  • + Reserve Pool +

    + Reserve Pool is a Bitcoin Multisig address that serves as the bank account for this system. + All + system-related payments and expenses occur there. +

    +
    • +
  • + Ownership token +

    + Ownership tokens entitle holders to the system's profits. +

    +
    • +
  • + Market valuation +

    + Market valuation represents the anticipated future consumption valuation. +

    +
    • +
  • + System Valuation +

    + The higher value between production valuation and consumption valuation. +

    +
    • +
  • + Investments +

    + Investments help in providing for the initial production valuation and they add to the + reserve + pool. +

    +
    • +
+
+
+
+

Team

+ + + +

Sairaj Mote

+

+ 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? +

+ +
+
+

Media coverage

+
+ + +
+
-

Socials

+

Socials

@@ -746,6 +786,28 @@ }) } + function showImage(e) { + if (e.target.closest('img')) { + const image = e.target.closest('img') + const imageSrc = image.getAttribute('src') + const imageButton = image.parentElement + const target = image.closest('.project').querySelector('.project__image img') + target.setAttribute('src', imageSrc) + imageButton.classList.add('active') + imageButton.scrollIntoView({ + behavior: 'smooth', + inline: 'center', + block: 'nearest' + }) + const siblings = Array.from(imageButton.parentElement.children) + siblings.forEach(sibling => { + if (sibling !== imageButton) { + sibling.classList.remove('active') + } + }) + } + } +