Есть сайт: http://demo.infinity-web.site/max4/ Проблема в шапке, в хромиум-басед браузерах не подгружается деккорация.
Ниже скриншот из фаерфокса, так и должно быть.
Ниже скриншот из вивальди, так быть не должно.
Код CSS/HTML:
header .main-container {
position: relative;
}
.main-screen-phone {
font-size: 33px;
font-weight: bold;
line-height: 1.2;
}
header {
position: relative;
}
.main-nav {
padding-top: 92px;
display: flex;
justify-content: space-between;
}
.main-screen-section,
.main-nav {
position: relative;
z-index: 15;
}
header .logo {
width: 444px;
height: 111px;
}
header .logo-title {
font-size: 23px;
color: rgb(0, 0, 0);
line-height: 1.2;
}
header .phone {
position: relative;
font-weight: bold;
font-size: 44px;
padding-right: 90px;
}
header .phone:hover {
transform: scale(1.3);
}
header .phone::after {
content: '';
position: absolute;
top: -15px;
right: 0;
width: 64px;
height: 64px;
background-image: url('../img/main-screen-phone-decor.svg');
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
}
header::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 692px;
background-image: -moz-linear-gradient( -44deg, rgb(255, 110, 2) 0%, rgb(255, 238, 51) 0%, rgb(255, 224, 26) 47%, rgb(255, 210, 0) 100%);
background-image: -webkit-linear-gradient( -44deg, rgb(255, 110, 2) 0%, rgb(255, 238, 51) 0%, rgb(255, 224, 26) 47%, rgb(255, 210, 0) 100%);
background-image: -ms-linear-gradient( -44deg, rgb(255, 110, 2) 0%, rgb(255, 238, 51) 0%, rgb(255, 224, 26) 47%, rgb(255, 210, 0) 100%);
z-index: -1;
}
header .main-container::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 1406px;
height: 692px;
background-image: url('../img/main-screen-decor-white.svg'), url('../img/main-screen-phone-decor-two.svg');
background-size: contain, 680px 522px;
background-repeat: no-repeat, no-repeat;
background-position: 0 408px, 602px -90px;
z-index: 1;
}
<header>
<div class="main-container">
<nav class="main-nav">
<div>
<img class="logo" src="img/logo.svg" alt="логотип: мощные пылесосы для маникюра и педикюра">
</div>
<p class="phone"><a href="tel://+7 800 555 17 69">+7 (800) 555 17 69</a></p>
</nav>
<section class="main-screen-section">
<div class="main-text-container">
<h1 class="main-screen-utp">Настольный пылесос для маникюра Max <span lang="en">Ultimate</span> 4 со сверхмощностью 65 Вт от производителя
</h1>
<b class="main-screen-lead">Забудьте, что такое маникюрная пыль навсегда и позаботьтесь наконец о своём здоровье</b>
<div class="main-screen-btn-container">
<a class="btn" onclick="showPayForm()">Заказать пылесос</a>
<a class="btn" href="#about">Узнать подробнее</a>
</div>
<h2 class="main-screen-part-two-title"><span lang="en">Max Ultimate 4</span> станет вашим надежным помощником</h2>
</div>
<div class="main-screen-poster">
<img class="" width="810" heigh="810" src="img/poster-mainscreen.png">
<a onclick="showYu()"><img class="main-screen-poster-play" src="img/main-screen-poster-decor.svg"></a>
</div>
<ul class="main-screen-list">
<li>
<div class="container">
<p>Пыль вредна</p>
<p class="title">Отлично впитывает маникюрную пыль</p>
</div>
</li>
<li>
<div class="container">
<p>Избавьтесь от маски</p>
<p class="title">Удобный регулятор оборотов</p>
</div>
</li>
<li>
<div class="container">
<p>Гарантия</p>
<p class="title">Гарантия 24 месяца</p>
</div>
</li>
<li>
<div class="container">
<p>Тихая работа</p>
<p class="title">Избавьтесь от маски для лица</p>
</div>
</li>
<li>
<div class="container">
<p>Мощнее обычного</p>
<p class="title">В 4 раза мощнее обычного маникюрного пылесоса</p>
</div>
</li>
</ul>
</section>
</div>
</header>
проще всего svg конвертировать в png
background-image: url('../img/main-screen-decor-white.png'), url('../img/main-screen-phone-decor-two.png');
либо открываем svg в редакторе и меняем
xlink:href="data:img/svg;
на
xlink:href="data:image/svg;
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Есть код, как увеличить время возврата в первоначальное положение, те
Есть у кого скрипты поведения камеры? У меня на Unity, реализовано что то вреде плеера, который в зависимости от настроек проигрывает сценыИ...
Делаю десериализацию массива jsonЕсть следующий код: