.cv-image {
position: relative
}
.img1,
.img2 {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}const el = document.getElementById('image');
const divOffset = offset(el);
window.onscroll = stay;
function stay() {
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
el.style.top = divOffset.top + scrollTop + 'px'
}
function offset(el) {
var rect = el.getBoundingClientRect(),
scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
scrollTop = window.pageYOffset || document.documentElement.scrollTop;
return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}h = document.getElementById('A').clientHeight ||
h = document.getElementById('A').offsetHeight ||
h = document.getElementById('A').scrollHeight ||t = window.pageYOffset
.logo {
background: #000;
/* width: 42px; удалить*/
height: 42px;
display: inline-block;
margin-top: 14px;
}transform: skewY(20deg) вполне справляется с этой задачей + поддержка браузерами есть + адаптивность решается % величинами
@font-face {
font-family: 'fira_sans';
src: url('firasansbold.eot');
src: url('firasansbold.eot?#iefix') format('embedded-opentype'),
url('firasansbold.woff2') format('woff2'),
url('firasansbold.woff') format('woff'),
url('firasansbold.ttf') format('truetype'),
url('firasansbold.svg#fira_sansbold') format('svg');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'fira_sans';
src: url('firasansregular.eot');
src: url('firasansregular.eot?#iefix') format('embedded-opentype'),
url('firasansregular.woff2') format('woff2'),
url('firasansregular.woff') format('woff'),
url('firasansregular.ttf') format('truetype'),
url('firasansregular.svg#fira_sansregular') format('svg');
font-weight: 400;
font-style: normal;
}*{
font-family: "fira_sans";
}
.bold{
font-weight: 700
}
.normal{
font-weight: 400
}$( "#el" ).on( "swipeleft", fn );
$( "#el" ).on( "swiperight", fn );$( "#cart" ).on( "mouseenter mouseleave", function( event ) {
$( this ).toggleClass( "active" );
});<svg class="icon icon-vk">
<use xlink:href="img/sprite.svg#icon-vk"></use>
</svg><?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-vk" viewBox="0 0 24 24">
<path class="st0" d="M13.162 18.994c.609 0 .858-.406.851-.915-.031-1.917.714-2.949 2.059-1.604 1.488 1.488 1.796 2.519 3.603 2.519h3.2c.808 0 1.126-.26 1.126-.668 0-.863-1.421-2.386-2.625-3.504-1.686-1.565-1.765-1.602-.313-3.486C22.864 8.997 25.22 6 23.136 6h-3.981c-.772 0-.828.435-1.103 1.083-.995 2.347-2.886 5.387-3.604 4.922-.751-.485-.407-2.406-.35-5.261.015-.754.011-1.271-1.141-1.539A8.07 8.07 0 0 0 11.148 5c-2.273 0-3.841.953-2.95 1.119 1.571.293 1.42 3.692 1.054 5.16-.638 2.556-3.036-2.024-4.035-4.305C4.976 6.426 4.902 6 4.042 6H.787C.295 6 0 6.16 0 6.516c0 .602 2.96 6.72 5.786 9.77 2.756 2.975 5.48 2.708 7.376 2.708z"/>
</symbol></svg><svg>
<symbol id="icon-vk"></symbol>
<symbol id="icon-instagram"></symbol>
...
</svg>var auto = $.jqwidont.auto(); // is automatic initialisation enabled?
$.jqwidont.auto(false); // disable it
$.jqwidont.init(); // perform the default behaviour$('p').widont();var string = $.jqwidont.transform('No widows here!'); // string = 'No widows here!'<header>
<img src="img/logo.png" alt="Misocial">
<p class="nameCompany">Misocial</p>
</header>
<style>
header{
position: relative;
}
header::after, header::before{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
opacity: .5;
}
header::after{
// тут Ваша картинка
}
header::before{
// тут Ваш градиент
}
</style><img>...