const btnBrazil = document.querySelector(".brazil");
const cardBrazil = document.querySelectorAll(".brc");
btnBrazil.addEventListener("click", function () {
cardBrazil.forEach((element) => {
element.classList.add("class-b");
});
});
.title {
width: 300px
}.title {
width: 100%;
max-width: 300px;
}<div class="container">
<img class="img" src="" alt="">
<div class="text-container">
<!-- текст -->
</div>
</div>.container {
display: flex;
justify-content: center;
width: 100%;
height: 100vh;
}
.img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.text-container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1320px;
}<div class="container">
<img class="img" src="" alt="">
<img class="img" src="" alt="">
<div class="text-container">
<!-- текст -->
</div>
</div>.container {
display: flex;
justify-content: center;
width: 100%;
height: 100vh;
}
.img {
position: absolute;
top: 0;
bottom: 0;
разделисть по сторонам картинки
width: 50%;
height: 100%;
object-fit: cover;
}
.text-container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1320px;
}<div class="menu">
<div class="menu__list">
<div class="menu__item">Тут ваш список</div>
<div class="menu__item-image">Тут картинка</div>
</div>
<div class="menu__list">
<div class="menu__item">Тут ваш список</div>
<div class="menu__item-image">Тут картинка</div>
</div>
<div class="menu__list">
<div class="menu__item">Тут ваш список</div>
<div class="menu__item-image">Тут картинка</div>
</div>
</div>.menu {
display: flex;
}
.menu__list {
display: flex;
flex-direction: column;
}<div class="search">
<button class="search__button" aria-label="Кнопка вызова меню">КиноПоиск</button>
<ul class="search__list">
тут контент который вам нужен
</ul>
</div>
<code lang="css">
.search {
posititon: relative;
//наводим красоту
}
.search__list {
position: absolute;
//тут тоже наводим красоту и позицианирование
opacity: 0;
}
.search:hover .search__list {
opacity: 1;
}
</code>.link {
posititon: relative;
}
.link::before {
content: "";
positioan: absolute;
top: -10px;
left: 0;
width: 100%;
height: 2px;
background-color: red;
opacity: 0;
transform: translate-y(-10px);
transition: 0.3s all ease;
}
.link:hover::before {
opacity: 1;
transform: translate-y(0);
}* {
margin: 0;
padding: 0;
text-decoration: none;
}