0

Откуда взяли эти иконки??? У меня 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>

1 ответ 1

3

У вас не закрыт тег i

<button class="fourth_form_button">
  <span class="form_btn">Send Invite</span>
  <i class="fa fa-arrow-right fa_btn">
</button>

Добавьте закрывающий тег

<i class="fa fa-arrow-right fa_btn"></i>
1
  • Точно... Спасибо огромное за внимательность.. Несколько часов пытался понять что происходит...
    – Roman
    7 сен 2018 в 12:47

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.