Fiyatlandırma Tablosu Hakkında

Merhaba,

Aşağıdaki kodu bir wordpres sayfasına uygulamak istiyorum.
HTML kodu ekliyorum ancak css ve js yi doğru ekleyemedim sanırım bu konuda bir çözümü anlatabilecek bir arkadaş varmıdır.
Teşekkürler.

https://codepen.io/VoloshchenkoAl/pen/NrBNoN

js boş gözüküyor css dolu onda da bir yanlışlık yok görüntü veriyor sorununuz nedir? css i html içinde mi kullanmak istiyorsunuz

Evet css i html içinde kullanmak istiorum.

Html koduna <style> </style> ekleyin ve arasına css kodunu ekleyin

<div class="pricingTable" style="margin: 40px auto; color: #717787;">
<h2 class="pricingTable-title" style="text-align: center; color: #6e768d; font-size: 3em; margin-bottom: 20px; letter-spacing: 0.04em;">Find a plan that's right for you.</h2>
<h3 class="pricingTable-subtitle" style="text-align: center; color: #b4bdc6; font-size: 1.8em; letter-spacing: 0.04em; margin-bottom: 60px;">Every plan comes with a 30-day free trial.</h3>

<ul class="pricingTable-firstTable" style="list-style: none; padding-left: 2em; padding-right: 2em; text-align: center;">
<li class="pricingTable-firstTable_table" style="vertical-align: middle; width: 31%; background-color: #ffffff; display: inline-block; padding: 0px 30px 40px; text-align: center; max-width: 320px; transition: all 0.3s ease; border-radius: 5px;">
<h1 class="pricingTable-firstTable_table__header" style="font-size: 1.6em; padding: 40px 0px; border-bottom: 2px solid #ebedec; letter-spacing: 0.03em;">Bronze Package</h1>
<p class="pricingTable-firstTable_table__pricing" style="font-size: 3em; padding: 30px 0px; border-bottom: 2px solid #ebedec; line-height: 0.7;">
<span style="font-size: 0.35em; vertical-align: top; letter-spacing: 0.15em;">$</span>
<span>10</span>
<span style="vertical-align: bottom; font-size: 0.30em; letter-spacing: 0.04em; padding-left: 0.2em;">Month</span>
</p>
<ul class="pricingTable-firstTable_table__options" style="list-style: none; padding: 15px; font-size: 0.9em; border-bottom: 2px solid #ebedec;">
<li style="padding: 8px 0px;">✓ Unlimited Listing</li>
<li style="padding: 8px 0px;">✓ Edit Your Listing</li>
<li style="padding: 8px 0px;">✓ Approve Reviews</li>
</ul>
<button class="pricingTable-firstTable_table__getstart" style="color: white; border: 0; background-color: #71ce73; margin-top: 30px; border-radius: 5px; cursor: pointer; padding: 15px; box-shadow: 0px 3px 0px 0px rgba(102, 172, 100, 1); letter-spacing: 0.07em; transition: all 0.4s ease;">Get Started Now</button>
</li>

<!-- Buraya diğer tabloları da ekleyebilirsin -->

</ul>
</div>

Bu şekilde inline olarak kullanabilirsin.

Teşekkürler acak bu şekilde eklediğimde örnek sayfadaki gibi çıkmadı buton ve most popler gibi yazılar efekt çıkmadı.

Merhaba,
Bu şekilde çalışmıyor.

hatalı yaptığınız bir kısım vardır.

Bu şekilde ekledim çalşmadı

<style>
  .pricingTable {
    font-family: Arial, sans-serif;
    text-align: center;
    background: #f3f4f6;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  
  .pricingTable-title {
    font-size: 2em;
    color: #333;
    margin-bottom: 5px;
  }
  
  .pricingTable-subtitle {
    font-size: 1.2em;
    color: #666;
    margin-bottom: 30px;
  }
  
  .pricingTable-firstTable {
    display: flex;
    justify-content: center;
    gap: 20px;
  }
  
  .pricingTable-firstTable_table {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 280px;
    padding: 20px;
    list-style: none;
  }
  
  .pricingTable-firstTable_table__header {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 10px;
  }
  
  .pricingTable-firstTable_table__pricing {
    font-size: 2em;
    color: #333;
    margin: 10px 0;
  }
  
  .pricingTable-firstTable_table__pricing span {
    display: inline-block;
    font-size: 1em;
  }
  
  .pricingTable-firstTable_table__options {
    list-style: none;
    padding: 0;
    margin: 20px 0;
  }
  
  .pricingTable-firstTable_table__options li {
    padding: 8px 0;
    color: #666;
    font-size: 1em;
  }
  
  .pricingTable-firstTable_table__getstart {
    padding: 12px 20px;
    font-size: 1em;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .pricingTable-firstTable_table__getstart:hover {
    background-color: #0056b3;
  }
</style>
<div class="pricingTable">
  <h2 class="pricingTable-title">Find a plan that's right for you.</h2>
  <h3 class="pricingTable-subtitle">Every plan comes with a 30-day free trial.</h3>

  <ul class="pricingTable-firstTable">
    <li class="pricingTable-firstTable_table">
      <h1 class="pricingTable-firstTable_table__header">Bronze Packege</h1>
      <p class="pricingTable-firstTable_table__pricing"><span>$</span><span>10</span><span>Month</span></p>
      <ul class="pricingTable-firstTable_table__options">
        <li>Unlimited Listing</li>
        <li>Edit Your Listing</li>
        <li>Approve Reviews</li>
      </ul>
      <button class="pricingTable-firstTable_table__getstart">Get Started Now</button>
    </li>
    <li class="pricingTable-firstTable_table">
      <h1 class="pricingTable-firstTable_table__header">Gold Packege</h1>
      <p class="pricingTable-firstTable_table__pricing"><span>$</span><span>19</span><span>Month</span></p>
      <ul class="pricingTable-firstTable_table__options">
        <li>Unlimited Listing</li>
        <li>Edit Your Listing</li>
        <li>Approve Reviews</li>
        <li>Take Booking Online</li>
        <li>24/7 Support Service</li>
      </ul>
      <button class="pricingTable-firstTable_table__getstart">Get Started Now</button>
    </li>
    <li class="pricingTable-firstTable_table">
      <h1 class="pricingTable-firstTable_table__header">Platinum Packege</h1>
      <p class="pricingTable-firstTable_table__pricing"><span>$</span><span>49</span><span>Month</span></p>
      <ul class="pricingTable-firstTable_table__options">
        <li>Unlimited Listing</li>
        <li>Edit Your Listing</li>
        <li>Approve Reviews</li>
      </ul>
      <button class="pricingTable-firstTable_table__getstart">Get Started Now</button>
    </li>
  </ul>
</div>