Как сделать так, чтобы цены на карточки увеличивались от двух до четырех после того, как пользователь изменил размер браузера? - PullRequest
Новая
       22

Как сделать так, чтобы цены на карточки увеличивались от двух до четырех после того, как пользователь изменил размер браузера?

0 голосов
/ 14 апреля 2020

Я создавал прайс-страницу своего бизнес-сайта, но не могу сделать эту тему. Теперь пользователь может видеть две колонки ценовых карт. После того, как они увеличат размер окна браузера больше, чем у i-pad, я хочу, чтобы два столбца получили четыре столбца. Однако я добавил теги div вне тегов класса «cardContainer1, 2, 3 и 4», я не смог создать идеальный макет. Может кто-нибудь сказать мне, как это сделать? Я положил код здесь.

курсы. html

<section class="contactSection">
                <h1>JAPANESE PROGRAMS</h1>
                <h2 class="lessonTitle">General Japanese</h2>
                <p>You would learn..</p>
<section class="price-section">
<div class="cardContainer1">
 <div class="cardGroup1">
  <div class="card text-center">
    <div class="card-header">
      <h3>Beginner Japanese (JLPT N5)</h3>
    </div>
    <div class="card-body">
  <h4 class="card-title">
     <span class="highlight"><span class="price1">$35/50</span> minutes</span> </br><span class="warm-color"><span class="price2">$15/30</span> minutes for Trial </span>
  </h4>
      <p class="card-text">This course includes basic Japanese expressions such as</p>
      <ul class="list-group">
        <li class="list-group-item">
          <i class="fa fa-check fa-2x"></i></br> The theory of Japanese
        </li>
        <li class="list-group-item">
          <i class="fa fa-check fa-2x"></i></br> The count of numbers
        </li>
        <li class="list-group-item">
          <i class="fa fa-check fa-2x"></i></br> the basic grammars
        </li>
        <li class="list-group-item">
          <i class="fa fa-check fa-2x"></i></br> Hiraganas
        </li>
        <li class="list-group-item">
          <i class="fa fa-check fa-2x"></i></br> Katakanas
        </li>
        <li class="list-group-item">
            <i class="fa fa-check fa-2x"></i></br> Basic Kanjis
        </li>
        <li class="list-group-item">
            <i class="fa fa-check fa-2x"></i></br> Conversational expressions
        </li>
        <li><span class="etc">etc.</span></li>
      </ul>
      <a href="#contactModal" rel="modal:open" class="popBtn btn btn-danger btn-block mt-2">Inquire Now&#33;</a>
    </div>
    <div class="card-footer text-muted">
      1 Month Plan
    </div>
</div>
</div><!-- cardGroup1 -->
<div class="cardGroup2">
<div class="card text-center">
    <div class="card-header">
      <h3>Intermediate Japanese (JLPT N4 to N3)</h3>
    </div>
<div class="card-body">
  <h4 class="card-title">
     <span class="highlight"><span class="price1">$35/50</span> minutes</span> </br><span class="warm-color"><span class="price2">$15/30</span> minutes for Trial </span>
  </h4>
  <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  <ul class="list-group">
    <li class="list-group-item">
      <i class="fa fa-check fa-2x"></i></br> Grammars
    </li>
    <li class="list-group-item">
      <i class="fa fa-check fa-2x"></i></br> Kanjis
    </li>
    <li class="list-group-item">
      <i class="fa fa-check fa-2x"></i></br> Clearing the understanding of the multiple-choice questions 
    </li>
    <li class="list-group-item">
      <i class="fa fa-check fa-2x"></i></br> Reading skill
    </li>
    <li class="list-group-item">
      <i class="fa fa-check fa-2x"></i></br> Listening skill
    </li>
    <li class="list-group-item">
      <i class="fa fa-check fa-2x"></i></br> Writing skill
    </li>
    <li>
      <span class="etc">etc.</span>
    </li>
  </ul>
      <a href="#contactModal" rel="modal:open" class="btn btn-danger btn-block mt-2">Inquire Now&#33;</a>
</div>
<div class="card-footer text-muted">
  1 Month Plan
</div>
</div>
</div><!-- cardGroup2 -->
</div><!-- /cardContainer1 -->
<div class="cardContainer2">
<div class="cardGroup3">
<div class="card text-center">
<div class="card-header">
  <h3>Advanced Japanese (JLPT N2 to N1)</h3>
