Откуда взяли эти иконки??? У меня bootstrap отказывается корректно работать из за них... Распространились как блохи по странице.. Никогда такого не было.. Причем они распространены псевдоклассом ::before.. Инспектор говорит, что это подключенные через CDN иконки чудят.. Как их убрать? bootstrap отказывается работать.. Я добавил только одну... А добавилось куча...
$('.modal1').click(function() {
$('#modalwindow').arcticmodal()
});
body {
font-family: Lato, sans-serif !important;
color: #000;
padding: 0;
margin: 0;
}
a {
color: #000;
text-decoration: none;
}
ul, li {
padding: 0;
margin: 0;
}
.header_icon_1 {
color: #000;
padding-left: 18px;
color: #fff;
}
header {
background: #f4f4f5;
}
nav {
font-size: 16px;
}
.header_item_color{
color: #9f9fa1;
}
.header_icon {
margin-left: 13px;
padding-right: 18px;
color: #fff;
}
.header_item_back {
background: #267df4;
border-radius: 20px;
}
.nav-item {
margin-right: 30px;
}
.nav-item:last-child {
margin-right: 0;
}
.navbar-brand {
margin-left: 70px;
}
.navbar-light .navbar-nav .nav-link:hover {
color: #9f9fa1;
}
.navbar-light .navbar-nav .nav-link {
color: #000;
}
#header {
padding-top: 30px;
}
#first {
background: url(../img/first.png) no-repeat center top -100px /cover;
min-height: 1200px;
}
.first_title {
font-family: "Varela Round", sans-serif;
font-size: 62px;
margin-top: 100px;
}
.first_text {
font-size: 20px;
color: #8c8f94;
margin-top: 60px;
}
.first_btn_video {
margin-left: 12px;
}
.box-modal {
width: 100%;
padding: 20px;
}
.modal1 {
padding: 5px 20px;
border-radius: 20px;
border: 1px solid #dbdce0;
background: #eef0f3;
margin-top: 60px;
cursor: pointer;
}
.modal1:hover {
box-shadow:1px 1px 8px 2px rgba(0,0,0,0.1)inset;
-webkit-box-shadow:1px 1px 8px 2px rgba(0,0,0,0.1)inset;
-moz-box-shadow:1px 1px 8px 2px rgba(0,0,0,0.1)inset;
}
.second_up_right_title,
.second_up_left_title {
font-size: 26px;
margin: 40px 0;
}
.second_up_left_text1,
.second_down_left_text1,
.second_up_right_text1,
.second_down_right_text1 {
font-size: 18px;
color: #8c8f94;
}
.second_down_left_back {
background: url(../img/second_down_left.png) no-repeat center top /cover;
min-height: 950px;
margin-left: -398px;
margin-top: 240px;
}
.second_down_title {
font-family: "Varela Round", sans-serif;
font-size: 42px;
margin-top: 415px;
margin-bottom: 60px;
}
.second_btn_icon {
font-size: 16px;
color: #fff;
margin-left: 22px;
}
.second_down_right_text1 {
margin-top: 35px;
}
.second_btn {
background: #267df4;
border-radius: 20px;
padding: 7px;
border: none;
margin-top: 65px;
}
.fa-arrow-right {
color: #fff;
margin-left: 20px;
margin-right: 22px;
}
button:active, button:focus, input:focus, input:active{
outline: none;
}
.second_btn2 {
background: #fff;
border-radius: 20px;
border: 1px solid #e9e9ea;
padding: 7px;
margin-left: 30px;
margin-top: 65px;
}
.second_btn_icon2 {
margin: 0 20px;
}
.third_left_title {
font-family: "Varela Round", sans-serif;
font-size: 42px;
margin: 170px 0 55px 0;
}
.third_left_text {
font-size: 20px;
color: #8c8f94;
margin-bottom: 30px;
}
.third_left_title_h4 {
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 25px;
margin-top: 60px;
}
.dropbox {
margin-right: 25px;
}
.third_right_back {
background: url(../img/map.png) no-repeat center top 160px;
min-height: 660px;
margin-right: -582px;
}
#third {
padding-bottom: 200px;
}
.fourth_title {
font-family: "Varela Round", sans-serif;
font-size: 42px;
margin-top: 140px;
}
#fourth {
background: #f5f5f8;
padding-bottom: 30px;
}
.fourth_title:before {
content: '';
display: block;
width: 50px;
border-bottom: 2px solid #267df4;
position: absolute;
left: 50%;
margin-left: -25px;
margin-top: 80px;
}
.fourth_title_down {
font-size: 12px;
font-weight: 900;
color: #8c8f94;
text-transform: uppercase;
margin-top: 65px;
}
.img1, .img2, .img3, .img5 {
width: 320px;
}
.img4 {
width: 369px;
}
.imgs_phone {
margin-left: 27px;
}
.fourth_title_span_left {
font-size: 12px;
font-weight: 400;
color: #a8a9af;
text-transform: uppercase;
}
.fourth_title_span_right {
font-size: 12px;
font-weight: 900;
color: #a8a9af;
text-transform: uppercase;
}
.fourth_span_title {
margin-top: 100px;
}
.fourth_title_down_h2 {
font-family: "Varela Round", sans-serif;
font-size: 42px;
margin-top: 30px;
margin-bottom: 50px;
}
.fourth_form_input {
width: 500px;
border-radius: 25px;
border: 1px solid #cbcbce;
background: #f5f5f8;
padding: 10px 0 10px 20px;
}
.fourth_form_input:placeholder {
margin-left: 200px;
}
.fourth_form_button {
width: 164px;
border-radius: 20px;
border: none;
background: #6fc754;
padding: 7px 0 7px 0;
font-size: 16px;
color: #fff;
position: absolute;
right: 26px;
top: 4px;
}
.fourth_form_button i {
margin-left: 20px;
}
.form_btn {
margin-left: 20px;
}
.form_fourth {
position: relative;
}
.fourth_form_down_text {
font-size: 12px;
color: #d4d5d9;
text-transform: uppercase;
text-align: center;
margin-top: 65px;
margin-bottom: 20px;
}
#fifth {
margin: 0 auto !important;
}
.fifth_slider_item_title {
font-family: Lato, sans-serif;
font-size: 32px;
font-weight: 400;
color: #000;
}
.fifth_slider_item_text {
font-size: 20px;
font-weight: 400;
color: #8c8f94;
}
.fifth_slider_name {
font-size: 12px;
font-weight: 900;
color: #000;
text-transform: uppercase;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Lato:100,400,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="css/simple.css">
<link rel="stylesheet" href="css/jquery.arcticmodal-0.3.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/slick-theme.css">
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>
<header id="header">
<div class="container">
<div class="row">
<div class="col-lg-12 col-12">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Tour</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
<a class="navbar-brand" href="#"><img src="img/logo.png" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded=" false " aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contacts</a>
</li>
<li class="nav-item">
<a class="nav-link header_item_back" href="#"><i class="fa fa-apple header_icon_1"></i><span class="header_icon">Get App</span></a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
<section id="first">
<div class="container">
<div class="row">
<div class="col-lg-9 col-12 m-auto text-center">
<h1 class="first_title">What happens tomorrow?</h1>
<p class="first_text">
The sight of the tumblers restored Bob Sawyer to a degree of equanimity which he had not possessed since his interview with his landlady. His face brightened up, and he began to feel quite convivial.
</p>
<button class="modal1"><i class="fa fa-play"><span class="first_btn_video">Watch Video</span></i></button>
</div>
</div>
</div>
<div style="display: none;">
<div class="box-modal" id="modalwindow">
<div class="box-modal_close arcticmodal-close">закрыть</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/nNvAiwkTJyQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</section>
<section id="second">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="second_up_left">
<img src="img/second_lock.png" alt="Замок">
<h3 class="second_up_left_title">Real-time all the time</h3>
<p class="second_up_left_text1">Thus much I thought proper to tell you in relation to yourself, and to the trust I reposed in you.</p>
<p class="second_down_left_text1">Just then her head struck against the roof of the hall: in fact she was now more than nine feet high, and she at once took up the little golden key and hurried off to the garden door.</p>
</div>
</div>
<div class="col-lg-6">
<div class="second_up_right">
<img src="img/second_clock.png" alt="Будильник">
<h3 class="second_up_right_title">Adopt without any obstacles</h3>
<p class="second_up_right_text1">This sounded a very good reason, and Alice was quite pleased to know it. 'I never thought of that before!' she said.</p>
<p class="second_down_right_text1">This I have produced as a scantling of Jack’s great eloquence and the force of his reasoning upon such abstruse matters.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="second_down_left_back">
</div>
</div>
<div class="col-lg-6">
<h2 class="second_down_title">Your day<br>
is protected</h2>
<p class="second_down_right_text1">There have not been any since we have lived here,<br> said my mother.</p>
<p class="second_down_right_text1">We thought - Mr. Copperfield thought - it was quite a<br> large rookery; but the nests were very old ones, and<br> the birds have deserted them a long while.</p>
<button class="second_btn"><span class="second_btn_icon">Try to hack us</span><i class="fa fa-arrow-right"></i></button>
<button class="second_btn2"><span class="second_btn_icon2">Learn more</span></button>
</div>
</div>
</div>
</section>
<section id="third">
<div class="container">
<div class="row">
<div class="col-lg-5">
<h3 class="third_left_title">We are almost
everywhere</h3>
<p class="third_left_text">Now the races of these two have been for some ages utterly extinct, and besides to discourse any further of them would not be at all to my purpose.</p>
<p class="third_left_text">Thus much I thought proper to tell you in relation to yourself, and to the trust I reposed in you.</p>
<h4 class="third_left_title_h4">Partners</h4>
<img class="dropbox" src="img/dropbox.png" alt="fd">
<img class="evernote" src="img/evernote.png" alt="fd">
</div>
<div class="col-lg-7">
<div class="third_right_back">
</div>
</div>
</div>
</div>
</section>
<section id="fourth">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="fourth_title">Beautiful Interface</h2>
<p class="fourth_title_down">Landing Screen</p>
</div>
</div>
</div>
<div class="imgs_phone text-center">
<img class="img1" src="img/1.png" alt="">
<img class="img2" src="img/2.png" alt="">
<img class="img4" src="img/4.png" alt="">
<img class="img3" src="img/3.png" alt="">
<img class="img5" src="img/5.png" alt="">
</div>
<div class="container">
<div class="row">
<div class="col-lg-6 m-auto text-center">
<div class="fourth_span_title">
<span class="fourth_title_span_left"><span class="fourth_title_span_right">New</span>Providence</span>
</div>
<h2 class="fourth_title_down_h2">Get it to your smartphone</h2>
<form class="text-center form_fourth" action="#">
<input class="fourth_form_input" type="email" name="email" placeholder="[email protected]">
<button class="fourth_form_button"><span class="form_btn">Send Invite</span><i class="fa fa-arrow-right fa_btn"></button>
</form>
<div class="fourth_form_down_text">or Download From</div>
<div class="fourth_apple"><img src="img/apple.png" alt=""></div>
</div>
</div>
</div>
</section>
<section id="fifth">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="fifth_slider">
<div class="fifth_slider_item">
<div>
<img src="img/slider_top.png" alt="">
<h3 class="fifth_slider_item_title">New Providence is the great UI kit</h3>
</div>
<div>
<p class="fifth_slider_item_text">“Just then her head struck against the roof of the hall: in fact she was now more than nine feet high, and she at once took up the little golden key and hurried off to the garden door.”</p>
</div>
<div>
<img src="img/slider_star.png" alt="">
<img src="img/slider_star.png" alt="">
<img src="img/slider_star.png" alt="">
<img src="img/slider_star.png" alt="">
<img src="img/slider_star.png" alt="">
<h4 class="fifth_slider_name">Cameron Dowman</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.arcticmodal-0.3.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>