[text] kod

Viewer

  1. html
  2.  
  3. <!DOCTYPE html>
  4. <html style="font-size: 16px;" lang="ru">
  5.   <head>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta charset="utf-8">
  8.     <meta name="description" content="">
  9.     <title>Coffee Republic</title>
  10.     <link rel="stylesheet" href="css/Style.css" media="screen">
  11.     <link rel="stylesheet" href="css/lib.css" media="screen">
  12.     <link rel="stylesheet" href="css/StyleLib.css" media="screen">
  13.     <meta name="referrer" content="origin">
  14.     <link id="u-theme-google-font" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Open+Sans:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i">
  15.     <link id="u-page-google-font" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700|Lato:100,100i,300,300i,400,400i,700,700i,900,900i|Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i">
  16. </head>
  17.   <body data-path-to-root="/" data-include-products="false" class="u-body u-xl-mode" data-lang="ru">
  18.     <button id="generateOrderButton" class="show-popup">Show Popup</button>
  19.     <div class="popup-container">
  20.         <div class="popup-box">
  21.             <h1>Успешно!</h1>
  22.             <p id="zakazat">Заказ номер 6300 успешно отправлен в предприятие!</p>
  23.             <button class="close-btn">ОК</button>
  24.         </div>
  25.     </div>
  26.     <script src="js/index.js"></script>
  27.     <header class="u-clearfix u-header u-header" id="sec-7146">
  28. </header>
  29.     <section class="u-align-right u-clearfix u-image u-shading u-section-1" id="carousel_8256" data-image-width="1920" data-image-height="1019">
  30.       <div class="u-clearfix u-sheet u-valign-middle u-sheet-1">
  31.         <div class="u-align-left u-container-style u-group u-opacity u-opacity-80 u-palette-2-dark-3 u-radius-20 u-shape-round u-group-1" data-animation-name="customAnimationIn" data-animation-duration="1500">
  32.           <div class="u-container-layout u-container-layout-1">
  33.             <h1 class="u-text u-text-1" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="500">Крафтовая кофейня Coffee Republic<br>
  34.             </h1>
  35.             <p class="u-text u-text-2" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="500">Coffee Republic - место, где кофе превращается в настоящее искусство, и каждое посещение оставляет приятные воспоминания.</p>
  36.             </p>
  37.             <a href="#" class="u-active-white u-border-2 u-border-white u-btn u-btn-round u-button-style u-hover-white u-none u-radius-50 u-text-active-black u-text-hover-black u-btn-2" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="500">Меню</a>
  38.           </div>
  39.         </div>
  40.       </div>
  41.     </section>
  42.     <section class="u-align-center u-clearfix u-section-2" id="carousel_c3ae">
  43.       <div class="u-clearfix u-sheet u-valign-middle u-sheet-1">
  44.         <h2 class="u-text u-text-1" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="500"> Кофе & Десерты</h2>
  45.         <div class="u-clearfix u-layout-wrap u-layout-wrap-1">
  46.           <div class="u-layout">
  47.             <div class="u-layout-row">
  48.               <div class="u-align-center u-container-style u-layout-cell u-size-30 u-layout-cell-1">
  49.                 <div class="u-container-layout u-valign-bottom u-container-layout-1">
  50.                   <img class="u-expanded-width u-image u-image-contain u-image-default u-image-1" src="images/tgrd-min-min.png" alt="" data-image-width="1000" data-image-height="500" data-animation-name="customAnimationIn" data-animation-duration="1500">
  51.                   <p class="u-text u-text-2" data-animation-name="customAnimationIn" data-animation-duration="1000" data-animation-delay="750"> Наша кофейня предлагает отборные сорта кофе, которые порадуют даже самых взыскательных гурманов. Мы заботимся о качестве каждого зерна и вручную обжариваем его, чтобы достичь идеального вкуса. Покупая у нас, вы получаете неповторимое наслаждение от чашки ароматного и нежного напитка.</p>
  52.                   <div class="u-align-center u-container-style u-expanded-width u-group u-opacity u-opacity-95 u-palette-2-base u-radius-20 u-shape-round u-group-1" data-animation-name="customAnimationIn" data-animation-duration="1750" data-animation-delay="500">
  53.                     <div class="u-container-layout u-valign-middle u-container-layout-2">
  54.                       <h5 class="u-text u-text-3"> В нашей кофейне работают самые лучшие баристы!</h5>
  55.                       <p class="u-text u-text-4">Они ежедневно радуют вас наивкуснейшим кофе.</p>
  56.                     </div>
  57.                   </div>
  58.                 </div>
  59.               </div>
  60.               <div class="u-align-center u-container-style u-layout-cell u-size-30 u-layout-cell-2">
  61.                 <div class="u-container-layout u-valign-top u-container-layout-3">
  62.                   <div class="u-align-center u-container-style u-expanded-width u-group u-palette-2-base u-radius-20 u-shape-round u-group-2" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="500">
  63.                     <div class="u-container-layout u-valign-middle u-container-layout-4">
  64.                       <h5 class="u-text u-text-5"> Лучшие кондитеры только в нашем заведении!</h5>
  65.                       <p class="u-text u-text-6">Поднимут вам настроение вкусным десертом.</p>
  66.                     </div>
  67.                   </div>
  68.                   <p class="u-text u-text-default u-text-7" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="750"> В кофейне, вы полюбите вкусные десерты. Попробуйте мягкие и ароматные кексы, свежий и пышный чизкейк, или сочные фруктовые тарты. Насладитесь шоколадным брауни, карамельными маффинами и искусными макаронами. Ваше гурманство будет удовлетворено!</p>
  69.                   <img class="u-expanded-width u-image u-image-contain u-image-default u-image-2" src="images/cxcc-min.png" alt="" data-image-width="1274" data-image-height="637" data-animation-name="customAnimationIn" data-animation-duration="1500">
  70.                 </div>
  71.               </div>
  72.             </div>
  73.           </div>
  74.         </div>
  75.         </p>
  76.       </div>
  77.     </section>
  78.     <section class="u-align-center u-clearfix u-section-3" id="carousel_6aff">
  79.       <img class="u-align-left u-expanded-width u-image u-image-default u-image-1" data-image-width="1920" data-image-height="985" src="../src/images/barista.jpg">
  80.       <div class="u-list u-list-1">
  81.         <div class="u-repeater u-repeater-1">
  82.           <div class="u-align-left u-container-style u-list-item u-radius-20 u-repeater-item u-shape-round u-white u-list-item-1" data-animation-name="customAnimationIn" data-animation-duration="1500">
  83.             <div class="u-container-layout u-similar-container u-container-layout-1">
  84.               <h2 class="u-custom-font u-font-oswald u-text u-text-default u-text-palette-2-base u-text-1" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="500">01</h2>
  85.               <h5 class="u-text u-text-2" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="750">О нас</h5>
  86.               <p class="u-text u-text-3" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="750"> Кофейня Coffee Republic начала свою работу в 2011 году и уже успела завоевать сердца множества посетителей.</p>
  87.             </div>
  88.           </div>
  89.           <div class="u-align-left u-container-style u-list-item u-radius-20 u-repeater-item u-shape-round u-white u-list-item-2" data-animation-name="customAnimationIn" data-animation-duration="1500">
  90.             <div class="u-container-layout u-similar-container u-container-layout-2">
  91.               <h2 class="u-custom-font u-font-oswald u-text u-text-default u-text-palette-2-base u-text-4" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="500">02</h2>
  92.               <h5 class="u-text u-text-5" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="750"> О десертах</h5>
  93.               <p class="u-text u-text-6" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="750"> В кофейне можно насладиться разнообразными десертами: тортом, пирожными, макаронами, брауни, маффинами, чизкейком, зефиром.</p>
  94.             </div>
  95.           </div>
  96.           <div class="u-align-left u-container-style u-list-item u-radius-20 u-repeater-item u-shape-round u-white u-list-item-3" data-animation-name="customAnimationIn" data-animation-duration="1500">
  97.             <div class="u-container-layout u-similar-container u-container-layout-3">
  98.               <h2 class="u-custom-font u-font-oswald u-text u-text-default u-text-palette-2-base u-text-7" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="500">03</h2>
  99.               <h5 class="u-text u-text-8" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="750"> О напитках</h5>
  100.               <p class="u-text u-text-9" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="750"> В кофейне предлагаются разнообразные напитки: чай, горячий шоколад, фруктовый сок, чай с мятой, холодный чай, и лимонад.</p>
  101.             </div>
  102.           </div>
  103.           <div class="u-align-left u-container-style u-list-item u-radius-20 u-repeater-item u-shape-round u-white u-list-item-4" data-animation-name="customAnimationIn" data-animation-duration="1500">
  104.             <div class="u-container-layout u-similar-container u-container-layout-4">
  105.               <h2 class="u-custom-font u-font-oswald u-text u-text-default u-text-palette-2-base u-text-10" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="500">04</h2>
  106.               <h5 class="u-text u-text-11" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="750"> О кофе</h5>
  107.               <p class="u-text u-text-12" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="750"> В кофейне можно выпить кружку вкусного кофе: Эспрессо, латте, капучино<div class=""></div></p>
  108.             </div>
  109.           </div>
  110.         </div>
  111.       </div>
  112.     </section>
  113.     <section class="u-align-right u-clearfix u-image u-section-4" id="carousel_9766">
  114.       <div class="u-clearfix u-sheet u-valign-middle u-sheet-1">
  115.         <div class="u-list u-list-1">
  116.           <div class="u-repeater u-repeater-1">
  117.             <div class="u-black u-container-style u-list-item u-opacity u-opacity-50 u-radius-20 u-repeater-item u-shape-round u-list-item-1" data-animation-name="customAnimationIn" data-animation-duration="1500">
  118.               <div class="u-container-layout u-similar-container u-valign-top u-container-layout-1"><span class="u-icon u-icon-circle u-icon-1"><svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 512 512" style=""><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-29ba"></use></svg><svg class="u-svg-content" viewBox="0 0 512 512" id="svg-29ba"><g><path d="m406 210c0-16.719-6.892-32.333-18.856-43.557 2.561-10.49 3.856-21.026 3.856-31.443 0-74.439-60.561-135-135-135s-135 60.561-135 135c0 10.65 1.236 21.185 3.683 31.439-11.856 11.18-18.683 26.792-18.683 43.561 0 29.398 21.259 53.908 49.206 59.009l86.735 233.22c2.184 5.874 7.791 9.771 14.059 9.771s11.875-3.897 14.059-9.771l86.735-233.22c27.948-5.101 49.206-29.611 49.206-59.009zm-219.731 56.469c9.619-3.463 18.097-9.321 24.731-16.846 11.003 12.481 27.092 20.377 45 20.377s33.997-7.896 45-20.377c4.03 4.571 8.733 8.535 13.968 11.711l-99.708 83.09zm69.731 187.499-29.652-79.732 85.938-71.615zm90-213.968c-16.542 0-30-13.458-30-30 0-8.284-6.716-15-15-15s-15 6.716-15 15c0 16.542-13.458 30-30 30s-30-13.458-30-30c0-8.284-6.716-15-15-15s-15 6.716-15 15c0 16.542-13.458 30-30 30s-30-13.458-30-30c0-10.347 5.176-19.8 13.846-25.286 5.789-3.663 8.36-10.783 6.248-17.301-3.38-10.427-5.094-21.333-5.094-32.413 0-57.897 47.103-105 105-105s105 47.103 105 105c0 10.661-1.782 21.567-5.299 32.413-2.112 6.517.459 13.637 6.248 17.3 8.798 5.568 14.051 15.021 14.051 25.287 0 16.542-13.458 30-30 30z"></path>
  119. </g></svg></span>
  120.                 <h5 class="u-align-center u-custom-font u-font-lato u-text u-text-1">Мороженое</h5>
  121.               </div>
  122.             </div>
  123.             <div class="u-black u-container-style u-list-item u-opacity u-opacity-50 u-radius-20 u-repeater-item u-shape-round u-video-cover u-list-item-2" data-animation-name="customAnimationIn" data-animation-duration="1500">
  124.               <div class="u-container-layout u-similar-container u-valign-top u-container-layout-2"><span class="u-icon u-icon-circle u-icon-2"><svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 512 512" style=""><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-2205"></use></svg><svg class="u-svg-content" viewBox="0 0 512 512" x="0px" y="0px" id="svg-2205" style="enable-background:new 0 0 512 512;"><g><g><path d="M374.027,273.986c22.304-27.177,34.589-61.538,34.589-96.755v-39.385c0-8.157-6.613-14.769-14.769-14.769h-5.288    C383.503,54.363,325.983,0,256,0S128.497,54.363,123.442,123.077h-5.288c-8.157,0-14.769,6.613-14.769,14.769v39.385    c0,35.217,12.284,69.578,34.589,96.755c19.415,23.654,45.615,40.98,74.704,49.606v104.716H192    c-38.004,0-68.923,30.918-68.923,68.923c0,8.157,6.613,14.769,14.769,14.769h236.308c8.157,0,14.769-6.613,14.769-14.769    c0-38.005-30.918-68.923-68.923-68.923h-20.677V323.591C328.412,314.966,354.611,297.64,374.027,273.986z M256,29.538    c53.687,0,97.948,41.13,102.919,93.538H153.08C158.052,70.669,202.313,29.538,256,29.538z M284.554,457.846H320    c16.497,0,30.658,10.195,36.512,24.615H155.488c5.855-14.421,20.014-24.615,36.512-24.615h35.446    c8.157,0,14.769-6.613,14.769-14.769v-130.97c0-6.984-4.892-13.013-11.725-14.452c-56.535-11.908-97.568-62.555-97.568-120.424    v-24.615h4.923h236.308h4.923v24.615c0,57.87-41.033,108.516-97.568,120.425c-6.833,1.44-11.725,7.468-11.725,14.452v130.969    C269.785,451.233,276.397,457.846,284.554,457.846z"></path>
  125. </g>
  126. </g></svg></span>
  127.                 <h5 class="u-align-center u-custom-font u-font-lato u-text u-text-2">Фруктовый лед</h5>
  128.               </div>
  129.             </div>
  130.             <div class="u-black u-container-style u-list-item u-opacity u-opacity-50 u-radius-20 u-repeater-item u-shape-round u-video-cover u-list-item-3" data-animation-name="customAnimationIn" data-animation-duration="1500">
  131.               <div class="u-container-layout u-similar-container u-valign-top u-container-layout-3"><span class="u-icon u-icon-circle u-icon-3"><svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 508.844 508.844" style=""><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-3260"></use></svg><svg class="u-svg-content" viewBox="0 0 508.844 508.844" id="svg-3260"><g id="XMLID_1296_"><path id="XMLID_1299_" d="m468.082 237.546c26.286-26.286 40.762-61.234 40.762-98.408s-14.476-72.122-40.762-98.408c-54.262-54.263-142.554-54.263-196.815 0-.155.154-.309.31-.463.465-7.323-3.903-15.538-5.975-24.07-5.975-13.692 0-26.565 5.333-36.248 15.014-9.683 9.682-15.015 22.555-15.015 36.248 0 11.438 3.733 22.297 10.602 31.209l-206.073 391.12 391.12-206.073c8.912 6.869 19.77 10.602 31.209 10.602 13.692 0 26.565-5.332 36.248-15.014 16.298-16.298 19.308-40.929 9.025-60.304.161-.158.32-.317.48-.476zm-284.647 20.036 48.308 19.479 19.482 48.313 18.453 7.441-74.747 39.383-17.448-40.876-40.867-17.441 39.381-74.745zm-60.851 82.927 32.038 13.673 13.679 32.046-96.629 50.912zm181.871-26.018-30.178-12.169-19.482-48.313-48.308-19.478-12.166-30.174 33.745-64.047 140.436 140.436zm142.414-98.158c-2.763 2.763-5.73 5.425-8.819 7.914l-13.005 10.478 12.319 12.319c8.29 8.291 8.29 21.779 0 30.07-4.016 4.016-9.355 6.227-15.035 6.227s-11.019-2.211-15.035-6.227l-175.596-175.598c-4.016-4.016-6.228-9.355-6.228-15.034s2.211-11.019 6.228-15.035c4.016-4.016 9.355-6.228 15.035-6.228s11.019 2.212 15.04 6.233l12.319 12.308 10.473-12.999c2.489-3.089 5.151-6.056 7.914-8.819 42.565-42.565 111.824-42.565 154.39 0 20.62 20.62 31.975 48.035 31.975 77.195 0 29.161-11.356 56.576-31.975 77.196z"></path>
  132. </g></svg></span>
  133.                 <h5 class="u-align-center u-custom-font u-font-lato u-text u-text-3">Закуски  </h5>
  134.               </div>
  135.             </div>
  136.             <div class="u-black u-container-style u-list-item u-opacity u-opacity-50 u-radius-20 u-repeater-item u-shape-round u-video-cover u-list-item-4" data-animation-name="customAnimationIn" data-animation-duration="1500">
  137.               <div class="u-container-layout u-similar-container u-valign-top u-container-layout-4"><span class="u-icon u-icon-circle u-icon-4"><svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 481.789 481.789" style=""><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-3640"></use></svg><svg class="u-svg-content" viewBox="0 0 481.789 481.789" x="0px" y="0px" id="svg-3640" style="enable-background:new 0 0 481.789 481.789;"><path d="M410.589,70.342c0.908-2.493,0.789-5.244-0.332-7.648s-3.151-4.265-5.644-5.172L364.03,42.75  c-2.491-0.907-5.243-0.787-7.646,0.333c-2.404,1.121-4.264,3.151-5.171,5.644l-32.884,90.348c-1.647-2.826-3.405-5.598-5.289-8.304  c-12.242-17.575-28.678-31.435-47.864-40.466c0.171-1.642,0.26-3.308,0.26-4.994c0-23.349-16.764-42.847-38.886-47.116  C222.286,16.455,203.094,0,180.124,0h-8.509c-5.523,0-10,4.478-10,10s4.477,10,10,10h8.509c12.05,0,22.296,7.846,25.915,18.696  c-20.977,5.132-36.593,24.079-36.593,46.615c0,0.582,0.023,1.158,0.044,1.735c-20.925,8.199-39.555,22.318-53.08,40.403  c-15.755,21.066-24.083,46.145-24.083,72.521v19.716c0,0.713,0.077,1.407,0.219,2.078c-6.564,6.926-10.6,16.271-10.6,26.544  c0,6.758,1.75,13.114,4.813,18.646h-6.164c-5.523,0-10,4.478-10,10c0,13.314,1.798,26.215,5.147,38.482  c0.078,0.386,0.185,0.761,0.307,1.13c15.123,53.691,60.197,94.953,115.963,104.54l-51.047,43.039  c-3.211,2.707-4.388,7.132-2.947,11.077c1.441,3.944,5.193,6.568,9.393,6.568h138.916c0.006,0,0.013,0,0.02,0  c5.523,0,10-4.478,10-10c0-3.253-1.553-6.143-3.958-7.969l-50.663-42.716c68.857-11.838,121.417-71.968,121.417-144.152  c0-5.522-4.477-10-10-10h-12.852c2.774-5.011,4.47-10.697,4.765-16.747L410.589,70.342z M366.586,64.964l21.787,7.93  l-53.677,147.322c0.009-0.177,0.027-0.352,0.027-0.531v-19.716c0-11.664-1.666-23.107-4.872-34.077L366.586,64.964z M217.441,57.316  c15.437,0,27.995,12.559,27.995,27.994c0,15.437-12.558,27.995-27.995,27.995c-12.999,0-23.956-8.907-27.092-20.938  c-0.075-0.523-0.18-1.047-0.342-1.568c-0.01-0.032-0.024-0.061-0.034-0.092c-0.343-1.747-0.527-3.551-0.527-5.397  C189.446,69.875,202.004,57.316,217.441,57.316z M174.441,106.596c7.859,15.813,24.177,26.71,43,26.71  c17.655,0,33.104-9.589,41.44-23.827c24.381,12.159,42.364,33.207,50.687,58.374c0.139,0.605,0.335,1.192,0.582,1.759  c2.989,9.63,4.574,19.836,4.574,30.357v10.61c-2.657-0.58-5.412-0.894-8.241-0.894c-5.252,0-9.609,4.063-9.976,9.302  s3.382,9.869,8.583,10.601l7.136,1.004c7.466,2.427,12.878,9.451,12.878,17.716c0,10.269-8.354,18.622-18.622,18.622H194.985  c-5.523,0-10,4.478-10,10v39.203c0,4.065-3.308,7.373-7.373,7.373c-4.066,0-7.374-3.308-7.374-7.373l0-39.18l0,0l0,0v-0.023  c0-2.652-1.054-5.195-2.929-7.071c-1.875-1.875-4.419-2.929-7.071-2.929h-39.671c-10.268,0-18.622-8.354-18.622-18.622  s8.354-18.622,18.622-18.622h140.643c5.523,0,10-4.478,10-10s-4.477-10-10-10H112.693c-0.124,0-0.243,0.014-0.366,0.019v-9.735  C112.327,158.609,136.929,122.206,174.441,106.596z M93.398,303.432c-1.152-5.376-1.969-10.875-2.41-16.479h59.251l0,16.479H93.398z   M174.786,461.789l42.084-35.482l42.084,35.482H174.786z M216.87,403.227c-53.222,0-98.852-33.102-117.403-79.795h51.768  c3.203,11.56,13.812,20.073,26.377,20.073s23.174-8.513,26.377-20.073h84.862c5.523,0,10-4.478,10-10s-4.477-10-10-10h-83.866  v-16.479h137.767C337.637,351.923,283.131,403.227,216.87,403.227z"></path></svg></span>
  138.                 <h5 class="u-align-center u-custom-font u-font-lato u-text u-text-4">Десерты</h5>
  139.               </div>
  140.             </div>
  141.             <div class="u-black u-container-style u-list-item u-opacity u-opacity-50 u-radius-20 u-repeater-item u-shape-round u-video-cover u-list-item-5" data-animation-name="customAnimationIn" data-animation-duration="1500">
  142.               <div class="u-container-layout u-similar-container u-valign-top u-container-layout-5"><span class="u-icon u-icon-circle u-icon-5"><svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 399.744 399.744" style=""><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-9720"></use></svg><svg class="u-svg-content" viewBox="0 0 399.744 399.744" x="0px" y="0px" id="svg-9720" style="enable-background:new 0 0 399.744 399.744;"><path id="XMLID_1316_" d="M122.727,287.403l-1.626,4.393c-1.344,3.631-4.783,5.878-8.441,5.878c-1.038,0-2.094-0.182-3.124-0.563  c-4.661-1.727-7.041-6.904-5.315-11.565l1.626-4.393c1.726-4.662,6.902-7.041,11.565-5.315  C122.073,277.564,124.453,282.742,122.727,287.403z M87.666,301.93c-4.661-1.73-9.839,0.648-11.567,5.31l-1.628,4.392  c-1.728,4.66,0.649,9.84,5.31,11.567c1.032,0.383,2.088,0.564,3.128,0.564c3.656,0,7.094-2.245,8.439-5.874l1.628-4.392  C94.703,308.838,92.326,303.659,87.666,301.93z M116.17,362.186c-4.992,6.813-9.707,13.249-13.042,18.453  c-8.736,13.635-23.299,19.066-38.208,19.066c-8.072,0-16.243-1.592-23.649-4.335c-21.063-7.803-40.762-26.74-37.288-51.458  c0.86-6.119,1.475-14.071,2.126-22.49c2.786-36.011,6.252-80.827,32.487-97.621c0.964-0.617,1.948-1.188,2.951-1.715  c-5.908-13.839-5.224-29.718,2.421-42.263c1.043-1.712,2.629-3.027,4.505-3.735c12.807-4.839,27.499-3.211,39.626,3.938  c9.074-10.768,22.38-17.161,36.082-16.844c2.004,0.047,3.936,0.762,5.487,2.032c10.594,8.669,16.534,22.206,16.404,36.286  c13.863,2.474,26.067,10.813,32.632,22.826c0.961,1.76,1.308,3.791,0.984,5.77c-2.374,14.497-12.2,26.99-25.697,33.641  c0.419,1.053,0.793,2.127,1.123,3.224C164.078,296.793,137.514,333.051,116.17,362.186z M137.876,272.141  c-0.766-2.548-2-4.901-3.715-7.07c-0.252-0.269-0.49-0.555-0.709-0.854c-3.729-4.29-9.437-7.832-17.227-10.718l-39.351-14.577  c-7.789-2.885-14.426-3.912-20.05-3.092c-0.364,0.086-0.73,0.148-1.099,0.188c-2.714,0.528-5.182,1.51-7.422,2.944  c-18.685,11.961-21.898,53.511-24.246,83.849c-0.673,8.708-1.31,16.932-2.248,23.607c-2.081,14.806,11.416,26.777,25.715,32.074  c14.323,5.308,32.384,5.023,40.449-7.563c3.638-5.678,8.514-12.333,13.676-19.38C119.632,327.003,144.26,293.387,137.876,272.141z   M143.431,248.738c8.661-3.313,15.32-10.191,17.784-18.457c-5.38-7.41-14.782-11.857-24.798-11.525  c-2.77,0.086-5.449-1.107-7.226-3.249c-1.776-2.143-2.462-4.985-1.857-7.702c2.179-9.787-0.455-19.842-6.743-26.497  c-9.105,0.953-17.654,6.865-22.376,15.71c-1.311,2.455-3.683,4.165-6.426,4.633c-2.745,0.47-5.548-0.359-7.599-2.241  c-7.387-6.781-17.417-9.53-26.322-7.409c-3.517,7.875-2.946,17.431,1.466,25.587c0.432-0.012,0.866-0.018,1.303-0.018  c6.928,0,14.438,1.49,22.491,4.474c0,0,0,0,0,0l39.35,14.577C131.037,239.791,138.033,243.84,143.431,248.738z M89.417,265.468  c-4.659-1.727-9.839,0.651-11.566,5.313l-1.627,4.392c-1.728,4.66,0.651,9.839,5.312,11.566c1.031,0.382,2.087,0.563,3.126,0.563  c3.657,0,7.095-2.246,8.44-5.876l1.627-4.392C96.456,272.375,94.077,267.196,89.417,265.468z M377.84,86.923  c-16.207,16.205-39.225,22.107-59.541,15.91l-8.857,239.111c0.041,2.762-0.744,6.688-4.412,10.545  c-11.745,12.348-49.027,16.729-77.386,16.729c-13.659,0-81.795-1.316-81.795-27.303c0-4.971,4.029-9,9-9  c4.437,0,8.124,3.21,8.864,7.435c4.286,3.919,26.686,10.868,63.931,10.868c36.796,0,59.179-6.74,63.836-10.639l8.373-226.033  c-4.117,1.446-8.418,2.54-12.338,3.416c-16.093,3.598-37.355,5.578-59.871,5.578c-22.516,0-43.779-1.98-59.872-5.578  c-3.92-0.876-8.222-1.971-12.339-3.416l1,27.011c0.184,4.968-3.694,9.144-8.661,9.327c-4.975,0.162-9.143-3.694-9.327-8.661  l-1.669-45.107c-0.017-0.274-0.025-0.553-0.026-0.835c0-0.041,0-0.081,0-0.121c0.068-12.907,17.583-18.013,23.345-19.692  c4.772-1.393,9.768,1.35,11.159,6.122c1.391,4.771-1.35,9.768-6.122,11.159c-3.139,0.915-5.431,1.779-7.088,2.52  c9.33,4.055,33.287,9.272,69.601,9.272c36.41,0,60.397-5.245,69.673-9.305c-9.276-4.06-33.263-9.305-69.673-9.305  c-7.928,0-15.691,0.256-23.167,0.763c-0.177,4.349-3.495,8.044-7.955,8.562c-4.93,0.578-9.404-2.964-9.979-7.9l-9.1-78.314  c-0.574-4.938,2.964-9.405,7.901-9.979c4.932-0.58,9.405,2.964,9.979,7.9l7.184,61.824c8.112-0.568,16.539-0.855,25.136-0.855  c22.516,0,43.778,1.98,59.871,5.578c4.295,0.96,9.046,2.181,13.513,3.84c-2.26-17.811,4.068-36.56,17.874-50.364  c18.379-18.381,45.525-23.505,67.552-12.753c1.802,0.88,3.259,2.337,4.139,4.139C401.345,41.393,396.221,68.541,377.84,86.923z   M375.674,30.151c-14.576-5.619-31.908-1.575-44.045,10.563c-9.355,9.354-13.904,21.794-12.924,33.68l26.361-26.362  c3.515-3.514,9.213-3.514,12.728,0c3.515,3.515,3.515,9.213,0,12.729l-26.36,26.36c11.886,0.981,24.323-3.57,33.677-12.925  C377.249,62.057,381.296,44.726,375.674,30.151z M229.6,146.942l-3.312,3.313c-3.514,3.516-3.514,9.214,0.002,12.729  c1.757,1.757,4.06,2.635,6.363,2.635c2.304,0,4.607-0.879,6.365-2.637l3.312-3.313c3.514-3.516,3.514-9.214-0.001-12.729  C238.812,143.425,233.114,143.427,229.6,146.942z M201.465,138.77c-4.937,0.573-8.475,5.041-7.901,9.979l20.396,175.513  c0.533,4.585,4.422,7.962,8.929,7.962c0.347,0,0.698-0.021,1.05-0.062c4.937-0.573,8.475-5.041,7.901-9.979l-20.396-175.513  C210.871,141.733,206.403,138.197,201.465,138.77z M265.583,186.009c2.303,0,4.606-0.879,6.364-2.636l3.312-3.312  c3.515-3.515,3.515-9.214,0-12.729c-3.515-3.514-9.213-3.514-12.728,0l-3.312,3.312c-3.515,3.515-3.515,9.214,0,12.729  C260.977,185.131,263.28,186.009,265.583,186.009z M250.901,198.474c-3.515-3.514-9.213-3.514-12.728,0  c-3.515,3.515-3.515,9.214,0,12.729l3.312,3.312c1.757,1.757,4.061,2.636,6.364,2.636s4.606-0.879,6.364-2.636  c3.515-3.515,3.515-9.214,0-12.729L250.901,198.474z M304.721,369.803c-3.721-3.297-9.41-2.949-12.705,0.772  c-3.448,3.895-25.869,11.168-64.372,11.168c-38.2,0-60.731-7.334-64.305-11.26c-3.346-3.679-9.039-3.944-12.714-0.599  c-3.676,3.347-3.943,9.038-0.598,12.714c11.518,12.654,49.01,17.145,77.617,17.145c28.873,0,66.585-4.514,77.849-17.236  C308.788,378.786,308.443,373.098,304.721,369.803z"></path></svg></span>
  143.                 <h5 class="u-align-center u-custom-font u-font-lato u-text u-text-5">Смузи</h5>
  144.               </div>
  145.             </div>
  146.             <div class="u-black u-container-style u-list-item u-opacity u-opacity-50 u-radius-20 u-repeater-item u-shape-round u-video-cover u-list-item-6" data-animation-name="customAnimationIn" data-animation-duration="1500">
  147.               <div class="u-container-layout u-similar-container u-valign-top u-container-layout-6"><span class="u-icon u-icon-circle u-icon-6"><svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 512 512" style=""><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-696d"></use></svg><svg class="u-svg-content" viewBox="0 0 512 512" id="svg-696d"><g><path d="m417.841 0c-48.526 0-88.59 36.915-93.599 84.14h-65.422c-5.523 0-10 4.477-10 10s4.477 10 10 10h134.88l-58.692 58.714c-10.893 6.111-29.044 5.962-39.514-.49-17.221-10.591-44.176-10.589-61.358 0-10.769 6.624-29.663 6.623-40.424.005-11.133-6.861-26.362-9.273-40.392-7.247l-37.419-50.981h53.119c5.523 0 10-4.477 10-10s-4.477-10-10-10h-67.799l-53.765-73.254c-3.269-4.452-9.526-5.414-13.979-2.145-4.452 3.268-5.413 9.526-2.145 13.979l45.08 61.419h-66.412c-4.044 0-7.69 2.436-9.238 6.172-1.548 3.736-.693 8.037 2.166 10.897l76.683 76.708c.1.101.196.204.301.301l64.398 64.419 20.161 47.266c5.43 12.73 12.306 20.62 29.777 20.62h9.672v117.2l-87.349 66.313c-3.419 2.596-4.8 7.085-3.431 11.155s5.184 6.81 9.478 6.81h182.576c4.293 0 8.107-2.74 9.478-6.81 1.37-4.069-.011-8.558-3.43-11.154l-87.322-66.313v-117.201h9.672c17.471 0 24.346-7.89 29.777-20.62l20.16-47.265 64.398-64.418c.105-.097.202-.201.302-.303l10.487-10.49c16.68 13.528 37.328 20.883 59.123 20.883 51.919 0 94.159-42.244 94.159-94.169.002-51.91-42.237-94.141-94.157-94.141zm-325.009 162.854-58.695-58.714h56.956l42.289 57.617c-.349.202-.701.401-1.043.611-10.463 6.448-28.614 6.597-39.507.486zm182.66 329.146h-123.163l61.591-46.758zm-30.518-209.945c-3.275 7.676-4.338 8.467-11.381 8.467h-39.344c-7.043 0-8.107-.792-11.381-8.467l-14.98-35.121h92.066zm25.974-55.12h-114.055l-39.768-39.781c9.332-.676 18.399-3.256 25.698-7.755 10.772-6.625 29.648-6.627 40.404 0 17.211 10.585 44.175 10.584 61.394-.005 10.747-6.622 29.624-6.62 40.389 0 7.304 4.501 16.372 7.083 25.706 7.76zm73.435-142.795c1.757-12.978 6.896-24.89 14.48-34.842l34.838 34.842zm63.458 83.493c-12.733-1.706-24.692-6.649-34.888-14.446l34.888-34.899zm0-97.637-34.835-34.839c9.951-7.583 21.862-12.72 34.835-14.477zm83.475 14.144h-49.335l34.853-34.857c7.592 9.955 12.72 21.878 14.482 34.857zm-63.475-63.447c12.975 1.757 24.894 6.871 34.847 14.452l-34.847 34.851zm0 146.923v-49.331l34.846 34.85c-9.955 7.583-21.868 12.723-34.846 14.481zm48.993-28.619-34.853-34.857h49.335c-1.762 12.981-6.892 24.903-14.482 34.857z"></path><path d="m213.921 104.14h.057c5.523 0 9.972-4.477 9.972-10s-4.505-10-10.028-10-10 4.477-10 10 4.476 10 9.999 10z"></path>
  148. </g></svg></span>
  149.                 <h5 class="u-align-center u-custom-font u-font-lato u-text u-text-6">Напитки & другое</h5>
  150.               </div>
  151.             </div>
  152.           </div>
  153.         </div>
  154.       </div>
  155.     </section>
  156.     <section class="u-align-center u-clearfix u-palette-2-base u-section-5" id="sec-d6d7">
  157.       <div class="u-clearfix u-sheet u-valign-middle u-sheet-1">
  158.         <h2 class="u-text u-text-1"> Популярная еда</h2>
  159.         <div class="u-expanded-width u-list u-list-1">
  160.           <div class="u-repeater u-repeater-1">
  161.             <div class="u-container-style u-list-item u-radius-20 u-repeater-item u-shape-round u-video-cover u-white u-list-item-1">
  162.               <div class="u-container-layout u-similar-container u-valign-bottom-lg u-valign-bottom-md u-valign-top-xl u-container-layout-1">
  163.                 <img alt="" class="u-expanded-width u-image u-image-round u-radius-10 u-image-1" data-image-width="900" data-image-height="600" src="../src/images/tiramisu.jpg">
  164.                 <h4 class="u-text u-text-palette-2-base u-text-2"> Тирамису</h4>
  165.                 <p class="u-text u-text-default u-text-3">Тирамису - итальянский десерт, состоящий из слоев пропитанных кофе бисквитов, крема из маскарпоне и шоколадной посыпки. Нежный, сливочный, сочетание кофе и шоколада.</p>
  166.                 <h4 class="u-text u-text-default u-text-palette-2-base u-text-4">900₽</h4>
  167.                 <button id="generateOrderButton" class="show-popup">Заказать сейчас</button>
  168.               </div>
  169.             </div>
  170.             <div class="u-container-style u-list-item u-radius-20 u-repeater-item u-shape-round u-video-cover u-white u-list-item-2">
  171.               <div class="u-container-layout u-similar-container u-valign-bottom-lg u-valign-bottom-md u-valign-top-xl u-container-layout-2">
  172.                 <img alt="" class="u-expanded-width u-image u-image-round u-radius-10 u-image-2" src="../src/images/chia.jpg" data-image-width="900" data-image-height="600">
  173.                 <h4 class="u-text u-text-palette-2-base u-text-5"> Чиа пудинг</h4>
  174.                 <p class="u-text u-text-default u-text-6">Пудинг с чиа - десерт на основе семян чиа, которые набухают в жидкости и образуют текстуру геля. Богат питательными веществами, волокнами и антиоксидантами, способствует снижению аппетита и улучшению пищеварения.</p>
  175.                 <h4 class="u-text u-text-default u-text-palette-2-base u-text-7">719₽</h4>
  176.                 <a href="#" class="u-active-black u-border-none u-btn u-btn-round u-button-style u-hover-black u-palette-2-base u-radius-50 u-btn-2">Заказать сейчас</a>
  177.               </div>
  178.             </div>
  179.             <div class="u-container-style u-list-item u-radius-20 u-repeater-item u-shape-round u-white u-list-item-3">
  180.               <div class="u-container-layout u-similar-container u-valign-bottom-lg u-valign-bottom-md u-valign-top-xl u-container-layout-3">
  181.                 <img alt="" class="u-expanded-width u-image u-image-round u-radius-10 u-image-3" src="../src/images/chz.jpg" data-image-width="900" data-image-height="600">
  182.                 <h4 class="u-text u-text-palette-2-base u-text-8"> Чизкейк</h4>
  183.                 <p class="u-text u-text-default u-text-9">Чизкейк – классический десерт из сыра, творога или кремового сыра, с добавлением яиц, сахара и ванили. Часто готовится с печеным основанием из печенья или песочного теста.</p>
  184.                 <h4 class="u-text u-text-default u-text-palette-2-base u-text-10">629₽</h4>
  185.                 <a href="#" class="u-active-black u-border-none u-btn u-btn-round u-button-style u-hover-black u-palette-2-base u-radius-50 u-btn-3">Заказать сейчас</a>
  186.               </div>
  187.             </div>
  188.             <div class="u-container-style u-list-item u-radius-20 u-repeater-item u-shape-round u-white u-list-item-4">
  189.               <div class="u-container-layout u-similar-container u-valign-bottom-lg u-valign-bottom-md u-valign-top-xl u-container-layout-4">
  190.                 <img alt="" class="u-expanded-width u-image u-image-round u-radius-10 u-image-4" src="../src/images/chklt.jpg" data-image-width="900" data-image-height="600">
  191.                 <h4 class="u-text u-text-palette-2-base u-text-11"> Шоколадный торт</h4>
  192.                 <p class="u-text u-text-default u-text-12">Шоколадный торт – это сладкое лакомство, приготовленное из мягкого шоколадного бисквита, пропитанного сиропом и покрытого нежным шоколадным кремом.</p>
  193.                 <h4 class="u-text u-text-default u-text-palette-2-base u-text-13">629₽</h4>
  194.                 <a href="#" class="u-active-black u-border-none u-btn u-btn-round u-button-style u-hover-black u-palette-2-base u-radius-50 u-btn-4">Заказать сейчас</a>
  195.               </div>
  196.             </div>
  197.             <div class="u-container-style u-list-item u-radius-20 u-repeater-item u-shape-round u-white u-list-item-5">
  198.               <div class="u-container-layout u-similar-container u-valign-bottom-lg u-valign-bottom-md u-valign-top-xl u-container-layout-5">
  199.                 <img alt="" class="u-expanded-width u-image u-image-round u-radius-10 u-image-5" src="../src/images/chz2.jpg" data-image-width="900" data-image-height="600">
  200.                 <h4 class="u-text u-text-palette-2-base u-text-14">Чизкейк 2</h4>
  201.                 <p class="u-text u-text-default u-text-15">Чизкейк – классический десерт из сыра, творога или кремового сыра, с добавлением яиц, сахара и ванили. Часто готовится с печеным основанием из печенья или песочного теста.</p>
  202.                 <h4 class="u-text u-text-default u-text-palette-2-base u-text-16">629₽</h4>
  203.                 <a href="#" class="u-active-black u-border-none u-btn u-btn-round u-button-style u-hover-black u-palette-2-base u-radius-50 u-btn-5">Заказать сейчас</a>
  204.               </div>
  205.             </div>
  206.             <div class="u-container-style u-list-item u-radius-20 u-repeater-item u-shape-round u-white u-list-item-6">
  207.               <div class="u-container-layout u-similar-container u-valign-bottom-lg u-valign-bottom-md u-valign-top-xl u-container-layout-6">
  208.                 <img alt="" class="u-expanded-width u-image u-image-round u-radius-10 u-image-6" src="../src/images/orange.jpg" data-image-width="900" data-image-height="600">
  209.                 <h4 class="u-text u-text-palette-2-base u-text-17"> Апельсиновый торт</h4>
  210.                 <p class="u-text u-text-default u-text-18">Апельсиновый торт - это сладкий десерт, приготовленный с использованием апельсинового сока и цедры. Он имеет нежную текстуру и освежающий цитрусовый вкус.</p>
  211.                 <h4 class="u-text u-text-default u-text-palette-2-base u-text-19">629₽</h4>
  212.                 <a href="#" class="u-active-black u-border-none u-btn u-btn-round u-button-style u-hover-black u-palette-2-base u-radius-50 u-btn-6">Заказать сейчас</a>
  213.               </div>
  214.             </div>
  215.           </div>
  216.         </div>
  217.       </div>
  218.     </section>
  219.     <section class="u-clearfix u-grey-80 u-section-8" id="sec-2b5e">
  220.       <div class="u-expanded-width u-shape u-shape-rectangle u-white u-shape-1"></div>
  221.       <div class="u-palette-2-base u-radius-20 u-shape u-shape-round u-shape-2" data-animation-name="customAnimationIn" data-animation-duration="1250"></div>
  222.       <img class="u-image u-image-round u-radius-20 u-image-1" data-image-width="1107" data-image-height="750" src="images/bnbnbnbn-min.jpg" data-animation-name="customAnimationIn" data-animation-duration="1250">
  223.       <div class="u-align-left u-container-style u-group u-radius-20 u-shape-round u-white u-group-1" data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="0">
  224.         <div class="u-container-layout u-valign-middle-lg u-valign-middle-md u-valign-middle-sm u-valign-middle-xs u-container-layout-1">
  225.           <h3 class="u-text u-text-default u-text-1">Лучшее кофе в России</h3>
  226.           <h2 class="u-text u-text-2"> Любое кофе на твой выбор!</h2>
  227.         </div>
  228.       </div>
  229.     </section>
  230.     <section class="u-clearfix u-white u-section-9" id="carousel_2b84">
  231.       <div class="u-clearfix u-sheet u-sheet-1">
  232.         <div class="data-layout-selected u-clearfix u-expanded-width-sm u-expanded-width-xs u-layout-wrap u-layout-wrap-1">
  233.           <div class="u-layout">
  234.             <div class="u-layout-row">
  235.               <div class="u-container-style u-image u-layout-cell u-left-cell u-size-30-lg u-size-30-xl u-size-60-md u-size-60-sm u-size-60-xs u-image-1" data-image-width="900" data-image-height="900">
  236.                 <div class="u-container-layout u-valign-bottom u-container-layout-1"></div>
  237.               </div>
  238.               <div class="u-container-style u-layout-cell u-right-cell u-size-30-lg u-size-30-xl u-size-60-md u-size-60-sm u-size-60-xs u-white u-layout-cell-2">
  239.                 <div class="u-container-layout u-container-layout-2">
  240.                   <h3 class="u-align-center u-text u-text-1">Связь с нами</h3>
  241.                   <div class="u-expanded-width u-form u-form-1">
  242.                     <form action="#" class="u-clearfix u-form-spacing-15 u-form-vertical u-inner-form" style="padding: 0;" source="email" name="form">
  243.                       <div class="u-form-group u-form-name">
  244.                         <label class="u-label">Имя</label>
  245.                         <input type="text" placeholder="Введите ваше имя" class="u-border-2 u-border-black u-border-no-left u-border-no-right u-border-no-top u-input u-input-rectangle" required="">
  246.                       </div>
  247.                       <div class="u-form-email u-form-group">
  248.                         <label class="u-label">Почта</label>
  249.                         <input type="email" placeholder="Введите рабочую почту"
  250.                          class="u-border-2 u-border-black u-border-no-left u-border-no-right u-border-no-top u-input u-input-rectangle" required="">
  251.                       </div>
  252.                       <div class="u-form-group u-form-message">
  253.                         <label class="u-label">Сообщение</label>
  254.                         <textarea placeholder="" rows="4" cols="50" class="u-border-2 u-border-black u-border-no-left u-border-no-right u-border-no-top u-input u-input-rectangle" required=""></textarea>
  255.                       </div>
  256.                       <div class="u-form-agree u-form-group u-form-group-4">
  257.                         <label class="u-block-e16b-42 u-field-label" style=""></label>
  258.                         <input type="checkbox" class="u-agree-checkbox u-field-input" required="">
  259.                         <label class="u-block-e16b-38 u-field-label" style="">Я соглашаюсь с <a href="#">Услугами сервиса</a>
  260.                         </label>
  261.                       </div>
  262.                       <div class="u-align-left u-form-group u-form-submit">
  263.                         <button id="open" class="u-active-grey-75 u-black u-border-none u-btn u-btn-round u-btn-submit u-button-style u-hover-grey-75 u-radius-15 u-btn-1">Отправить</button>
  264.                       </div>
  265.                     </form>
  266.                   </div>
  267.                 </div>
  268.               </div>
  269.             </div>
  270.           </div>
  271.         </div>
  272.       </div>
  273.     </section>
  274.     <footer class="u-align-center u-clearfix u-footer u-grey-80 u-footer" id="sec-3032"><div class="u-clearfix u-sheet u-sheet-1">
  275.         <p class="u-small-text u-text u-text-variant u-text-1">Coffee Republic - 2023</p>
  276.       </div>
  277.     </footer>
  278.     <button id="generateOrderButton" class="show-popup">Show Popup</button>
  279.   </body>
  280. </html>
  281.  
  282. css
  283.  
  284. @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
  285. * {
  286.   margin: 0;
  287.   padding: 0;
  288.   box-sizing: border-box;
  289.   font-family: "Poppins", sans-serif;
  290. }
  291.  
  292. .show-popup {
  293.   padding: 18px 40px;
  294.   background: #6e78ff;
  295.   border: none;
  296.   outline: none;
  297.   border-radius: 6px;
  298.   box-shadow: 0 0 10px rgba(0, 0, 0, .1);
  299.   cursor: pointer;
  300.   font-size: 18px;
  301.   color: #f2f2f2;
  302.   font-weight: 500;
  303. }
  304. .popup-container {
  305.   z-index: 999999;
  306.   position: fixed;
  307.   width: 100%;
  308.   height: 100%;
  309.   background: rgba(0, 0, 0, .3);
  310.   display: flex;
  311.   justify-content: center;
  312.   align-items: center;
  313.   opacity: 0;
  314.   pointer-events: none;
  315. }
  316. .popup-container.active {
  317.   opacity: 1;
  318.   pointer-events: auto;
  319.   transition: .4s ease;
  320. }
  321. .popup-container .popup-box {
  322.   width: 500px;
  323.   background: #f2f2f2;
  324.   border-radius: 6px;
  325.   box-shadow: 0 0 10px rgba(0, 0, 0, .1);
  326.   padding: 30px;
  327.   transform: scale(0);
  328. }
  329. .popup-container.active .popup-box {
  330.   transform: scale(1);
  331.   transition: .4s ease;
  332.   transition-delay: .25s;
  333. }
  334. .popup-box h1 {
  335.   color: #333;
  336.   line-height: 1;
  337. }
  338. .popup-box .zakazat {
  339.   color: #333;
  340.   margin: 12px 0 20px;
  341. }
  342. .popup-box .close-btn {
  343.   width: 100%;
  344.   height: 45px;
  345.   background: #6e78ff;
  346.   border-radius: 6px;
  347.   border: none;
  348.   outline: none;
  349.   box-shadow: 0 0 10px rgba(0, 0, 0, .1);
  350.   cursor: pointer;
  351.   font-size: 18px;
  352.   color: #f2f2f2;
  353.   font-weight: 500;
  354. }
  355.  
  356. .u-section-1 {
  357.   background-image: linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url("../images/barista-main.jpg");
  358.   background-position: 50% 50%;
  359. }
  360.  
  361. .u-section-1 .u-sheet-1 {
  362.   min-height: 802px;
  363. }
  364.  
  365. .u-section-1 .u-group-1 {
  366.   width: 557px;
  367.   min-height: 557px;
  368.   --animation-custom_in-translate_x: 0px;
  369.   --animation-custom_in-translate_y: 0px;
  370.   --animation-custom_in-opacity: 0;
  371.   --animation-custom_in-rotate: 0deg;
  372.   --animation-custom_in-scale: 0.3;
  373.   background-image: none;
  374.   margin: 60px auto 60px 0;
  375. }
  376.  
  377. .u-section-1 .u-container-layout-1 {
  378.   padding: 20px 30px;
  379. }
  380.  
  381. .u-section-1 .u-text-1 {
  382.   --animation-custom_in-translate_x: -300px;
  383.   --animation-custom_in-translate_y: 0px;
  384.   --animation-custom_in-opacity: 0;
  385.   --animation-custom_in-rotate: 0deg;
  386.   --animation-custom_in-scale: 1;
  387.   font-size: 4.0625rem;
  388.   margin: 40px 0 0;
  389. }
  390.  
  391. .u-section-1 .u-text-2 {
  392.   line-height: 2.2;
  393.   font-size: 1rem;
  394.   --animation-custom_in-translate_x: -300px;
  395.   --animation-custom_in-translate_y: 0px;
  396.   --animation-custom_in-opacity: 0;
  397.   --animation-custom_in-rotate: 0deg;
  398.   --animation-custom_in-scale: 1;
  399.   margin: 41px 0 0;
  400. }
  401.  
  402. .u-section-1 .u-text-3 {
  403.   --animation-custom_in-translate_x: -300px;
  404.   --animation-custom_in-translate_y: 0px;
  405.   --animation-custom_in-opacity: 0;
  406.   --animation-custom_in-rotate: 0deg;
  407.   --animation-custom_in-scale: 1;
  408.   margin: 30px auto 0 0;
  409. }
  410.  
  411. .u-section-1 .u-btn-1 {
  412.   border-style: solid;
  413.   padding: 0;
  414. }
  415.  
  416. .u-section-1 .u-btn-2 {
  417.   letter-spacing: 3px;
  418.   background-image: none;
  419.   border-style: solid;
  420.   text-transform: uppercase;
  421.   font-weight: 500;
  422.   --animation-custom_in-translate_x: -300px;
  423.   --animation-custom_in-translate_y: 0px;
  424.   --animation-custom_in-opacity: 0;
  425.   --animation-custom_in-rotate: 0deg;
  426.   --animation-custom_in-scale: 1;
  427.   font-size: 1rem;
  428.   margin: 30px auto 0 0;
  429.   padding: 16px 47px;
  430. }
  431.  
  432. @media (max-width: 1199px) {
  433.    .u-section-1 {
  434.     background-position: 71.46% 50%;
  435.   }
  436.  
  437.   .u-section-1 .u-sheet-1 {
  438.     min-height: 688px;
  439.   }
  440.  
  441.   .u-section-1 .u-group-1 {
  442.     width: 470px;
  443.     min-height: 537px;
  444.   }
  445.  
  446.   .u-section-1 .u-text-1 {
  447.     font-size: 3.4375rem;
  448.   }
  449. }
  450.  
  451. @media (max-width: 991px) {
  452.    .u-section-1 {
  453.     background-position: 67.52% 50%;
  454.   }
  455.  
  456.   .u-section-1 .u-sheet-1 {
  457.     min-height: 676px;
  458.   }
  459.  
  460.   .u-section-1 .u-group-1 {
  461.     width: 440px;
  462.     min-height: 546px;
  463.   }
  464.  
  465.   .u-section-1 .u-text-1 {
  466.     font-size: 3.25rem;
  467.   }
  468. }
  469.  
  470. @media (max-width: 767px) {
  471.    .u-section-1 {
  472.     background-position: 75% 50%;
  473.   }
  474.  
  475.   .u-section-1 .u-sheet-1 {
  476.     min-height: 645px;
  477.   }
  478.  
  479.   .u-section-1 .u-group-1 {
  480.     width: 367px;
  481.     min-height: 515px;
  482.   }
  483.  
  484.   .u-section-1 .u-container-layout-1 {
  485.     padding-left: 20px;
  486.     padding-right: 20px;
  487.   }
  488.  
  489.   .u-section-1 .u-text-1 {
  490.     font-size: 2.75rem;
  491.   }
  492. }
  493.  
  494. @media (max-width: 575px) {
  495.    .u-section-1 {
  496.     background-position: 70.04% 50%;
  497.   }
  498.  
  499.   .u-section-1 .u-sheet-1 {
  500.     min-height: 652px;
  501.   }
  502.  
  503.   .u-section-1 .u-group-1 {
  504.     width: 283px;
  505.     min-height: 541px;
  506.     margin-top: 56px;
  507.     margin-bottom: 56px;
  508.   }
  509.  
  510.   .u-section-1 .u-text-1 {
  511.     font-size: 1.875rem;
  512.     width: auto;
  513.   }
  514.  
  515.   .u-section-1 .u-text-2 {
  516.     width: auto;
  517.   }
  518.  
  519.   .u-section-1 .u-btn-2 {
  520.     font-size: 0.8125rem;
  521.     margin-top: 31px;
  522.     padding: 15px 54px 15px 53px;
  523.   }
  524. }.u-section-2 .u-sheet-1 {
  525.   min-height: 987px;
  526. }
  527.  
  528. .u-section-2 .u-text-1 {
  529.   width: 867px;
  530.   --animation-custom_in-translate_x: 0px;
  531.   --animation-custom_in-translate_y: -300px;
  532.   --animation-custom_in-opacity: 0;
  533.   --animation-custom_in-rotate: 0deg;
  534.   --animation-custom_in-scale: 1;
  535.   font-size: 3.75rem;
  536.   margin: 60px auto 0;
  537. }
  538.  
  539. .u-section-2 .u-layout-wrap-1 {
  540.   width: 927px;
  541.   margin: 30px auto 0;
  542. }
  543.  
  544. .u-section-2 .u-layout-cell-1 {
  545.   min-height: 727px;
  546. }
  547.  
  548. .u-section-2 .u-container-layout-1 {
  549.   padding: 30px;
  550. }
  551.  
  552. .u-section-2 .u-image-1 {
  553.   height: 203px;
  554.   margin-top: 0;
  555.   margin-bottom: 0;
  556.   --animation-custom_in-translate_x: 0px;
  557.   --animation-custom_in-translate_y: 300px;
  558.   --animation-custom_in-opacity: 0;
  559.   --animation-custom_in-rotate: 0deg;
  560.   --animation-custom_in-scale: 1;
  561. }
  562.  
  563. .u-section-2 .u-text-2 {
  564.   --animation-custom_in-translate_x: 0px;
  565.   --animation-custom_in-translate_y: 0px;
  566.   --animation-custom_in-opacity: 0;
  567.   --animation-custom_in-rotate: 0deg;
  568.   --animation-custom_in-scale: 1;
  569.   margin: 37px 1px 0 0;
  570. }
  571.  
  572. .u-section-2 .u-group-1 {
  573.   min-height: 242px;
  574.   margin-top: 20px;
  575.   margin-bottom: 0;
  576.   background-image: none;
  577.   margin-left: auto;
  578.   --animation-custom_in-translate_x: -300px;
  579.   --animation-custom_in-translate_y: 0px;
  580.   --animation-custom_in-opacity: 0;
  581.   --animation-custom_in-rotate: 0deg;
  582.   --animation-custom_in-scale: 1;
  583.   box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.2);
  584. }
  585.  
  586. .u-section-2 .u-container-layout-2 {
  587.   padding: 20px;
  588. }
  589.  
  590. .u-section-2 .u-text-3 {
  591.   font-weight: 700;
  592.   margin: 0 20px;
  593. }
  594.  
  595. .u-section-2 .u-text-4 {
  596.   margin: 20px 0 0;
  597. }
  598.  
  599. .u-section-2 .u-layout-cell-2 {
  600.   min-height: 727px;
  601. }
  602.  
  603. .u-section-2 .u-container-layout-3 {
  604.   padding: 30px;
  605. }
  606.  
  607. .u-section-2 .u-group-2 {
  608.   min-height: 241px;
  609.   margin-top: 0;
  610.   margin-bottom: 0;
  611.   background-image: none;
  612.   --animation-custom_in-scale: 1;
  613.   --animation-custom_in-translate_x: 300px;
  614.   --animation-custom_in-translate_y: 0px;
  615.   box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.2);
  616. }
  617.  
  618. .u-section-2 .u-container-layout-4 {
  619.   padding: 20px;
  620. }
  621.  
  622. .u-section-2 .u-text-5 {
  623.   font-weight: 700;
  624.   margin: 0;
  625. }
  626.  
  627. .u-section-2 .u-text-6 {
  628.   margin: 20px 0 0;
  629. }
  630.  
  631. .u-section-2 .u-text-7 {
  632.   --animation-custom_in-translate_x: 50px;
  633.   --animation-custom_in-translate_y: 0px;
  634.   --animation-custom_in-opacity: 0;
  635.   --animation-custom_in-rotate: 0deg;
  636.   --animation-custom_in-scale: 0.3;
  637.   margin: 30px auto 0;
  638. }
  639.  
  640. .u-section-2 .u-image-2 {
  641.   height: 203px;
  642.   margin-top: 37px;
  643.   margin-bottom: 0;
  644.   --animation-custom_in-translate_x: 0px;
  645.   --animation-custom_in-translate_y: -300px;
  646.   --animation-custom_in-opacity: 0;
  647.   --animation-custom_in-rotate: 0deg;
  648.   --animation-custom_in-scale: 1;
  649. }
  650.  
  651. .u-section-2 .u-text-8 {
  652.   font-size: 1rem;
  653.   letter-spacing: 0px;
  654.   font-style: italic;
  655.   text-align: left;
  656.   --animation-custom_in-translate_x: 0px;
  657.   --animation-custom_in-translate_y: 300px;
  658.   --animation-custom_in-opacity: 0;
  659.   --animation-custom_in-rotate: 0deg;
  660.   --animation-custom_in-scale: 1;
  661.   margin: 13px auto 60px;
  662. }
  663.  
  664. .u-section-2 .u-btn-1 {
  665.   border-style: solid;
  666.   font-style: italic;
  667.   padding: 0;
  668. }
  669.  
  670. @media (max-width: 1199px) {
  671.   .u-section-2 .u-group-1 {
  672.     margin-left: initial;
  673.   }
  674. }
  675.  
  676. @media (max-width: 991px) {
  677.   .u-section-2 .u-sheet-1 {
  678.     min-height: 360px;
  679.   }
  680.  
  681.   .u-section-2 .u-text-1 {
  682.     width: 720px;
  683.   }
  684.  
  685.   .u-section-2 .u-layout-wrap-1 {
  686.     width: 720px;
  687.   }
  688.  
  689.   .u-section-2 .u-layout-cell-1 {
  690.     min-height: 100px;
  691.   }
  692.  
  693.   .u-section-2 .u-image-1 {
  694.     height: 151px;
  695.   }
  696.  
  697.   .u-section-2 .u-text-2 {
  698.     margin-right: 0;
  699.   }
  700.  
  701.   .u-section-2 .u-text-3 {
  702.     margin-left: 0;
  703.     margin-right: 0;
  704.   }
  705.  
  706.   .u-section-2 .u-layout-cell-2 {
  707.     min-height: 100px;
  708.   }
  709.  
  710.   .u-section-2 .u-image-2 {
  711.     height: 151px;
  712.   }
  713. }
  714.  
  715. @media (max-width: 767px) {
  716.   .u-section-2 .u-sheet-1 {
  717.     min-height: 460px;
  718.   }
  719.  
  720.   .u-section-2 .u-text-1 {
  721.     width: 540px;
  722.   }
  723.  
  724.   .u-section-2 .u-layout-wrap-1 {
  725.     width: 540px;
  726.   }
  727.  
  728.   .u-section-2 .u-container-layout-1 {
  729.     padding-left: 10px;
  730.     padding-right: 10px;
  731.   }
  732.  
  733.   .u-section-2 .u-image-1 {
  734.     height: 262px;
  735.   }
  736.  
  737.   .u-section-2 .u-container-layout-3 {
  738.     padding-left: 10px;
  739.     padding-right: 10px;
  740.   }
  741.  
  742.   .u-section-2 .u-image-2 {
  743.     height: 262px;
  744.   }
  745. }
  746.  
  747. @media (max-width: 575px) {
  748.   .u-section-2 .u-text-1 {
  749.     font-size: 2.25rem;
  750.     width: 340px;
  751.   }
  752.  
  753.   .u-section-2 .u-layout-wrap-1 {
  754.     width: 340px;
  755.   }
  756.  
  757.   .u-section-2 .u-image-1 {
  758.     height: 161px;
  759.   }
  760.  
  761.   .u-section-2 .u-image-2 {
  762.     height: 161px;
  763.   }
  764. } .u-section-3 {
  765.   min-height: 1012px;
  766. }
  767.  
  768. .u-section-3 .u-image-1 {
  769.   height: 679px;
  770.   object-position: 0% 50%;
  771.   margin-top: 0;
  772.   margin-bottom: 0;
  773. }
  774.  
  775. .u-section-3 .u-list-1 {
  776.   width: 1140px;
  777.   margin: -114px auto 0;
  778. }
  779.  
  780. .u-section-3 .u-repeater-1 {
  781.   grid-template-columns: repeat(4, calc(25% - 20.25px));
  782.   min-height: 310px;
  783.   grid-gap: 27px;
  784. }
  785.  
  786. .u-section-3 .u-list-item-1 {
  787.   box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.2);
  788.   --animation-custom_in-translate_x: 0px;
  789.   --animation-custom_in-translate_y: 300px;
  790.   --animation-custom_in-opacity: 0;
  791.   --animation-custom_in-rotate: 0deg;
  792.   --animation-custom_in-scale: 1;
  793. }
  794.  
  795. .u-section-3 .u-container-layout-1 {
  796.   padding: 30px 20px;
  797. }
  798.  
  799. .u-section-3 .u-text-1 {
  800.   font-size: 3rem;
  801.   font-weight: 700;
  802.   --animation-custom_in-translate_x: 0px;
  803.   --animation-custom_in-translate_y: 0px;
  804.   --animation-custom_in-opacity: 0;
  805.   --animation-custom_in-rotate: 0deg;
  806.   --animation-custom_in-scale: 0.3;
  807.   margin: 0 auto 0 0;
  808. }
  809.  
  810. .u-section-3 .u-text-2 {
  811.   --animation-custom_in-translate_x: 0px;
  812.   --animation-custom_in-translate_y: 300px;
  813.   --animation-custom_in-opacity: 0;
  814.   --animation-custom_in-rotate: 0deg;
  815.   --animation-custom_in-scale: 1;
  816.   margin: 20px auto 0 0;
  817. }
  818.  
  819. .u-section-3 .u-text-3 {
  820.   font-style: italic;
  821.   --animation-custom_in-translate_x: 0px;
  822.   --animation-custom_in-translate_y: 300px;
  823.   --animation-custom_in-opacity: 0;
  824.   --animation-custom_in-rotate: 0deg;
  825.   --animation-custom_in-scale: 1;
  826.   margin: 25px auto 0 0;
  827. }
  828.  
  829. .u-section-3 .u-list-item-2 {
  830.   box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.2);
  831.   --animation-custom_in-translate_x: 0px;
  832.   --animation-custom_in-translate_y: 300px;
  833.   --animation-custom_in-opacity: 0;
  834.   --animation-custom_in-rotate: 0deg;
  835.   --animation-custom_in-scale: 1;
  836. }
  837.  
  838. .u-section-3 .u-container-layout-2 {
  839.   padding: 30px 20px;
  840. }
  841.  
  842. .u-section-3 .u-text-4 {
  843.   font-size: 3rem;
  844.   font-weight: 700;
  845.   --animation-custom_in-translate_x: 0px;
  846.   --animation-custom_in-translate_y: 0px;
  847.   --animation-custom_in-opacity: 0;
  848.   --animation-custom_in-rotate: 0deg;
  849.   --animation-custom_in-scale: 0.3;
  850.   margin: 0 auto 0 0;
  851. }
  852.  
  853. .u-section-3 .u-text-5 {
  854.   --animation-custom_in-translate_x: 0px;
  855.   --animation-custom_in-translate_y: 300px;
  856.   --animation-custom_in-opacity: 0;
  857.   --animation-custom_in-rotate: 0deg;
  858.   --animation-custom_in-scale: 1;
  859.   font-size: 1.25rem;
  860.   font-weight: 700;
  861.   margin: 20px auto 0 0;
  862. }
  863.  
  864. .u-section-3 .u-text-6 {
  865.   font-style: italic;
  866.   --animation-custom_in-translate_x: 0px;
  867.   --animation-custom_in-translate_y: 300px;
  868.   --animation-custom_in-opacity: 0;
  869.   --animation-custom_in-rotate: 0deg;
  870.   --animation-custom_in-scale: 1;
  871.   margin: 25px auto 0 0;
  872. }
  873.  
  874. .u-section-3 .u-list-item-3 {
  875.   box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.2);
  876.   --animation-custom_in-translate_x: 0px;
  877.   --animation-custom_in-translate_y: 300px;
  878.   --animation-custom_in-opacity: 0;
  879.   --animation-custom_in-rotate: 0deg;
  880.   --animation-custom_in-scale: 1;
  881. }
  882.  
  883. .u-section-3 .u-container-layout-3 {
  884.   padding: 30px 20px;
  885. }
  886.  
  887. .u-section-3 .u-text-7 {
  888.   font-size: 3rem;
  889.   font-weight: 700;
  890.   --animation-custom_in-translate_x: 0px;
  891.   --animation-custom_in-translate_y: 0px;
  892.   --animation-custom_in-opacity: 0;
  893.   --animation-custom_in-rotate: 0deg;
  894.   --animation-custom_in-scale: 0.3;
  895.   margin: 0 auto 0 0;
  896. }
  897.  
  898. .u-section-3 .u-text-8 {
  899.   --animation-custom_in-translate_x: 0px;
  900.   --animation-custom_in-translate_y: 300px;
  901.   --animation-custom_in-opacity: 0;
  902.   --animation-custom_in-rotate: 0deg;
  903.   --animation-custom_in-scale: 1;
  904.   font-size: 1.25rem;
  905.   font-weight: 700;
  906.   margin: 20px auto 0 0;
  907. }
  908.  
  909. .u-section-3 .u-text-9 {
  910.   font-style: italic;
  911.   --animation-custom_in-translate_x: 0px;
  912.   --animation-custom_in-translate_y: 300px;
  913.   --animation-custom_in-opacity: 0;
  914.   --animation-custom_in-rotate: 0deg;
  915.   --animation-custom_in-scale: 1;
  916.   margin: 25px auto 0 0;
  917. }
  918.  
  919. .u-section-3 .u-list-item-4 {
  920.   box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.2);
  921.   --animation-custom_in-translate_x: 0px;
  922.   --animation-custom_in-translate_y: 300px;
  923.   --animation-custom_in-opacity: 0;
  924.   --animation-custom_in-rotate: 0deg;
  925.   --animation-custom_in-scale: 1;
  926. }
  927.  
  928. .u-section-3 .u-container-layout-4 {
  929.   padding: 30px 20px;
  930. }
  931.  
  932. .u-section-3 .u-text-10 {
  933.   font-size: 3rem;
  934.   font-weight: 700;
  935.   --animation-custom_in-translate_x: 0px;
  936.   --animation-custom_in-translate_y: 0px;
  937.   --animation-custom_in-opacity: 0;
  938.   --animation-custom_in-rotate: 0deg;
  939.   --animation-custom_in-scale: 0.3;
  940.   margin: 0 auto 0 0;
  941. }
  942.  
  943. .u-section-3 .u-text-11 {
  944.   --animation-custom_in-translate_x: 0px;
  945.   --animation-custom_in-translate_y: 300px;
  946.   --animation-custom_in-opacity: 0;
  947.   --animation-custom_in-rotate: 0deg;
  948.   --animation-custom_in-scale: 1;
  949.   font-size: 1.25rem;
  950.   font-weight: 700;
  951.   margin: 20px auto 0 0;
  952. }
  953.  
  954. .u-section-3 .u-text-12 {
  955.   font-style: italic;
  956.   --animation-custom_in-translate_x: 0px;
  957.   --animation-custom_in-translate_y: 300px;
  958.   --animation-custom_in-opacity: 0;
  959.   --animation-custom_in-rotate: 0deg;
  960.   --animation-custom_in-scale: 1;
  961.   margin: 25px auto 0 0;
  962. }
  963.  
  964. .u-section-3 .u-text-13 {
  965.   --animation-custom_in-scale: 1;
  966.   --animation-custom_in-translate_x: 0px;
  967.   --animation-custom_in-translate_y: 300px;
  968.   margin: 52px auto -153px calc(((100% - 1140px) / 2) + 497px);
  969. }
  970.  
  971. .u-section-3 .u-btn-1 {
  972.   font-weight: 400;
  973.   padding: 0;
  974. }
  975.  
  976. @media (max-width: 1199px) {
  977.    .u-section-3 {
  978.     min-height: 886px;
  979.   }
  980.  
  981.   .u-section-3 .u-image-1 {
  982.     height: 575px;
  983.   }
  984.  
  985.   .u-section-3 .u-list-1 {
  986.     width: 940px;
  987.   }
  988.  
  989.   .u-section-3 .u-repeater-1 {
  990.     min-height: 256px;
  991.     grid-gap: 30px;
  992.   }
  993.  
  994.   .u-section-3 .u-text-13 {
  995.     width: auto;
  996.     margin-top: 34px;
  997.     margin-left: auto;
  998.     margin-bottom: 55px;
  999.   }
  1000. }
  1001.  
  1002. @media (max-width: 991px) {
  1003.    .u-section-3 {
  1004.     min-height: 1053px;
  1005.   }
  1006.  
  1007.   .u-section-3 .u-image-1 {
  1008.     height: 469px;
  1009.     object-position: 59.45% 50%;
  1010.   }
  1011.  
  1012.   .u-section-3 .u-list-1 {
  1013.     width: 720px;
  1014.   }
  1015.  
  1016.   .u-section-3 .u-repeater-1 {
  1017.     min-height: 552px;
  1018.     grid-template-columns: repeat(2, calc(50% - 13.5px));
  1019.   }
  1020.  
  1021.   .u-section-3 .u-text-13 {
  1022.     margin-top: 50px;
  1023.     margin-bottom: 60px;
  1024.   }
  1025. }
  1026.  
  1027. @media (max-width: 767px) {
  1028.    .u-section-3 {
  1029.     min-height: 1463px;
  1030.   }
  1031.  
  1032.   .u-section-3 .u-image-1 {
  1033.     height: 419px;
  1034.   }
  1035.  
  1036.   .u-section-3 .u-list-1 {
  1037.     width: 540px;
  1038.   }
  1039.  
  1040.   .u-section-3 .u-repeater-1 {
  1041.     grid-template-columns: 100%;
  1042.   }
  1043. }
  1044.  
  1045. @media (max-width: 575px) {
  1046.    .u-section-3 {
  1047.     min-height: 1444px;
  1048.   }
  1049.  
  1050.   .u-section-3 .u-image-1 {
  1051.     height: 313px;
  1052.   }
  1053.  
  1054.   .u-section-3 .u-list-1 {
  1055.     width: 340px;
  1056.     margin-top: -76px;
  1057.   }
  1058.  
  1059.   .u-section-3 .u-text-1 {
  1060.     font-size: 2.25rem;
  1061.   }
  1062.  
  1063.   .u-section-3 .u-text-4 {
  1064.     font-size: 2.25rem;
  1065.   }
  1066.  
  1067.   .u-section-3 .u-text-7 {
  1068.     font-size: 2.25rem;
  1069.   }
  1070.  
  1071.   .u-section-3 .u-text-10 {
  1072.     font-size: 2.25rem;
  1073.   }
  1074. } .u-section-4 {
  1075.   background-image: url("../images/btfl.jpg");
  1076.   background-position: 50% 50%;
  1077. }
  1078.  
  1079. .u-section-4 .u-sheet-1 {
  1080.   min-height: 740px;
  1081. }
  1082.  
  1083. .u-section-4 .u-list-1 {
  1084.   width: 563px;
  1085.   margin: 77px 0 0 auto;
  1086. }
  1087.  
  1088. .u-section-4 .u-repeater-1 {
  1089.   grid-template-columns: repeat(3, calc(33.3333% - 13.3333px));
  1090.   min-height: 412px;
  1091.   grid-gap: 20px;
  1092. }
  1093.  
  1094. .u-section-4 .u-list-item-1 {
  1095.   background-image: none;
  1096.   --animation-custom_in-scale: 0.3;
  1097. }
  1098.  
  1099. .u-section-4 .u-container-layout-1 {
  1100.   padding: 55px 20px 30px;
  1101. }
  1102.  
  1103. .u-section-4 .u-icon-1 {
  1104.   height: 48px;
  1105.   width: 48px;
  1106.   margin: 0 auto;
  1107. }
  1108.  
  1109. .u-section-4 .u-text-1 {
  1110.   font-family: Lato, sans-serif;
  1111.   font-size: 1rem;
  1112.   text-transform: uppercase;
  1113.   margin: 18px 0 0;
  1114. }
  1115.  
  1116. .u-section-4 .u-list-item-2 {
  1117.   --animation-custom_in-scale: 0.3;
  1118. }
  1119.  
  1120. .u-section-4 .u-container-layout-2 {
  1121.   padding: 55px 20px 30px;
  1122. }
  1123.  
  1124. .u-section-4 .u-icon-2 {
  1125.   height: 48px;
  1126.   width: 48px;
  1127.   margin: 0 auto;
  1128. }
  1129.  
  1130. .u-section-4 .u-text-2 {
  1131.   font-family: Lato, sans-serif;
  1132.   font-size: 1rem;
  1133.   text-transform: uppercase;
  1134.   margin: 18px 0 0;
  1135. }
  1136.  
  1137. .u-section-4 .u-list-item-3 {
  1138.   --animation-custom_in-scale: 0.3;
  1139. }
  1140.  
  1141. .u-section-4 .u-container-layout-3 {
  1142.   padding: 55px 20px 30px;
  1143. }
  1144.  
  1145. .u-section-4 .u-icon-3 {
  1146.   height: 48px;
  1147.   width: 48px;
  1148.   margin: 0 auto;
  1149. }
  1150.  
  1151. .u-section-4 .u-text-3 {
  1152.   font-family: Lato, sans-serif;
  1153.   font-size: 1rem;
  1154.   text-transform: uppercase;
  1155.   margin: 18px 0 0;
  1156. }
  1157.  
  1158. .u-section-4 .u-list-item-4 {
  1159.   --animation-custom_in-scale: 0.3;
  1160. }
  1161.  
  1162. .u-section-4 .u-container-layout-4 {
  1163.   padding: 55px 20px 30px;
  1164. }
  1165.  
  1166. .u-section-4 .u-icon-4 {
  1167.   height: 48px;
  1168.   width: 48px;
  1169.   margin: 0 auto;
  1170. }
  1171.  
  1172. .u-section-4 .u-text-4 {
  1173.   font-family: Lato, sans-serif;
  1174.   font-size: 1rem;
  1175.   text-transform: uppercase;
  1176.   margin: 18px 0 0;
  1177. }
  1178.  
  1179. .u-section-4 .u-list-item-5 {
  1180.   --animation-custom_in-scale: 0.3;
  1181. }
  1182.  
  1183. .u-section-4 .u-container-layout-5 {
  1184.   padding: 55px 20px 30px;
  1185. }
  1186.  
  1187. .u-section-4 .u-icon-5 {
  1188.   height: 48px;
  1189.   width: 48px;
  1190.   margin: 0 auto;
  1191. }
  1192.  
  1193. .u-section-4 .u-text-5 {
  1194.   font-family: Lato, sans-serif;
  1195.   font-size: 1rem;
  1196.   text-transform: uppercase;
  1197.   margin: 18px 0 0;
  1198. }
  1199.  
  1200. .u-section-4 .u-list-item-6 {
  1201.   --animation-custom_in-scale: 0.3;
  1202. }
  1203.  
  1204. .u-section-4 .u-container-layout-6 {
  1205.   padding: 55px 20px 30px;
  1206. }
  1207.  
  1208. .u-section-4 .u-icon-6 {
  1209.   height: 48px;
  1210.   width: 48px;
  1211.   margin: 0 auto;
  1212. }
  1213.  
  1214. .u-section-4 .u-text-6 {
  1215.   font-family: Lato, sans-serif;
  1216.   font-size: 1rem;
  1217.   text-transform: uppercase;
  1218.   margin: 18px 0 0;
  1219. }
  1220.  
  1221. .u-section-4 .u-text-7 {
  1222.   --animation-custom_in-translate_x: 0px;
  1223.   --animation-custom_in-translate_y: 300px;
  1224.   --animation-custom_in-opacity: 0;
  1225.   --animation-custom_in-rotate: 0deg;
  1226.   --animation-custom_in-scale: 1;
  1227.   margin: 22px 0 77px 577px;
  1228. }
  1229.  
  1230. .u-section-4 .u-btn-1 {
  1231.   background-image: none;
  1232.   border-style: solid;
  1233.   padding: 0;
  1234. }
  1235.  
  1236. @media (max-width: 1199px) {
  1237.   .u-section-4 .u-sheet-1 {
  1238.     min-height: 413px;
  1239.   }
  1240.  
  1241.   .u-section-4 .u-list-1 {
  1242.     height: auto;
  1243.     margin-top: 80px;
  1244.   }
  1245.  
  1246.   .u-section-4 .u-text-7 {
  1247.     margin-bottom: 80px;
  1248.   }
  1249. }
  1250.  
  1251. @media (max-width: 991px) {
  1252.   .u-section-4 .u-sheet-1 {
  1253.     min-height: 472px;
  1254.   }
  1255.  
  1256.   .u-section-4 .u-list-1 {
  1257.     width: 497px;
  1258.     margin-top: 60px;
  1259.   }
  1260.  
  1261.   .u-section-4 .u-repeater-1 {
  1262.     grid-template-columns: repeat(2, calc(50% - 10px));
  1263.   }
  1264.  
  1265.   .u-section-4 .u-container-layout-1 {
  1266.     padding-top: 30px;
  1267.   }
  1268.  
  1269.   .u-section-4 .u-container-layout-2 {
  1270.     padding-top: 30px;
  1271.   }
  1272.  
  1273.   .u-section-4 .u-container-layout-3 {
  1274.     padding-top: 30px;
  1275.   }
  1276.  
  1277.   .u-section-4 .u-container-layout-4 {
  1278.     padding-top: 30px;
  1279.   }
  1280.  
  1281.   .u-section-4 .u-container-layout-5 {
  1282.     padding-top: 30px;
  1283.   }
  1284.  
  1285.   .u-section-4 .u-container-layout-6 {
  1286.     padding-top: 30px;
  1287.   }
  1288.  
  1289.   .u-section-4 .u-text-7 {
  1290.     width: auto;
  1291.     margin-bottom: 60px;
  1292.     margin-left: 157px;
  1293.   }
  1294. }
  1295.  
  1296. @media (max-width: 767px) {
  1297.   .u-section-4 .u-list-1 {
  1298.     width: 438px;
  1299.   }
  1300.  
  1301.   .u-section-4 .u-text-7 {
  1302.     margin-left: 0;
  1303.   }
  1304. }
  1305.  
  1306. @media (max-width: 575px) {
  1307.    .u-section-4 {
  1308.     background-position: 36.88% 50%;
  1309.   }
  1310.  
  1311.   .u-section-4 .u-list-1 {
  1312.     width: 340px;
  1313.   }
  1314. } .u-section-5 {
  1315.   background-image: none;
  1316. }
  1317.  
  1318. .u-section-5 .u-sheet-1 {
  1319.   min-height: 1332px;
  1320. }
  1321.  
  1322. .u-section-5 .u-text-1 {
  1323.   margin: 60px 50px 0;
  1324. }
  1325.  
  1326. .u-section-5 .u-list-1 {
  1327.   grid-template-rows: repeat(1, auto);
  1328.   margin: 47px auto 0 0;
  1329. }
  1330.  
  1331. .u-section-5 .u-repeater-1 {
  1332.   grid-template-columns: repeat(3, calc(33.3333% - 18px));
  1333.   min-height: 1015px;
  1334.   grid-gap: 27px;
  1335. }
  1336.  
  1337. .u-section-5 .u-list-item-1 {
  1338.   box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.1);
  1339. }
  1340.  
  1341. .u-section-5 .u-container-layout-1 {
  1342.   padding: 30px;
  1343. }
  1344.  
  1345. .u-section-5 .u-image-1 {
  1346.   height: 243px;
  1347.   margin: 0 auto 0 0;
  1348. }
  1349.  
  1350. .u-section-5 .u-text-2 {
  1351.   text-transform: uppercase;
  1352.   font-weight: 700;
  1353.   margin: 20px 0 0;
  1354. }
  1355.  
  1356. .u-section-5 .u-text-3 {
  1357.   margin: 20px auto 0 0;
  1358. }
  1359.  
  1360. .u-section-5 .u-text-4 {
  1361.   font-weight: 700;
  1362.   font-size: 1.5rem;
  1363.   margin: 20px auto 0 0;
  1364. }
  1365.  
  1366. .u-section-5 .u-btn-1 {
  1367.   text-transform: uppercase;
  1368.   font-weight: 700;
  1369.   background-image: none;
  1370.   margin: -45px 0 0 auto;
  1371. }
  1372.  
  1373. .u-section-5 .u-list-item-2 {
  1374.   box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.1);
  1375. }
  1376.  
  1377. .u-section-5 .u-container-layout-2 {
  1378.   padding: 30px;
  1379. }
  1380.  
  1381. .u-section-5 .u-image-2 {
  1382.   height: 243px;
  1383.   margin: 0 auto 0 0;
  1384. }
  1385.  
  1386. .u-section-5 .u-text-5 {
  1387.   text-transform: uppercase;
  1388.   font-weight: 700;
  1389.   margin: 20px 0 0;
  1390. }
  1391.  
  1392. .u-section-5 .u-text-6 {
  1393.   margin: 20px auto 0 0;
  1394. }
  1395.  
  1396. .u-section-5 .u-text-7 {
  1397.   font-weight: 700;
  1398.   font-size: 1.5rem;
  1399.   margin: 20px auto 0 0;
  1400. }
  1401.  
  1402. .u-section-5 .u-btn-2 {
  1403.   text-transform: uppercase;
  1404.   font-weight: 700;
  1405.   background-image: none;
  1406.   margin: -45px 0 0 auto;
  1407. }
  1408.  
  1409. .u-section-5 .u-list-item-3 {
  1410.   box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.1);
  1411.   background-image: none;
  1412. }
  1413.  
  1414. .u-section-5 .u-container-layout-3 {
  1415.   padding: 30px;
  1416. }
  1417.  
  1418. .u-section-5 .u-image-3 {
  1419.   height: 243px;
  1420.   margin: 0 auto 0 0;
  1421. }
  1422.  
  1423. .u-section-5 .u-text-8 {
  1424.   text-transform: uppercase;
  1425.   font-weight: 700;
  1426.   margin: 20px 0 0;
  1427. }
  1428.  
  1429. .u-section-5 .u-text-9 {
  1430.   margin: 20px auto 0 0;
  1431. }
  1432.  
  1433. .u-section-5 .u-text-10 {
  1434.   font-weight: 700;
  1435.   font-size: 1.5rem;
  1436.   margin: 20px auto 0 0;
  1437. }
  1438.  
  1439. .u-section-5 .u-btn-3 {
  1440.   text-transform: uppercase;
  1441.   font-weight: 700;
  1442.   background-image: none;
  1443.   margin: -45px 0 0 auto;
  1444. }
  1445.  
  1446. .u-section-5 .u-list-item-4 {
  1447.   box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.1);
  1448.   background-image: none;
  1449. }
  1450.  
  1451. .u-section-5 .u-container-layout-4 {
  1452.   padding: 30px;
  1453. }
  1454.  
  1455. .u-section-5 .u-image-4 {
  1456.   height: 243px;
  1457.   margin: 0 auto 0 0;
  1458. }
  1459.  
  1460. .u-section-5 .u-text-11 {
  1461.   text-transform: uppercase;
  1462.   font-weight: 700;
  1463.   margin: 20px 0 0;
  1464. }
  1465.  
  1466. .u-section-5 .u-text-12 {
  1467.   margin: 20px auto 0 0;
  1468. }
  1469.  
  1470. .u-section-5 .u-text-13 {
  1471.   font-weight: 700;
  1472.   font-size: 1.5rem;
  1473.   margin: 20px auto 0 0;
  1474. }
  1475.  
  1476. .u-section-5 .u-btn-4 {
  1477.   text-transform: uppercase;
  1478.   font-weight: 700;
  1479.   background-image: none;
  1480.   margin: -45px 0 0 auto;
  1481. }
  1482.  
  1483. .u-section-5 .u-list-item-5 {
  1484.   box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.1);
  1485.   background-image: none;
  1486. }
  1487.  
  1488. .u-section-5 .u-container-layout-5 {
  1489.   padding: 30px;
  1490. }
  1491.  
  1492. .u-section-5 .u-image-5 {
  1493.   height: 243px;
  1494.   margin: 0 auto 0 0;
  1495. }
  1496.  
  1497. .u-section-5 .u-text-14 {
  1498.   text-transform: uppercase;
  1499.   font-weight: 700;
  1500.   margin: 20px 0 0;
  1501. }
  1502.  
  1503. .u-section-5 .u-text-15 {
  1504.   margin: 20px auto 0 0;
  1505. }
  1506.  
  1507. .u-section-5 .u-text-16 {
  1508.   font-weight: 700;
  1509.   font-size: 1.5rem;
  1510.   margin: 20px auto 0 0;
  1511. }
  1512.  
  1513. .u-section-5 .u-btn-5 {
  1514.   text-transform: uppercase;
  1515.   font-weight: 700;
  1516.   background-image: none;
  1517.   margin: -45px 0 0 auto;
  1518. }
  1519.  
  1520. .u-section-5 .u-list-item-6 {
  1521.   box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.1);
  1522.   background-image: none;
  1523. }
  1524.  
  1525. .u-section-5 .u-container-layout-6 {
  1526.   padding: 30px;
  1527. }
  1528.  
  1529. .u-section-5 .u-image-6 {
  1530.   height: 243px;
  1531.   margin: 0 auto 0 0;
  1532. }
  1533.  
  1534. .u-section-5 .u-text-17 {
  1535.   text-transform: uppercase;
  1536.   font-weight: 700;
  1537.   margin: 20px 0 0;
  1538. }
  1539.  
  1540. .u-section-5 .u-text-18 {
  1541.   margin: 20px auto 0 0;
  1542. }
  1543.  
  1544. .u-section-5 .u-text-19 {
  1545.   font-weight: 700;
  1546.   font-size: 1.5rem;
  1547.   margin: 20px auto 0 0;
  1548. }
  1549.  
  1550. .u-section-5 .u-btn-6 {
  1551.   text-transform: uppercase;
  1552.   font-weight: 700;
  1553.   background-image: none;
  1554.   margin: -45px 0 0 auto;
  1555. }
  1556.  
  1557. .u-section-5 .u-text-20 {
  1558.   margin: 40px auto 60px;
  1559. }
  1560.  
  1561. .u-section-5 .u-btn-7 {
  1562.   padding: 0;
  1563. }
  1564.  
  1565. @media (max-width: 1199px) {
  1566.   .u-section-5 .u-sheet-1 {
  1567.     min-height: 1230px;
  1568.   }
  1569.  
  1570.   .u-section-5 .u-text-1 {
  1571.     margin-left: 0;
  1572.     margin-right: 0;
  1573.   }
  1574.  
  1575.   .u-section-5 .u-list-1 {
  1576.     margin-right: initial;
  1577.     margin-left: initial;
  1578.   }
  1579.  
  1580.   .u-section-5 .u-repeater-1 {
  1581.     min-height: 937px;
  1582.   }
  1583.  
  1584.   .u-section-5 .u-image-1 {
  1585.     height: 192px;
  1586.     margin-right: initial;
  1587.     margin-left: initial;
  1588.   }
  1589.  
  1590.   .u-section-5 .u-btn-1 {
  1591.     margin-top: -37px;
  1592.   }
  1593.  
  1594.   .u-section-5 .u-image-2 {
  1595.     height: 192px;
  1596.     margin-right: initial;
  1597.     margin-left: initial;
  1598.   }
  1599.  
  1600.   .u-section-5 .u-btn-2 {
  1601.     margin-top: -37px;
  1602.   }
  1603.  
  1604.   .u-section-5 .u-image-3 {
  1605.     height: 192px;
  1606.     margin-right: initial;
  1607.     margin-left: initial;
  1608.   }
  1609.  
  1610.   .u-section-5 .u-btn-3 {
  1611.     margin-top: -37px;
  1612.   }
  1613.  
  1614.   .u-section-5 .u-image-4 {
  1615.     height: 192px;
  1616.     margin-right: initial;
  1617.     margin-left: initial;
  1618.   }
  1619.  
  1620.   .u-section-5 .u-btn-4 {
  1621.     margin-top: -37px;
  1622.   }
  1623.  
  1624.   .u-section-5 .u-image-5 {
  1625.     height: 192px;
  1626.     margin-right: initial;
  1627.     margin-left: initial;
  1628.   }
  1629.  
  1630.   .u-section-5 .u-btn-5 {
  1631.     margin-top: -37px;
  1632.   }
  1633.  
  1634.   .u-section-5 .u-image-6 {
  1635.     height: 192px;
  1636.     margin-right: initial;
  1637.     margin-left: initial;
  1638.   }
  1639.  
  1640.   .u-section-5 .u-btn-6 {
  1641.     margin-top: -37px;
  1642.   }
  1643.  
  1644.   .u-section-5 .u-text-20 {
  1645.     margin-top: 24px;
  1646.   }
  1647. }
  1648.  
  1649. @media (max-width: 991px) {
  1650.   .u-section-5 .u-repeater-1 {
  1651.     grid-template-columns: repeat(2, calc(50% - 13.5px));
  1652.     min-height: 1614px;
  1653.   }
  1654.  
  1655.   .u-section-5 .u-image-1 {
  1656.     height: 227px;
  1657.     margin-right: initial;
  1658.     margin-left: initial;
  1659.   }
  1660.  
  1661.   .u-section-5 .u-image-2 {
  1662.     height: 227px;
  1663.     margin-right: initial;
  1664.     margin-left: initial;
  1665.   }
  1666.  
  1667.   .u-section-5 .u-image-3 {
  1668.     height: 227px;
  1669.     margin-right: initial;
  1670.     margin-left: initial;
  1671.   }
  1672.  
  1673.   .u-section-5 .u-image-4 {
  1674.     height: 227px;
  1675.     margin-right: initial;
  1676.     margin-left: initial;
  1677.   }
  1678.  
  1679.   .u-section-5 .u-image-5 {
  1680.     height: 227px;
  1681.     margin-right: initial;
  1682.     margin-left: initial;
  1683.   }
  1684.  
  1685.   .u-section-5 .u-image-6 {
  1686.     height: 227px;
  1687.     margin-right: initial;
  1688.     margin-left: initial;
  1689.   }
  1690. }
  1691.  
  1692. @media (max-width: 767px) {
  1693.   .u-section-5 .u-repeater-1 {
  1694.     grid-template-columns: 100%;
  1695.   }
  1696.  
  1697.   .u-section-5 .u-image-1 {
  1698.     height: 393px;
  1699.     margin-right: initial;
  1700.     margin-left: initial;
  1701.   }
  1702.  
  1703.   .u-section-5 .u-text-4 {
  1704.     font-size: 1.875rem;
  1705.     width: auto;
  1706.     margin-top: 24px;
  1707.   }
  1708.  
  1709.   .u-section-5 .u-btn-1 {
  1710.     margin-top: -41px;
  1711.   }
  1712.  
  1713.   .u-section-5 .u-image-2 {
  1714.     height: 393px;
  1715.     margin-right: initial;
  1716.     margin-left: initial;
  1717.   }
  1718.  
  1719.   .u-section-5 .u-text-7 {
  1720.     font-size: 1.875rem;
  1721.     width: auto;
  1722.     margin-top: 24px;
  1723.   }
  1724.  
  1725.   .u-section-5 .u-btn-2 {
  1726.     margin-top: -41px;
  1727.   }
  1728.  
  1729.   .u-section-5 .u-image-3 {
  1730.     height: 393px;
  1731.     margin-right: initial;
  1732.     margin-left: initial;
  1733.   }
  1734.  
  1735.   .u-section-5 .u-text-10 {
  1736.     font-size: 1.875rem;
  1737.     width: auto;
  1738.     margin-top: 24px;
  1739.   }
  1740.  
  1741.   .u-section-5 .u-btn-3 {
  1742.     margin-top: -41px;
  1743.   }
  1744.  
  1745.   .u-section-5 .u-image-4 {
  1746.     height: 393px;
  1747.     margin-right: initial;
  1748.     margin-left: initial;
  1749.   }
  1750.  
  1751.   .u-section-5 .u-text-13 {
  1752.     font-size: 1.875rem;
  1753.     width: auto;
  1754.     margin-top: 24px;
  1755.   }
  1756.  
  1757.   .u-section-5 .u-btn-4 {
  1758.     margin-top: -41px;
  1759.   }
  1760.  
  1761.   .u-section-5 .u-image-5 {
  1762.     height: 393px;
  1763.     margin-right: initial;
  1764.     margin-left: initial;
  1765.   }
  1766.  
  1767.   .u-section-5 .u-text-16 {
  1768.     font-size: 1.875rem;
  1769.     width: auto;
  1770.     margin-top: 24px;
  1771.   }
  1772.  
  1773.   .u-section-5 .u-btn-5 {
  1774.     margin-top: -41px;
  1775.   }
  1776.  
  1777.   .u-section-5 .u-image-6 {
  1778.     height: 393px;
  1779.     margin-right: initial;
  1780.     margin-left: initial;
  1781.   }
  1782.  
  1783.   .u-section-5 .u-text-19 {
  1784.     font-size: 1.875rem;
  1785.     width: auto;
  1786.     margin-top: 24px;
  1787.   }
  1788.  
  1789.   .u-section-5 .u-btn-6 {
  1790.     margin-top: -41px;
  1791.   }
  1792. }
  1793.  
  1794. @media (max-width: 575px) {
  1795.   .u-section-5 .u-container-layout-1 {
  1796.     padding-left: 20px;
  1797.     padding-right: 20px;
  1798.   }
  1799.  
  1800.   .u-section-5 .u-image-1 {
  1801.     height: 262px;
  1802.     margin-right: initial;
  1803.     margin-left: initial;
  1804.   }
  1805.  
  1806.   .u-section-5 .u-container-layout-2 {
  1807.     padding-left: 20px;
  1808.     padding-right: 20px;
  1809.   }
  1810.  
  1811.   .u-section-5 .u-image-2 {
  1812.     height: 262px;
  1813.     margin-right: initial;
  1814.     margin-left: initial;
  1815.   }
  1816.  
  1817.   .u-section-5 .u-container-layout-3 {
  1818.     padding-left: 20px;
  1819.     padding-right: 20px;
  1820.   }
  1821.  
  1822.   .u-section-5 .u-image-3 {
  1823.     height: 262px;
  1824.     margin-right: initial;
  1825.     margin-left: initial;
  1826.   }
  1827.  
  1828.   .u-section-5 .u-container-layout-4 {
  1829.     padding-left: 20px;
  1830.     padding-right: 20px;
  1831.   }
  1832.  
  1833.   .u-section-5 .u-image-4 {
  1834.     height: 262px;
  1835.     margin-right: initial;
  1836.     margin-left: initial;
  1837.   }
  1838.  
  1839.   .u-section-5 .u-container-layout-5 {
  1840.     padding-left: 20px;
  1841.     padding-right: 20px;
  1842.   }
  1843.  
  1844.   .u-section-5 .u-image-5 {
  1845.     height: 262px;
  1846.     margin-right: initial;
  1847.     margin-left: initial;
  1848.   }
  1849.  
  1850.   .u-section-5 .u-container-layout-6 {
  1851.     padding-left: 20px;
  1852.     padding-right: 20px;
  1853.   }
  1854.  
  1855.   .u-section-5 .u-image-6 {
  1856.     height: 262px;
  1857.     margin-right: initial;
  1858.     margin-left: initial;
  1859.   }
  1860. } .u-section-6 {
  1861.   background-image: linear-gradient(#1a1a1a, #404040);
  1862. }
  1863.  
  1864. .u-section-6 .u-sheet-1 {
  1865.   min-height: 1134px;
  1866. }
  1867.  
  1868. .u-section-6 .u-shape-1 {
  1869.   height: 430px;
  1870.   width: 430px;
  1871.   margin: 60px auto 0 0;
  1872. }
  1873.  
  1874. .u-section-6 .u-shape-2 {
  1875.   width: 471px;
  1876.   height: 637px;
  1877.   margin: -817px 0 0 auto;
  1878. }
  1879.  
  1880. .u-section-6 .u-image-1 {
  1881.   width: 1016px;
  1882.   height: 675px;
  1883.   margin: -566px auto 0;
  1884. }
  1885.  
  1886. .u-section-6 .u-group-1 {
  1887.   width: 464px;
  1888.   min-height: 470px;
  1889.   background-image: none;
  1890.   margin: -244px 119px -327px auto;
  1891. }
  1892.  
  1893. .u-section-6 .u-container-layout-1 {
  1894.   padding: 30px;
  1895. }
  1896.  
  1897. .u-section-6 .u-text-1 {
  1898.   font-size: 2.25rem;
  1899.   margin: 0;
  1900. }
  1901.  
  1902. .u-section-6 .u-text-2 {
  1903.   font-size: 1.25rem;
  1904.   margin: 45px 0 0;
  1905. }
  1906.  
  1907. .u-section-6 .u-text-3 {
  1908.   margin: 20px auto 0 0;
  1909. }
  1910.  
  1911. .u-section-6 .u-btn-1 {
  1912.   padding: 0;
  1913. }
  1914.  
  1915. .u-section-6 .u-btn-2 {
  1916.   font-size: 1rem;
  1917.   text-transform: uppercase;
  1918.   font-weight: 500;
  1919.   letter-spacing: 3px;
  1920.   border-style: solid;
  1921.   --animation-custom_in-translate_x: -300px;
  1922.   --animation-custom_in-translate_y: 0px;
  1923.   margin: 30px auto 0 0;
  1924.   padding: 16px 41px 16px 40px;
  1925. }
  1926.  
  1927. @media (max-width: 1199px) {
  1928.   .u-section-6 .u-sheet-1 {
  1929.     min-height: 1102px;
  1930.   }
  1931.  
  1932.   .u-section-6 .u-shape-1 {
  1933.     height: 375px;
  1934.     width: 424px;
  1935.   }
  1936.  
  1937.   .u-section-6 .u-shape-2 {
  1938.     height: 563px;
  1939.     margin-top: -762px;
  1940.   }
  1941.  
  1942.   .u-section-6 .u-image-1 {
  1943.     width: 828px;
  1944.     height: 631px;
  1945.     margin-top: -498px;
  1946.   }
  1947.  
  1948.   .u-section-6 .u-group-1 {
  1949.     margin-top: -194px;
  1950.   }
  1951. }
  1952.  
  1953. @media (max-width: 991px) {
  1954.   .u-section-6 .u-sheet-1 {
  1955.     min-height: 1089px;
  1956.   }
  1957.  
  1958.   .u-section-6 .u-shape-1 {
  1959.     height: 275px;
  1960.     width: 416px;
  1961.   }
  1962.  
  1963.   .u-section-6 .u-shape-2 {
  1964.     height: 463px;
  1965.     margin-top: -670px;
  1966.   }
  1967.  
  1968.   .u-section-6 .u-image-1 {
  1969.     width: 596px;
  1970.     height: 534px;
  1971.     margin-top: -402px;
  1972.     margin-left: 56px;
  1973.   }
  1974.  
  1975.   .u-section-6 .u-group-1 {
  1976.     margin-top: -112px;
  1977.     margin-bottom: -335px;
  1978.   }
  1979. }
  1980.  
  1981. @media (max-width: 767px) {
  1982.   .u-section-6 .u-sheet-1 {
  1983.     min-height: 1076px;
  1984.   }
  1985.  
  1986.   .u-section-6 .u-shape-1 {
  1987.     height: 223px;
  1988.     width: 368px;
  1989.   }
  1990.  
  1991.   .u-section-6 .u-shape-2 {
  1992.     width: 213px;
  1993.     height: 277px;
  1994.     margin-top: -435px;
  1995.   }
  1996.  
  1997.   .u-section-6 .u-image-1 {
  1998.     width: 439px;
  1999.     height: 334px;
  2000.     margin-top: -232px;
  2001.     margin-right: 45px;
  2002.     margin-left: auto;
  2003.   }
  2004.  
  2005.   .u-section-6 .u-group-1 {
  2006.     margin-top: 106px;
  2007.     margin-right: 0;
  2008.     margin-bottom: -152px;
  2009.   }
  2010. }
  2011.  
  2012. @media (max-width: 575px) {
  2013.   .u-section-6 .u-sheet-1 {
  2014.     min-height: 932px;
  2015.   }
  2016.  
  2017.   .u-section-6 .u-shape-1 {
  2018.     height: 209px;
  2019.     width: 170px;
  2020.   }
  2021.  
  2022.   .u-section-6 .u-shape-2 {
  2023.     width: 170px;
  2024.     height: 190px;
  2025.     margin-top: -304px;
  2026.   }
  2027.  
  2028.   .u-section-6 .u-image-1 {
  2029.     width: 254px;
  2030.     height: 220px;
  2031.     margin-top: -145px;
  2032.     margin-right: auto;
  2033.   }
  2034.  
  2035.   .u-section-6 .u-group-1 {
  2036.     min-height: 490px;
  2037.     margin-top: 59px;
  2038.     margin-bottom: -35px;
  2039.     margin-right: initial;
  2040.     margin-left: initial;
  2041.     width: auto;
  2042.   }
  2043.  
  2044.   .u-section-6 .u-text-1 {
  2045.     font-size: 1.5rem;
  2046.   }
  2047. } .u-section-7 {
  2048.   background-image: none;
  2049. }
  2050.  
  2051. .u-section-7 .u-sheet-1 {
  2052.   min-height: 1191px;
  2053. }
  2054.  
  2055. .u-section-7 .u-text-1 {
  2056.   font-weight: 700;
  2057.   font-family: Montserrat, sans-serif;
  2058.   font-size: 3rem;
  2059.   margin: 60px 79px 0;
  2060. }
  2061.  
  2062. .u-section-7 .u-gallery-1 {
  2063.   height: 745px;
  2064.   margin-top: 43px;
  2065.   margin-bottom: 0;
  2066.   grid-gap: 17px;
  2067. }
  2068.  
  2069. .u-section-7 .u-gallery-inner-1 {
  2070.   grid-template-columns: repeat(3, auto);
  2071.   grid-gap: 41px;
  2072. }
  2073.  
  2074. .u-section-7 .u-over-slide-1 {
  2075.   padding: 20px;
  2076. }
  2077.  
  2078. .u-section-7 .u-over-slide-2 {
  2079.   padding: 20px;
  2080. }
  2081.  
  2082. .u-section-7 .u-over-slide-3 {
  2083.   padding: 20px;
  2084. }
  2085.  
  2086. .u-section-7 .u-over-slide-4 {
  2087.   padding: 20px;
  2088. }
  2089.  
  2090. .u-section-7 .u-over-slide-5 {
  2091.   padding: 20px;
  2092. }
  2093.  
  2094. .u-section-7 .u-over-slide-6 {
  2095.   padding: 20px;
  2096. }
  2097.  
  2098. .u-section-7 .u-text-2 {
  2099.   line-height: 2;
  2100.   margin: 43px auto 0;
  2101. }
  2102.  
  2103. .u-section-7 .u-btn-1 {
  2104.   background-image: none;
  2105.   border-style: solid;
  2106.   padding: 0;
  2107. }
  2108.  
  2109. .u-section-7 .u-btn-2 {
  2110.   text-transform: uppercase;
  2111.   letter-spacing: 3px;
  2112.   border-style: solid;
  2113.   font-weight: 500;
  2114.   font-size: 1rem;
  2115.   --animation-custom_in-translate_x: -300px;
  2116.   --animation-custom_in-translate_y: 0px;
  2117.   margin: 36px auto 60px;
  2118.   padding: 16px 46px 17px;
  2119. }
  2120.  
  2121. @media (max-width: 1199px) {
  2122.   .u-section-7 .u-sheet-1 {
  2123.     min-height: 1060px;
  2124.   }
  2125.  
  2126.   .u-section-7 .u-text-1 {
  2127.     margin-left: 0;
  2128.     margin-right: 0;
  2129.   }
  2130.  
  2131.   .u-section-7 .u-gallery-1 {
  2132.     height: 614px;
  2133.   }
  2134. }
  2135.  
  2136. @media (max-width: 991px) {
  2137.   .u-section-7 .u-sheet-1 {
  2138.     min-height: 1504px;
  2139.   }
  2140.  
  2141.   .u-section-7 .u-gallery-1 {
  2142.     height: 1058px;
  2143.   }
  2144.  
  2145.   .u-section-7 .u-gallery-inner-1 {
  2146.     grid-template-columns: repeat(2, auto);
  2147.   }
  2148. }
  2149.  
  2150. @media (max-width: 767px) {
  2151.   .u-section-7 .u-sheet-1 {
  2152.     min-height: 3620px;
  2153.   }
  2154.  
  2155.   .u-section-7 .u-gallery-1 {
  2156.     height: 3174px;
  2157.   }
  2158.  
  2159.   .u-section-7 .u-gallery-inner-1 {
  2160.     grid-template-columns: repeat(1, auto);
  2161.   }
  2162. }
  2163.  
  2164. @media (max-width: 575px) {
  2165.   .u-section-7 .u-sheet-1 {
  2166.     min-height: 2444px;
  2167.   }
  2168.  
  2169.   .u-section-7 .u-text-1 {
  2170.     font-size: 1.875rem;
  2171.   }
  2172.  
  2173.   .u-section-7 .u-gallery-1 {
  2174.     height: 1998px;
  2175.   }
  2176. } .u-section-8 {
  2177.   background-image: none;
  2178.   min-height: 1117px;
  2179. }
  2180.  
  2181. .u-section-8 .u-shape-1 {
  2182.   height: 540px;
  2183.   background-image: none;
  2184.   margin-top: 0;
  2185.   margin-bottom: 0;
  2186. }
  2187.  
  2188. .u-section-8 .u-shape-2 {
  2189.   height: 808px;
  2190.   width: 303px;
  2191.   --animation-custom_in-translate_x: 0px;
  2192.   --animation-custom_in-translate_y: 300px;
  2193.   --animation-custom_in-opacity: 0;
  2194.   --animation-custom_in-rotate: 0deg;
  2195.   --animation-custom_in-scale: 1;
  2196.   margin: -453px calc(((100% - 1140px) / 2)) 0 auto;
  2197. }
  2198.  
  2199. .u-section-8 .u-image-1 {
  2200.   height: 676px;
  2201.   width: 998px;
  2202.   object-position: 45.65% 50%;
  2203.   --animation-custom_in-translate_x: -300px;
  2204.   --animation-custom_in-translate_y: 0px;
  2205.   --animation-custom_in-opacity: 0;
  2206.   --animation-custom_in-rotate: 0deg;
  2207.   --animation-custom_in-scale: 1;
  2208.   margin: -742px calc(((100% - 1140px) / 2) + 65px) 0 auto;
  2209. }
  2210.  
  2211. .u-section-8 .u-group-1 {
  2212.   min-height: 382px;
  2213.   width: 605px;
  2214.   --animation-custom_in-translate_x: 0px;
  2215.   --animation-custom_in-translate_y: 0px;
  2216.   margin: -174px auto 60px calc(((100% - 1140px) / 2));
  2217. }
  2218.  
  2219. .u-section-8 .u-container-layout-1 {
  2220.   padding: 30px 40px;
  2221. }
  2222.  
  2223. .u-section-8 .u-text-1 {
  2224.   font-size: 1.5rem;
  2225.   font-family: Roboto, sans-serif;
  2226.   letter-spacing: 2px;
  2227.   text-transform: uppercase;
  2228.   font-weight: 300;
  2229.   margin: 0 auto 0 0;
  2230. }
  2231.  
  2232. .u-section-8 .u-text-2 {
  2233.   font-size: 4.5rem;
  2234.   margin: 17px 0 0;
  2235. }
  2236.  
  2237. .u-section-8 .u-text-3 {
  2238.   letter-spacing: 1px;
  2239.   margin: 21px 0 0;
  2240. }
  2241.  
  2242. .u-section-8 .u-btn-1 {
  2243.   padding: 0;
  2244. }
  2245.  
  2246. @media (max-width: 1199px) {
  2247.   .u-section-8 .u-shape-2 {
  2248.     height: 725px;
  2249.     margin-right: calc(((100% - 940px) / 2));
  2250.   }
  2251.  
  2252.   .u-section-8 .u-image-1 {
  2253.     height: 587px;
  2254.     width: 806px;
  2255.     margin-top: -652px;
  2256.     margin-right: auto;
  2257.   }
  2258.  
  2259.   .u-section-8 .u-group-1 {
  2260.     --animation-custom_in-opacity: 0;
  2261.     --animation-custom_in-rotate: 0deg;
  2262.     --animation-custom_in-scale: 0.3;
  2263.     min-height: 418px;
  2264.     margin-top: -135px;
  2265.     margin-left: calc(((100% - 940px) / 2));
  2266.   }
  2267.  
  2268.   .u-section-8 .u-btn-1 {
  2269.     border-style: none none solid;
  2270.   }
  2271. }
  2272.  
  2273. @media (max-width: 991px) {
  2274.    .u-section-8 {
  2275.     min-height: 991px;
  2276.   }
  2277.  
  2278.   .u-section-8 .u-shape-1 {
  2279.     height: 407px;
  2280.   }
  2281.  
  2282.   .u-section-8 .u-shape-2 {
  2283.     height: 575px;
  2284.     width: 164px;
  2285.     margin-top: -336px;
  2286.     margin-right: calc(((100% - 720px) / 2));
  2287.   }
  2288.  
  2289.   .u-section-8 .u-image-1 {
  2290.     height: 428px;
  2291.     width: 595px;
  2292.     margin-top: -519px;
  2293.     margin-right: calc(((100% - 720px) / 2) + 58px);
  2294.   }
  2295.  
  2296.   .u-section-8 .u-group-1 {
  2297.     margin-top: -53px;
  2298.     margin-left: calc(((100% - 720px) / 2));
  2299.   }
  2300.  
  2301.   .u-section-8 .u-container-layout-1 {
  2302.     padding-left: 30px;
  2303.     padding-right: 30px;
  2304.   }
  2305. }
  2306.  
  2307. @media (max-width: 767px) {
  2308.    .u-section-8 {
  2309.     min-height: 981px;
  2310.   }
  2311.  
  2312.   .u-section-8 .u-shape-1 {
  2313.     height: 312px;
  2314.   }
  2315.  
  2316.   .u-section-8 .u-shape-2 {
  2317.     height: 448px;
  2318.     width: 137px;
  2319.     margin-top: -261px;
  2320.     margin-right: calc(((100% - 540px) / 2));
  2321.   }
  2322.  
  2323.   .u-section-8 .u-image-1 {
  2324.     height: 342px;
  2325.     width: 432px;
  2326.     margin-top: -395px;
  2327.     margin-right: auto;
  2328.   }
  2329.  
  2330.   .u-section-8 .u-group-1 {
  2331.     min-height: 420px;
  2332.     width: 540px;
  2333.     margin-top: 98px;
  2334.     margin-left: auto;
  2335.     margin-bottom: 70px;
  2336.   }
  2337.  
  2338.   .u-section-8 .u-container-layout-1 {
  2339.     padding-left: 20px;
  2340.     padding-right: 20px;
  2341.   }
  2342.  
  2343.   .u-section-8 .u-text-2 {
  2344.     width: auto;
  2345.     font-size: 4.0625rem;
  2346.   }
  2347.  
  2348.   .u-section-8 .u-text-3 {
  2349.     margin-right: 51px;
  2350.   }
  2351. }
  2352.  
  2353. @media (max-width: 575px) {
  2354.    .u-section-8 {
  2355.     min-height: 843px;
  2356.   }
  2357.  
  2358.   .u-section-8 .u-shape-1 {
  2359.     height: 228px;
  2360.   }
  2361.  
  2362.   .u-section-8 .u-shape-2 {
  2363.     height: 357px;
  2364.     width: 199px;
  2365.     margin-top: -184px;
  2366.     margin-right: calc(((100% - 340px) / 2));
  2367.   }
  2368.  
  2369.   .u-section-8 .u-image-1 {
  2370.     height: 249px;
  2371.     width: 307px;
  2372.     margin-top: -303px;
  2373.     margin-left: calc(((100% - 340px) / 2));
  2374.   }
  2375.  
  2376.   .u-section-8 .u-group-1 {
  2377.     min-height: 342px;
  2378.     width: 340px;
  2379.     margin-bottom: 56px;
  2380.   }
  2381.  
  2382.   .u-section-8 .u-text-2 {
  2383.     font-size: 2.25rem;
  2384.     margin-top: 18px;
  2385.   }
  2386.  
  2387.   .u-section-8 .u-text-3 {
  2388.     margin-right: 44px;
  2389.   }
  2390. } .u-section-9 {
  2391.   background-image: none;
  2392. }
  2393.  
  2394. .u-section-9 .u-sheet-1 {
  2395.   min-height: 628px;
  2396. }
  2397.  
  2398. .u-section-9 .u-layout-wrap-1 {
  2399.   width: 1140px;
  2400.   margin: 0 auto;
  2401. }
  2402.  
  2403. .u-section-9 .u-image-1 {
  2404.   min-height: 658px;
  2405.   background-image: url("../images/footer.jpg");
  2406.   background-position: 50% 50%;
  2407. }
  2408.  
  2409. .u-section-9 .u-container-layout-1 {
  2410.   padding: 0 30px;
  2411. }
  2412.  
  2413. .u-section-9 .u-layout-cell-2 {
  2414.   min-height: 658px;
  2415. }
  2416.  
  2417. .u-section-9 .u-container-layout-2 {
  2418.   padding: 30px;
  2419. }
  2420.  
  2421. .u-section-9 .u-text-1 {
  2422.   font-size: 2.25rem;
  2423.   margin: 0;
  2424. }
  2425.  
  2426. .u-section-9 .u-form-1 {
  2427.   height: 299px;
  2428.   margin-top: 30px;
  2429.   margin-bottom: 0;
  2430. }
  2431.  
  2432. .u-section-9 .u-form-group-4 {
  2433.   margin-left: 0;
  2434. }
  2435.  
  2436. .u-section-9 .u-btn-1 {
  2437.   border-style: none;
  2438.   font-weight: 700;
  2439.   text-transform: uppercase;
  2440.   letter-spacing: 1px;
  2441.   background-image: none;
  2442.   width: 100%;
  2443.   font-size: 1.125rem;
  2444.   padding-left: 0;
  2445.   padding-right: 0;
  2446. }
  2447.  
  2448. .u-section-9 .u-text-2 {
  2449.   margin: 30px auto 0 0;
  2450. }
  2451.  
  2452. .u-section-9 .u-btn-2 {
  2453.   background-image: none;
  2454.   border-style: solid;
  2455.   padding: 0;
  2456. }
  2457.  
  2458. @media (max-width: 1199px) {
  2459.   .u-section-9 .u-sheet-1 {
  2460.     min-height: 412px;
  2461.   }
  2462.  
  2463.   .u-section-9 .u-layout-wrap-1 {
  2464.     width: 940px;
  2465.     margin-left: 0;
  2466.     margin-right: 0;
  2467.   }
  2468.  
  2469.   .u-section-9 .u-image-1 {
  2470.     min-height: 647px;
  2471.   }
  2472.  
  2473.   .u-section-9 .u-container-layout-1 {
  2474.     padding-left: 0;
  2475.     padding-right: 0;
  2476.   }
  2477.  
  2478.   .u-section-9 .u-layout-cell-2 {
  2479.     min-height: 567px;
  2480.   }
  2481. }
  2482.  
  2483. @media (max-width: 991px) {
  2484.   .u-section-9 .u-sheet-1 {
  2485.     min-height: 309px;
  2486.   }
  2487.  
  2488.   .u-section-9 .u-layout-wrap-1 {
  2489.     width: 720px;
  2490.   }
  2491.  
  2492.   .u-section-9 .u-image-1 {
  2493.     min-height: 746px;
  2494.   }
  2495.  
  2496.   .u-section-9 .u-layout-cell-2 {
  2497.     min-height: 100px;
  2498.   }
  2499. }
  2500.  
  2501. @media (max-width: 767px) {
  2502.   .u-section-9 .u-sheet-1 {
  2503.     min-height: 1451px;
  2504.   }
  2505.  
  2506.   .u-section-9 .u-layout-wrap-1 {
  2507.     margin-top: 55px;
  2508.     margin-bottom: 53px;
  2509.     margin-right: initial;
  2510.     margin-left: initial;
  2511.     width: auto;
  2512.   }
  2513.  
  2514.   .u-section-9 .u-image-1 {
  2515.     min-height: 699px;
  2516.   }
  2517.  
  2518.   .u-section-9 .u-layout-cell-2 {
  2519.     min-height: 490px;
  2520.   }
  2521. }
  2522.  
  2523. @media (max-width: 575px) {
  2524.   .u-section-9 .u-sheet-1 {
  2525.     min-height: 334px;
  2526.   }
  2527.  
  2528.   .u-section-9 .u-image-1 {
  2529.     min-height: 440px;
  2530.   }
  2531.  
  2532.   .u-section-9 .u-layout-cell-2 {
  2533.     min-height: 100px;
  2534.   }
  2535. }
  2536.  
  2537. js
  2538.  
  2539. const showPopup = document.querySelector('.show-popup');
  2540. const popupContainer = document.querySelector('.popup-container');
  2541. const closeBtn = document.querySelector('.close-btn');
  2542.  
  2543. showPopup.onclick = () => {
  2544.     popupContainer.classList.add('active');
  2545. }
  2546.  
  2547. closeBtn.onclick = () => {
  2548.     popupContainer.classList.remove('active');
  2549. } 
  2550. document.getElementById("generateOrderButton").addEventListener("click", function() {
  2551.   var zakaz = Math.floor(Math.random() * (99 - 10 + 1)) + 10;
  2552.   document.getElementById("zakazat").innerHTML = "Заказ номер #63" + zakaz + " был успешно отправлен в предприятие!";
  2553. });
  2554.  

Editor

You can edit this paste and save as new:


File Description
  • kod
  • Paste Code
  • 18 Nov-2023
  • 84.6 Kb
You can Share it: