Почему абзацы покрашены в шахматном порядке?Хочу сделать без серого фона, но в css не нашел, что можно изменить?

Question

[Frontend123]

Код:
HTML:

<h1 class="pricing-table-title">Тарифные планы</h1>

 	  <div class="pricing-table">
 	    <h3 class="pricing-title">мониторинг</h3>
 	    <div class="price">₽<sup>/ до <br></br></sup></div>
 	    <!-- Lista de Caracteristicas / Propiedades -->
 	    <ul class="table-list">
 	      <li><span>Цены </span></li>
 	      <li><span>Свойства </span></li>
 	      <li><span>Клас</span></li>
 	    </ul>
 	    <!-- Contratar / Comprar -->
 	    <div class="table-buy">
 	      <p><sup></sup></p>
 	      <a href="#" class="pricing-action">Comprar</a>
 	    </div>
 	  </div>

 	  <div class="pricing-table recommended">
 	    <h3 class="pricing-title">Про</h3>
 	    <div class="price">₽<sup>/ до</sup></div>
 	    <!-- Lista de Caracteristicas / Propiedades -->
 	    <ul class="table-list">
 	      <li><span>Цены</span></li>
 	      <li><span>Свойствае</span></li>
 	      <li><span>Д</span></li>
 	    </ul>
 	    <!-- Contratar / Comprar -->
 	    <div class="table-buy">
 	      <p><sup></sup></p>
 	      <a href="#" class="pricing-action">Comprar</a>
 	    </div>
     </div>
 	  <div class="pricing-table">
 	    <h3 class="pricing-title">Проф</h3>
 	    <div class="price"><sup>/ дов</sup></div>
 	    <!-- Lista de Caracteristicas / Propiedades -->
 	    <ul class="table-list">
 	      <li><span>Цены</span></li>
 	      <li><span>Свойства </span></li>
 	      <li><span>Детал</span></li>
 	      <li><span>От </span></li>
 	    </ul>
       <!-- Contratar / Comprar -->
       
 	    <div class="table-buy">
 	      <p><sup></sup></p>
 	      <a href="#" class="pricing-action">Comprar</a>
 	    </div>
     </div>
     <div class="pricing-table recommended">
       <h3 class="pricing-title">Бизнес-мониторинг</h3>
       <div class="price">₽<sup>/ до</sup></div>
       <!-- Lista de Caracteristicas / Propiedades -->
       <ul class="table-list">
        <li><span>Цены</span></li>
        <li><span>Свойства</span></li>
         <li><span>Детализированная в</span></li>
         <li><span>Отчет</span></li>
         <li><span>Анализ </span></li>
         <li><span>Сравнение </span></li>
         <li><span>План ы</span></li>
       </ul>
       <!-- Contratar / Comprar -->
       <div class="table-buy">
         <p><sup></sup></p>
         <a href="#" class="pricing-action">Comprar</a>
       </div>
     </div>
   </div>

.pricing-table-title {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 2.6em;
    color: #000000;
    margin-top: 15px;
    text-align: center;
    margin-bottom: 50px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.pricing-table-title a {
    font-size: 0.6em;
}

.clearfix:after {
    content: '';
    display: block;
    height: 0;
    width: 0;
    clear: both;
}

/** ========================
 * Contenedor
 ============================*/

.pricing-wrapper {
    width: 1290px;
    margin: 40px auto 0;
    transform: translateY(8%);
}

.pricing-table {
    margin: 0 10px;
    text-align: center;
    width: 300px;
    float: left;
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
    -webkit-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

.pricing-table:hover {
    -webkit-transform: scale(1.06);
    -ms-transform: scale(1.06);
    -o-transform: scale(1.06);
    transform: scale(1.06);
}

.pricing-title {
    color: #FFF;
    background: #696969;
    padding: 20px 0;
    font-size: 2em;
    text-transform: uppercase;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.pricing-table.recommended .pricing-title {
    background: #696969;
}

.pricing-table.recommended .pricing-action {
    background: #696969;
}

.pricing-table .price {
    background: #403e3d;
    font-size: 3em;
    font-weight: 3500;
    padding: 20px 0;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.pricing-table .price sup {
    font-size: 0.4em;
    position: relative;
    left: 5px;
}

Comments

[WapSter]

Без кода никто не поможет.

Answer 1

[Артём Лукичев]

Замени html код на этот:

<h1 class="pricing-table-title">Тарифные планы</h1>

 	  <div class="pricing-table">
 	    <h3 class="pricing-title">мониторинг</h3>
 	    <div class="price">₽<sup>/ до <br></br></sup></div>
 	    <!-- Lista de Caracteristicas / Propiedades -->
 	    <ul class="table-list">
 	      <li><span>Цены </span></li>
 	      <li><span>Свойства </span></li>
 	      <li><span>Клас</span></li>
 	    </ul>
 	    <!-- Contratar / Comprar -->
 	    <div class="table-buy">
 	      <p><sup></sup></p>
 	      <a href="#" class="pricing-action">Comprar</a>
 	    </div>
 	  </div>

 	  <div class="pricing-table">
 	    <h3 class="pricing-title">Про</h3>
 	    <div class="price">₽<sup>/ до</sup></div>
 	    <!-- Lista de Caracteristicas / Propiedades -->
 	    <ul class="table-list">
 	      <li><span>Цены</span></li>
 	      <li><span>Свойствае</span></li>
 	      <li><span>Д</span></li>
 	    </ul>
 	    <!-- Contratar / Comprar -->
 	    <div class="table-buy">
 	      <p><sup></sup></p>
 	      <a href="#" class="pricing-action">Comprar</a>
 	    </div>
     </div>
 	  <div class="pricing-table">
 	    <h3 class="pricing-title">Проф</h3>
 	    <div class="price"><sup>/ дов</sup></div>
 	    <!-- Lista de Caracteristicas / Propiedades -->
 	    <ul class="table-list">
 	      <li><span>Цены</span></li>
 	      <li><span>Свойства </span></li>
 	      <li><span>Детал</span></li>
 	      <li><span>От </span></li>
 	    </ul>
       <!-- Contratar / Comprar -->
       
 	    <div class="table-buy">
 	      <p><sup></sup></p>
 	      <a href="#" class="pricing-action">Comprar</a>
 	    </div>
     </div>
     <div class="pricing-table">
       <h3 class="pricing-title">Бизнес-мониторинг</h3>
       <div class="price">₽<sup>/ до</sup></div>
       <!-- Lista de Caracteristicas / Propiedades -->
       <ul class="table-list">
        <li><span>Цены</span></li>
        <li><span>Свойства</span></li>
         <li><span>Детализированная в</span></li>
         <li><span>Отчет</span></li>
         <li><span>Анализ </span></li>
         <li><span>Сравнение </span></li>
         <li><span>План ы</span></li>
       </ul>
       <!-- Contratar / Comprar -->
       <div class="table-buy">
         <p><sup></sup></p>
         <a href="#" class="pricing-action">Comprar</a>
       </div>
     </div>
   </div>

Comments

[Frontend123]

Не помогло

[Артём Лукичев]

там код не удобный, наверное я вам не смогу помочь

Answer 2

[Варлам Ерофеич]

Картинка у автора одна, код другой, поэтому просто изменил и прокомментировал стили: