OL Rocket

index.html

<!-- inspired by https://adobe.ly/3BHoIy5 -->

<div class="wrapper">
  <ol>
    <div class="rocket"><svg><use xlink:href="#rocket_svg"/></svg></div>
    <li style="--accent-color: #FCB410">
      <div class="title">Data 01</div>
      <div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed</div>
    </li>
    <li style="--accent-color: #D6489A">
      <div class="title">Data 02</div>
      <div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed</div>
    </li>
    <li style="--accent-color: #ACD038">
      <div class="title">Data 03</div>
      <div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed</div>
    </li>
    <li style="--accent-color: #10BBC5">
      <div class="title">Data 04</div>
      <div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed</div>
    </li>
    <li style="--accent-color: #7251A2">
      <div class="title">Data 05</div>
      <div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed</div>
    </li>
  </ol>
</div>

<!-- rocket svg -->
<svg style="display: none">
  <symbol id="rocket_svg" viewBox="0 0 134.13 196.24">
      <path fill="#ebebf0" d="M27.06,108.49S7,119.92,3.06,127.24c-5.62,10.5-4.12,48.75,9.75,69,0,0,7.13-32.63,23.63-45.75Z"/>
      <path fill="#ebebf0" d="M107.06,108.49s20.08,11.43,24,18.75c5.63,10.5,4.13,48.75-9.75,69,0,0-7.12-32.63-23.62-45.75Z"/>
      <path fill="#f37664" d="M67.07,0V176.24H38.3a136.69,136.69,0,0,1-6.58-12.37l-.18-.38c-19.42-41.52-15.83-86.71-.83-120,.18-.42.37-.84.56-1.25C40,23.51,52.26,8.65,66.08.56,66.4.37,66.73.18,67.07,0Z"/>
      <path fill="#f4a391" d="M67.07,0V43.49H30.71c.18-.42.37-.84.56-1.25C40,23.51,52.26,8.65,66.08.56,66.4.37,66.73.18,67.07,0Z"/>
      <path fill="#1d7dae" d="M67.07,163.49v12.75H38.3a136.69,136.69,0,0,1-6.58-12.37l-.18-.38Z"/>
      <path fill="#f05b57" d="M103.42,43.49H67.07V0l1,.56c13.83,8.09,26.14,23,34.81,41.68C103.05,42.65,103.24,43.07,103.42,43.49Z"/>
      <path fill="#e94733" d="M115.94,102.87a142.86,142.86,0,0,1-13.35,60.62H67.07v-120h36.35A145.76,145.76,0,0,1,115.94,102.87Z"/>
      <path fill="#104c78" d="M102.59,163.49l-.18.38a136.69,136.69,0,0,1-6.58,12.37H67.07V163.49Z"/>
      <circle fill="#e2554c" cx="67.06" cy="84.36" r="22.99"/>
      <circle fill="#64cdf6" cx="67.06" cy="84.36" r="19.03"/>
  </symbol>
</svg>

ol-rocket.markdown

OL Rocket

A Pen by Mark Boots on CodePen.

License.

style.css

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box }
.wrapper {
  background-image: linear-gradient(to bottom left, #0089CF, #123264);
  padding: 1rem;
  padding-bottom: 0;
}
ol {
  --column-gap: 1rem;
  --row-gap: 2rem;
  --rocket-aspect: calc(134.13/196.24); /* svg viewbox */
  --rocket-width: 3rem;
  --rocket-height: calc(var(--rocket-width) / var(--rocket-aspect));
  --flame-outer-color: #F16E39;
  --flame-inner-color: #FED103;  
  --number-circle-size: 2.5rem;
  --number-circle-border-size: 0.25rem;
  --number-line-height: 0.125rem;
  --number-line-length: calc(var(--rocket-width) / 2 + var(--column-gap) / 2);
  --number-line-dot-size: 0.25rem;
  padding-bottom: 5rem;
  list-style: none;
  display: grid;
  column-gap: var(--column-gap);
  row-gap: var(--row-gap);
  grid-template-columns: var(--rocket-width) 1fr;
  counter-reset: liCount;
  font-family: system-ui, sans-serif;
  color: white;
  overflow: hidden;
  width: min(45rem, 100%);
  margin-inline: auto;
}
@media (min-width: 30rem){
  wrapper { padding: 2rem }
  ol{ 
    --column-gap: 2rem;
    --rocket-width: 5rem;
    grid-template-columns: 1fr var(--rocket-width) 1fr;
  }
  ol .rocket{ grid-column: 2 !important }
  ol > li { 
    grid-column: 1/-1 !important; 
    width: calc(50% - var(--rocket-width) / 2 - var(--column-gap)) 
  }
  ol > li:nth-of-type(odd) { justify-self: end}
  ol > li:nth-of-type(even) { text-align: right}
  ol > li:nth-of-type(even):after{
    left: unset;
    right: calc(var(--circle-pos-x) * -1);
    --dot_pos_multiplier: -1
  }
  ol > li:nth-of-type(even)::before{
    right: unset;
    left: calc(100% + var(--column-gap) / 2);
    
  }
  
}
ol::after{
  content: "";
  grid-row: 1;
  grid-column: 1/-1;
}
ol .rocket{
  grid-row: 1;
  grid-column: 1;
  position: relative;
  isolation: isolate;
}
ol .rocket svg { width: var(--rocket-width); height: var(--rocket-height)}
ol .rocket::after{
  content: "";
  position: absolute;
  width: 50%;
  height: 200vh;
  top: calc(100% - var(--rocket-height) * .2);
  left: 25%;
  z-index: -1;
  background-image:
    radial-gradient(ellipse at center top, var(--flame-inner-color) 20%,transparent 50%),
    linear-gradient(to right, 
      transparent 20%, 
      var(--flame-outer-color) 40% , 
      var(--flame-inner-color) 50%,
      var(--flame-outer-color) 60%, 
      transparent 80%
    ),
    radial-gradient(ellipse at center top, var(--flame-outer-color) 35%,transparent 65%);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 
    100% calc(var(--rocket-height) * 0.4), 
    100%, 
    100% calc(var(--rocket-height) * 0.4);
}
ol > li {
  counter-increment: liCount;
  grid-column: -2;
  position: relative;
}
ol > li::after{
  content: counter(liCount, decimal-leading-zero);
  width: var(--number-circle-size);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  position: absolute;
  --circle-pos-x: calc(var(--number-circle-size) / 2 + var(--column-gap) + var(--rocket-width) / 2);
  left: calc(var(--circle-pos-x) * -1);
  top: calc(50% - var(--number-circle-size) / 2);
  background-color: var(--accent-color);
  font-weight: 600;
  --dot-size: calc(var(--number-circle-size) / -2 + var(--number-line-dot-size));
  box-shadow:
    inset 0 0 0 var(--number-circle-border-size) currentcolor,
    inset -0.125rem 0.125rem 0.25rem var(--number-circle-border-size) rgb(0 0 0 / .25),
    -0.125rem 0.125rem 0.25rem rgb(0 0 0 / .5),
    calc(var(--number-line-length) * var(--dot_pos_multiplier, 1)) 0 0 var(--dot-size) currentcolor;
}

ol > li::before{
  position: absolute;
  content: "";
  width: var(--number-line-length);
  height: var(--number-line-height);
  background-color: currentcolor;
  right: calc(100% + var(--column-gap) / 2);
  top: calc(50% - var(--number-line-height) / 2);
}