Анимированный таб в виде спойлера rip Бармен - Форум
Четверг
23.09.2021
14:10
 
X-Files
 
Онлайн радио #radiobells_script_hash
Мини-чат ·

Для добавления сообщения зарегистрируйтесь.
Регистрация Вход . Новые сообщения · Участники · Правила форума · RSS

  • Страница 1 из 1
  • 1
Форум »  SOFT, Windows, Android » Веб » Анимированный таб в виде спойлера rip Бармен
Анимированный таб в виде спойлера rip Бармен
БарменДата: Четверг, 26.08.2021, 23:25 | Сообщение # 1
Группа: Альянс
Сообщений: 43
Статус:


Рипал: Бармен

Ссылка на скачивание!

Вставляем в нижнею часть сайта:

Код
<link rel="stylesheet" crossorigin="anonymous" href="/cdn/fontawesome/subset/css/all.min.css">
<section class="ds-faq-section">
   <div class="ds-faq-container">
      <div class="wrap-collabsible">
         <input id="questionA" class="toggle" type="checkbox">
         <label for="questionA" class="ds-faq-toggle-wrapper">Как я могу получить зарплату?</label>
         <div class="collapsible-content">
            <div class="content-inner">
               <p class="kfds-font-secondary">
                  Мгновенно и напрямую на ваш счет PayPal или Stripe. Мы берем 0% комиссии с пожертвований и не удерживаем ваши деньги. Они идут напрямую от вашего сторонника к вам. Просто!
               </p>
            </div>
         </div>
      </div>
      <div class="wrap-collabsible">
         <input id="questionB" class="toggle" type="checkbox">
         <label for="questionB" class="ds-faq-toggle-wrapper">Сколько это стоит?</label>
         <div class="collapsible-content">
            <div class="content-inner">
               <p class="kfds-font-secondary">
                  В отличие от почти всех остальных, мы не берем долю с ваших пожертвований! Премиум-функции, такие как Членство, Магазин Ko-fi и Комиссионные, могут быть оплачены либо через небольшую подписку на Ko-fi Gold, либо через низкую 5% комиссию за транзакцию. Решайте сами.
               </p>
            </div>
         </div>
      </div>
      <div class="wrap-collabsible">
         <input id="questionC" class="toggle" type="checkbox">
         <label for="questionC" class="ds-faq-toggle-wrapper">Нужно ли мне покупать кофе?</label>
         <div class="collapsible-content">
            <div class="content-inner">
               <p class="kfds-font-secondary">
                  Вовсе нет! Мы действительно любим кофе, но это всего лишь дружеская метафора. Многие создатели говорили нам, что гораздо приятнее попросить поклонников "купить кофе", чем просто "пожертвовать", чтобы поддержать вашу работу. Вы также можете заменить "кофе" на что-то другое или перейти на традиционный режим пожертвований.
               </p>
            </div>
         </div>
      </div>
      <div class="wrap-collabsible">
         <input id="questionD" class="toggle" type="checkbox">
         <label for="questionD" class="ds-faq-toggle-wrapper">Сколько я могу заработать?</label>
         <div class="collapsible-content">
            <div class="content-inner">
               <p class="kfds-font-secondary">
                  Начните зарабатывать на Ko-fi независимо от того, насколько велика ваша аудитория. Тысячи авторов зарабатывают свои первые деньги на Ko-fi, а некоторые заработали более $100 тыс. только на пожертвованиях!
               </p>
            </div>
         </div>
      </div>
      <div class="wrap-collabsible">
         <input id="questionE" class="toggle" type="checkbox">
         <label for="questionE" class="ds-faq-toggle-wrapper">Я не уверен, стоит ли мне использовать Ko-fi или Patreon? В чем разница?</label>
         <div class="collapsible-content">
            <div class="content-inner">
               <p class="kfds-font-secondary">
                  Создатели говорят нам, что Ko-fi - это более простая, менее напряженная альтернатива Patreon, и вы можете делать гораздо больше с помощью Ko-fi. Принимайте пожертвования, проводите краудфандинг, продавайте продукты и предлагайте комиссионные - и все это в одном месте.
               </p>
               <p class="kfds-font-secondary">
                  Вы также сохраняете больше своих денег на Ko-fi. Мы берем 0% от пожертвований, а для создателей Ko-fi Gold вообще нет платы за платформу!
               </p>
            </div>
         </div>
      </div>
      <div class="wrap-collabsible hidden">
         <input id="questionF" class="toggle" type="checkbox">
         <label for="questionF" class="ds-faq-toggle-wrapper">Кому принадлежит Ko-fi?</label>
         <div class="collapsible-content">
            <div class="content-inner">
               <p class="kfds-font-secondary">
                  Мы созданы и принадлежим создателям с 2012 года. Мы не финансируемся венчурными капиталистами, которые ищут следующие компании стоимостью $1 млрд. Мы увлеченно вырастили Ko-fi до 500 тыс. создателей, сосредоточившись на том, что нужно создателям, а не на том, чего хотят внешние спонсоры.
               </p>
            </div>
         </div>
      </div>
      <div class="wrap-collabsible">
         <input id="questionG" class="toggle" type="checkbox">
         <label for="questionG" class="ds-faq-toggle-wrapper">Какие валюты вы предлагаете?</label>
         <div class="collapsible-content">
            <div class="content-inner">
               <p class="kfds-font-secondary">
                  Вы можете принимать пожертвования или платежи в большинстве валют, но вы можете сэкономить на комиссии за конвертацию валюты и получать поддержку напрямую, выбрав базовую валюту USD, CAD, EUR, GBP, AUD, IRD, YEN или THB.
               </p>
            </div>
         </div>
      </div>
      <div class="wrap-collabsible">
         <input id="questionH" class="toggle" type="checkbox">
         <label for="questionH" class="ds-faq-toggle-wrapper">Как я могу связаться с вами?</label>
         <div class="collapsible-content">
            <div class="content-inner">
               <p class="kfds-font-secondary">
                  Напишите нам в Twitter или Instagram или задайте вопрос в центре помощи.
               </p>
            </div>
         </div>
      </div>
   </div>
</section>
CSS:

Код
@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');
.ds-faq-section {
    background-color: #eff1f3;
    padding: 24px 0;
}

.ds-faq-container {
    max-width: 960px;
    margin: 0 auto;
}

.wrap-collabsible {
    border-radius: 14px;
    margin: 16px;
    box-shadow: rgb(45 45 45 / 5%) 0px 2px 2px, rgb(49 49 49 / 5%) 0px 4px 4px, rgb(42 42 42 / 5%) 0px 8px 8px, rgb(32 32 32 / 5%) 0px 16px 16px;
    transition: all ease-in-out 100ms;
}

.wrap-collabsible:hover,
.wrap-collabsible:focus {
    transform: scale(1.02);
}

input[type='checkbox'] {
    display: none;
}

input,
a {
    font-size: 16px;
    font-family: 'Jost', sans-serif;
    color: #000;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.ds-faq-toggle-wrapper {
    display: block;
    font-weight: bold;
    font-family: 'Jost', sans-serif;
    font-size: 20px;
    text-align: left;
    padding: 16px;
    color: #000;
    background: #fff;
    cursor: pointer;
    margin-bottom: 0;
    border-radius: 14px;
    transition: all 0.25s ease-out;
}

.ds-faq-toggle-wrapper::before {
    content: '\f067';
    font-family: 'Font Awesome 5 Pro';
    display: inline-block;
    vertical-align: middle;
    margin-right: 16px;
    transform: translateY(-2px);
    transition: transform .2s ease-out;
    color: #ff5f5f;
}

.toggle:checked+.ds-faq-toggle-wrapper::before {
    transform: rotate( -180deg) translateX(-1px);
    content: '\f068';
    font-family: 'Font Awesome 5 Pro';
    display: inline-block;
    color: #ff5f5f;
}

.collapsible-content {
    max-height: 0px;
    overflow: hidden;
    transition: max-height .25s ease-in-out;
}

.toggle:checked+.ds-faq-toggle-wrapper+.collapsible-content {
    max-height: 100vh;
}

.toggle:checked+.ds-faq-toggle-wrapper {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.collapsible-content .content-inner {
    background: #f7f7f7;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    padding: 16px;
}

.kfds-font-secondary {
    font-family: 'Jost', sans-serif;
}
 
Форум »  SOFT, Windows, Android » Веб » Анимированный таб в виде спойлера rip Бармен
  • Страница 1 из 1
  • 1
Поиск:


СЕЗОН КАТАСТРОФ © 2021