diff --git a/assets/people/Iris-Avalos.jpg b/assets/people/Iris-Avalos.jpg new file mode 100644 index 0000000..3946749 Binary files /dev/null and b/assets/people/Iris-Avalos.jpg differ diff --git a/assets/people/Puneet Sondh.jpg b/assets/people/Puneet Sondh.jpg new file mode 100644 index 0000000..5ef7a2c Binary files /dev/null and b/assets/people/Puneet Sondh.jpg differ diff --git a/assets/people/carlos.jpg b/assets/people/carlos.jpg new file mode 100644 index 0000000..80305f8 Binary files /dev/null and b/assets/people/carlos.jpg differ diff --git a/assets/poc/poc1.jpg b/assets/poc/poc1.jpg new file mode 100644 index 0000000..eec7135 Binary files /dev/null and b/assets/poc/poc1.jpg differ diff --git a/assets/poc/poc2.jpg b/assets/poc/poc2.jpg new file mode 100644 index 0000000..b5f15a8 Binary files /dev/null and b/assets/poc/poc2.jpg differ diff --git a/assets/poc/poc3.jpg b/assets/poc/poc3.jpg new file mode 100644 index 0000000..f772ad8 Binary files /dev/null and b/assets/poc/poc3.jpg differ diff --git a/assets/poc/poc4.jpg b/assets/poc/poc4.jpg new file mode 100644 index 0000000..e75ec0a Binary files /dev/null and b/assets/poc/poc4.jpg differ diff --git a/assets/poc/poc5.jpg b/assets/poc/poc5.jpg new file mode 100644 index 0000000..80163a3 Binary files /dev/null and b/assets/poc/poc5.jpg differ diff --git a/assets/poc/poc6.jpg b/assets/poc/poc6.jpg new file mode 100644 index 0000000..3aa6a07 Binary files /dev/null and b/assets/poc/poc6.jpg differ diff --git a/css/main.css b/css/main.css index 503aa6f..edd89e3 100644 --- a/css/main.css +++ b/css/main.css @@ -13,7 +13,6 @@ html, body { height: 100%; - overflow: hidden; } body { @@ -133,13 +132,7 @@ img { 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); } @@ -214,6 +207,21 @@ section:nth-of-type(3) p { line-height: 0.5; } +#poc_images { + display: grid; + gap: 1rem; + grid-template-columns: repeat(4, 1fr); +} +#poc_images .span-2 { + grid-column: span 2; +} +#poc_images img { + height: 18rem; + -o-object-fit: cover; + object-fit: cover; + border-radius: 0.5rem; +} + #poc_stats { list-style: none; display: flex; @@ -239,7 +247,7 @@ section:nth-of-type(3) p { #team_members { display: grid; - grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(max(8rem, 12vw), 1fr)); margin-top: 5rem; gap: 3rem 1.5rem; } diff --git a/css/main.min.css b/css/main.min.css index d5c9628..545f71f 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%;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{display:flex;align-items:center;justify-content:space-between;position:-webkit-sticky;position:sticky;top:0;background-color:rgba(var(--foreground-color), 0.5);z-index:2;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem)}header ul{list-style:none;display:flex;gap:.8rem}header ul .icon{display:flex}#above_fold{padding-top:0;height:calc(100vh - 6rem);text-align:center;align-content:center}#above_fold h2{margin:auto;max-width:46rem}#above_fold p{max-width:none}#hero_illustration{width:min(100%,26rem);margin:auto}section{display:grid;position:relative;min-height: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 +*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #3d5afe;--secondary-color: #ffac2e;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);--inline-padding: max(1rem, 6vw)}body[data-theme=dark]{--accent-color: #6d83ff;--secondary-color: #d60739;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}h1{font-size:max(1.8rem,4vw)}h2{font-size:max(1.5rem,3vw)}h3{font-size:max(1.2rem,2vw)}h4{font-size:max(1rem,1.3vw)}img{-o-object-fit:contain;object-fit:contain}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.9)}.flex{display:flex}.align-items-center{align-items:center}.justify-content-center{justify-content:center}.flex-column{flex-direction:column}.flex-1{flex:1}.grid{display:grid}.gap-0-3{gap:.3rem}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.gap-4{gap:4rem}article>*{padding:max(1rem,2vw) var(--inline-padding)}header{display:flex;align-items:center;justify-content:space-between;position:-webkit-sticky;position:sticky;top:0;background-color:rgba(var(--foreground-color), 0.5);z-index:2;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem)}header ul{list-style:none;display:flex;gap:.8rem}header ul .icon{display:flex}#above_fold{padding-top:0;height:calc(100vh - 6rem);text-align:center;align-content:center}#above_fold h2{margin:auto;max-width:46rem}#above_fold p{max-width:none}#hero_illustration{width:min(100%,26rem);margin:auto}section{display:grid;position:relative;min-height: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_images{display:grid;gap:1rem;grid-template-columns:repeat(4, 1fr)}#poc_images .span-2{grid-column:span 2}#poc_images img{height:18rem;-o-object-fit:cover;object-fit:cover;border-radius:.5rem}#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(max(8rem, 12vw), 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 1e7ff1c..afd4604 100644 --- a/css/main.scss +++ b/css/main.scss @@ -12,7 +12,6 @@ html, body { height: 100%; - overflow: hidden; } body { --accent-color: #3d5afe; @@ -110,11 +109,7 @@ img { } article { - height: 100vh; - overflow-y: auto; - scroll-snap-type: y proximity; & > * { - scroll-snap-align: start; padding: max(1rem, 2vw) var(--inline-padding); } } @@ -184,7 +179,19 @@ section { line-height: 0.5; } } - +#poc_images { + display: grid; + gap: 1rem; + grid-template-columns: repeat(4, 1fr); + .span-2 { + grid-column: span 2; + } + img { + height: 18rem; + object-fit: cover; + border-radius: 0.5rem; + } +} #poc_stats { list-style: none; display: flex; @@ -210,7 +217,7 @@ section { #team_members { display: grid; - grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(max(8rem, 12vw), 1fr)); margin-top: 5rem; gap: 3rem 1.5rem; } diff --git a/index.html b/index.html index 2962f49..78b7a1b 100644 --- a/index.html +++ b/index.html @@ -29,21 +29,16 @@
  • - - width="1365.333" height="1365.333"> + - + d="M10.3389 0.0400085C4.83887 0.0400085 0.338867 4.54804 0.338867 10.1003C0.338867 15.1203 3.99887 19.287 8.77887 20.04V13.0119H6.23887V10.1003H8.77887V7.88138C8.77887 5.36129 10.2689 3.97575 12.5589 3.97575C13.6489 3.97575 14.7889 4.16652 14.7889 4.16652V6.64643H13.5289C12.2889 6.64643 11.8989 7.41953 11.8989 8.2127V10.1003H14.6789L14.2289 13.0119H11.8989V20.04C14.2553 19.6664 16.4011 18.4592 17.9488 16.6365C19.4965 14.8137 20.3442 12.4955 20.3389 10.1003C20.3389 4.54804 15.8389 0.0400085 10.3389 0.0400085Z" />
  • - + @@ -76,7 +71,11 @@ A tokenized room at El Zonte beach, El Salvador

    - + + + + +