align-items: stretch;
<div class="flex">
<div>1</div>
<div>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
</div>
</div>
.flex {
display: flex;
align-items: stretch;
}
.flex div:first-child {
background: red;
}
.flex div:last-child {
background: green;
}
.carousel-item {
width: 100vh;
height: 100vh;
}
.carousel-item {
width: 100%;
height: 100%;
object-fit: cover;
}
:before
, :after
, задать им фон, наклонить, отцентрировать. skew
, а потом его содержимое тоже трансформировать с помощью skew
в обратную. @media
и уметь трансформировать отображение элементов. Ничего сложно тут нет.<nav>
<button>==</button>
<ul>
<li><a href="#">menu item 1</a></li>
<li><a href="#">menu item 2</a></li>
<li><a href="#">menu item 3</a></li>
<li><a href="#">menu item 4</a></li>
</ul>
</nav>
nav {
display: flex;
background: #f5f5f5;
border-bottom: 1px solid #e2e2e2;
button {
padding: 10px;
border: 0;
}
ul {
list-style: none;
margin-left: auto;
display: flex;
li a {
padding: 10px;
display: inline-block;
&:hover {
background: #e2e2e2;
}
}
}
}
@media screen and (min-width: 768px) {
nav {
button {
display: none;
}
}
}
@media screen and (max-width: 767.98px) {
nav {
position: relative;
button:not(:hover) {
~ ul {
display: none;
}
}
ul {
position: absolute;
top: 100%;
left: 0;
flex-direction: column;
background: #f5f5f5;
border: 1px solid #e2e2e2;
}
}
}
position: absolute
. input
удали, он ненужен, без js ты ему галочку не снимешь. Стили связанные с input
тоже удали. Свой .dd-button
сделай не div
, а button
. Далее отталкивайся от самой кнопки, у нее может быть состояние :focus
, вот это то что тебе нужно. Если фокус на кнопке, то показывай список, если нет фокуса, то не показывай. Фокус с кнопки снимается при клике на любой посторонний элемент.<button class="dd-button">Dropdown</button>
.dd-button:not(:focus) + .dd-menu {
display: none;
}
.dd-button:focus + .dd-menu {
display: block;
}