app/template/user_data/eat.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% block main %}
  4.     <div class="custom-page">
  5.         <div class="top-banner">
  6.           <img src="/html/user_data/assets/img/content/LINE_ALBUM_20250712_250714_19.jpg" style="width:100%;">
  7.         </div>
  8.         <p style="text-align:center; padding:0.5rem;font-size:1rem;">伊せ屋のパン生地は保存料・添加物・着色料などを一切使用していない完全無添加なので
  9. 安全・安心です！<br><br>買ったその日にお召し上がりいただくのが一番ですが冷凍したパンの
  10. "おすすめの解凍法"をお教えします！
  11. </p>
  12.     <div style="align-items:center; text-align:center;">
  13.         <h2 class="bakery-heading">★冷凍パンをお家でおいしく★</h2>
  14.     </div>
  15. </div>
  16.         <div class="cards-container">
  18.             <div class="card">
  19.                 <img src="{{ asset('/html/user_data/assets/img/content/LINE_ALBUM_20250331_250528_46.jpg', 'user_data') }}" alt="パンイメージ">
  20.     <div class="content">
  21.         <h2>調理パン</h2>                   
  22.         <p><span class="bread_name">クリームパン、小倉塩バターロール、おやき、パニーニ、ドッグパン</span>など</p>
  23.         
  24.         <div class="detail-item">
  25.             <span class="details">ｵｽｽﾒ①</span><span class="description">レンジで500w30秒 ＋ トースターで200℃ 3分30秒</span>
  26.         </div>
  27.         
  28.         <div class="detail-item">
  29.             <span class="details">ｵｽｽﾒ②</span><span class="description">自然解凍2時間(冬は3時間) ＋ トースターで200℃ 3分30秒</span>
  30.         </div>
  31.         
  32.         <div class="detail-item">
  33.             <span class="details">Point</span><span class="description">トースターで焼くときはアルミホイルをかぶせてください。</span>
  34.         </div>
  35.     </div>
  36. </div>
  37.             <div class="card">
  38.                 <img src="{{ asset('/html/user_data/assets/img/content/LINE_ALBUM_20250331_250528_44.jpg', 'user_data') }}" alt="パンイメージ">
  39.                     <div class="content">
  40.         <h2>食パン・プレーンなパン</h2>                   
  41.         <p><span class="bread_name">スライスした食パン、メロンパン、塩バターロール、プチパン</span>など</p>
  42.         
  43.         <div class="detail-item">
  44.             <span class="details">ｵｽｽﾒ①</span><span class="description">自然解凍1時間～3時間 ＋ トースターで180℃ 2分</span>
  45.         </div>
  46.         
  47.         <div class="detail-item">
  48.             <span class="details">ｵｽｽﾒ②</span><span class="description">レンジで500w30秒 ＋ トースターで180℃ 2分</span>
  49.         </div>
  50.         
  51.         <div class="detail-item">
  52.             <span class="details">Point</span><span class="description">トースターで焼くときは、霧吹きしてから焼くと中がしっとりします。</span>
  53.         </div>
  55.     </div>
  56.             </div>
  57.             <div class="card">
  58.                 <img src="{{ asset('/html/user_data/assets/img/content/LINE_ALBUM_20250331_250528_36.jpg', 'user_data') }}" alt="パンイメージ">
  59.                     <div class="content">
  60.                     <h2>カレーパン</h2> 
  61.                     <p><span class="bread_name">カレーパン、チーズカレーパン</span>など</p>
  62.                     
  63.                     <div class="detail-item">
  64.                         <span class="details">ｵｽｽﾒ①</span><span class="description">自然解凍1時間～3時間 ＋ トースターで180℃ 2分</span>
  65.                     </div>
  66.                     
  67.                     <div class="detail-item">
  68.                         <span class="details">ｵｽｽﾒ②</span><span class="description">レンジで500w30秒 ＋ トースターで180℃ 2分</span>
  69.                     </div>
  70.                 </div>
  71.             </div>
  72.             <div class="card">
  73.                 <img src="{{ asset('/html/user_data/assets/img/content/LINE_ALBUM_20250331_250528_54.jpg', 'user_data') }}" alt="パンイメージ">
  74.                     <div class="content">
  75.                     <h2>クロワッサン</h2> 
  76.                     <p><span class="bread_name">クロワッサン、デニッシュロール</span>など</p>
  77.                     
  78.                     <div class="detail-item">
  79.                         <span class="details">ｵｽｽﾒ①</span><span class="description">自然解凍1時間～3時間 ＋ トースターで160℃ 1分30秒</span>
  80.                     </div>
  81.                     
  82.                     <div class="detail-item">
  83.                         <span class="details">ｵｽｽﾒ②</span><span class="description">レンジで500w20秒 ＋ トースターで160℃ 1分30秒</span>
  84.                     </div>
  85.                     <div class="detail-item">
  86.                         <span class="details">Point</span><span class="description">トースターで焼く時は、霧吹きしてから焼くと中がしっとりします。</span>
  87.                     </div>
  88.                 </div>
  89.             </div>         
  90.         </div>
  91.     </div>
  92. {% endblock %}
  94. {% block stylesheet %}
  95. <style>
  96.     .bakery-heading {
  97.       display: inline-block;
  98.       background: linear-gradient(145deg, #fceabb, #f8b500);
  99.       color: #5c3a00; /* 焼きたてパンの焼き色風ブラウン */
  100.       padding: 1.5rem 2rem;
  101.       border-radius: 50%; /* 丸く */
  102.       font-size: 1.5rem;
  103.       text-align: center;
  104.       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
  105.       border: 4px double #e0a106; /* 飾り枠風 */
  106.       line-height: 1.2;
  107.       max-width: auto;
  108.       margin: 2rem auto;
  109.     }
  110.     .custom-page {
  111.         max-width: 1200px;
  112.         margin: 0 auto;
  113.         padding: 40px 20px;
  114.         /*font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
  115.     }
  117.     .cards-container {
  118.         display: grid;
  119.         grid-template-columns: repeat(2, 1fr);
  120.         gap: 20px;
  121.     }
  123.     .card {
  124.         background: #fff;
  125.         border-radius: 8px;
  126.         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  127.         overflow: hidden;
  128.         text-align: left;
  129.         padding: 0;
  130.         background:#fcfabb4a;
  131.     }
  133.     .card img {
  134.         width: 100%;
  135.         height: auto;
  136.         aspect-ratio: 4/3;
  137.         display: block;
  138.     }
  140.     .card .content {
  141.         padding: 16px;
  142.     }
  144.     .card .content h2 {
  145.         font-size: 1.5rem;
  146.         color: #8B4513;
  147.         padding: 6px 0;
  148.         border-bottom: solid 2px;
  149.     }
  151.     .card .content p {
  152.         font-size: 0.9rem;
  153.         color: #333333;
  154.         line-height: 1.5;
  155.         margin: 0;
  156.     }
  158.     @media (max-width: 768px) {
  159.          .bakery-heading {
  160.              font-size: 1rem;
  161.          }
  162.         .cards-container {
  163.             grid-template-columns: 1fr;
  164.         }
  166.         .custom-page {
  167.             padding: 20px 10px;
  168.         }
  170.         .card .content h2 {
  171.             font-size: 1.25rem;
  172.         }
  174.         .card .content p {
  175.             font-size: 0.75rem;
  176.         }
  177.     }
  178.         .header-container {
  179.           display: flex;
  180.           align-items: center;
  181.           justify-content: center;
  182.           background: linear-gradient(135deg, #FFF 34%, #f8b500 100%);
  183.           padding: 1.5rem;
  184.           box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  185.           margin: 1rem 0;
  186.         }
  187.         
  188.         .header-container-simple{
  189.           display: flex;
  190.           align-items: center;
  191.           justify-content: center;
  192.           margin: 1rem 0;
  193.         }
  194.         
  195.         .h2-container{
  196.         /*font-family: 'Hannari', serif ;*/
  197.         font-size: 2rem;
  198.         color: #8B4513;
  199.         text-align: center;
  200.         background: linear-gradient(135deg, #f8f8e6 30%, #ffc232 100%);
  201.         padding: 1rem;
  202.         box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
  203.             
  204.         }
  205.         
  206.         .custom-texter{
  207.         /*font-family: 'Hannari', serif ;*/
  208.         font-size: 1rem;
  209.         color: #333333;
  210.         line-height: 1.6;
  211.         margin-top: 1rem;
  212.         text-align:center;
  213.         }
  214.         
  215.         .header-logo {
  216.           max-width: 80px;
  217.           height: auto;
  218.         }
  219.         
  220.         .header-title {
  221.           font-size: 2rem;
  222.           color: #a0522d;
  223.           margin: 0;
  224.         }
  225.         .header-description{
  226.             margin:1rem;
  227.         }
  228.         .details{
  229.         width: 20%;
  230.         max-width:80px;
  231.         font-size: 16px;
  232.         word-wrap: break-word;
  233.         overflow-wrap: break-word;
  234.         font-weight: bold;
  235.         }
  236.         .bread_name{
  237.         font-weight: bold;
  238.         color: #8B4513;
  239.         }
  240.     .detail-item {
  241.         display: flex;
  242.         align-items: center;
  243.         margin: 4px 0;
  244.     }
  246.     .description {
  247.         width: 80%;
  248.         word-wrap: break-word;
  249.         overflow-wrap: break-word;
  250.     }
  251.     </style>
  252. {% endblock %}