Не подгружается фотография на html страницу
Не отображается фотография в браузере. Она идет как background-image в блоке . Этот блок находится в родителе секции
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Теплый пол - Приносим тепло в каждый дом</title>
<!---------- CSS ---------->
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/fonts/fonts.css" />
<link rel="stylesheet" href="css/index.css" />
<link rel="stylesheet" href="css/header.css" />
<link rel="stylesheet" href="css/hero.css" />
<link rel="stylesheet" href="css/advantages.css" />
<link rel="stylesheet" href="css/calc.css" />
<link rel="stylesheet" href="css/footer.css" />
</head>
<body>
<!------------------------------ HEADER ------------------------------>
<header class="header">
<h1 class="visually-hidden">Теплый пол в каждый дом</h1>
<div class="container header__container">
<img
class="header__logo"
src="images/logo.svg"
alt="Логотип с солнышком и текстом теплый пол"
/>
<button class="header__button button">заказать</button>
</div>
<!--container-->
</header>
<!------------------------------ MAIN ------------------------------>
<main>
<!---------- HERO ---------->
<section class="hero section-offset">
<div class="container hero__container">
<!----- GRAY BLOCK ----->
<div class="hero__content gray-block">
<h2 class="hero__title">Приносим тепло в каждый дом</h2>
<p class="hero__description">
Устанавливаем теплые полы в квартирах, офисах
и загородных домах.
</p>
<a href="#calc" class="button link hero__link"
>Рассчитать стоимость</a
>
<!----- SLIDER ----->
<div class="hero__slider-wrapper">
<div class="filling">
<div class="filling">
<div
class="filling hero__image"
style="background-image: url('./images/hero_img_01.jpg')"
></div>
<!--hero__image-->
</div>
<!--fiiling-->
<button class="hero__slider-btn hero__slider-btn_prev"></button>
<button class="hero__slider-btn hero__slider-btn_next"></button>
</div>
<!--filling-->
</div>
<!--hero__slider-wrapper-->
</div>
<!--hero__content-->
</div>
<!--hero__container-->
</section>
<!--hero-->
<!---------- ADVANTAGES ---------->
<section class="advantages section-offset">
<div class="container advantages__container">
<h2 class="advantages__title">Наши преимущества</h2>
<ul class="advantages__list list-reset">
<li class="advantages__item">Надежные материалы</li>
<li class="advantages__item">Опытные монтажники</li>
<li class="advantages__item">Регулируемая температура пола</li>
<li class="advantages__item">Защита от замыканий</li>
<li class="advantages__item">Гарантия до 10 лет</li>
</ul>
</div>
<!--advantages__container-->
</section>
<!--advantages-->
<!---------- CALC ---------->
<section class="calc section-offset" id="calc">
<div class="container calc__container">
<div class="calc__content gray-block">
<h2 class="calc__title">Рассчитайте стоимость</h2>
<!----- CALC FORM ----->
<form class="calc__form">
<!----- SIZE ----->
<fieldset class="calc__fieldset calc__fieldset_size">
<label class="calc__wrapper-input calc__wrapper-input-size">
<span class="span__text">Ширина помещения, м</span>
<input
class="calc__input-number"
type="number"
name="width"
/>
</label>
<label class="calc__wrapper-input calc__wrapper-input-size">
<span class="span__text">Длина помещения, м</span>
<input
class="calc__input-number"
type="number"
name="length"
/>
</label>
</fieldset>
<!--size-->
<!----- TARIFF ----->
<fieldset class="calc__fieldset calc__fieldset_tariff">
<legend class="calc__text calc__text_legend">Тариф</legend>
<!-- Эконом -->
<label class="calc__wrapper-input calc__wrapper-input-tariff">
<input
class="calc__input-radio"
type="radio"
name="tariff"
value="economy"
/>
<span class="calc__label-radio">Эконом</span>
</label>
<!-- Комфорт -->
<label class="calc__wrapper-input calc__wrapper-input-tariff">
<input
class="calc__input-radio"
type="radio"
name="tariff"
value="comfort"
checked
/>
<span class="calc__label-radio">Комфорт</span>
</label>
<!-- Премиум -->
<label class="calc__wrapper-input calc__wrapper-input-tariff">
<input
class="calc__input-radio"
type="radio"
name="tariff"
value="premium"
/>
<span class="calc__label-radio">Премиум</span>
</label>
</fieldset>
<!--tariff-->
<button class="button calc__submit" type="submit">
Рассчитать
</button>
</form>
</div>
<!--calc__content-->
<!----- CALC TOTAL ----->
<div class="calc__total">
<div class="calc__result-wrapper">
<!-- Площадь -->
<p class="calc__result">
<span class="calc__text">Площадь</span>
<span class="calc__result-text">35 кв м</span>
</p>
<!-- Примерная стоимость-->
<p class="calc__result">
<span class="calc__text">Примерная стоимость</span>
<span class="calc__result-text">42590 руб</span>
</p>
</div>
<!--calc__result-wrapper-->
</div>
<!--calc__total-->
</div>
<!--calc__container-->
</section>
<!--calc-->
</main>
<!------------------------------ FOOTER ------------------------------>
<footer class="footer section-offset">
<div class="container footer__container">
<img
class="footer__logo"
src="images/"
alt="Логотип с солнышком и текстом теплый пол"
/>
<!---------- FOOTER LIST FOOTER__SOCIAL ---------->
<ul class="footer__list footer__social list__reset">
<li class="footer__item">
<a class="link footer__link" href="# ">
<svg
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.0767 2.99805C13.0853 2.99806 13.0945 2.99809 13.1043 2.99811L13.2105 2.99844C14.4432 3.00297 20.6909 3.04826 22.3754 3.50112C23.408 3.77809 24.2212 4.59432 24.4972 5.63042C24.6491 6.19966 24.755 6.95626 24.8288 7.73439L24.8431 7.89026C24.8547 8.0203 24.8655 8.15064 24.8754 8.2805L24.8869 8.43605C24.9855 9.80721 24.997 11.0903 24.9984 11.371L24.9985 11.4089C24.9985 11.412 24.9985 11.4171 24.9985 11.4171V11.4383C24.9985 11.4383 24.9985 11.4434 24.9985 11.4465L24.9984 11.4844C24.997 11.7757 24.9846 13.1466 24.8754 14.575L24.8631 14.731L24.85 14.8872C24.7757 15.7461 24.6643 16.5989 24.4972 17.225C24.2212 18.2611 23.408 19.0775 22.3754 19.3543C20.6347 19.8224 14.0216 19.8552 13.1043 19.8575L13.0337 19.8577C13.0279 19.8577 13.0228 19.8577 13.0184 19.8577L12.9896 19.8577C12.9896 19.8577 12.983 19.8577 12.9786 19.8577L12.8927 19.8575C12.4291 19.8564 10.5108 19.8474 8.50194 19.7784L8.2451 19.7693C8.20225 19.7677 8.15938 19.7661 8.11651 19.7645L7.85937 19.7543L7.60282 19.7434C5.93856 19.6704 4.35178 19.5506 3.62184 19.3543C2.5892 19.0775 1.77606 18.2611 1.50007 17.225C1.33287 16.5989 1.2214 15.7461 1.14709 14.8872L1.13399 14.731L1.12167 14.575C1.01636 13.1985 1.00107 11.8755 0.998847 11.5204L0.998582 11.4696C0.998564 11.465 0.998548 11.4608 0.998535 11.4569V11.3985C0.998548 11.3946 0.998564 11.3904 0.998582 11.3859L0.998847 11.335C1.00086 11.0134 1.01359 9.898 1.09421 8.66787L1.10464 8.51356C1.10644 8.48776 1.10827 8.46192 1.11013 8.43605L1.12167 8.2805C1.13161 8.15064 1.14235 8.0203 1.15395 7.89026L1.16829 7.73439C1.24213 6.95626 1.34807 6.19966 1.50007 5.63042C1.77606 4.59432 2.5892 3.77809 3.62184 3.50112C4.35178 3.30488 5.93856 3.18517 7.60282 3.11215L7.85937 3.10128L8.11651 3.09112C8.15938 3.08949 8.20225 3.08788 8.2451 3.0863L8.50194 3.07717C10.3826 3.01261 12.1839 3.00066 12.7865 2.99844L12.8927 2.99811C12.9026 2.99809 12.9118 2.99806 12.9203 2.99805H13.0767ZM10.5986 7.81484V15.0406L16.8337 11.4279L10.5986 7.81484Z"
fill="#232020"
/>
</svg>
</a>
</li>
<li class="footer__item">
<a href="#" class="link footer__link">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM12.4301 8.85898C11.2629 9.34445 8.9302 10.3492 5.43195 11.8734C4.86389 12.0993 4.56632 12.3203 4.53923 12.5363C4.49345 12.9015 4.95077 13.0453 5.57354 13.2412C5.65825 13.2678 5.74602 13.2954 5.836 13.3247C6.4487 13.5238 7.27289 13.7568 7.70135 13.7661C8.09 13.7745 8.52379 13.6142 9.0027 13.2854C12.2712 11.0791 13.9584 9.96386 14.0644 9.93982C14.1391 9.92286 14.2427 9.90153 14.3128 9.9639C14.383 10.0263 14.3761 10.1444 14.3687 10.1761C14.3234 10.3692 12.5282 12.0381 11.5992 12.9018C11.3096 13.1711 11.1041 13.3621 11.0621 13.4057C10.9681 13.5034 10.8722 13.5958 10.78 13.6846C10.2108 14.2334 9.78397 14.6449 10.8037 15.3168C11.2937 15.6397 11.6858 15.9068 12.077 16.1732C12.5042 16.4641 12.9303 16.7543 13.4817 17.1157C13.6221 17.2078 13.7563 17.3034 13.8869 17.3966C14.3841 17.751 14.8308 18.0694 15.3826 18.0187C15.7033 17.9892 16.0345 17.6876 16.2027 16.7884C16.6003 14.6632 17.3817 10.0585 17.5623 8.16103C17.5781 7.99479 17.5582 7.78203 17.5422 7.68863C17.5262 7.59524 17.4928 7.46217 17.3714 7.36366C17.2277 7.247 17.0057 7.2224 16.9064 7.22414C16.4551 7.2321 15.7626 7.47288 12.4301 8.85898Z"
fill="#232020"
/>
</svg>
</a>
</li>
</ul>
<!--footer__social-->
<!---------- FOOTER LIST FOOTER__CONTACT ---------->
<ul class="footer__list footer__contact list__reset">
<!----- FOOTER ITEM ----->
<li class="footer__item">
<a
href="tel:+78588497380"
class="link footer__link footer__link_contact"
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M4.35597 2.63884C5.28361 1.7112 6.81437 1.8065 7.61979 2.84204L9.86192 5.72478C10.2734 6.2538 10.4188 6.94261 10.2562 7.59278L9.57215 10.3291C9.49993 10.618 9.58457 10.9236 9.79513 11.1342L12.8659 14.2049C13.0764 14.4154 13.382 14.5001 13.6709 14.4279L16.4072 13.7438C17.0574 13.5812 17.7462 13.7266 18.2752 14.1381L21.158 16.3802C22.1935 17.1856 22.2888 18.7164 21.3612 19.644L20.0688 20.9364C19.1441 21.8611 17.7611 22.2671 16.4722 21.814C13.2719 20.6888 10.268 18.8468 7.71061 16.2894C5.15324 13.732 3.31119 10.7281 2.18605 7.52781C1.7329 6.2389 2.13891 4.8559 3.06356 3.93125L4.35597 2.63884Z"
fill="black"
/>
</svg>
<span>+7 858 849 73 80</span
><!--typograf.ru-->
</a>
</li>
<!----- FOOTER ITEM ----->
<li class="footer__item">
<a
href="mailto:teplyipol@gmail.com"
class="link footer__link footer__link_contact"
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3 3C1.57234 3 0.377595 3.99726 0.0743781 5.33316L12 12.621L23.9256 5.33316C23.6224 3.99725 22.4277 3 21 3H3Z"
fill="black"
/>
<path
d="M0 17.7009V7.04563L8.70479 12.3652L0 17.7009Z"
fill="black"
/>
<path
d="M10.1421 13.2436L0.287807 19.2838C0.768906 20.2984 1.80252 21 3 21H12.3841C12.1353 20.2962 12 19.5389 12 18.75C12 16.6754 12.9359 14.8194 14.4086 13.5811L13.8579 13.2436L12 14.379L10.1421 13.2436Z"
fill="black"
/>
<path
d="M24 14.507V7.04563L15.2952 12.3652L15.8022 12.676C16.6929 12.2429 17.6931 12 18.75 12C20.8704 12 22.7625 12.9778 24 14.507Z"
fill="black"
/>
<path
d="M23.7508 18.3663C23.7508 20.1174 22.8851 21.4029 21.3701 21.4029C20.6159 21.4029 19.8682 21.0618 19.6911 20.4322H19.6255C19.4485 21.0553 18.8123 21.3963 18.104 21.3963C16.9497 21.3963 16.2152 20.5831 16.2152 19.2452V18.4516C16.2152 17.1858 16.9366 16.3529 18.104 16.3529C18.9828 16.3529 19.4091 16.8513 19.5337 17.2973H19.5796V16.4447H20.9372V19.7305C20.9372 20.1371 21.2061 20.3601 21.5537 20.3601C22.0259 20.3601 22.5112 19.737 22.5112 18.2745V18.0974C22.5112 16.1824 21.0881 14.6084 18.7861 14.6084H18.727C16.3529 14.6084 14.7658 16.2086 14.7658 18.6943V18.9304C14.7658 21.7308 16.6218 22.9113 18.6221 22.9113H18.6877C19.4485 22.9113 20.0912 22.8064 20.4585 22.6424V23.7377C20.1305 23.8885 19.4944 24 18.6024 24H18.5368C15.6577 24 13.5 22.2292 13.5 18.9697V18.6483C13.5 15.5397 15.6315 13.5 18.727 13.5H18.7795C21.9603 13.5 23.7508 15.6446 23.7508 18.0515V18.3663ZM17.6908 18.6811V19.0222C17.6908 19.901 18.0319 20.2224 18.5631 20.2224C19.0287 20.2224 19.4091 19.9666 19.4091 19.1074V18.5565C19.4091 17.7826 18.9959 17.4941 18.55 17.4941C18.0319 17.4941 17.6908 17.8613 17.6908 18.6811Z"
fill="black"
/>
</svg>
<span>teplyipol@gmail.com</span>
</a>
</li>
</ul>
<!--footer__contact-->
<!----- FOOTER COPYRIGHT ----->
<p class="footer__copyright">© Теплый пол, 2023</p>
<!--typograf.ru-->
<!---------- FOOTER LIST FOOTER__DEVELOPER ---------->
<ul class="footer__list footer__developer list__reset">
<li class="footer__item">
Designer:<a
class="link footer__link"
href="https://t.me/Mrshmallowww"
target="_blank"
>
Anastasia Ilina</a
>
</li>
<li class="footer__item">
Developer:<a
class="link footer__link"
href="https://t.me/babann-digital"
target="_blank"
>
Сергей Бабанов</a
>
</li>
</ul>
<!--footer__developer-->
</div>
<!--container-->
</footer>
</body>
</html>
<!----- index.css ----->
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
}
body {
font-family: Inter, sans-serif;
color: #232020;
min-width: 320px;
background-color: #ffffff;
font-size: 16px;
line-height: 1.5;
font-weight: 400;
}
.container {
max-width: 1190px;
margin: 0 auto;
}
.list__reset {
margin: 0;
padding: 0;
list-style: none;
}
.link {
text-decoration: none;
color: inherit;
}
.img {
max-width: 100%;
height: auto;
}
.button {
display: inline-block;
border: none;
cursor: pointer;
border-radius: 24px;
padding: 18px 40px;
color: #232020;
text-transform: uppercase;
background-color: #ffc700;
}
.section-offset {
padding-top: 40px;
padding-bottom: 40px;
}
.visually-hidden {
position: fixed;
transform: scale(0);
}
.filling {
width: 100%;
height: 100%;
}
.gray-block {
background: #f8f8f8;
border-radius: 12px;
padding: 50px;
}
<!----- hero.css ----->
.hero {
padding-top: 0;
}
.hero__container {
display: flex;
gap: 10px;
}
.hero__content {
flex-basis: 50%;
}
.hero__title {
}
.hero__description {
}
.hero__link {
}
.hero__slider-wrapper {
flex-basis: 50%;
}
.hero__image {
}
.hero__slider-btn {
}
.hero__slider-btn_prev {
}
.hero__slider-btn_next {
}
Источник: Stack Overflow на русском