Denis
/
student


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343
							<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<title>Design & Code Harmony</title>


<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/font-awesome.min.css">

<!-- MAIN CSS -->
<link rel="stylesheet" href="css/tooplate-style.css">

</head>
<body>

<!-- PRE LOADER -->
<div class="preloader">
     <div class="spinner">
          <span class="spinner-rotate"></span>
     </div>
</div>


<!-- HOME SECTION -->
<section id="home" class="parallax-section">
     <div class="container">
          <div class="row">
               <div class="col-md-offset-5 col-md-7 col-sm-12">
                    <div class="home-thumb">
                         <h1 class="wow fadeInUp" data-wow-delay="0.4s">Design & Code Harmony</h1>
                         <p class="wow fadeInUp white-color" data-wow-delay="0.6s"> Добро пожаловать в мир веб-разработки высокого уровня! Наша команда создает стильные лендинги, которые захватывают внимание и привлекают целевую аудиторию. Доверьте нам воплотить ваше видение в жизнь.</p>
                         <a href="#service" class="wow fadeInUp smoothScroll btn btn-default section-btn" data-wow-delay="1s">Узнать больше</a>
                    </div>
               </div>

          </div>
     </div>
</section>


<!-- SERVICE SECTION -->
<section id="service" class="parallax-section">
     <div class="container">
          <div class="row">

               <div class="wow fadeInUp section-title" data-wow-delay="0.2s">
                    <!-- SECTION TITLE -->
                    <h2>Наши возможности для вас</h2>
                    <p>Мы готовы превратить любую вашу идею в реальность, благодаря нашим навыкам и опыту.</p>
               </div>

               <div class="col-md-3 col-sm-6 wow fadeInUp" data-wow-delay="0.4s">
                    <div class="service-thumb">
                         <i class="bi bi-mouse">
                              <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-mouse" viewBox="0 0 16 16">
                                   <path d="M8 3a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 3m4 8a4 4 0 0 1-8 0V5a4 4 0 1 1 8 0zM8 0a5 5 0 0 0-5 5v6a5 5 0 0 0 10 0V5a5 5 0 0 0-5-5"/>
                                 </svg>
                         </i>
                         <h4>Графический дизайн</h4>
                         <p>Мы создаем современный и стильный дизайн для вашего бренда.</p>
                    </div>
               </div>

               <div class="col-md-3 col-sm-6 wow fadeInUp" data-wow-delay="0.4s">
                    <div class="service-thumb">
                         <i class="bi bi-pen-fill">
                              <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-pen-fill" viewBox="0 0 16 16">
                                   <path d="m13.498.795.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001"/>
                                 </svg>
                         </i>
                         <h4>Веб-дизайн</h4>
                         <p>Наша команда создаст уникальный дизайн для ваших интерактивных веб-сайтов.</p>
                    </div>
               </div>

               <div class="col-md-3 col-sm-6 wow fadeInUp" data-wow-delay="0.4s">
                    <div class="service-thumb">
                         <i class="bi bi-code-slash">
                              <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-code-slash" viewBox="0 0 16 16">
                                   <path d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0m6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0"/>
                                 </svg>
                         </i>
                         <h4>Веб-разработка</h4>
                         <p>Разрабатываем функциональные и креативные веб-сайты.</p>
                    </div>
               </div>

               <div class="col-md-3 col-sm-6 wow fadeInUp" data-wow-delay="0.4s">
                    <div class="service-thumb">
                         <i class="bi bi-camera">
                         <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-camera" viewBox="0 0 16 16">
                              <path d="M15 12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.172a3 3 0 0 0 2.12-.879l.83-.828A1 1 0 0 1 6.827 3h2.344a1 1 0 0 1 .707.293l.828.828A3 3 0 0 0 12.828 5H14a1 1 0 0 1 1 1zM2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4z"/>
                              <path d="M8 11a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5m0 1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7M3 6.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0"/>
                            </svg>
                         </i>
                         <h4>Фотография</h4>
                         <p>Профессиональная фотография для портфолио и рекламных материалов</p>
                    </div>
               </div>

               <div class="col-md-3 col-sm-6 wow fadeInUp" data-wow-delay="0.4s">
                    <div class="service-thumb">
                         <i class="bi bi-star">
                              <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16">
                                   <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/>
                                 </svg>
                         </i>
                         <h4>Создание <br> логотипов</h4>
                         <p>Уникальные и запоминающиеся логотипы для вашего бизнеса.</p>
                    </div>
               </div>

               <div class="col-md-3 col-sm-6 wow fadeInUp" data-wow-delay="0.4s">
                    <div class="service-thumb">
                         <i class="bi bi-palette">
                              <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-palette" viewBox="0 0 16 16">
                                   <path d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"/>
                                   <path d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8m-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7"/>
                                 </svg>
                         </i>
                         <h4>Художественное оформление</h4>
                         <p>Создание креативных иллюстраций и художественных работ.</p>
                    </div>
               </div>
               <div class="col-md-3 col-sm-6 wow fadeInUp" data-wow-delay="0.4s">
                    <div class="service-thumb">
                         <i class="bi bi-file-font">
                              <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-file-font" viewBox="0 0 16 16">
                                   <path d="M10.943 4H5.057L5 6h.5c.18-1.096.356-1.192 1.694-1.235l.293-.01v6.09c0 .47-.1.582-.898.655v.5H9.41v-.5c-.803-.073-.903-.184-.903-.654V4.755l.298.01c1.338.043 1.514.14 1.694 1.235h.5l-.057-2z"/>
                                   <path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1"/>
                                 </svg>
                         </i>
                         <h4>Копирайтинг</h4>
                         <p>Наши услуги копирайтинга помогут вам создать привлекательный текст для ваших сайтов</p>
                    </div>
               </div>

               <div class="col-md-3 col-sm-6 wow fadeInUp" data-wow-delay="0.4s">
                    <div class="service-thumb">
                         <i class="bi bi-hearts">
                              <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-hearts" viewBox="0 0 16 16">
                                   <path fill-rule="evenodd" d="M4.931.481c1.627-1.671 5.692 1.254 0 5.015-5.692-3.76-1.626-6.686 0-5.015m6.84 1.794c1.084-1.114 3.795.836 0 3.343-3.795-2.507-1.084-4.457 0-3.343M7.84 7.642c2.71-2.786 9.486 2.09 0 8.358-9.487-6.268-2.71-11.144 0-8.358"/>
                                 </svg>
                         </i>
                         <h4>Контент <br> менеджмент</h4>
                         <p>Профессиональное создание и управление контентом для привлечения аудитории.</p>
                    </div>
               </div>


          </div>
     </div>
</section>


<!-- ABOUT SECTION -->
<section id="about" class="parallax-section">
     <div class="container">
          <div class="row">
               
               <div class="col-md-4 col-sm-8">
                    <div class="about-image-thumb">
                         <img src="images/image0.jpeg" class="wow fadeInUp img-responsive" data-wow-delay="0.2s" alt="about image">
                         <ul class="social-icon">
                              <li><a href="#" class="fa fa-github"></a></li>
                              <li><a href="#" class="fa fa-phone"></a></li>
                              <li><a href="#" class="fa fa-instagram"></a></li>
                              <li><a href="#" class="fa fa-telegram"></a></li>
                         </ul>
                    </div>
               </div>

               <div class="col-md-8 col-sm-12">
                    <div class="about-thumb">
                         <!-- SECTION TITLE -->
                         <div class="wow fadeInUp section-title" data-wow-delay="0.6s">
                              <h2>Немного о нас</h2>
                              <p>Design & Code Harmony</p>
                         </div>
                         <div class="wow fadeInUp" data-wow-delay="0.8s">
                              <p>Наша небольшая, но профессиональная и сплоченная команда, состоящая из трех человек: Карина, Алина и Таня. Мы готовы воплотить любые ваши идеи в реальность!</p>
                              <p>С нашими работами вы можете ознакомиться перейдя на наш GitHub.</p>
                         </div>
                    </div>
               </div>

          </div>
     </div>
</section>


<!-- WORK SECTION -->
<section id="work" class="parallax-section">
     <div class="container">
          <div class="row">

               <div class="col-md-12 col-sm-12">
                    <!-- SECTION TITLE -->
                    <div class="wow fadeInUp section-title" data-wow-delay="0.2s">
                         <h2>Наши сферы деятельности</h2>
                         <p>&#10084 &#10084 &#10084</p>
                    </div>
               </div>

               <div class="wow fadeInUp col-md-4 col-sm-6" data-wow-delay="0.4s">
                    <!-- WORK THUMB -->
                    <div class="work-thumb">
                         <a href="images/img1.jpg" class="image-popup">
                              <div class="work-thumb-overlay">
                                   <h4 class="white-color">&#9825 &#9825 &#9825</h4>
                                   <h2>Графический дизайн </h2>
                              </div>
                              <img src="images/img1.jpg" class="img-responsive" alt="Work 1">
                         </a>
                    </div>
               </div>

               <div class="wow fadeInUp col-md-4 col-sm-6" data-wow-delay="0.4s">
                    <!-- WORK THUMB -->
                    <div class="work-thumb">
                         <a href="images/img2.jpg" class="image-popup">
                              <div class="work-thumb-overlay">
                                   <h4 class="white-color">&#9825 &#9825 &#9825</h4>
                                   <h2>Фотография</h2>
                              </div>
                              <img src="images/img2.jpg" class="img-responsive" alt="Work 2">
                         </a>
                    </div>
               </div>

               <div class="wow fadeInUp col-md-4 col-sm-6" data-wow-delay="0.4s">
                    <!-- WORK THUMB -->
                    <div class="work-thumb">
                         <a href="images/img4.jpg" class="image-popup">
                              <div class="work-thumb-overlay">
                                   <h4 class="white-color">&#9825 &#9825 &#9825</h4>
                                   <h2>Программирование</h2>
                              </div>
                              <img src="images/img4.jpg" class="img-responsive" alt="Work 3">
                         </a>
                    </div>
               </div>

          </div>
     </div>
</section>


<!-- CONTACT SECTION -->
<section id="contact" class="parallax-section">
     <div class="container">
          <div class="row">

               <div class="col-md-12 col-sm-12">
                    <!-- SECTION TITLE -->
                    <div class="wow fadeInUp section-title" data-wow-delay="0.2s">
                         <h2>Связь</h2>
                         <p>Оставить заявку на получение услуг</p>
                    </div>
               </div>

               <div class="col-md-7 col-sm-10">
                    <!-- CONTACT FORM HERE -->
                    <div class="wow fadeInUp" data-wow-delay="0.4s">
                        <form id="contact-form" action="#" method="get">
                              <div class="col-md-6 col-sm-6">
                                   <input type="text" class="form-control" name="name" placeholder="Name" required="">
                              </div>
                              <div class="col-md-6 col-sm-6">
                                   <input type="email" class="form-control" name="email" placeholder="Email" required="">
                              </div>
                              <div class="col-md-12 col-sm-12">
                                   <textarea class="form-control" rows="5" name="message" placeholder="Message" required=""></textarea>
                              </div>
                              <div class="col-md-offset-8 col-md-4 col-sm-offset-6 col-sm-6">
                                   <button id="submit" type="submit" class="form-control" name="submit">Отправить </button>
                              </div>
                        </form>
                    </div>
               </div>

               <div class="col-md-5 col-sm-8">
                    <!-- CONTACT INFO -->
                    <div class="wow fadeInUp contact-info" data-wow-delay="0.4s">
                         <div class="section-title">
                              <h2>Контактная информация</h2>
                              <p>Вы можете связаться с нами позвонив по указанному номеру телефону, написав на электронную почту или приехав по адресу ниже</p>
                         </div>
                         
                         <p><i class="fa fa-map-marker"></i>Москва, Тверская улица д.1</p>
                         <p><i class="fa fa-comment"></i> Design_Code_Harmony@company.com</a></p>
                         <p><i class="fa fa-phone"></i> +7(929)489-45-78</p>
                    </div>
               </div>

          </div>
     </div>
</section>


<!-- FOOTER SECTION -->
<footer>
    <div class="container">
        <div class="row">

               <div class="wow fadeInUp col-md-12 col-sm-12" data-wow-delay="0.8s">
                    <p class="white-color"> 2024  
                    | Design & Code Harmony </p>
                    <div class="wow fadeInUp" data-wow-delay="1s">
                         <ul class="social-icon">
                              <li><a href="#" class="fa fa-phone"></a></li>
                              <li><a href="#" class="fa fa-comment"></a></li>
                              <li><a href="#" class="fa fa-instagram"></a></li>
                              <li><a href="#" class="fa fa-telegram"></a></li>
                              <li><a href="#" class="fa fa-github"></a></li>
                         </ul>
                    </div>
          </div>
     </div>
</footer>

<!-- SCRIPTS -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.parallax.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/magnific-popup-options.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/custom.js"></script>

</body>
</html>