Давай напишем скрипт и трансформации, которые будут открывать окно.
При нажатии на кнопку элементам с классом .blind нужно добавить класс .opened.
При добавлении класса .opened, ставни (.blind) должны поворачиваться на 15 градусов и сдвигаться на 100px вдоль оси X.
Учти - направление открытия и сдвига на .left и .right разные.
Также надо ставни немного отдалить от нас - на 15px.
Эта задача — часть курса по Full-Stack JavaScript
Ты можешь задать свой вопрос в комментариях под постом
Если ты уже решил задачу, то не стесняйся помочь другим
index.html
<!DOCTYPE html>
<html>
<head>
<title>Window</title>
<style>
body {
display: grid;
place-items: center;
height: 100vh;
}
.window {
width: 200px;
height: 200px;
position: relative;
perspective: 200px;
border: 5px solid #312509;
}
.view {
width: 200px;
height: 200px;
background-color: aqua;
background-image: url(images/mountains.jpeg);
background-size: cover;
}
.blind {
position: absolute;
width: 100px;
height: 200px;
top: 0;
background-color: #65532F;
border: 5px solid #312509;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.plank {
width: 75%;
height: 8px;
background-color: #312509;
}
.right {
right: 0;
}
button {
margin-top: 20px;
width: 100%;
border-radius: 5px;
padding: 8px;
border: none;
outline: none;
}
</style>
</head>
<body>
<div class="window">
<div class="view"></div>
<div class="blind left">
<div class="plank"></div>
<div class="plank"></div>
<div class="plank"></div>
<div class="plank"></div>
<div class="plank"></div>
</div>
<div class="blind right">
<div class="plank"></div>
<div class="plank"></div>
<div class="plank"></div>
<div class="plank"></div>
<div class="plank"></div>
</div>
<button>Open the window</button>
</div>
</body>
</html>