<article>
  <p>
Praca to nie wszystko. Do normalnego funkcjonowania potrzebni ci są przyjaciele i chwile luzu niezwiązane z programowaniem, czy innym twoim hobby numer jeden. Wiem, że w innych wpisach pisałem jak ważna jest ciężka praca, ale nie będziesz robił tego cały czas. Poza tym, co z tego, że osiągniesz sukces skoro emocjonalnie potem umrzesz bo zdasz sobie sprawę, że twoje życie prywatne nie istnieje.
  W 2013 roku, aby zapomnieć o swoich problemach zacząłem intensywnie pracować po godzinach. Niestety pod koniec został mi tylko płacz i lament, bo zamiast uleczyć swoje problemy, jeszcze bardziej je powiększyłem.
  </p>

  <figure>
    <figcaption>
      <strong>Serce</strong>
      Programisty
    </figcaption>
    <img src='https://cezarywalenciuk.pl/Posts/programing/icons/serceprogramisty-z.jpg' alt='Woman holding guitar over shoulder'>
    <img src="https://cezarywalenciuk.pl/Posts/programing/icons/serceprogramisty-bez.png" alt="" class="top">
    
  </figure>
  <p>Nie jesteś robotem i nawet nie próbuj nim zostać. Musisz się z tym pogodzić, że sukces w twoim życiu zawodowym nie przeniesie się na inne sfery życia i uczyni cię szczęśliwym człowiekiem.</p>

<p class="before-figure">
Pasja programowania? Praca zawodowa? Nie rozwiąże twoich wszystkich problemów. Wiem, że to brzmi dziwnie u człowieka, który prowadzi bloga programistycznego, ale taka jest prawda. Programowanie to nie cały świat. Nieważne co byś nie robił programowanie nigdy nie będzie całym twoim światem, bo świat i rzeczywistość tak nie działa.</p>
  <div class="figure-wrapper">
  <figure>
    <figcaption>
      <strong>Serce</strong>
      Programisty
    </figcaption>
    <div class="img-wrapper">
      <img src='https://cezarywalenciuk.pl/Posts/programing/icons/serceprogramisty.jpg' alt='Woman holding guitar over shoulder'>
      <img src="https://cezarywalenciuk.pl/Posts/programing/icons/serceprogramisty-bez.png" alt="" class="top">
    </div>
  </figure>
  </div>
<p class="after-figure">
Bycie programistą to dar, ale niestety twoje talenty rozwiążą tylko problemy związane z pieniędzmi i karierą.
  Jak więc mieć szczęśliwe życie prywatne.
</p>
<p></p>
</article>

article {
  max-width: 400px;
  margin: 2rem auto;
  font: 1.25rem/1.5 system-ui;
}

figure {
  padding: 0;
  margin: 0;
  position: relative;
  padding-bottom: 150px;
}
figure img {
  max-width: 100%;
  display: block;
  margin-bottom: 120px;
}
figure img.top {
  position: absolute;
  top: 115px;
  left: 0;
}
figure figcaption {
  border: 5px solid red;
  color: #009688;
  text-transform: uppercase;
  font-size: 3rem;
  line-height: 1;
  padding: 0.25rem;
  text-align: center;
  position: sticky;
  top: 0;
  mix-blend-mode: color-dodge;
}
figure figcaption strong {
  display: block;
}
figure + p {
  padding-top: 20px;
  margin-top: -280px;
  background: white;
  position: relative;
}


.before-figure, .after-figure {
  background-color: white;
  position: relative;
  z-index: 5;
}

.before-figure {
  margin-bottom: 0px;
  padding-bottom: 2rem;
}

.after-figure {
  margin-top: 0px;
  padding-top: 2rem;
}

.figure-wrapper {
  margin: -133px 0px -133px 0px;
}

.figure-wrapper figure {
  padding: 0;
  margin: 0;
  position: relative;
  padding-bottom: 0px;
}
.figure-wrapper figure img {
  max-width: 100%;
  display: block;
  margin-bottom: 0px;
}
.figure-wrapper figure img.top {
  position: absolute;
  top: 210px;
  left: 0;
}
.figure-wrapper figure figcaption {
  color: #009688;
  text-transform: uppercase;
  font-size: 3rem;
  line-height: 1;
  padding: 0.25rem 1rem 0.25rem 0.25rem;
  text-align: right;
  position: sticky;
  top: 50%;
}
.figure-wrapper figure figcaption strong {
  display: block;
}
.figure-wrapper figure .img-wrapper {
  padding: 0px 0px 133px 0px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.