CSS3 Mac Terminal

CSS3 Mac Terminal.markdown

CSS3 Mac Terminal

Forked from Exo's Pen CSS3 Mac Terminal.

A Pen by Ray on CodePen.

License.

index.html

<div id="head"> HTML5 & CSS3 TERMINAL </div>
<div id="bar">
    <div id="red">
    </div>
    <div id="yellow">
    </div>
    <div id="green">
    </div>
</div>
    <div id="screen">
        <p class="font">user@fdzh.org:~$ dnf config-manager --add-repo=http://repo.fdzh.org/FZUG/FZUG.repo</p>
      <p class="font">user@fdzh.org:~$ dnf install musicbox</p>
    </div>

style.css

body {
    background-color: #2B3D50;
}
#head {
    font-family: monospace;
    color: #fff;
    margin: auto;
    padding: 35px;
    font-size: 40px;
    text-align: center;
}
#bar {
    text-align: center;
    width: 750px;
    height: 25px;
    background-color: #DAD9D9;
    margin: 0 auto;
    font-family: monospace;
    padding: auto;
    float: none;
    border-radius: 5px;
}
#red {
    background-color: #E94B35;
    border-radius: 100%;
    width: 15px;
    height: 15px;
    margin: 0 auto;
    left: -47%;
    bottom: -20%;
    position:relative;
}
#yellow {
    background-color: #f0f000;
    border-radius: 100%;
    width: 15px;
    height: 15px;
    margin: 0 auto;
    left: -44%;
    bottom: 40%;
    position:relative;
    display: block;
}
#green {
    background-color: #1AAF5C;
    border-radius: 100%;
    width: 15px;
    height: 15px;
    margin: 0 auto;
    left: -41%;
    bottom: 99%;
    position:relative;
    display: block;
}
#screen {
    background-color: #33485E;
    width: 750px;
    height: 450px;
    border-radius: 2%;
    margin: 0 auto;
    padding: 1px;
}
.font {
    color: #fff;
    font-family: monospace;
    font-size: 15px;
    text-align: left;
    position: static;
}