<!--
http://localhost:82/alekspro3/index.php
http://pvmprog.com/morpho/index.php


https://vorota365.ru/otkatnyie-vorota/kovanyie.html
https://acant.com.ua/simvolizm-kovanyh-jelementov/

https://getbootstrap.su/docs/5.0/components/carousel/

https://eurozabor.com.ua/tipy-kalitok/
https://viking-metal.com.ua/ru/stati/vidy-zaborov-vybor-sovremennogo-ograzhdeniya-dlya-chastnogo-doma-dachi-ili-zagorodnogo-kottedzha/#konstruktsii-iz-metalla

https://svarka-service.kiev.ua/svarochnye-raboty-kak-opredelit-kachestvo-svarki/ 
https://kemppi.in.ua/ru/articles/kachestvo_svarnich_detaley.htm
кованные заборы
https://alfazabor.com.ua/proczukcziya/kovanye-i-metallicheskie-zabory.html

https://mastersv.com.ua/products/kovanyye-vorota/

3д -моделирование
https://klona.ua/blog/3d-modelirovanie/kak-sozdat-3d-model-vysokogo-kachestva

     https://www.bootstrapcdn.com/
	   https://getbootstrap.com/
	   https://getbootstrap.com/docs/5.3/examples/pricing/
	   https://getbootstrap.com/docs/5.3/examples/product/#
	   https://www.youtube.com/watch?v=SRPktOpHknM
     http://localhost:82/aleks_pro2/index.php
     http://localhost:82/aleks_pro/about.php

     Создание базы данных
     http://localhost:82/alekspro/initbd/index.php
     https://pvmprog.com/alekspro/initbd/index.php
     https://pvmprog.com/alekspro/index.php

How to Use SVG Images in CSS and HTML
https://www.freecodecamp.org/news/use-svg-images-in-css-html/

Классы Bootstrap 4 для управления отступами
https://html-plus.in.ua/bootstrap-4-classes-for-padding-and-margin/

Использование слайдера (карусели) в Bootstrap 4
https://html-plus.in.ua/ispolzovanie-slaydera-karuseli-v-bootstrap-4/

svg example
https://undraw.co/illustrations

https://yoksel.github.io/url-encoder/ru/


Як використовувати зображення SVG у CSS та HTML
https://www.freecodecamp.org/ukrainian/news/yak-vykorystovuvaty-zobrazhennya-svg-u-css-ta-html-tutorial-dlya-pochatkivtsiv/

https://getbootstrap.com/docs/4.0/utilities/colors/


https://editsvg.online/editor.html

отступы
https://itchief.ru/bootstrap/spacing-v4

Create Dark/Light Color Modes in PHP website With Bootstrap & Jquery
https://itgiggs.in/bootstrap-color-modes/

telegram
https://www.w3schools.com/icons/tryit.asp?filename=tryicons_fa-telegram

icons
https://www.w3schools.com/icons/icons_reference.asp#gsc.tab=0

footer
https://fireart.studio/blog/15-website-footer-design-examples/

навес
https://viking-metal.com.ua/ru/stati/zachem-nuzhen-kozyrek-nad-vhodom-v-dom/

Изделия из металла на заказ - высокое качество по доступной цене 
https://metal-wares.in.ua/?srsltid=AfmBOopr0zS8JjjXk27blCXXBVjRDtfc6G8bvGqxvbAY04YLShUrZLfj

Сортировка
https://snipp.ru/mysql/sql-sort#link-sortirovka-v-sluchaynom-poryadke

https://www.zaichenko.pro/

я являюсь частным  SEO-специалистом с 10ти летним опытом в этой сфере. 
За это время я работал с различными клиентами и на разнообразных проектах, от сайтов визиток до крупных e-commerce проектов, в различных отраслях рынка. 
Моя основная цель — увеличить видимость вашего сайта в поисковых системах, привлечь целевую аудиторию и, в конечном итоге, увеличить доходы.

Моя способность адаптироваться, желание постоянно развиваться и позитивный настрой делают меня идеальным кандидатом для вашей команды.

У меня есть глубокие знания в области анализа ключевых слов, внутренней и внешней оптимизации сайтов, а также в использовании инструментов аналитики для мониторинга и улучшения эффективности SEO продвижения. Я также имею опыт работы с релевантными инструментами и технологиями, включая Google Analytics, Google Search Console, Ahrefs, Serpstat, Se Ranking, SimilarWeb и другие.
 
echo $title_page;
Как правильно написать мета-теги Title, Description, Keywords


https://favicon.io/


ALTER TABLE `d_img` ADD `comment2` TEXT NOT NULL DEFAULT '' AFTER `comment`, ADD `out_main` INT NOT NULL DEFAULT '0' AFTER `comment2`, ADD `ind_sec` INT NOT NULL DEFAULT '0' AFTER `out_main`; 


-->


<!DOCTYPE html>
<html lang="ru">


  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="description" content="Занимаюсь изготовлением металлоизделий под заказ любой сложности, высокого качества. Ворота, заборы, навесы, лестницы и многое другое...">
    <meta name="keywords" content="металлоизделия, производство, изготовление, любая сложность, монтаж, ворота, ремонт, калитки, заборы, лестница на второй этаж, сварочные работы, противовзломный замок">
    <meta name="author" content="Митрус Александр" />
    <meta name="robots" content="index,follow">


    <link
      href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900"
      rel="stylesheet"
    />
    
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    />
    
    <link 
       rel="stylesheet" 
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />

    <link 
       rel="icon" 
       href="images/favicond.ico" type="image/x-icon"
    />
  	
    <title>
      Aleks Pro - изготовление металлических изделий под заказ
    </title>
    

<!--
Reflux Template
https://templatemo.com/tm-531-reflux
-->
    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <!-- Additional CSS Files -->
    <link rel="stylesheet" href="assets3/css/fontawesome.css" />
    <link rel="stylesheet" href="assets3/css/templatemo-style.css" />
    <link rel="stylesheet" href="assets3/css/owl.css" />
    <link rel="stylesheet" href="assets3/css/lightbox.css" />
  </head>

  <style>
  
  .title_s {
          font-size: 250%;           /* 3em*/
/*          font-family: 'Old Standard TT', sans-serif; */
          font-family: Times, "Times New Roman", Georgia, serif;
          font-style: italic;
          color:white;            /* white #DBD0EA*/
 		      text-transform:none;
 		      align:center;
         }

  .title_p {
          font-size: 150%;           /* 3em*/
          font-family: 'Old Standard TT', sans-serif;
          font-style: italic;
          color: #DBD0EA;            /* white #DBD0EA*/
 		      text-transform:none;
 		      align:center;
         }

  .title_pp {
          font-family: 'Old Standard TT', sans-serif;
          font-style: italic;
          color: #DBD0EA;            /* white #DBD0EA*/
 		      text-transform:none;
 		      align:center;
         }

  .text_info:first-letter {
/*         
         text-indent: 20px; 
         font-family: 'Times New Roman', Times, serif; 
         padding: 10px;       
*/
         font-size: 200%; 
         font-family: 'Times New Roman', Times, serif;
         color: red; 
  }	

  .pad {
    padding: 10px;       
  }


  .serif {
          font-family: Times, "Times New Roman", Georgia, serif;
        }


  .img_i {
    max-width: 35%;
    height: auto;
  }

  .img_i2 {
    max-width: 55%;
    height: auto;
  }


  .img_i3 {
    max-width: 65%;
    height: auto;
  }


  .center {
    display:block;
    margin:auto;
  }

  strong { 
    color:#dcd900; 
  }

  .col { 
    color:#dcd900; 
    font-family: Times, "Times New Roman", Georgia, serif;
  }


  #page-wrapern {
    background: url(images/fon_aleks.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
}


</style>
  

  <body>
    <div id="page-wrapern">
      <!-- Sidebar Menu -->
      <div class="responsive-nav">
        <i class="fa fa-bars" id="menu-toggle"></i>
        <div id="menu" class="menu">
          <i class="fa fa-times" id="menu-close"></i>
          <div class="container">
            <div class="image">
              <a href="#"><img src="images/author-image.jpg" alt="" /></a>
            </div>
            <div class="author-content">
              <h4>Aleksander</h4>
              <p class="title_pp">Entrepreneur</p>
              
              <img src="images/aleks_prom.jpg" alt="" class="img_i3 center" />
              </div>
            <nav class="main-nav" role="navigation">
              <ul class="main-menu">
                <li><a href="#section1">About Me</a></li>
                <li><a href="#section12">My Works</a></li>
                <li><a href="#section2">My Principles</a></li>
<!--
                <li><a href="#section3">My Work</a></li>
-->
                <li><a href="#section4">Contact Me</a></li>
              </ul>
            </nav>
            <div class="social-network">
              <ul class="soial-icons">
<!--                
                <li>
                  <a href="https://fb.com/templatemo"
                    ><i class="fa fa-facebook"></i
                  ></a>
                </li>
-->                
<p class="fw-bold"><i class="fas fa-phone me-3"></i> </p>
<p class="fw-bold"><i class="fa fa-telegram me-2" style="font-size:22px;"></i> </p>

<!--                
                <li>
                  <a href="#"><i class="fa fa-linkedin"></i></a>
                </li>
                <li>
                  <a href="#"><i class="fa fa-dribbble"></i></a>
                </li>
                <li>
                  <a href="#"><i class="fa fa-rss"></i></a>
                </li>
-->                
              </ul>
            </div>


            <div class="copyright-text">
              <p>© 1993 - 2024 Copyright <br> Aleks Pro</p>
              <br>
              
            </div>
          </div>
        </div>
      </div>

      <section class="section about-me" data-section="section1">
        <div class="container">
          
          <img src="images/manufacturing.png" alt="" class="img_i2 center" />

          <div class="section-heading">
             <br>
             <h1 class="center serif">Металлоизделия</>

            <div class="line-dec"></div>
            <br>
            <h1 class="title_p">Проектирование, производство, монтаж...</>
          </div>

          <img src="images/aleks_pron.png" alt="" class="img_i center" />

          <br>
          <br>

          <div class="section-heading">
            <h2 class="serif">Обо мне</h2>
            <div class="line-dec"></div>
            <br>
            <br>
            <span>Инженер-конструктор. Закончил Харьковский авиационный институт в 1993 году.</span>
          </div>
          
          <div class="right-text">
            <h3>Чем занимаюсь</h3>
            <div class="line-dec"></div>

            <ol class="list-group">
              <li class="pad">
                <Strong>Проектированием металлоконструкций.</Strong> <br>Разрабатываю проект и 3D модель изделия, учитывая требования клиента. Расчитываю нагрузку, разрабатываю чертежи, выбираю оптимальные размеры и форму конструкции.
              </li>
              <li class="pad">  
                <Strong>Изготовлением металлоконструкций  любой сложности</strong>. Имею большой опыт работы с металлом и знаю, как создать конструкции, которые будут надежными и прочными. Использую только качественные материалы, соответствующие высоким стандартам качества.              
             
              </li>
              <li class="pad">  
                 <Strong>Сборкой и установкой металлоконструкций.</Strong> Монтаж делаю быстро и качественно. При сварке металлических конструкций  придерживаюсь всех технологических норм и правил, что позволяет гарантировать прочность и долговечность изделий.              </li>
            </ol>
            
          </div>

          
        </div>
      </section>

      <section class="section my-services" data-section="section12">
        <div class="container">
   
          <div class="section-heading">
            <h2 class="serif">Мои работы</h2>
            <div class="line-dec"></div>
            <br>
            
          </div>

          
<div class="left-image-post">
  <div class="row">
    <div class="col-md-6">
      <div class="left-image">
        <img src="images/img_2024_10_29_11_36_19.jpg" alt="Ворота" />
      </div>
    </div>
    <div class="col-md-6">
      <div class="right-text">
        <h3 class="col">Ворота</h3>
        <p>
         Кованые ворота с элементами художественной ковки создают роскошный внешний вид Вашего участка.        </p>
        <div class="white-button">
          <a href="landing.php?ind=0" class="link">Подробнее...</a>          
        </div>
      </div>
    </div>
  </div>
</div>
<br>
<br>

<div class="left-image-post">
  <div class="row">
    <div class="col-md-6">
      <div class="left-image">
        <img src="images/img_2024_10_28_11_13_12.jpg" alt="Навесы, козырьки" />
      </div>
    </div>
    <div class="col-md-6">
      <div class="right-text">
        <h3 class="col">Навесы, козырьки</h3>
        <p>
        Навес на крыльцо или  козырек над дверью - долговечное и хорошее решение для Вашего дома.        </p>
        <div class="white-button">
          <a href="landing.php?ind=1" class="link">Подробнее...</a>          
        </div>
      </div>
    </div>
  </div>
</div>
<br>
<br>

<div class="left-image-post">
  <div class="row">
    <div class="col-md-6">
      <div class="left-image">
        <img src="images/img_2024_10_25_11_49_54.jpg" alt="Заборы" />
      </div>
    </div>
    <div class="col-md-6">
      <div class="right-text">
        <h3 class="col">Заборы</h3>
        <p>
        Забор с использованием декларативной ковки, наилучшим образом сочетается с любыми вариантами окружающего ландшафта.        </p>
        <div class="white-button">
          <a href="landing.php?ind=2" class="link">Подробнее...</a>          
        </div>
      </div>
    </div>
  </div>
</div>
<br>
<br>

<div class="left-image-post">
  <div class="row">
    <div class="col-md-6">
      <div class="left-image">
        <img src="images/img_2024_10_29_11_43_47.jpg" alt="Лестницы" />
      </div>
    </div>
    <div class="col-md-6">
      <div class="right-text">
        <h3 class="col">Лестницы</h3>
        <p>
        Лестница  на второй этаж - гордость и  визитная карточка Вашего дома.        </p>
        <div class="white-button">
          <a href="landing.php?ind=3" class="link">Подробнее...</a>          
        </div>
      </div>
    </div>
  </div>
</div>
<br>
<br>

<div class="left-image-post">
  <div class="row">
    <div class="col-md-6">
      <div class="left-image">
        <img src="images/img_2024_10_29_11_56_31.jpg" alt="Калитки" />
      </div>
    </div>
    <div class="col-md-6">
      <div class="right-text">
        <h3 class="col">Калитки</h3>
        <p>
        Калитка, как правило - это копия ворот в мини-варианте.        </p>
        <div class="white-button">
          <a href="landing.php?ind=4" class="link">Подробнее...</a>          
        </div>
      </div>
    </div>
  </div>
</div>
<br>
<br>

<div class="left-image-post">
  <div class="row">
    <div class="col-md-6">
      <div class="left-image">
        <img src="images/img_2024_11_04_15_34_14.jpg" alt="Золочение " />
      </div>
    </div>
    <div class="col-md-6">
      <div class="right-text">
        <h3 class="col">Золочение </h3>
        <p>
        Сусальная позолота придает изысканный и роскошный вид любому изделию.        </p>
        <div class="white-button">
          <a href="landing.php?ind=5" class="link">Подробнее...</a>          
        </div>
      </div>
    </div>
  </div>
</div>
<br>
<br>

<div class="left-image-post">
  <div class="row">
    <div class="col-md-6">
      <div class="left-image">
        <img src="images/img_2024_11_05_09_25_44.jpg" alt="Моделирование " />
      </div>
    </div>
    <div class="col-md-6">
      <div class="right-text">
        <h3 class="col">Моделирование </h3>
        <p>
        3D-моделирование объектов. Визуализация объектов, создание чертежей.        </p>
        <div class="white-button">
          <a href="landing.php?ind=6" class="link">Подробнее...</a>          
        </div>
      </div>
    </div>
  </div>
</div>
<br>
<br>

<div class="left-image-post">
  <div class="row">
    <div class="col-md-6">
      <div class="left-image">
        <img src="images/img_2024_11_04_17_10_33.jpg" alt="Разное" />
      </div>
    </div>
    <div class="col-md-6">
      <div class="right-text">
        <h3 class="col">Разное</h3>
        <p>
        Металлические изделия различного назначения.        </p>
        <div class="white-button">
          <a href="landing.php?ind=7" class="link">Подробнее...</a>          
        </div>
      </div>
    </div>
  </div>
</div>
<br>
<br>


        </div>
      </section>


<section class="section my-services" data-section="section2">

    <div class="container">

        <div class="section-heading">
            <h2 class="serif">Мои принципы</h2>
            <div class="line-dec"></div>
                <span>
                Главным в моей работе считаю качество, дизайн, индивидуальный подход, честность,  порядочность. Мои изделия должны радовать заказчика многие годы.                </span>
        </div>


        <div class="row">
            
<div class="col-md-6">
    <div class="service-item">
        <div class="first-service-icon service-icon"></div>
            <h4>Качество.</h4>
            <p>
            Предлагаю профессиональное, качественное изготовление металлоконструкций любой сложности.            </p>
    </div>
</div>

<div class="col-md-6">
    <div class="service-item">
        <div class="second-service-icon service-icon"></div>
            <h4>Дизайн.</h4>
            <p>
            Современные решения,инновации и накопленные знания являются факторами успеха.            </p>
    </div>
</div>

<div class="col-md-6">
    <div class="service-item">
        <div class="third-service-icon service-icon"></div>
            <h4>Надежность.</h4>
            <p>
            Стабильность и добросовестность            </p>
    </div>
</div>

<div class="col-md-6">
    <div class="service-item">
        <div class="fourth-service-icon service-icon"></div>
            <h4>Проектирование.</h4>
            <p>
            Разработка проекта с 3D-моделированием.            </p>
    </div>
</div>

<div class="col-md-6">
    <div class="service-item">
        <div class="five-service-icon service-icon"></div>
            <h4>Производство.</h4>
            <p>
            Изготовление и покраска металлоконструкций.            </p>
    </div>
</div>

<div class="col-md-6">
    <div class="service-item">
        <div class="six-service-icon service-icon"></div>
            <h4>Монтаж.</h4>
            <p>
            Доставка и монтаж "под ключ". Качественное выполнение работ.            </p>
    </div>
</div>

<div class="col-md-6">
    <div class="service-item">
        <div class="seven-service-icon service-icon"></div>
            <h4>Гарантия.</h4>
            <p>
            Гарантирую качество и надёжность моих изделий.            </p>
    </div>
</div>
        </div>

    </div>
</section>


<br>
<br>
<br>

      <section class="section contact-me" data-section="section4">
        <div class="container">
          <div class="section-heading">
            <h2  class="serif">Свяжитесь со мной</h2>
            <div class="line-dec"></div>
            <span>
              Пожалуйста, если Вас заинтересовали мои работы, напишите мне
            </span>
          </div>
          <div class="row">
            <div class="right-content">
              <div class="container">
                <form id="contact" action="check.php" method="post">
                  <div class="row">
                    <div class="col-md-12">
                      <fieldset>
                        <input
                          name="username"
                          type="text"
                          class="form-control"
                          id="subject"
                          placeholder="Your name..."
                          required=""
                        />
                      </fieldset>
                    </div>

                    <div class="col-md-6">
                      <fieldset>
                        <input
                          name="phone"
                          type="text"
                          class="form-control"
                          id="name"
                          placeholder="Your phone..."
                          required=""
                        />
                      </fieldset>
                    </div>
                    <div class="col-md-6">
                      <fieldset>
                        <input
                          name="email"
                          type="text"
                          class="form-control"
                          id="email"
                          placeholder="Your email..."
                          required=""
                        />
                      </fieldset>
                    </div>
                    <div class="col-md-12">
                      <fieldset>
                        <textarea
                          name="message"
                          rows="6"
                          class="form-control"
                          id="message"
                          placeholder="Your message..."
                          required=""
                        ></textarea>
                      </fieldset>
                    </div>
                    <div class="col-md-12 m-2">
                      <fieldset>
                        <button type="submit" id="form-submit" class="button btn-success">
                          Send message
                        </button>
                        
                      </fieldset>
                    </div>
                    <br>
                    <div class="col-md-12 m-2">
                      <fieldset>
                        <button type="reset" id="form-submit" class="button btn-warning">
                          Reset
                        </button>
                      </fieldset>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>


    <!-- Scripts -->
    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <script src="assets3/js/isotope.min.js"></script>
    <script src="assets3/js/owl-carousel.js"></script>
    <script src="assets3/js/lightbox.js"></script>
    <script src="assets3/js/custom.js"></script>
    <script>
      //according to loftblog tut
      $(".main-menu li:first").addClass("active");

      var showSection = function showSection(section, isAnimate) {
        var direction = section.replace(/#/, ""),
          reqSection = $(".section").filter(
            '[data-section="' + direction + '"]'
          ),
          reqSectionPos = reqSection.offset().top - 0;

        if (isAnimate) {
          $("body, html").animate(
            {
              scrollTop: reqSectionPos
            },
            800
          );
        } else {
          $("body, html").scrollTop(reqSectionPos);
        }
      };

      var checkSection = function checkSection() {
        $(".section").each(function() {
          var $this = $(this),
            topEdge = $this.offset().top - 80,
            bottomEdge = topEdge + $this.height(),
            wScroll = $(window).scrollTop();
          if (topEdge < wScroll && bottomEdge > wScroll) {
            var currentId = $this.data("section"),
              reqLink = $("a").filter("[href*=\\#" + currentId + "]");
            reqLink
              .closest("li")
              .addClass("active")
              .siblings()
              .removeClass("active");
          }
        });
      };

      $(".main-menu").on("click", "a", function(e) {
        e.preventDefault();
        showSection($(this).attr("href"), true);
      });

      $(window).scroll(function() {
        checkSection();
      });
    </script>
  </body>
</html>