New design
This commit is contained in:
sairaj mote
parent
15f279bf35
commit
44478fb2f5
5
assets/bitcoin line art.svg
Normal file
5
assets/bitcoin line art.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg width="668" height="668" viewBox="0 0 668 668" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M419.723 404.231L418.547 404.323L418.83 405.468C426.655 437.109 418.148 472.149 393.487 496.81C355.896 534.401 295.002 534.401 257.412 496.81L256.704 496.103L255.997 496.81L222.332 530.476L189.374 497.518L223.039 463.852L223.746 463.145L223.039 462.438L188.667 428.066L187.96 427.359L187.253 428.066L153.588 461.731L120.629 428.773L154.295 395.108L155.002 394.401L154.295 393.693L103.443 342.842L136.401 309.884L170.067 343.549L170.774 344.256L171.481 343.549L343.342 171.688L344.049 170.981L343.342 170.273L309.677 136.608L342.635 103.65L393.487 154.502L394.194 155.209L394.901 154.502L428.566 120.836L461.524 153.794L427.859 187.46L427.152 188.167L427.859 188.874L462.231 223.246L462.938 223.953L463.645 223.246L497.311 189.581L530.269 222.539L494.369 258.438L493.82 258.988L494.217 259.657C516.157 296.564 511.055 344.87 479.417 376.507C462.404 393.521 441.49 402.53 419.723 404.231ZM377.715 204.646L377.008 203.939L376.3 204.646L307.556 273.39L306.849 274.098L307.556 274.805L376.3 343.549C395.596 362.845 427.164 362.845 446.459 343.549C465.755 324.254 465.755 292.686 446.459 273.39L377.715 204.646ZM204.439 376.507L203.732 377.214L204.439 377.922L290.37 463.852C309.665 483.148 341.233 483.148 360.529 463.852C379.824 444.557 379.824 412.989 360.529 393.693L274.598 307.763L273.891 307.056L273.184 307.763L204.439 376.507Z" stroke="#515151" stroke-width="2"/>
|
||||
<path d="M430.421 413.085L429.245 413.177L429.529 414.322C438.34 449.951 428.761 489.407 400.99 517.178C358.661 559.507 290.093 559.507 247.764 517.178L247.057 516.47L246.35 517.178L208.397 555.131L171.151 517.885L209.104 479.932L209.811 479.225L209.104 478.517L170.444 439.857L169.737 439.15L169.03 439.857L131.077 477.81L93.8307 440.564L131.784 402.611L132.491 401.904L131.784 401.197L74.5006 343.914L111.747 306.668L149.7 344.621L150.407 345.328L151.114 344.621L344.414 151.321L345.122 150.613L344.414 149.906L306.461 111.953L343.707 74.7074L400.99 131.99L401.698 132.698L402.405 131.99L440.358 94.0375L477.604 131.283L439.651 169.236L438.943 169.944L439.651 170.651L478.311 209.311L479.018 210.018L479.725 209.311L517.678 171.358L554.924 208.604L514.458 249.07L513.908 249.619L514.305 250.288C539.011 291.848 533.266 346.242 497.641 381.867C478.483 401.025 454.932 411.17 430.421 413.085ZM383.075 188.566L382.367 187.859L381.66 188.566L304.34 265.887L303.633 266.594L304.34 267.301L381.66 344.621C403.314 366.275 438.741 366.275 460.395 344.621C482.048 322.968 482.048 287.54 460.395 265.887L383.075 188.566ZM188.36 381.867L187.653 382.574L188.36 383.281L285.01 479.932C306.664 501.585 342.091 501.585 363.744 479.932C385.398 458.278 385.398 422.851 363.744 401.197L267.094 304.547L266.387 303.84L265.68 304.547L188.36 381.867Z" stroke="#515151" stroke-width="2"/>
|
||||
<path d="M441.381 422.156L440.205 422.248L440.488 423.393C450.31 463.107 439.633 507.088 408.678 538.043C361.495 585.226 285.063 585.226 237.88 538.043L237.173 537.336L236.466 538.043L194.12 580.389L152.481 538.75L194.827 496.405L195.534 495.697L194.827 494.99L151.774 451.937L151.067 451.23L150.36 451.937L108.014 494.283L66.3755 452.645L108.721 410.299L109.428 409.592L108.721 408.885L44.8491 345.012L86.4878 303.374L128.834 345.719L129.541 346.427L130.248 345.719L345.512 130.455L346.219 129.748L345.512 129.041L303.167 86.6948L344.805 45.0561L408.678 108.928L409.385 109.635L410.092 108.928L452.438 66.5826L494.076 108.221L451.73 150.567L451.023 151.274L451.73 151.981L494.783 195.034L495.49 195.741L496.198 195.034L538.543 152.688L580.182 194.327L535.038 239.471L534.488 240.021L534.885 240.689C562.425 287.015 556.02 347.648 516.31 387.358C494.956 408.712 468.703 420.022 441.381 422.156ZM388.565 172.094L387.858 171.386L387.151 172.094L301.045 258.199L300.338 258.906L301.045 259.614L387.151 345.719C411.221 369.789 450.601 369.789 474.671 345.719C498.741 321.65 498.741 282.269 474.671 258.199L388.565 172.094ZM171.887 387.358L171.179 388.065L171.887 388.772L279.519 496.405C303.588 520.474 342.969 520.474 367.039 496.405C391.108 472.335 391.108 432.954 367.039 408.885L259.407 301.252L258.699 300.545L257.992 301.252L171.887 387.358Z" stroke="#515151" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
31
assets/hero illustrator.svg
Normal file
31
assets/hero illustrator.svg
Normal file
@ -0,0 +1,31 @@
|
||||
<svg width="598" height="342" viewBox="0 0 598 342" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="478.968" cy="94.8303" r="94.5757" fill="#FFF2D0"/>
|
||||
<circle cx="478.968" cy="94.8304" r="65.841" fill="#FFE092"/>
|
||||
<circle cx="478.968" cy="94.8304" r="36.6926" fill="white"/>
|
||||
<path d="M487.984 89.0344C486.736 94.0254 478.968 91.4896 476.553 90.8054L478.767 82.0309C481.262 82.7554 489.272 83.8019 487.984 89.0344ZM475.466 95.3134L473.051 105.014C476.03 105.778 485.247 108.717 486.616 103.243C488.065 97.5271 478.445 96.0379 475.466 95.3134ZM518.01 104.571C512.617 126.145 490.802 139.266 469.228 133.873C447.654 128.479 434.544 106.664 439.926 85.0899C445.319 63.516 467.135 50.4107 488.709 55.788C510.242 61.1815 523.364 82.9969 518.01 104.571ZM487.863 78.9317L489.675 71.6867L485.247 70.6805L483.476 77.6437C482.309 77.3619 481.142 77.0802 479.934 76.8387L481.705 69.7145L477.318 68.668L475.507 75.8727C474.541 75.6312 473.575 75.43 472.689 75.1885L466.611 73.659L465.404 78.3682C465.404 78.3682 468.704 79.1329 468.624 79.1732C470.435 79.6159 470.757 80.7429 470.677 81.7492L465.726 101.592C465.525 102.156 464.881 102.88 463.713 102.679C463.754 102.719 460.493 101.874 460.493 101.874L458.32 106.905L464.035 108.354C465.122 108.636 466.169 108.918 467.215 109.159L465.364 116.485L469.791 117.612L471.602 110.327C472.81 110.649 473.977 110.93 475.104 111.252L473.293 118.457L477.72 119.584L479.572 112.259C487.018 113.667 492.734 113.104 495.068 106.302C497.081 100.868 495.068 97.6479 491.043 95.5951C493.941 94.8304 496.115 93.0191 496.718 89.0746C497.523 83.7214 493.418 80.8637 487.863 78.9317Z" fill="#FFB178"/>
|
||||
<path d="M212.627 110.08H352.97C356.284 110.08 358.97 112.766 358.97 116.08V339.946H206.627V116.08C206.627 112.766 209.313 110.08 212.627 110.08Z" fill="#FFEAEA" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M252.681 301.862H312.916C314.021 301.862 314.916 302.757 314.916 303.862V339.946H250.681V303.862C250.681 302.757 251.577 301.862 252.681 301.862Z" fill="#FBC1C1" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M395.31 200.353H540.234C543.548 200.353 546.234 203.04 546.234 206.353V339.946H389.31V206.353C389.31 203.04 391.996 200.353 395.31 200.353Z" fill="#BCF7FF" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M387.016 217.658H548.528C551.367 217.658 553.817 219.647 554.4 222.425L564.247 269.319C565.03 273.047 562.185 276.552 558.376 276.552H377.168C373.358 276.552 370.513 273.047 371.296 269.319L381.144 222.425C381.727 219.647 384.177 217.658 387.016 217.658Z" fill="#A7E1F4" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M77.77 179.603H206.627V339.946H71.77V185.603C71.77 182.289 74.4563 179.603 77.77 179.603Z" fill="#FFF6C4" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="408.306" y="288.685" width="68.6626" height="40.9225" rx="6" fill="#A7E1F4" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M502.839 288.685H521.238C524.552 288.685 527.238 291.371 527.238 294.685V339.946H496.839V294.685C496.839 291.371 499.525 288.685 502.839 288.685Z" fill="#A7E1F4" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="224.147" y="155.05" width="25.2523" height="32.3563" rx="2" fill="#FBC1C1" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="256.71" y="155.05" width="25.2523" height="32.3563" rx="2" fill="#FBC1C1" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="315.247" y="222.33" width="25.2523" height="32.3563" rx="2" fill="#FBC1C1" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M126.711 307.59H151.687C152.791 307.59 153.687 308.485 153.687 309.59V339.946H124.711V309.59C124.711 308.485 125.606 307.59 126.711 307.59Z" fill="#FFE7A8" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="86.9756" y="252.436" width="33.7905" height="21.3384" rx="2" fill="#FFE7A8" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="157.402" y="207.186" width="33.7905" height="21.3384" rx="2" fill="#FFE7A8" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<mask id="path-18-inside-1_32_40" fill="white">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M387.004 297.587C386.527 297.211 385.835 297.294 385.46 297.771L376.474 309.196V298.81H370.325V341.568H376.474V312.735C376.511 312.7 376.545 312.661 376.578 312.62L387.188 299.131C387.564 298.653 387.481 297.962 387.004 297.587Z"/>
|
||||
</mask>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M387.004 297.587C386.527 297.211 385.835 297.294 385.46 297.771L376.474 309.196V298.81H370.325V341.568H376.474V312.735C376.511 312.7 376.545 312.661 376.578 312.62L387.188 299.131C387.564 298.653 387.481 297.962 387.004 297.587Z" fill="#C1B3B3"/>
|
||||
<path d="M385.46 297.771L383.888 296.535L383.888 296.535L385.46 297.771ZM387.004 297.587L388.24 296.015L388.24 296.015L387.004 297.587ZM376.474 309.196H374.474C374.474 310.048 375.014 310.807 375.819 311.086C376.625 311.365 377.519 311.102 378.046 310.432L376.474 309.196ZM376.474 298.81H378.474C378.474 297.705 377.578 296.81 376.474 296.81V298.81ZM370.325 298.81V296.81C369.221 296.81 368.325 297.705 368.325 298.81H370.325ZM370.325 341.568H368.325C368.325 342.672 369.221 343.568 370.325 343.568V341.568ZM376.474 341.568V343.568C377.578 343.568 378.474 342.672 378.474 341.568H376.474ZM376.474 312.735L375.09 311.291C374.696 311.668 374.474 312.19 374.474 312.735H376.474ZM376.578 312.62L375.006 311.384L375.006 311.384L376.578 312.62ZM387.188 299.131L388.76 300.367V300.367L387.188 299.131ZM387.032 299.008C386.725 299.399 386.158 299.466 385.767 299.159L388.24 296.015C386.895 294.956 384.946 295.189 383.888 296.535L387.032 299.008ZM378.046 310.432L387.032 299.008L383.888 296.535L374.902 307.959L378.046 310.432ZM374.474 298.81V309.196H378.474V298.81H374.474ZM370.325 300.81H376.474V296.81H370.325V300.81ZM372.325 341.568V298.81H368.325V341.568H372.325ZM376.474 339.568H370.325V343.568H376.474V339.568ZM374.474 312.735V341.568H378.474V312.735H374.474ZM375.006 311.384C375.032 311.351 375.06 311.32 375.09 311.291L377.857 314.179C377.962 314.079 378.059 313.972 378.15 313.857L375.006 311.384ZM385.616 297.894L375.006 311.384L378.15 313.857L388.76 300.367L385.616 297.894ZM385.767 299.159C385.377 298.851 385.309 298.285 385.616 297.894L388.76 300.367C389.819 299.022 389.586 297.073 388.24 296.015L385.767 299.159Z" fill="black" mask="url(#path-18-inside-1_32_40)"/>
|
||||
<mask id="path-20-inside-2_32_40" fill="white">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M365.382 230.473C370.832 230.473 375.843 232.357 379.798 235.508C380.299 235.486 380.804 235.474 381.311 235.474C398.133 235.474 411.856 248.039 412.582 263.798C421.407 268.041 427.06 274.567 427.06 281.887C427.06 294.674 409.811 305.04 388.534 305.04C378.484 305.04 369.333 302.727 362.474 298.939C360.346 299.584 358.089 299.93 355.75 299.93C342.964 299.93 332.598 289.565 332.598 276.778C332.598 268.879 336.553 261.905 342.592 257.726C342.354 256.395 342.229 255.025 342.229 253.626C342.229 240.839 352.595 230.473 365.382 230.473Z"/>
|
||||
</mask>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M365.382 230.473C370.832 230.473 375.843 232.357 379.798 235.508C380.299 235.486 380.804 235.474 381.311 235.474C398.133 235.474 411.856 248.039 412.582 263.798C421.407 268.041 427.06 274.567 427.06 281.887C427.06 294.674 409.811 305.04 388.534 305.04C378.484 305.04 369.333 302.727 362.474 298.939C360.346 299.584 358.089 299.93 355.75 299.93C342.964 299.93 332.598 289.565 332.598 276.778C332.598 268.879 336.553 261.905 342.592 257.726C342.354 256.395 342.229 255.025 342.229 253.626C342.229 240.839 352.595 230.473 365.382 230.473Z" fill="#A9FAA2"/>
|
||||
<path d="M379.798 235.508L377.306 238.637C378.062 239.24 379.012 239.548 379.978 239.504L379.798 235.508ZM412.582 263.798L408.586 263.982C408.654 265.452 409.523 266.766 410.849 267.403L412.582 263.798ZM362.474 298.939L364.408 295.437C363.463 294.916 362.347 294.798 361.314 295.111L362.474 298.939ZM342.592 257.726L344.868 261.015C346.155 260.124 346.805 258.564 346.529 257.022L342.592 257.726ZM382.291 232.38C377.653 228.684 371.77 226.473 365.382 226.473V234.473C369.895 234.473 374.033 236.029 377.306 238.637L382.291 232.38ZM381.311 231.474C380.744 231.474 380.179 231.487 379.618 231.512L379.978 239.504C380.419 239.484 380.864 239.474 381.311 239.474V231.474ZM416.578 263.614C415.745 245.54 400.086 231.474 381.311 231.474V239.474C396.181 239.474 407.967 250.539 408.586 263.982L416.578 263.614ZM410.849 267.403C419.061 271.351 423.06 276.808 423.06 281.887H431.06C431.06 272.327 423.753 264.731 414.315 260.193L410.849 267.403ZM423.06 281.887C423.06 286.327 420.045 291.026 413.715 294.83C407.465 298.587 398.571 301.04 388.534 301.04V309.04C399.774 309.04 410.144 306.31 417.836 301.687C425.45 297.111 431.06 290.235 431.06 281.887H423.06ZM388.534 301.04C379.06 301.04 370.592 298.853 364.408 295.437L360.54 302.44C368.074 306.601 377.909 309.04 388.534 309.04V301.04ZM355.75 303.93C358.486 303.93 361.134 303.525 363.634 302.767L361.314 295.111C359.558 295.643 357.692 295.93 355.75 295.93V303.93ZM328.598 276.778C328.598 291.774 340.755 303.93 355.75 303.93V295.93C345.173 295.93 336.598 287.356 336.598 276.778H328.598ZM340.315 254.437C333.244 259.33 328.598 267.511 328.598 276.778H336.598C336.598 270.247 339.863 264.479 344.868 261.015L340.315 254.437ZM338.229 253.626C338.229 255.262 338.375 256.868 338.654 258.43L346.529 257.022C346.333 255.923 346.229 254.788 346.229 253.626H338.229ZM365.382 226.473C350.386 226.473 338.229 238.63 338.229 253.626H346.229C346.229 243.048 354.804 234.473 365.382 234.473V226.473Z" fill="black" mask="url(#path-20-inside-2_32_40)"/>
|
||||
<path d="M46.3707 339.928L595.296 339.928" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M32.1879 339.928H2.24915" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
241
css/main.css
241
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;
|
||||
}
|
||||
}
|
||||
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)}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}}
|
||||
*{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}}
|
||||
222
css/main.scss
222
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;
|
||||
}
|
||||
}
|
||||
|
||||
206
index.html
206
index.html
@ -9,139 +9,101 @@
|
||||
<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">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<article>
|
||||
<section id="above_fold" class="parallax">
|
||||
<p id="above_fold__description">El Salvador Real Estate Tokenization</p>
|
||||
<h1 id="above_fold__title">Project B</h1>
|
||||
<img id="above_fold__image" class="bg" src="assets/oswaldo-martinez-bK-SRSgPWz8-unsplash.jpg" alt="">
|
||||
</section>
|
||||
<section>
|
||||
<h2>Partners</h2>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Team</h2>
|
||||
<div class="carousel-wrapper">
|
||||
<ul class="carousel">
|
||||
<li class="carousel__item">
|
||||
<img src="assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg" alt="">
|
||||
<p>Jane Doe</p>
|
||||
</li>
|
||||
<li class="carousel__item">
|
||||
<img src="assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg" alt="">
|
||||
<p>Jane Doe</p>
|
||||
</li>
|
||||
<li class="carousel__item">
|
||||
<img src="assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg" alt="">
|
||||
<p>Jane Doe</p>
|
||||
</li>
|
||||
<li class="carousel__item">
|
||||
<img src="assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg" alt="">
|
||||
<p>Jane Doe</p>
|
||||
</li>
|
||||
<li class="carousel__item">
|
||||
<img src="assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg" alt="">
|
||||
<p>Jane Doe</p>
|
||||
</li>
|
||||
<li class="carousel__item">
|
||||
<img src="assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg" alt="">
|
||||
<p>Jane Doe</p>
|
||||
</li>
|
||||
<li class="carousel__item">
|
||||
<img src="assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg" alt="">
|
||||
<p>Jane Doe</p>
|
||||
</li>
|
||||
<li class="carousel__item">
|
||||
<img src="assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg" alt="">
|
||||
<p>Jane Doe</p>
|
||||
</li>
|
||||
<li class="carousel__item">
|
||||
<img src="assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg" alt="">
|
||||
<p>Jane Doe</p>
|
||||
</li>
|
||||
<li class="carousel__item">
|
||||
<img src="assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg" alt="">
|
||||
<p>Jane Doe</p>
|
||||
</li>
|
||||
<li class="carousel__item">
|
||||
<img src="assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg" alt="">
|
||||
<p>Jane Doe</p>
|
||||
</li>
|
||||
<li class="carousel__item">
|
||||
<img src="assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg" alt="">
|
||||
<p>Jane Doe</p>
|
||||
</li>
|
||||
<li class="carousel__item">
|
||||
<img src="assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg" alt="">
|
||||
<p>Jane Doe</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="carousel__button-wrapper flex gap-0-3 align-items-center hide-on-small">
|
||||
<button class="carousel__button" data-direction="backwards" onclick="scrollCarousel(event)">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
||||
width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||
<path d="M15.61 7.41L14.2 6l-6 6 6 6 1.41-1.41L11.03 12l4.58-4.59z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="carousel__button" onclick="scrollCarousel(event)">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
||||
width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||
<path d="M10.02 6L8.61 7.41 13.19 12l-4.58 4.59L10.02 18l6-6-6-6z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<header>
|
||||
<h4>Project B</h4>
|
||||
</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>
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
const teamMembers = [
|
||||
{
|
||||
name: 'Parin Lapasia',
|
||||
title: 'Principal director and shareholde',
|
||||
image: 'assets/craig-mckay-jmURdhtm7Ng-unsplash.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Rohit Tripathy',
|
||||
title: 'Principal director and shareholder',
|
||||
image: 'assets/Rohit Tripathy.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Puneet Sondh',
|
||||
title: 'Principal director',
|
||||
image: 'assets/Puneet Sondh.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Ruchir Gupta',
|
||||
title: 'Principal director',
|
||||
image: 'assets/Ruchir Gupta.jpg'
|
||||
},
|
||||
]
|
||||
|
||||
let getRatio = el => window.innerHeight / (window.innerHeight + el.offsetHeight);
|
||||
|
||||
gsap.utils.toArray(".parallax").forEach((section, i) => {
|
||||
section.bg = section.querySelector(".bg");
|
||||
|
||||
// the first image (i === 0) should be handled differently because it should start at the very top.
|
||||
// use function-based values in order to keep things responsive
|
||||
gsap.fromTo(section.bg, {
|
||||
y: () => i ? `${-window.innerHeight * getRatio(section)}px` : "0px"
|
||||
}, {
|
||||
y: () => `${window.innerHeight * (1 - getRatio(section))}px`,
|
||||
ease: "none",
|
||||
scrollTrigger: {
|
||||
trigger: section,
|
||||
start: () => i ? "top bottom" : "top top",
|
||||
end: "bottom top",
|
||||
scrub: true,
|
||||
invalidateOnRefresh: true // to make it responsive
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
function scrollCarousel(e) {
|
||||
const direction = e.target.closest('button').dataset.direction;
|
||||
const carousel = e.target.closest('.carousel-wrapper').querySelector('.carousel');
|
||||
const carouselWidth = carousel.offsetWidth;
|
||||
const moveBy = carouselWidth / 2;
|
||||
if (direction === 'backwards') {
|
||||
carousel.scrollBy({
|
||||
left: -moveBy,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
} else {
|
||||
carousel.scrollBy({
|
||||
left: moveBy,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user