верстаю данный макет и не совсем понимаю, как правильно добавить боковые ссылки социальных сетей.
На данный момент есть такая реализация:
HTML:
<section class="home">
<div class="container">
<header class="header">
<nav class="header__nav">
<div class="header__menu">
<ul class="menu__list">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Travel</a></li>
</ul>
</div>
</nav>
</header>
<div class="home__wrapper">
<h1 class="home__title">Business Travel</h1>
<p class="home__subtitle">For entrepreneurs and freelancers</p>
<button class="button button_home">
MORE INFO
</button>
</div>
</div>
<div class="home__social">
<ul class="social__links">
<li><a href="#">Instagram</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</div>
</section>
CSS:
.social__links {
margin: 0;
padding: 0;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-40%);
li {
margin: 135px 0;
list-style-type: none;
transform: rotate(90deg);
}
a {
font-size: 20px;
font-weight: 400;
color: #ffffff;
text-decoration: none;
}
}
Одна из проблем состоит в том, что не удается адекватно настроить расстояние между ссылками, только за счёт очень большого margin, что мне кажется не совсем верным подходом.