<div class="wrapper">
<div class="terminal">
<div class="terminal__banner">
<span class="terminal__circle red"></span>
<span class="terminal__circle yellow"></span>
<span class="terminal__circle green"></span>
</div>
<div class="terminal__body">
<span class="terminal__text"> Antonijas-MacBook-Air ~ $</span>
<span class="terminal__cursor"></span>
</div>
</div>
</div>
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap");
* {
box-sizing: border-box;
}
body {
background-color: #517eb9;
}
.wrapper {
max-width: 650px;
margin: 50px auto;
}
.terminal {
&__banner {
background-color: #dbdbdb;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding: 7px 10px;
}
&__circle {
border-radius: 100%;
height: 15px;
width: 15px;
display: inline-block;
margin-right: 5px;
align-self: center;
position: relative;
cursor: pointer;
text-align: center;
&::after {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
display: block;
top: -1px;
font-size: 90%;
}
&.red {
background-color: #ee5f5b;
text-align: center;
&:hover {
&::after {
content: "\00D7";
}
}
}
&.yellow {
background-color: #f8be45;
&:hover {
&::after {
content: "\2212";
}
}
}
&.green {
background-color: #5dc94c;
text-align: center;
&::before {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
display: block;
font-size: 70%;
}
&:hover {
&::before {
content: "\22A0";
}
}
}
}
&__body {
height: 350px;
background-color: #000;
padding-top: 7px;
}
&__text {
padding-left: 10px;
color: #fff;
font-family: "Roboto Mono", monospace;
vertical-align: middle;
display: inline-block;
user-select: none;
}
&__cursor {
vertical-align: middle;
display: inline-block;
height: 20px;
width: 10px;
background-color: rgba(225, 225, 225, 0.7);
animation: cursor 0.5s forwards infinite ease-in-out alternate;
}
}
@keyframes cursor {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.