diff --git a/assets/bitcoin line art.svg b/assets/bitcoin line art.svg new file mode 100644 index 0000000..71d4870 --- /dev/null +++ b/assets/bitcoin line art.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/hero illustrator.svg b/assets/hero illustrator.svg new file mode 100644 index 0000000..1e70187 --- /dev/null +++ b/assets/hero illustrator.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/oswaldo-martinez-bK-SRSgPWz8-unsplash.jpg b/assets/oswaldo-martinez-bK-SRSgPWz8-unsplash.jpg deleted file mode 100644 index a6769a8..0000000 Binary files a/assets/oswaldo-martinez-bK-SRSgPWz8-unsplash.jpg and /dev/null differ diff --git a/assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg b/assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg deleted file mode 100644 index 397124d..0000000 Binary files a/assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg and /dev/null differ diff --git a/css/main.css b/css/main.css index 93877ba..5b0ba16 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; * { padding: 0; margin: 0; @@ -12,6 +13,7 @@ html, body { height: 100%; + overflow: hidden; } body { @@ -23,6 +25,7 @@ body { --danger-color: rgb(255, 75, 75); --green: #1cad59; --yellow: rgb(220, 165, 0); + --inline-padding: max(1rem, 6vw); } body[data-theme=dark] { @@ -51,6 +54,27 @@ img { 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; @@ -101,109 +125,148 @@ img { gap: 2rem; } -#above_fold { - position: relative; +.gap-3 { + gap: 3rem; +} + +.gap-4 { + gap: 4rem; +} + +article { height: 100vh; - width: 100%; - background-color: #f1f3f8; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; + overflow-y: auto; + scroll-snap-type: y proximity; } -#above_fold__title, #above_fold__description { - color: white; -} -#above_fold__title { - font-size: max(3rem, 8vw); - mix-blend-mode: overlay; -} -section { - --inline-padding: max(1.5rem, 6vw); - position: relative; - overflow: hidden; - padding: max(1.5rem, 4vw) var(--inline-padding); -} -section h4 { - text-align: center; -} -section > *:not(.bg) { - z-index: 2; - position: relative; -} -section .bg { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - z-index: 1; -} - -.carousel-wrapper { - position: relative; - margin: 1rem 0; -} - -.carousel { - display: flex; - scroll-snap-type: proximity x; - overflow-x: scroll; - gap: 1rem; - margin: 0 calc(-1 * var(--inline-padding)); - scrollbar-width: none; - -ms-overflow-style: none; -} -.carousel::-webkit-scrollbar { - display: none; -} -.carousel__item { - text-align: center; +article > * { scroll-snap-align: start; - flex-shrink: 0; - width: min(50vw, 11rem); - height: 100%; - overflow: hidden; + padding: max(1rem, 2vw) var(--inline-padding); } -.carousel__item:first-of-type { - margin-left: var(--inline-padding); + +header { + 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); } -.carousel__item:last-of-type { - margin-right: var(--inline-padding); + +#above_fold { + padding-top: 0; + height: calc(100vh - 6rem); + text-align: center; + align-content: center; } -.carousel__item img { - width: 100%; - aspect-ratio: 3/4; +#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: 100vh; + align-content: center; +} +section:nth-of-type(2) img { + position: absolute; + opacity: 0.5; + height: 80vh; + width: auto; + align-self: center; + right: 0; +} +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: 0.5; +} + +#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: 0.5rem; + flex: 1; +} +#poc_stats .stat__number { + font-size: 2rem; + font-weight: 700; +} +#poc_stats .stat__title { + font-size: 0.9rem; +} + +#team_members { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); + margin-top: 5rem; + gap: 3rem 1.5rem; +} + +.team-member { + display: flex; + flex-direction: column; + text-align: center; +} +.team-member img { -o-object-fit: cover; object-fit: cover; - border-radius: 0.5rem; + width: 100%; + aspect-ratio: 3/3.5; + border-radius: 1rem; + margin-bottom: 1.2rem; } -.carousel__button-wrapper { - position: absolute; - right: 0; - z-index: 2; - justify-self: flex-end; - bottom: 1.5rem; +.team-member__name { + font-weight: 700; + font-size: 1rem; + line-height: 1.2; } -.carousel__button { - display: flex; - padding: 0.8rem; - border-radius: 50%; - background-color: rgba(var(--foreground-color), 1); - border: solid thin rgba(var(--text-color), 0.1); - cursor: pointer; - box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); - transition: transform 0.2s ease; -} -.carousel__button:active { - transform: scale(0.9); +.team-member__title { + line-height: normal; + font-weight: 500; + font-size: 0.9rem; } @media screen and (max-width: 768px) { - .carousel__item img { - aspect-ratio: 3/4; - } .hide-on-small { display: none !important; } +} +@media screen and (min-width: 768px) { + body { + --inline-padding: max(1rem, 12vw); + } + .hide-on-large { + display: none !important; + } } \ No newline at end of file diff --git a/css/main.min.css b/css/main.min.css index f3527c3..2f13b68 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)}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}.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}#above_fold{position:relative;height:100vh;width:100%;background-color:#f1f3f8;display:flex;justify-content:center;align-items:center;flex-direction:column}#above_fold__title,#above_fold__description{color:#fff}#above_fold__title{font-size:max(3rem,8vw);mix-blend-mode:overlay}section{--inline-padding: max(1.5rem, 6vw);position:relative;overflow:hidden;padding:max(1.5rem,4vw) var(--inline-padding)}section h4{text-align:center}section>*:not(.bg){z-index:2;position:relative}section .bg{position:absolute;top:0;left:0;bottom:0;right:0;z-index:1}.carousel-wrapper{position:relative;margin:1rem 0}.carousel{display:flex;scroll-snap-type:proximity x;overflow-x:scroll;gap:1rem;margin:0 calc(-1*var(--inline-padding));scrollbar-width:none;-ms-overflow-style:none}.carousel::-webkit-scrollbar{display:none}.carousel__item{text-align:center;scroll-snap-align:start;flex-shrink:0;width:min(50vw,11rem);height:100%;overflow:hidden}.carousel__item:first-of-type{margin-left:var(--inline-padding)}.carousel__item:last-of-type{margin-right:var(--inline-padding)}.carousel__item img{width:100%;aspect-ratio:3/4;-o-object-fit:cover;object-fit:cover;border-radius:.5rem}.carousel__button-wrapper{position:absolute;right:0;z-index:2;justify-self:flex-end;bottom:1.5rem}.carousel__button{display:flex;padding:.8rem;border-radius:50%;background-color:rgba(var(--foreground-color), 1);border:solid thin rgba(var(--text-color), 0.1);cursor:pointer;box-shadow:0 .5rem 1rem rgba(0,0,0,.1);transition:transform .2s ease}.carousel__button:active{transform:scale(0.9)}@media screen and (max-width: 768px){.carousel__item img{aspect-ratio:3/4}.hide-on-small{display:none !important}} \ 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%;overflow:hidden}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{height:100vh;overflow-y:auto;scroll-snap-type:y proximity}article>*{scroll-snap-align:start;padding:max(1rem,2vw) var(--inline-padding)}header{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)}#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:100vh;align-content:center}section:nth-of-type(2) img{position:absolute;opacity:.5;height:80vh;width:auto;align-self:center;right:0}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}#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:2rem;font-weight:700}#poc_stats .stat__title{font-size:.9rem}#team_members{display:grid;grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr));margin-top:5rem;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)}.hide-on-large{display:none !important}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 30378a7..ee0f92e 100644 --- a/css/main.scss +++ b/css/main.scss @@ -12,6 +12,7 @@ html, body { height: 100%; + overflow: hidden; } body { --accent-color: #3d5afe; @@ -22,6 +23,7 @@ body { --danger-color: rgb(255, 75, 75); --green: #1cad59; --yellow: rgb(220, 165, 0); + --inline-padding: max(1rem, 6vw); } body[data-theme="dark"] { @@ -47,6 +49,21 @@ img { height: 100%; 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 { + object-fit: contain; +} .icon { width: 1.2rem; height: 1.2rem; @@ -85,115 +102,140 @@ img { .gap-2 { gap: 2rem; } +.gap-3 { + gap: 3rem; +} +.gap-4 { + gap: 4rem; +} -#above_fold { - position: relative; +article { height: 100vh; - width: 100%; - background-color: #f1f3f8; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - &__title, - &__description { - color: white; + overflow-y: auto; + scroll-snap-type: y proximity; + & > * { + scroll-snap-align: start; + padding: max(1rem, 2vw) var(--inline-padding); } - &__title { - font-size: max(3rem, 8vw); - mix-blend-mode: overlay; +} +header { + position: sticky; + top: 0; + background-color: rgba(var(--foreground-color), 0.5); + z-index: 2; + backdrop-filter: blur(1rem); +} +#above_fold { + padding-top: 0; + height: calc(100vh - 6rem); + text-align: center; + align-content: center; + h2 { + margin: auto; + max-width: 46rem; } - &__description { + p { + max-width: none; } } +#hero_illustration { + width: min(100%, 26rem); + margin: auto; +} section { - --inline-padding: max(1.5rem, 6vw); + display: grid; position: relative; - overflow: hidden; - padding: max(1.5rem, 4vw) var(--inline-padding); - h4 { - text-align: center; - } - & > *:not(.bg) { - z-index: 2; - position: relative; - } - .bg { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - z-index: 1; - } -} -.carousel-wrapper { - position: relative; - margin: 1rem 0; -} -.carousel { - display: flex; - scroll-snap-type: proximity x; - overflow-x: scroll; - gap: 1rem; - margin: 0 calc(-1 * var(--inline-padding)); - // hide scrollbar - scrollbar-width: none; - -ms-overflow-style: none; - &::-webkit-scrollbar { - display: none; - } - &__item { - text-align: center; - scroll-snap-align: start; - flex-shrink: 0; - width: min(50vw, 11rem); - height: 100%; - overflow: hidden; - &:first-of-type { - margin-left: var(--inline-padding); - } - &:last-of-type { - margin-right: var(--inline-padding); - } + min-height: 100vh; + align-content: center; + &:nth-of-type(2) { img { - width: 100%; - aspect-ratio: 3/4; - object-fit: cover; - border-radius: 0.5rem; + position: absolute; + opacity: 0.5; + height: 80vh; + width: auto; + align-self: center; + right: 0; } } - &__button-wrapper { - position: absolute; - right: 0; - z-index: 2; - justify-self: flex-end; - bottom: 1.5rem; + &:nth-of-type(3) { + text-align: center; + p { + max-width: none; + } } - &__button { +} +.section-header { + display: flex; + flex-direction: column; + text-align: center; + &::after { + content: "•••"; + line-height: 0.5; + } +} + +#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; + .stat { display: flex; - padding: 0.8rem; - border-radius: 50%; - background-color: rgba(var(--foreground-color), 1); - border: solid thin rgba(var(--text-color), 0.1); - cursor: pointer; - box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); - transition: transform 0.2s ease; - &:active { - transform: scale(0.9); + flex-direction: column; + gap: 0.5rem; + flex: 1; + &__number { + font-size: 2rem; + font-weight: 700; } + &__title { + font-size: 0.9rem; + } + } +} + +#team_members { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); + margin-top: 5rem; + gap: 3rem 1.5rem; +} +.team-member { + display: flex; + flex-direction: column; + text-align: center; + img { + object-fit: cover; + width: 100%; + aspect-ratio: 3/3.5; + border-radius: 1rem; + margin-bottom: 1.2rem; + } + &__name { + font-weight: 700; + font-size: 1rem; + line-height: 1.2; + } + &__title { + line-height: normal; + font-weight: 500; + font-size: 0.9rem; } } @media screen and (max-width: 768px) { - .carousel { - &__item { - img { - aspect-ratio: 3/4; - } - } - } .hide-on-small { display: none !important; } } +@media screen and (min-width: 768px) { + body { + --inline-padding: max(1rem, 12vw); + } + .hide-on-large { + display: none !important; + } +} diff --git a/index.html b/index.html index 096f9b7..425e373 100644 --- a/index.html +++ b/index.html @@ -9,139 +9,101 @@ - -
-
-

El Salvador Real Estate Tokenization

-

Project B

- -
-
-

Partners

-
-
-

Team

-
-
    -
  • - -

    Jane Doe

    -
    • -
  • - -

    Jane Doe

    -
    • -
  • - -

    Jane Doe

    -
    • -
  • - -

    Jane Doe

    -
    • -
  • - -

    Jane Doe

    -
    • -
  • - -

    Jane Doe

    -
    • -
  • - -

    Jane Doe

    -
    • -
  • - -

    Jane Doe

    -
    • -
  • - -

    Jane Doe

    -
    • -
  • - -

    Jane Doe

    -
    • -
  • - -

    Jane Doe

    -
    • -
  • - -

    Jane Doe

    -
    • -
  • - -

    Jane Doe

    -
    • -
-
- - -
+
+

Project B

+
+
+ +
+

Real estate tokenization through the power of Blockchain technology.

+

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

+ +
+
+

Proof of Concept

+

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

+
+
+
    +
  • +
    1030
    +
    Stays invested
    +
    • +
  • +
    20
    +
    Stays consumed
    +
    • +
  • +
    4
    +
    Invested stays consumed
    +
    • +
+
+
+

Team

+
    +
    +
    +

    Tokenized Real Estate

    +