I use the start-up pattern of BUTSTRAP to it already added everything that is possible and Js, jq, but it still does not work correctly! order scripts! advise and help me figure out who uses the starting template, configured under the rules of work, throw off in the comments, I will be very grateful!
body{ background: #f2f2f2; font-family: "Lato"; font-weight: 300; color: #555; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-overflow-scrolling: touch; margin-top: 70px; } i { font-family: fontawesome !important; } a{ color: #f85c37; } a:hover, a:focus{ color: #7b7b7b; text-decoration: none; outline: 0; } h1,h2,h3,h4,h5,h6{ font-family: "Raleway"; font-weight: 300; color: #333; } p{ line-height: 28px; margin-bottom: 25px; } .centered{ text-align: center; } hr{ display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } .navbar{ font-weight: 800; font-size: 14px; padding-top: 15px; padding-bottom: 15px; } .navbar-inverse{ background: #2d2d2d; border-color: #2d2d2d; } .navbar-inverse .navbar-nav > .active > a{ background-color: #ff7878; } ul .navbar, .navbar-nav> li{ margin-left: 90px; } #car{ padding: 0; } #headerwrap{ background: #cecece; margin-top: -10px; padding-top: 20px; text-align: center; background-attachment: relative; background-position: center center; min-height: 500px; width: 100% background-size: 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #headerwrap h1{ margin-top: 100px; color: #990033; font-size: 70px; font-weight: 300; letter-spacing: 3px; text-shadow: 0px 5px 2px #330000; } #headerwrap h2{ font-size: 40px; color: #FF6600; letter-spacing: 2px; text-transform: uppercase; text-shadow: 0px 5px 2px #000; } .w{ padding-top: 35px; } .w h4{ font-size: 25px; } .tilt:hover{ -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); } #dg{ background: #e0e0e0; padding-top: 70px; padding-bottom: 70px; text-align: center; } #dg h4{ font-size: 40px; padding-top: 20px; text-shadow: 0px 3px 0px #000; } #lg{ background: #DC143C; padding-bottom: 20px; } .fa-male, .fa-users, .fa-user-times, .fa-wheelchair-alt, .fa-plane{ font-size: 100px; } #lg> .centered{ color: #696969; font-size: 38px; text-align: center; text-shadow: 2px 2px 0px #000; padding-top: 70px; padding-bottom: 60px; } #lg a{ color: black; } #lg a:hover{ color: #010; } #f{ background: #2d2d2d; font-size: 35px; } #f a> img{ height: 20%; margin-top: 40px; } #f a> img:hover{ box-shadow: 0px 0px 20px red; transform: scale(0.9); border-radius: 50%; transition: box-shadow, transform; transition-duration: 0.25s, 0.70s; } .cont{ background: url(IMG/batman_arkham.jpg) no-repeat; background-position: center center; background-attachment: relative; -webkit-background-size: cover; background-size: cover; min-height: 200px; max-height: 550px; padding-top: 30px; padding-bottom: 30px; } <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <link rel="stylesheet" href="fedCSS.css"> <link rel="stylesheet" href="fontawesome.min.css"> <title>FA</title> </head> <body> <div class="navbar navbar-expand-sm navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" > <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">F.<i class="fa fa-circle" style="font-size: 30px"></i>.A</a> </div> <div class="navbar-collapse collapse align-items-start justify-content-between"> <ul class="navbar navbar-nav navbar-right "> <li class="active"><a href="#">Главная</a></li> <li><a href="#"> Про Нас</a></li> <li><a href="#">Наши проэкты</a></li> <li><a href="#">Портфолио</a></li> <li><a href="#"><i class="fas fa-bug" aria-hidden="true"></i></a></li> </ul> </div> </div> </div> <!-- <div class="carousel-item"> <img class="third-slide" src="IMG/Twitter_7themes-su.jpg" alt="Third slide"> <div class="container"> <div class="carousel-caption text-right"> <h1>Ваш зоголовок.</h1> <p>Ваш текст.</p> <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> </div> </div> </div> </div> --> <div class="container-fluid" id="car"> <div class="carousel slide" id="carouselIndicators" data-ride="carousel"> <ol class="carousel-indicators"> <li class="active" data-target="#carouselIndicators" data-slide-to="0"></li> <li class="active" data-target="#carouselIndicators" data-slide-to="2"></li> <li class="active" data-target="#carouselIndicators" data-slide-to="3"></li> <li class="active" data-target="#carouselIndicators" data-slide-to="4"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="IMG/Opera_7themes-su.jpg" alt="" class="d-block w-100"> </div> <div class="carousel-item"> <img src="IMG/сетевых подключений_7themes-su.jpg" alt="" class="d-block w-100"> </div> <div class="carousel-item"> <img src="IMG/HTML тег_7themes-su.jpg" alt="" class="d-block w-100"> </div> <div class="carousel-item"> <img src="IMG/Twitter_7themes-su.jpg" alt="" class="d-block w-100"> </div> </div> <a href="#carouselIndicators" class="carousel-control-prev" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true" ></span> <span class="sr-only">Prev</span> </a> <a href="#carouselIndicators" class="carousel-control-next" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true" ></span> <span class="sr-only">Next</span> </a> </div> </div> <div id="headerwrap"> <div class="container"> <div class="row centered"> <div class="col-lg-8 col-lg-offset-2"> <h1>Bootstrap is awesome</h1> <h2>Сайты на бутстрап отличные!</h2> </div> </div> </div> </div> <div class="container w"> <div class="row centered"> <br><br> <div class="col-lg-4"> <i class="fa fa-heart"></i> <h4>Дизайн</h4> <p>Диза́йн (от англ. design — проектировать, чертить, задумать, а также проект, план, рисунок) — деятельность по проектированию эстетических свойств промышленных изделий («художественное конструирование»), а также результат этой деятельности (например, в таких словосочетаниях, как «дизайн автомобиля»)</p> </div> <div class="col-lg-4"> <i class="fa fa-laptop"></i> <h4>Компьютеры</h4> <p>Компью́тер (англ. computer, МФА: [kəmˈpjuː.tə(ɹ)]— «вычислитель») — устройство или система, способная выполнять заданную, чётко определённую, изменяемую последовательность операций. </p> </div> <div class="col-lg-4"> <i class="fa fa-trophy"></i> <h4>Телефоны</h4> <p>Телефо́н (от др.-греч. τῆλε «далеко» + φωνή «голос», «звук») — аппарат для передачи и приёма звука (в основном — человеческой речи) на расстоянии. Современные телефоны осуществляют передачу посредством электрических сигналов</p> </div> <br><br> </div> </div> <div id="dg"> <div class="container-fluid"> <h4>New Gadgets</h4> <div class="row centered"> <br><br> <div class="col-lg-4"> <div class="tilt"> <a href=""><img src="IMG/IPhone.png" alt="phone"></a> </div> <button type="button" class="btn btn-danger btn-lg">Купить</button> </div> <div class="col-lg-4"> <div class="tilt"> <a href=""><img src="IMG/IPhone.png" alt="phone"></a> </div> <button type="button" class="btn btn-warning btn-lg">Купить</button> </div> <div class="col-lg-4"> <div class="tilt"> <a href=""><img src="IMG/IPhone.png" alt="phone"></a> </div> <button type="button" class="btn btn-info btn-lg">Купить</button> </div> </div> </div> </div> <div class="container wb"> <div class="row centered"> <br><br><br><br> <div class="col-lg-8 col-lg-offset-2"> <h4>Мы создаем сайты!</h4> <p>Сайт – лицо компании в Интернете. Благодаря ему, вы повысите узнаваемость бренда, торговой марки и найдете новых клиентов. Мы создаем сайты, которые будут работать на вас.</p> <br><br><br><br> <div class="col-lg-2"></div> <div class="col-lg-10 col-lg-offset"> <img src="IMG/Lenovo-G50-80.jpg" alt="lenovo" class="img-responsive"> </div> </div> </div> </div> <br><br><br> <div id="lg"> <h4 class="centered">Партнеры</h4> <div class="container"> <div class="row centered"> <div class="col-lg-3 col-offset-1"> <a href="#"><i class="fa fa-male" aria-hidden="true"></i></a> </div> <div class="col-lg-3"> <a href="#"><i class="fa fa-users" aria-hidden="true"></i></a> </div> <div class="col-lg-3"> <a href="#"><i class="fa fa-wheelchair-alt" aria-hidden="true"></i></a> </div> <div class="col-lg-3"> <a href="#"><i class="fa fa-plane" aria-hidden="true"></i></a> </div> </div> </div> </div> <div class="container-fluid cont"> <div class="row"> <div class="embed-responsive embed-responsive-16by9 col"> <iframe src="https://www.youtube.com/embed/?v=mvntgMuUPhU&list=PL3LQJkGQtzc51x2RpSNk3e3Ebh7rbKCkB&index=2" class="embed-responsive-item p-5 h-50" allowfullscreen ></iframe> </div> <div class="embed-responsive embed-responsive-16by9 col"> <iframe src="https://www.youtube.com/embed/?v=sssu2d1UqrE&index=1&list=PL3LQJkGQtzc51x2RpSNk3e3Ebh7rbKCkB" class="embed-responsive-item p-5 h-50" allowfullscreen></iframe> </div> <div class="embed-responsive embed-responsive-16by9 col"> <iframe src="https://www.youtube.com/embed/?v=GHYPsEDd_bs&list=PL3LQJkGQtzc51x2RpSNk3e3Ebh7rbKCkB&index=3" class="embed-responsive-item p-5 h-50" allowfullscreen></iframe> </div> </div> </div> <div id="f"> <div class="container"> <div class="row left"> <a href="#" class="col-lg-1"><img src="IMG/social_icons/Social Icons by Dreamstale (12).png" alt=""></a> <a href="#" class="col-lg-1"><img src="IMG/social_icons/Social Icons by Dreamstale (6).png" alt=""></a> <a href="#" class="col-lg-1"><img src="IMG/social_icons/Social Icons by Dreamstale (12).png" alt=""></a> <a href="#" class="col-lg-1"><img src="IMG/social_icons/Social Icons by Dreamstale (15).png" alt=""></a> </div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!--Иконочный шрифт--> <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/solid.js" integrity="sha384-+Ga2s7YBbhOD6nie0DzrZpJes+b2K1xkpKxTFFcx59QmVPaSA8c7pycsNaFwUK6l" crossorigin="anonymous"></script> <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js" integrity="sha384-7ox8Q2yzO/uWircfojVuCQOZl+ZZBg2D2J5nkpLqzH1HY0C1dHlTKIbpRz/LG23c" crossorigin="anonymous"></script> </body> </html>