Robię taki terminal w CSS, jednakże przyciski się przesuwają na dół.
Są one relative, gdy przełączam je na absolute to wszystkie są w sobie.
<div class="terminal">
<div class="bar">
<div class="center"><span class="terminal-title"> terminal</span></div>
<div class="buttons">
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
</div>
</div>
<div class="code"></div>
</div>
.terminal {
position: absolute;
margin-left: auto;
margin-right: auto;
}
.code {
font-family: 'Inconsolata', monospace;
position: relative;
width: 500px;
height: 350px;
background-color: black;
color: white;
border-radius: 10px;
z-index: 5;
}
.bar {
position: absolute;
z-index: 10;
width: 500px;
height: 30px;
background-image: linear-gradient(#555555, #404040, #555555);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.button {
cursor: pointer;
width: 17px;
height: 17px;
background-image: linear-gradient(#ff2929, #830000);
border-radius: 50%;
float: left;
margin-left: 10px;
}
.button:hover {
opacity: 0.6;
}
.buttons {
top: 7px;
right: 10px;
float: right;
}
.terminal-title {
top: 5px;
position: relative;
font-size: 16px;
color: white;
}