Skip to content

Instantly share code, notes, and snippets.

@ZauberNerd

ZauberNerd/index.html

Created September 8, 2016 09:27
Show Gist options
  • Save ZauberNerd/77384e1d5e6b987626640282b84765f0 to your computer and use it in GitHub Desktop.
Save ZauberNerd/77384e1d5e6b987626640282b84765f0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html>
<html>
<head>
<style>
.monitor {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
background-color: darkgrey;
display: flex;
justify-content: center;
padding: 8px;
width: 1280px;
}
.webcam {
border-radius: 50%;
background-color: white;
width: 16px;
height: 16px;
}
.screen {
background-color: green;
padding: 20px 32px;
}
.body {
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
background-color: silver;
width: 1280px;
height: 20px;
}
.window-title {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
background-color: silver;
}
.button {
width: 16px;
height: 16px;
margin: 4px;
}
.close {
background-color: red;
}
.minimize {
background-color: yellow;
}
.maximize {
background-color: green;
}
.terminal {
background-color: darkgrey;
font-family: monospace;
}
.syntax-comment {
color: blue;
}
.syntax-function {
color: orange;
}
.syntax-value {
color: green;
}
.syntax-expression {
color: purple;
}
</style>
</head>
<body>
<h1>Flat Terminal</h1>
<div class="monitor">
<div class="webcam"></div>
<div class="screen">
<div class="window-title">
<div class="buttons">
<button classs="button close"></button>
<button classs="button minimize"></button>
<button classs="button maximize"></button>
</div>
</div>
<div class="terminal">
<div class="line syntax-comment"># .bash_profile</div>
<div class="line empty">&nbsp;</div>
<div class="line syntax-comment"># Get the aliases and functions</div>
<div class="line syntax-bash">
<span class="syntax-function">if [ -f</span> <span class="syntax-value">~/.bash_profile</span> <span class="syntax-function">]; then</span>
</div>
<div class="line syntax-bash">
<span>&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="syntax-function">. </span><span class="syntax-value">~/.bashrc</span>
</div>
<div class="line syntax-bash">
<span class="syntax-function">fi</span>
</div>
<div class="line empty">&nbsp;</div>
<div class="line syntax-comment"># User specific environment and startup programs</div>
<div class="line empty">&nbsp;</div>
<div class="line syntax-bash">
<span class="syntax-value">PATH=</span>
<span class="syntax-expression">$PATH</span>
<span class="syntax-value">:</span>
<span class="syntax-expression">$HOME</span>
<span class="syntax-value">/bin</span>
</div>
<div class="line empty">&nbsp;</div>
<div class="line syntax-bash">
<span class="syntax-function">export </span><span class="syntax-value">PATH</span>
</div>
<div class="line empty">&nbsp;</div>
<div class="line syntax-bash">
<span class="syntax-function">unset </span><span class="syntax-value">USERNAME</span>
</div>
</div>
</div>
</div>
<div class="body">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment