app/template/user_data/taiken.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% block main %}
  7. <article class="experience">
  8. <section class="mv">
  9. <p class="five">手ぶらで気楽に♪</p>
  10. <h2>多肉寄せ植え体験</h2>
  11. <p class="cat">随時開催中!!</p>
  13. <div class="tobtn">
  14. <p class="fuki">
  15. ご予約・お問い合わせは<br>こちらから
  16. </p>
  17. <a href="#toform" class="gbtn">ご予約・お問合せ</a>
  18. </div>
  19. <p class="und">予約なしでもお席が空いていれば体験可能です。<br>通常お席のご用意が4席しかございません、4名様以上でご希望の場合は、<br>お問い合わせください。</p>
  20. </section>
  22. <section class="course">
  23. <h2>ブリキもしくは陶器鉢から選択、多肉植物の数が異なります。<br>
  24. <h2>
  27. <table>
  28.     <tr>
  29.         <th>鉢</th>
  30.         <th>多肉個数</th>
  31.         <th>価格</th>
  32.     </tr>
  33.     <tr>
  34.         <td>a．コーヒーカップソーサー付ブリキ</td>
  35.         <td>5個+セダム</td>
  36.         <td>1,600円</td>
  37.     </tr>
  38.     <tr>
  39.         <td>b．取っ手付きバケツブリキ</td>
  40.         <td>8個+セダム</td>
  41.         <td>1,900円</td>
  42.     </tr>
  43.     <tr>
  44.         <td>c.　陶器鉢</td>
  45.         <td>8個+セダム</td>
  46.         <td>1,900円</td>
  47.     </tr>
  49. </table>
  52. </section>
  54. <section class="nagare">
  55. <h2><strong>寄せ植え体験の流れ</strong></h2>
  56. <ul>
  57. <li>
  58. <p>お好みの鉢を選んでスタッフに渡します。<br>スタッフがお席と土をご用意します。</p>
  59. <div class="pic">
  60. <img src="/html/user_data/assets/images/taiken/pic01.png" alt="">
  61. </div>
  62. </li>
  63. <li>
  64. <p>多肉を選びます。</p>
  65. <div class="pic">
  66. <img src="/html/user_data/assets/images/taiken/pic02.png" alt="">
  67. </div>
  68. </li>
  69. <li>
  70. <p>お席で寄せ植えスタート</p>
  71. <div class="pic">
  72. <img src="/html/user_data/assets/images/taiken/pic03.png" alt="">
  73. </div>
  74. </li>
  75. <li>
  76. <p>楽しく寄せ植え体験できれば完成です！</p>
  77. <div class="pic">
  78. <img src="/html/user_data/assets/images/taiken/pic04.png" alt="">
  79. </div>
  80. </li>
  81. </ul>
  82. <div class="under">
  83. <div class="pic">
  84. <img src="/html/user_data/assets/images/taiken/pic05.png" alt="">
  85. </div>
  86. <div class="text">
  87. <p>初めての方でも大丈夫、スタッフがコツ等アドバイスします。<br>セダムはご自由にお使いいただけます。<br>寄せ植えの最後に隙間にドンドン入れ放題です。</p>
  88. <p class="indm">※時期によりセダムの種類は多少変わります</p>
  89. </div>
  90. </div>
  91. </section>
  93. <section id="toform">
  94. <h2>ご予約・お問合せ先</h2>
  95. <p class="txtC">『多肉寄せ植え体験』のご予約・お問い合わせは下記フォームより（寄せ植えスタート時間11時～16時の間）
  97. <form method="post" action="/mail.php">
  98. <input type="hidden" id="token" name="token" value="">
  99. <table>
  100.     <tr>
  101.         <td>お名前<i>必須</i></td>
  102.         <td><input type="text" name="お名前" value="" required></td>
  103.     </tr>
  104.     <tr>
  105.         <td>ふりがな<i>必須</i></td>
  106.         <td><input type="text" name="ふりがな" value="" required></td>
  107.     </tr>
  108.     <tr>
  109.         <td>メールアドレス<i>必須</i></td>
  110.         <td><input type="text" name="メールアドレス" value="" required></td>
  111.     </tr>
  112.     <tr>
  113.         <td>お電話番号</td>
  114.         <td><input type="text" name="電話番号" value=""></td>
  115.     </tr>
  117.     <tr>
  118.         <td>ご希望日時</td>
  119.         <td>
  120.         <input type="text" name="希望日" value="" class="calendar">
  121.         
  122.         
  123.         <p>時間：<label><input type="radio" name="時間" value="午前">午前</label>
  124.         <label><input type="radio" name="時間" value="午後">午後</label></p>
  125.         </td>
  126.     </tr>
  127.     <tr>
  128.         <td>お問合せ内容（ご予約人数を記載ください）</td>
  129.         <td><textarea name="お問合せ内容"></textarea></td>
  130.     </tr>
  131. </table>
  132. <p class="submit"><button type="submit" name="submit">送信</button></p>
  133. </form>
  134. </section>
  136. </article>
  138. {% endblock %}