</div>
<div class="card-body">
  <h4 class="card-title">
     <span class="highlight"><span class="price1">$35/50</span> minutes</span> </br><span class="warm-color"><span class="price2">$15/30</span> minutes for Trial </span>
  </h4>
  <p class="card-text">This course includes basic Japanese expressions such as</p>
  <ul class="list-group">
    <li class="list-group-item">
      <i class="fa fa-check fa-2x"></i></br> Grammars 
    </li>
    <li class="list-group-item">
      <i class="fa fa-check fa-2x"></i></br> Reading skills with many Kanjis
    </li>
    <li class="list-group-item">
      <i class="fa fa-check fa-2x"></i></br> Listening skills at a fast-pace
    </li>
    <li class="list-group-item">
      <i class="fa fa-check fa-2x"></i></br> Japanese conversation
    </li>
    <li class="list-group-item">
      <i class="fa fa-check fa-2x"></i></br> Writing skills of a Japanese sentence with few errors
    </li>
    <li class="list-group-item">
          <i class="fa fa-check fa-2x"></i></br> Reading skills of Japanese sentences with a clear understanding of articles
    </li>
    <li class="list-group-item">
          <i class="fa fa-check fa-2x"></i></br> Japanese speaking skills without an intermittent stop
    </li>
        <li>
          <span class="etc">etc.</span>
    </li>

  </ul>
      <a href="#contactModal" rel="modal:open" class="btn btn-danger btn-block mt-2">Inquire Now&#33;</a>
</div>
<div class="card-footer text-muted">
  1 Month Plan
</div>
</div>
</div><!-- cardGroup3 -->
  <div class="cardGroup4">
    <div class="card text-center">
      <div class="card-header">
        <h3>Business Japanese and manners</h3>
      </div>
      <div class="card-body">
        <h4 class="card-title">
           <span class="highlight"><span class="price1">$40/50</span> minutes</span> </br><span class="warm-color"><span class="price2">$15/30</span> minutes for Trial </span>
        </h4>
        <p class="card-text">This course empowers you to be a businessman by training Japanese expression in both email and conversation and manners used in a business scene.</p>
        <ul class="list-group">
          <li class="list-group-item">
            <i class="fa fa-check fa-2x"></i></br> Keigo - polite expressions
          </li>
          <li class="list-group-item">
            <i class="fa fa-check fa-2x"></i></br> Sonkeigo - polite expressions of respecting other people used in business
          </li>
          <li class="list-group-item">
            <i class="fa fa-check fa-2x"></i></br> Kenjyogo - polite expressions in a humble manner used in business
          </li>
          <li class="list-group-item">
            <i class="fa fa-check fa-2x"></i></br> How to write a résume, Rirekisho in Japanese
          </li>
          <li class="list-group-item">
            <i class="fa fa-check fa-2x"></i></br> How to have successful interviews in Japan
          </li>
          <li><span class="etc">etc.</span></li>
        </ul>
          <a href="#contactModal" rel="modal:open" class="btn btn-danger btn-block mt-2">Inquire Now&#33;</a>
      </div>
      <div class="card-footer text-muted">
        1 Month Plan
      </div>
    </div>
  </div><!-- cardGroup4 -->
</div><!-- cardContainer2 -->
</section><!-- price section -->

услуги. css

.price-section {
  width: 100%;
  height: 1000px;
  margin: 0 auto;
  background: #fff;
}
.contactForm {
    width: 90%;
    background: #e32b7a;
    margin: 0 5%;
    color: white;
    padding: 4% 0;
    border-radius: 30px;
}
#content {
    width: 80%;
    margin: 0 10%;
}
#content input {
    width: 100%;
    height: 45px;
    margin: 0; 
    padding: 0;
}
#content div {
    list-style: none;
    padding: 10px 0;
}
#content textarea {
    width: 100%;
    height: 100px;
}
.cardcContainer1 {
  width: 20%;
  margin: 5% 2.5%;
  border: 1px solid #d6d6d6;
  border-radius: 5px;
  float: left;
}
.cardcContainer2 {
  width: 20%;
  margin: 5% 2.5%;
  border: 1px solid #d6d6d6;
  border-radius: 5px;
  float: left;
}
.cardGroup1 {
  width: 13.75%;
  margin: 5% 2.5%;
}
.cardGroup2 {
  width: 13.75%;
  margin: 5% 2.5%;
}
.cardContainer1 div {
  text-align: center;
}
.cardContainer2 div {
  text-align: center;
}
.cardContainer1 ul {
  text-align: center;
}
.cardContainer2 ul {
  text-align: center;
}
.cardContainer1 ul li{
  text-align: center;
}
.cardContainer2 ul li{
  text-align: center;
}
.cardcContainer3 {
  width: 20%;
  margin: 5% 2.5%;
  border: 1px solid #d6d6d6;
  border-radius: 5px;
  float: left;
}
.cardcContainer4 {
  width: 20%;
  margin: 5% 2.5%;
  border: 1px solid #d6d6d6;
  border-radius: 5px;
  float: left;
}
.cardGroup3 {
  width: 13.75%;
  margin: 5% 2.5%;
}
.cardGroup4 {
  width: 13.75%;
  margin: 5% 2.5%;
}
.cardContainer3 div {
  text-align: center;
}
.cardContainer4 div {
  text-align: center;
}
.cardContainer3 ul {
  text-align: center;
}
.cardContainer4 ul {
  text-align: center;
}
.cardContainer3 ul li{
  text-align: center;
}
.cardContainer4 ul li{
  text-align: center;
}
.card {
    width: 13.75%;
  margin: 5% 2.5%;
}
...