Transform neglected spaces into vibrant communities, showcasing the power of resilience and collective ingenuity to create homes from adversity.

SKŁO

Skłot image

TERSI

        
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Staatliches">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik+Mono+One">

    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
    <style>

@keyframes animate-image {
  from {
    transform: translateY(-40vh);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes animate-left {
  from {
    transform: translateY(20vh);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes animate-right {
  from {
    transform: translateY(-20vh);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

:root {
  --animation-time: 0.5s;
  --left-width: 48%;
  --right-width: calc(100% - var(--left-width));
}

h1 {
  margin: 0;
  font-size: 15vw;
}

.landing {
  background: gainsboro;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  display: flex;
}

.landing__bottom-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.landing__left p {
  margin: 0;
  margin-left: 10%;
  font-size: max(2vw, 1em);
  color: #fff;
  font-family: Staatliches;
}

.landing__left h1 {
  align-self: flex-end;
  color: honeydew;
}

.landing__right h1 {
  align-self: flex-start;
  color: silver;
}

.landing__left {
  width: var(--left-width);
  animation: var(--animation-time) ease-in-out 0s animate-right;
}

.landing__right {
  width: var(--right-width);
  animation: var(--animation-time) ease-in-out 0s animate-left;
}

.landing__image {
  border-radius: 25%;
  max-height: 50vh;
  margin-right: 9%; 
  overflow: hidden;
  animation: var(--animation-time) ease-in-out 0s animate-image;
}
    </style>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.7.0/gpx.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
    <div class="landing">
      <div class="landing__left landing__bottom-text">
        <p>Transform neglected spaces into vibrant communities, showcasing the power of resilience and collective ingenuity to create homes from adversity.</p>
        <h1>SKŁO</h1>
      </div>
      <div class="landing__right landing__bottom-text">
        <div class="landing__image">
          <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fd-art.ppstatic.pl%2Fkadry%2Fk%2Fr%2F09%2Fb1%2F561bdda9bf841_o_original.jpg&f=1&nofb=1&ipt=41e1c3a3a9def1725cdf8bf8bd3f7500152da34ce09a2c8f41c55efb2f3bce44&ipo=images" alt="Skłot image" />
        </div>
        <h1>TERSI</h1>
      </div>
    </div>
  </body>
</html>

<script></script>