transform: rotate(XXdeg)
работает не так, как было задумано. Пофиксить можно используя старый трюк для вращения объекта вокруг нужной точки https://developer.mozilla.org/en-US/docs/Web/API/C... (там метод для канвас, но также работает и в svg)..man-hand
.transform: translate
используй инструменты разработчика в хроме: выдели нужный path
и в консоле введи $0.getBBox().x + $0.getBBox().width/2
- получишь значение для сдвига по оси X. По оси Y используй $0.getBBox().y + $0.getBBox().height/2
abstract class B {
abstract test(): void;
handle(): void {
this.test();
}
}
class A extends B {
test(): void {}
}
<div class="intro">
не закрыт<div class="intro">
<div class="container">
<div class="intro__inner">
<h2 class="intro__suptitle">Creative Template</h2>
<h1 class="intro__title">Welcome to Mogo</h1>
<a href="#" class="btn">Learn More</a>
</div>
<div class="slider">
<div class="container">
<div class="slider__inner">
<div class="slider__item active">
<span class="slider__num">01</span>Intro
</div>
<div class="slider__item">
<span class="slider__num">02</span>Work
</div>
<div class="slider__item">
<span class="slider__num">03</span>About
</div>
<div class="slider__item">
<span class="slider__num">04</span>Contacts
</div>
</div>
</div>
</div>
</div>
</div> <!-- <== -->
.wrapper {
font-size: 0;
white-space: nowrap;
overflow: hidden;
}
.test2 {
width: calc(100% - 2 * 100px - 2 * 5px); /* 100% - left - right - marginLeft - marginRight */
margin: 0 5px;
overflow: hidden;
text-overflow: ellipsis;
}
.promo .promo__wrapper {
text-align: center;
}
.promo__wrapper {
text-align: center;
}