kurashov1307
/
mySiteWithBootstrapAndBEM


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508
							<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
      integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
   <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
   <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
   <link rel="stylesheet" href="css/style.css">
   <title>Сайт на Bootstrap 4 + BEM</title>
</head>

<body>
   <div id="toTop"><i class="fas fa-chevron-up"></i></div>
   <header class="menu-bar">
      <div class="container">
         <div class="row">
            <div class="col-xl-2 logo-bar">
               <img src="img/logo.png" alt="My Landing" class="logo">
               <button class="menu-icon"><i class="fas fa-bars"></i></button>
            </div>
            <div class="col-xl-8 ml-auto align-self-center">
               <nav>
                  <ul class="menu d-flex justify-content-end">
                     <li class="menu__item"><a href="/"><i class="fas fa-home"></i></a></li>
                     <li class="menu__item"><a href="#about">About</a></li>
                     <li class="menu__item"><a href="#service">Servicing</a></li>
                     <li class="menu__item"><a href="#portfolio">Portfolio</a></li>
                     <li class="menu__item"><a href="#blog">Blog</a></li>
                     <li class="menu__item"><a href="#contact">Contact us</a></li>
                     <li class="menu__item"><i class="fas fa-search"></i></li>
                  </ul>
               </nav>
            </div>
         </div>
      </div>
   </header>
   <header class="header">
      <div class="container">
         <div class="row">
            <div class="col-xl-12">
               <h1 class="header__title">Web development project</h1>
               <p class="header__text">Very suitable to support all web development projects</p>
               <button class="button">Our services</button>
               <button class="button">Hire is now</button>
            </div>
         </div>
      </div>
   </header>
   <section class="about" id="about">
      <div class="container">
         <div class="row justify-content-center">
            <div class="col-xl-8">
               <h2 class="about__title">About Us</h2>
               <p class="about__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
         </div>
         <div class="row justify-content-around">
            <div class="col-xl-3 col-md-6">
               <img src="img/internet.png" alt="">
               <h3 class="about_h3">Awesome Icons</h3>
               <p class="about_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe eligendi vero
                  molestiae et, nisi error!</p>
            </div>
            <div class="col-xl-3 col-md-6">
               <img src="img/transfer.png" alt="">
               <h3 class="about_h3">One Page</h3>
               <p class="about_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe eligendi vero
                  molestiae et, nisi error!</p>
            </div>
            <div class="col-xl-3 col-md-6">
               <img src="img/head.png" alt="">
               <h3 class="about_h3">Fully Responsive</h3>
               <p class="about_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe eligendi vero
                  molestiae et, nisi error!</p>
            </div>
         </div>
      </div>
   </section>
   <section class="services" id="service">
      <div class="container">
         <div class="row justify-content-center">
            <div class="col-xl-8">
               <h2 class="about__title">Our Services</h2>
               <p class="about__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
         </div>
         <div class="row justify-content-center">
            <div class="col-xl-4 col-md-6">
               <div class="our_card">
                  <i class="fas fa-search icon"></i>
                  <h3 class="about_h3">Research</h3>
                  <p class="about_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe eligendi vero
                     molestiae et, nisi error!</p>
                  <button class="button-services">Read more</button>
               </div>
            </div>
            <div class="col-xl-4 col-md-6">
               <div class="our_card">
                  <i class="fas fa-images icon"></i>
                  <h3 class="about_h3">Portfolio</h3>
                  <p class="about_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe eligendi vero
                     molestiae et, nisi error!</p>
                  <button class="button-services">Read more</button>
               </div>
            </div>
            <div class="col-xl-4 col-md-6">
               <div class="our_card">
                  <i class="fas fa-question icon"></i>
                  <h3 class="about_h3">Support</h3>
                  <p class="about_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe eligendi vero
                     molestiae et, nisi error!</p>
                  <button class="button-services">Read more</button>
               </div>
            </div>
            <div class="col-xl-4 col-md-6">
               <div class="our_card">
                  <i class="fas fa-book icon"></i>
                  <h3 class="about_h3">Documentation</h3>
                  <p class="about_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe eligendi vero
                     molestiae et, nisi error!</p>
                  <button class="button-services">Read more</button>
               </div>
            </div>
            <div class="col-xl-4 col-md-6">
               <div class="our_card">
                  <i class="fas fa-code icon"></i>
                  <h3 class="about_h3">Development</h3>
                  <p class="about_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe eligendi vero
                     molestiae et, nisi error!</p>
                  <button class="button-services">Read more</button>
               </div>
            </div>
            <div class="col-xl-4 col-md-6">
               <div class="our_card">
                  <i class="fas fa-pencil-alt icon"></i>
                  <h3 class="about_h3">Design</h3>
                  <p class="about_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe eligendi vero
                     molestiae et, nisi error!</p>
                  <button class="button-services">Read more</button>
               </div>
            </div>
         </div>
      </div>
   </section>
   <section class="portfolio" id="portfolio">
      <div class="container">
         <div class="row justify-content-center">
            <div class="col-xl-8">
               <h2 class="about__title">Latest Works</h2>
               <p class="about__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
               <button val="on" class="button" filter="all">All</button>
               <button val="off" class="button" filter="wd">Web design</button>
               <button val="off" class="button" filter="ud">Ui/Ux design</button>
               <button val="off" class="button" filter="moc">Mockups</button>
            </div>
         </div>
         <div class="row filter aligh_img">
            <div filter="wd" class="col-xl-4 col-md-6">
               <img src="img/item1.png" alt="">
               <div class="text">
                  <h5>Hand Watch</h5>
                  <p>Web design</p>
               </div>
            </div>
            <div filter="moc" class="col-xl-4 col-md-6">
               <img src="img/item2.png" alt="">
               <div class="text">
                  <h5>One Day Pass</h5>
                  <p>Mockups</p>
               </div>
            </div>
            <div filter="wd" class="col-xl-4 col-md-6">
               <img src="img/item3.png" alt="">
               <div class="text">
                  <h5>Modal T-shirt</h5>
                  <p>Web design</p>
               </div>
            </div>
            <div filter="moc" class="col-xl-4 col-md-6">
               <img src="img/item4.png" alt="">
               <div class="text">
                  <h5>Flask</h5>
                  <p>Mockups</p>
               </div>
            </div>
            <div filter="ud" class="col-xl-4 col-md-6">
               <img src="img/item5.png" alt="">
               <div class="text">
                  <h5>Eplemost</h5>
                  <p>Ui/Ux Design</p>
               </div>
            </div>
            <div filter="ud" class="col-xl-4 col-md-6">
               <img src="img/item6.png" alt="">
               <div class="text">
                  <h5>The kitchens</h5>
                  <p>Ui/Ux Design</p>
               </div>
            </div>
         </div>
      </div>
      <div class="container">
         <div class="row">
            <div class="col-xl-12">
               <button val="on" class="button" filter="all">View all</button>
            </div>
         </div>
      </div>
   </section>
   <section class="pricing">
      <div class="container">
         <div class="row justify-content-center">
            <div class="col-xl-8">
               <h2 class="about__title">Pricing Plan</h2>
               <p class="about__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
         </div>
         <div class="row justify-content-around">
            <div class="col-xl-4 col-md-6">
               <div class="price">
                  <div class="price__head">
                     <p>Free Trail</p>
                     <sup>$</sup> 00 <sub>per month</sub>
                  </div>
                  <div class="price__body">
                     <ul>
                        <li>30 Free Trail</li>
                        <li>5 Free Projects</li>
                        <li>PHP 5 Enabled</li>
                        <li>24/7 Suports</li>
                     </ul>
                  </div>
                  <div class="price__footer">
                     <button>Order Now</button>
                  </div>
               </div>
            </div>
            <div class="col-xl-4 col-md-6">
               <div class="price">
                  <div class="price__head">
                     <p>Basic</p>
                     <sup>$</sup> 50 <sub>per month</sub>
                  </div>
                  <div class="price__body">
                     <ul>
                        <li>30 Free Trail</li>
                        <li>5 Free Projects</li>
                        <li>PHP 5 Enabled</li>
                        <li>24/7 Suports</li>
                     </ul>
                  </div>
                  <div class="price__footer">
                     <button>Order Now</button>
                  </div>
               </div>
            </div>
            <div class="col-xl-4 col-md-6">
               <div class="price">
                  <div class="price__head">
                     <p>Ultimates</p>
                     <sup>$</sup> 99 <sub>per month</sub>
                  </div>
                  <div class="price__body">
                     <ul>
                        <li>30 Free Trail</li>
                        <li>5 Free Projects</li>
                        <li>PHP 5 Enabled</li>
                        <li>24/7 Suports</li>
                     </ul>
                  </div>
                  <div class="price__footer">
                     <button>Order Now</button>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </section>
   <section class="team">
      <div class="container">
         <div class="row justify-content-center">
            <div class="col-xl-8">
               <h2 class="about__title">Our Team Member</h2>
               <p class="about__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
         </div>
         <div class="row multiple-items justify-content-center">
            <div class="col-xl-4">
               <img src="img/team1.png" alt="">
               <h4>John Doe</h4>
               <p>General Manager</p>
               <div class="icons">
                  <a href="">
                     <span class="fa-stack fa-2x">
                        <i class="fas fa-square fa-stack-2x"></i>
                        <i class="fab fa-vk fa-stack-1x fa-inverse"></i>
                     </span>
                  </a>
                  <a href="">
                     <span class="fa-stack fa-2x">
                        <i class="fas fa-square fa-stack-2x"></i>
                        <i class="fab fa-facebook fa-stack-1x fa-inverse"></i>
                     </span>
                  </a>
                  <a href="">
                     <span class="fa-stack fa-2x">
                        <i class="fas fa-square fa-stack-2x"></i>
                        <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
                     </span>
                  </a>
                  <a href="">
                     <span class="fa-stack fa-2x">
                        <i class="fas fa-square fa-stack-2x"></i>
                        <i class="fab fa-instagram fa-stack-1x fa-inverse"></i>
                     </span>
                  </a>
               </div>
            </div>
            <div class="col-xl-4">
               <img src="img/team2.png" alt="">
               <h4>Alexa Biru</h4>
               <p>Office Director</p>
               <div class="icons">
                  <a href="">
                     <span class="fa-stack fa-2x">
                        <i class="fas fa-square fa-stack-2x"></i>
                        <i class="fab fa-vk fa-stack-1x fa-inverse"></i>
                     </span>
                  </a>
                  <a href="">
                     <span class="fa-stack fa-2x">
                        <i class="fas fa-square fa-stack-2x"></i>
                        <i class="fab fa-facebook fa-stack-1x fa-inverse"></i>
                     </span>
                  </a>
                  <a href="">
                     <span class="fa-stack fa-2x">
                        <i class="fas fa-square fa-stack-2x"></i>
                        <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
                     </span>
                  </a>
                  <a href="">
                     <span class="fa-stack fa-2x">
                        <i class="fas fa-square fa-stack-2x"></i>
                        <i class="fab fa-instagram fa-stack-1x fa-inverse"></i>
                     </span>
                  </a>
               </div>
            </div>
            <div class="col-xl-4">
               <img src="img/team3.png" alt="">
               <h4>Ronobir sing</h4>
               <p>Admin</p>
               <div class="icons">
                  <a href="">
                     <span class="fa-stack fa-2x">
                        <i class="fas fa-square fa-stack-2x"></i>
                        <i class="fab fa-vk fa-stack-1x fa-inverse"></i>
                     </span>
                  </a>
                  <a href="">
                     <span class="fa-stack fa-2x">
                        <i class="fas fa-square fa-stack-2x"></i>
                        <i class="fab fa-facebook fa-stack-1x fa-inverse"></i>
                     </span>
                  </a>
                  <a href="">
                     <span class="fa-stack fa-2x">
                        <i class="fas fa-square fa-stack-2x"></i>
                        <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
                     </span>
                  </a>
                  <a href="">
                     <span class="fa-stack fa-2x">
                        <i class="fas fa-square fa-stack-2x"></i>
                        <i class="fab fa-instagram fa-stack-1x fa-inverse"></i>
                     </span>
                  </a>
               </div>
            </div>
            
         </div>
      </div>
   </section>
   <section class="services" id="blog">
      <div class="container">
         <div class="row justify-content-center">
            <div class="col-xl-8">
               <h2 class="about__title">Blog</h2>
               <p class="about__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
         </div>
         <div class="row left justify-content-between">
            <div class="blog-item ">
               <img src="img/blog1.png" alt="" class="img-fluid">
            </div>
            <div class="blog-item ">
               <div class="blog">
                  <a href="">SEO Quis Vestibulum</a>
                  <div>
                     <span><i class="far fa-calendar-alt"></i> 14.07.2017</span>
                     <span><i class="far fa-file"></i> Development</span>
                  </div>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum placeat mollitia, exercitationem
                     commodi perspiciatis asperiores modi consectetur quas sequi tenetur!</p>
               </div>
            </div>
         </div>
         <div class="row right justify-content-between">
            <div class="blog-item">
               <img src="img/blog2.png" alt="" class="img-fluid">
            </div>
            <div class="blog-item">
               <div class="blog">
                  <a href="">SEO Quis Vestibulum</a>
                  <div>
                     <span><i class="far fa-calendar-alt"></i> 14.07.2017</span>
                     <span><i class="far fa-file"></i> Development</span>
                  </div>
                  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo minima illo architecto ea, debitis,
                     accusantium et obcaecati corrupti neque magnam voluptas nulla quae reprehenderit. Quos porro
                     explicabo illum libero autem!</p>
               </div>
            </div>
         </div>
         <div class="row left justify-content-between">
            <div class="blog-item">
               <img src="img/blog3.png" alt="" class="img-fluid">
            </div>
            <div class="blog-item">
               <div class="blog">
                  <a href="">SEO Quis Vestibulum</a>
                  <div>
                     <span><i class="far fa-calendar-alt"></i> 14.07.2017</span>
                     <span><i class="far fa-file"></i> Development</span>
                  </div>
                  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo minima illo architecto ea, debitis,
                     accusantium et obcaecati corrupti neque magnam voluptas nulla quae reprehenderit. Quos porro
                     explicabo illum libero autem!</p>
               </div>
            </div>
         </div>
         <div class="row">
            <div class="col-xl-12">
               <button class="button_blog">More View</button>
            </div>
         </div>
      </div>
   </section>
   <footer class="footer" id="contact">
      <div class="container">
         <div class="row justify-content-center">
            <div class="col-xl-8">
               <h2 class="about__title">Contact Us</h2>
               <p class="about__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
         </div>
         <div class="row justify-content-around">
            <div class="col-xl-3 col-md-6">
               <div class="circle"><i class="fas fa-map-marker-alt"></i></div>
               <p>Харьков,<br>харьковская область</p>
            </div>
            <div class="col-xl-3 col-md-6">
               <div class="circle"><i class="fas fa-phone fa-rotate-90"></i></div>
               <p>+380994731921<br>+380667493779</p>
            </div>
            <div class="col-xl-3 col-md-6">
               <div class="circle"><i class="fas fa-envelope"></i></div>
               <p>kurashov1307@gmail.com<br>kurashov1307@yahoo.com</p>
            </div>
         </div>  
         <div class="row justify-content-center form">
            <div class="col-xl-5"><input type="text" placeholder="Your Name"></div>
            <div class="col-xl-5"><input type="email" placeholder="Your Email"></div>
            <div class="col-xl-10"><textarea name="" id="" cols="30" rows="10" placeholder="Write Message"></textarea></div>
            <div class="col-xl-2 offset-xl-7"><button>Send</button></div> 
         </div>    
      </div>
   </footer>
   <footer class="rules">All rights Reserved © 2019`</footer>
   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
      </script>
   <script src="js/jquery-3.3.1.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
      </script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
      </script>
   <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
   <script src="js/main.js"></script>
</body>

</html>