diff --git a/assets/oswaldo-martinez-bK-SRSgPWz8-unsplash.jpg b/assets/oswaldo-martinez-bK-SRSgPWz8-unsplash.jpg
new file mode 100644
index 0000000..a6769a8
Binary files /dev/null and b/assets/oswaldo-martinez-bK-SRSgPWz8-unsplash.jpg differ
diff --git a/assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg b/assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg
new file mode 100644
index 0000000..397124d
Binary files /dev/null and b/assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg differ
diff --git a/css/main.css b/css/main.css
new file mode 100644
index 0000000..93877ba
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,209 @@
+* {
+  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: 0.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: 0.3rem;
+}
+
+.gap-0-5 {
+  gap: 0.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: 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;
+  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: 0.5rem;
+}
+.carousel__button-wrapper {
+  position: absolute;
+  right: 0;
+  z-index: 2;
+  justify-self: flex-end;
+  bottom: 1.5rem;
+}
+.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);
+}
+
+@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
diff --git a/css/main.min.css b/css/main.min.css
new file mode 100644
index 0000000..f3527c3
--- /dev/null
+++ b/css/main.min.css
@@ -0,0 +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
diff --git a/css/main.scss b/css/main.scss
new file mode 100644
index 0000000..30378a7
--- /dev/null
+++ b/css/main.scss
@@ -0,0 +1,199 @@
+* {
+  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: 0.9rem;
+  max-width: 65ch;
+  line-height: 1.7;
+  color: rgba(var(--text-color), 0.9);
+}
+img {
+  width: 100%;
+  height: 100%;
+  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: 0.3rem;
+}
+.gap-0-5 {
+  gap: 0.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;
+  &__title,
+  &__description {
+    color: white;
+  }
+  &__title {
+    font-size: max(3rem, 8vw);
+    mix-blend-mode: overlay;
+  }
+  &__description {
+  }
+}
+section {
+  --inline-padding: max(1.5rem, 6vw);
+  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);
+    }
+    img {
+      width: 100%;
+      aspect-ratio: 3/4;
+      object-fit: cover;
+      border-radius: 0.5rem;
+    }
+  }
+  &__button-wrapper {
+    position: absolute;
+    right: 0;
+    z-index: 2;
+    justify-self: flex-end;
+    bottom: 1.5rem;
+  }
+  &__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;
+    &:active {
+      transform: scale(0.9);
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .carousel {
+    &__item {
+      img {
+        aspect-ratio: 3/4;
+      }
+    }
+  }
+  .hide-on-small {
+    display: none !important;
+  }
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..096f9b7
--- /dev/null
+++ b/index.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Project B</title>
+    <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>
+            </div>
+        </section>
+
+    </article>
+    <script>
+        gsap.registerPlugin(ScrollTrigger);
+
+        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'
+                })
+            }
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file