Skip to content

Instantly share code, notes, and snippets.

@levito

levito/what-i-had.html

Created September 7, 2016 23:15
Show Gist options
  • Save levito/06b611a4c38b68a26d1bbdd7d010560d to your computer and use it in GitHub Desktop.
Save levito/06b611a4c38b68a26d1bbdd7d010560d to your computer and use it in GitHub Desktop.
Download ZIP
code in the dark @ typeform
Raw
what-i-had.html
<!doctype html>
<html>
<head>
<style>
html {
background-color: #f63;
padding: 50px 200px;
}
h1 {
color: #fff;
font-size: 40px;
font-weight: normal;
}
.top {
background-color: #445;
padding: 0 30px 40px;
}
.camera {
margin: 15px auto 10px;
width: 12px;
height: 12px;
background-color: #ddd;
border-radius: 6px;
}
.screen {
background-color: #b02;
padding: 20px 50px;
}
.window {
border-radius: 10px;
overflow: hidden;
}
.titlebar {
background-color: #ddd;
}
.btn {
display: inline-block;
margin: 10px;
margin-right: 0;
width: 15px;
height: 15px;
border-radius: 8px;
}
btn-1 {
background-color: #c00;
}
btn-2 {
background-color: #cc0;
}
btn-3 {
background-color: #109;
}
.window-body {
font-family: monospace;
padding: 8px;
font-weight: bold;
color: #aaf;
}
.bottom {
background-color: #ddd;
margin: 0 -140px;
height: 40px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.bottom__gap {
margin: 0 auto;
height: 15px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.o {
color: orange;
}
.gr {
color: green;
}
</style>
</head>
<body>
<h1>Flat Terminal</h1>
<div class="top">
<div class="screen">
<div class="window">
<div class"titlebar">
<div class="btn btn-1"></div>
<div class="btn btn-2"></div>
<div class="btn btn-3"></div>
</div>
<div class="window-body">
# .bash_profile<br/>
<br/>
# get the aliases and functions<br/>
<span class="o">if [ -f</span><span class="gr">~/.bashrc</span><span class="o"> ]; then </span>
and so on....
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="bottom__gap">
</div>
</div>
</body>
</html>
Raw
what-i-thought-i-had.html
<!doctype html>
<html>
<head>
<style>
html {
background-color: #d42;
padding: 50px 200px;
font-family: sans-serif;
}
h1 {
color: #fff;
font-size: 80px;
font-weight: normal;
}
.top {
background-color: #445;
padding: 0 30px 40px;
overflow: hidden;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
}
.camera {
margin: 15px auto 10px;
width: 12px;
height: 12px;
background-color: #ddd;
border-radius: 6px;
}
.screen {
background-color: #3a5;
padding: 30px 50px;
}
.window {
border-radius: 10px;
overflow: hidden;
}
.titlebar {
background-color: #ddd;
font-size: 0;
}
.btn {
display: inline-block;
margin: 10px;
margin-right: 0;
width: 15px;
height: 15px;
border-radius: 8px;
}
.btn-1 {
background-color: #c00;
}
.btn-2 {
background-color: #ec0;
}
.btn-3 {
background-color: #0a3;
}
.window-body {
font-family: monospace;
padding: 8px;
font-weight: bold;
background: #445;
color: #7bf;
}
.bottom {
background-color: #ddd;
margin: 0 -140px;
height: 40px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.bottom__gap {
margin: 0 auto;
width: 200px;
height: 15px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background: #fff;
}
.o {
color: #f90;
}
.gr {
color: #0a3;
}
</style>
</head>
<body>
<h1>Flat Terminal</h1>
<div class="top">
<div class="camera"></div>
<div class="screen">
<div class="window">
<div class="titlebar">
<div class="btn btn-1"></div>
<div class="btn btn-2"></div>
<div class="btn btn-3"></div>
</div>
<div class="window-body">
# .bash_profile<br/>
<br/>
# get the aliases and functions<br/>
<span class="o">if [ -f</span>
<span class="gr">~/.bashrc</span>
<span class="o">]; then </span>
and so on....
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="bottom__gap">
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment