app/template/osechi/index.twig line 1

Open in your IDE?
  2. {% extends 'default_frame.twig' %}
  4. {% set body_class = 'front_page' %}
  6. {% block stylesheet %}
  7. <link rel="stylesheet" href="{{ asset('assets/css/top.css') }}?{{ env('CSS_PARAM') }}">
  8. <link rel="preconnect" href="https://fonts.googleapis.com">
  9. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  11. <link rel="preload" href="https://fonts.googleapis.com/css2?family=Allura&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Allura&display=swap"></noscript>
  13. <link rel="preload" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"></noscript>
  14. <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"></noscript>
  17. <style>
  18.     .t-container {
  19.         position: relative;
  20.         width:100%;
  21.     }
  22.     img{
  23.         width: 100%;
  24.     }
  25.     .t-container p.title{
  26.         font-family: 'Allura', cursive;
  27.         position: absolute;
  28.         top: 7%;
  29.         left: 5%;
  30.         font-size: 70px!important;
  31.         color:#fff;
  32.         margin:0;
  33.     }
  35.     
  36.     .lead {
  37.         margin: 3% 10%;
  38.     }
  39.     .ec-shelfGrid.col_max5 {
  40.         justify-content: center;
  41.     }
  42.     
  43.     ul.slide-items {
  44.         padding-left: 0;
  45.     }
  46.     .slide-items {
  47.       width: 100%;
  48.       height: 100%;
  49.     }
  50.     .slide-items li {
  51.         margin: 0 10px;
  52.     }
  54.     .slide-items img {
  55.       width: 100%;
  56.       object-fit: cover;
  57.     }
  59. /*
  60.     .slide-items {
  61.         margin-top: 50px;
  62.     }
  63. */
  64.     
  65.     .slide-items p {
  66.         max-width: 100%!important;
  67.         text-align: left;
  68.     }
  69.     
  70.     @media only screen and (max-width: 768px) {
  71.         .slide-items .slick-list {
  72.           padding: 0 12% 0 0!important;    
  73.         }
  76.         .slide-items li{
  77.             margin: 0 5px;
  78.         }
  80.         .lead {
  81.             margin: 7% 5%;
  82.         }
  83.         .lead p{
  84.             font-size: 14px;
  85.         }
  86.         .t-container p.title{
  87.             top: 10%;
  88.             left: 5%;
  89.             font-size: 50px!important;
  90.         }
  91.     }
  93. </style>
  95. {% endblock %}
  97. {% block javascript %}
  98. <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  99. <script>
  100. $(function() {
  101.   $('.more-btn').on('click', function() {
  102. //    if( $(this).children().is('.open') ) {
  103. //      $(this).html('<p class="close">閉じる</p>').addClass('close-btn');
  104.       $(this).parent().removeClass('slide-up').addClass('slide-down');
  105.       $(this).remove();
  106. //    } else {
  107. //      $(this).html('<p class="open">もっと見る</p>').removeClass('close-btn');
  108. //      $(this).parent().removeClass('slide-down').addClass('slide-up');
  109. //    }
  110.   });
  111. });
  112.  $(".slide-items").slick(
  113. {
  114.     infinite: true,
  115.     slidesToShow: 3,
  116.     arrows: false,    
  117. /*    
  118.     centerMode: true,
  119.     centerPadding: "20px",
  120. */
  121.     responsive: [
  122.       {
  123.         breakpoint: 768, // 399px以下のサイズに適用
  124.         settings: {
  125.             slidesToShow: 1,
  126.             slidesToScroll: 1,
  127.         },
  128.       },
  129.     ],
  130. }
  131. );
  132. </script>
  133. {% endblock javascript %}
  135. {% block main %}
  136. {# ヘッドプロモーション #}
  137. <div class="t-container">
  138. <h1>
  139.   <picture>
  140.       <source srcset="/awd/html/template/osechi/assets/img/top/main_visual_sp.webp" media="(max-width: 768px)" width="750" height="1126">
  141.       <img src="/awd/html/template/osechi/assets/img/top/main_visual.webp" alt="Supercar rental in Tokyo {{app.request.query.get('hotel')}}" width="1400" height="700">
  142.   </picture>
  143. </h1>
  144.   <p class="title">A Wonderful Day</p>
  145.   <p class="japanise main-subtitle">- Exclusive Mobility Service for Your Finest Moments -</p>
  146. {#
  147.   <p class="japanise">人生に最高のモーメントを</p>
  148. #}
  149. </div>
  151. <div class="lead">
  152. <p style="
  153.     border: 2px solid #C8AF75;
  154.     text-align: center;
  155.     padding: 2% ;
  156.     margin-bottom: 6%;
  157.     display: none;
  158. ">当サイトは、Club AWD 会員限定の<br class="spOnly">サービスとなります。
  159. </p>
  161. <p>
  162. At A Wonderful Day, we redefine transportation as an opportunity for indulgent experiences. We provide you with more than just a ride; we offer you a luxurious journey through time, where every moment becomes a highlight.
  163. </p>
  166.     <div class="ec-pickupRole limitedoffer">
  167.         <div class="ec-secHeading">
  168.             <h2 class="text-span updown ec-secHeading__en">
  169.                 Our Service
  170.             </h2>
  171.         </div>
  172.     </div>
  173.     <div class="appearEffect outservice">
  174.         <ul class="slide-items">
  175.             <li>
  176.                 <p>
  177.                 <img src="/awd/html/template/osechi/assets/img/top/our1.webp" alt="">
  178.                 </p>
  179.                 <p>
  180. "Timeless Wheels"
  181.                 </p>
  182.                 <p>
  183. Step into a world where luxury meets mobility. Our curated collection of vehicles spans from the iconic 1950s Porsche to the classic 1960s Jaguar, the powerful 1970s Ferrari, the elegant 1980s Mercedes-Benz, and the latest supercars, convertibles, and SUVs.
  184.                 </p>
  185.             </li>
  186.             <li>
  187.                 <p>
  188.                 <img  src="/awd/html/template/osechi/assets/img/top/our2.webp" alt="">
  189.                 </p>
  190.                 <p>
  191. "Sea Ventures"
  192.                 </p>
  193.                 <p>
  194. Take to the waters in style with our range of pleasure boats, from the classic 34-ft Aqua Riva, perfect for exploring Tokyo's Sumida River, to the opulent 80-ft super yachts suitable for accommodation and unforgettable parties.
  195.                 </p>
  196.             </li>
  197.             <li>
  198.                 <p>
  199.                 <img  src="/awd/html/template/osechi/assets/img/top/our3.webp" alt="">
  200.                 </p>
  201.                 <p>
  202. "Sky Journeys"
  203.                 </p>
  204.                 <p>
  205. For a unique perspective, charter one of our spacious 6-passenger seater helicopters. Enjoy family travel in the lap of luxury, with ample seating and time in the sky to create treasured moments.
  206.                 </p>
  207.             </li>
  208.         </ul>
  209.         <a class="ec-shopCollectionBtn" href="./service/" tabindex="0">read more</a>
  210.     </div>
  212. {#
  213. <p class="top-msg-titles"><strong>Our Service</strong></p>
  214. <p>
  215. A Wonderful Dayでは、「車」「船」「ヘリコプター」を、単なる移動手段（モビリティ）では無く、『豊かな瞬間（モーメント）を提供してくれる最高のパートナー』として再定義します。生涯記憶に残る特別な一日＝A Wonderful Dayとなる、人生最高のハレの日を贈ります
  216. </p>
  218.  <ul class="slide-items">
  219.     
  220.     <li>
  221.         <p>
  222.         <img src="/awd/html/template/osechi/assets/img/top/our1.webp" alt="Timeless Wheels" width="318" height="212">
  223.         </p>
  224.         <p>
  225.         『Timeless Wheels』
  226.         </p>
  227.         <p>
  228.         世界の自動車史を象徴するクラシックカーから、最新のスーパーカーやSUVまで、新旧名車の数々が、時空を超えたタイムレスなドライビング体験をお届けします
  229.         </p>
  230.     </li>
  231.     <li>
  232.         <p>
  233.         <img  src="/awd/html/template/osechi/assets/img/top/our2.webp" alt="Sea Ventures" width="318" height="212">
  234.         </p>
  235.         <p>
  236.         『Sea Ventures』
  237.         </p>
  238.         <p>
  239. クラシカルボートでの東京の運河探索から、プレジャーボートでの海水浴、BBQ、スーパーヨットでの優雅なクルージングまで、家族や仲間たちとの冒険心あふれる心地よい航海の時間をサポートします<br><br>
  240.         </p>
  241.     </li>
  242.     <li>
  243.         <p>
  244.         <img  src="/awd/html/template/osechi/assets/img/top/our3.webp" alt="Sky Journeys" width="318" height="212">
  245.         </p>
  246.         <p>
  247.         『Sky Journeys』
  248.         </p>
  249.         <p>
  250. 広々としたVIP専用チャーター機で、目的地まで最短かつ贅沢な空の旅。エレガントな空間から眺める東京シティービューから富士山まで、凝縮された非日常のスカイジャーニーをお楽しみください<br><br>
  251.         </p>
  252.     </li>
  253.  </ul>
  254. <br><br>
  255. <strong>『Timeless Wheels』</strong><br>
  256. 世界の自動車史を象徴するクラシックカーから、最新のスーパーカーやSUVまで、新旧名車の数々が、時空を超えたタイムレスなドライビング体験をお届けします<br><br>
  258. <strong> 『Sea Ventures』</strong><br>
  259. クラシカルボートでの東京の運河探索から、プレジャーボートでの海水浴、BBQ、スーパーヨットでの優雅なクルージングまで、家族や仲間たちとの冒険心あふれる心地よい航海の時間をサポートします<br><br>
  260. <strong>『Sky Journeys』</strong><br>
  261. 広々としたVIP専用チャーター機で、目的地まで最短かつ贅沢な空の旅。エレガントな空間から眺める東京シティービューから富士山まで、凝縮された非日常のスカイジャーニーをお楽しみください<br><br>
  262. </p>
  263. #}
  264. </div>
  266. {% endblock %}