<!-- Container for demo purpose -->

<div class="container my-5 py-5">

​

  <!-- Section: Design Block -->

  <section class="mb-10 background-radial-gradient">

    <style>

      .background-radial-gradient {

        background-color: hsl(218, 41%, 15%);

        background-image: radial-gradient(

          650px circle at 0% 0%,

          hsl(218, 41%, 35%) 15%,

          hsl(218, 41%, 30%) 35%,

          hsl(218, 41%, 20%) 75%,

          hsl(218, 41%, 19%) 80%,

          transparent 100%

        ),

          radial-gradient(

            1250px circle at 100% 100%,

            hsl(218, 41%, 45%) 15%,

            hsl(218, 41%, 30%) 35%,

            hsl(218, 41%, 20%) 75%,

            hsl(218, 41%, 19%) 80%,

            transparent 100%

          );

      }

    </style>

​

    <div class="container px-4 py-5 px-md-5 text-center text-lg-start">

      <div class="row gx-lg-5 align-items-center my-5 my-lg-0">

        <div class="col-lg-6 mb-5 mb-lg-0">

          <h1

              class="mb-5 display-3 fw-bold ls-tight"

              style="color: hsl(218, 81%, 95%)"

              >

            Are you ready <br />

            <span style="color: hsl(218, 81%, 75%)">for an adventure?</span>

          </h1>

          <p class="text-white lead mb-xl-0">

            Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima

            officia consequatur adipisci tenetur repudiandae rerum quos.

          </p>

        </div>

​

        <div class="col-lg-6">

          <!-- THIS ONE, THIS ONE, THIS ONE, THIS ONE! -->

          <div id="this">

​

          </div>

        </div>

      </div>

    </div>

  </section>

  <!-- Section: Design Block -->

​

</div>

<!-- Container for demo purpose -->

body {

  background-color: hsl(0, 0%, 98%)

}

​

#this {

  background-color: red;

}

​