<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/mallendeo/pen/Izgrm?q=gnome&order=popularity&depth=everything&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css'>
<style class="cp-pen-styles">html, body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
background: #444;
}
.window {
width: 700px;
height: 400px;
margin: 1em;
background: #f2f2f2;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.2);
border-radius: 8px 8px 0 0;
display: flex;
flex-direction: column;
}
.main-title {
color: #f0f0f0;
font-weight: 200;
}
.top-bar {
width: 100%;
height: 48px;
border-radius: 8px 8px 0 0;
border-bottom: 1px solid #b4b4b4;
display: flex;
align-items: center;
background-color: #eeeeee;
background-image: -webkit-linear-gradient(bottom, #eeeeee, white);
background-image: linear-gradient(to top,#eeeeee, white);
}
.separator {
flex: 1;
}
.btn {
min-width: 32px;
height: 32px;
border: none;
outline: none;
background: none;
color: #2E3436;
font-size: .8em;
text-shadow: 0 1px 0 white;
}
.btn .fa + span {
margin-left: .4em;
}
.btn:not(.btn-close) {
border-radius: 3px;
background-color: gainsboro;
background-image: -webkit-linear-gradient(bottom, gainsboro, #fefefe);
background-image: linear-gradient(to top,gainsboro, #fefefe);
border: 1px solid #BDBFBD;
box-shadow: 0 1px 0 #f9f9f9, inset 0 1px 0 #ffffff;
}
.btn:not(.btn-close):not(:disabled):hover {
background-color: #ebebeb;
background-image: -webkit-linear-gradient(bottom, #ebebeb, white);
background-image: linear-gradient(to top,#ebebeb, white);
}
.btn:not(.btn-close):not(:disabled):active, .btn:not(.btn-close):not(:disabled).active {
background-color: #d5d7d5;
background-image: -webkit-linear-gradient(bottom, #d5d7d5, #c4c7c4);
background-image: linear-gradient(to top,#d5d7d5, #c4c7c4);
box-shadow: 0 1px 0 #f9f9f9;
}
.btn:not(.btn-close):not(:disabled).active {
font-weight: bold;
text-shadow: none;
}
.btn:first-child {
margin-left: 8px;
}
.btn:last-child {
margin-right: 8px;
}
.btn:disabled {
background: #f4f4f2;
color: #A7ABA7;
}
.btn-group .btn {
border-left: none;
border-radius: 0;
float: left;
}
.btn-group .btn:first-child {
border-radius: 3px 0 0 3px;
border-left: 1px solid #BDBFBD;
}
.btn-group .btn:last-child {
border-radius: 0 3px 3px 0;
}
.btn-group .btn:first-child:nth-last-child(1), .btn-group .btn:first-child:nth-last-child(2) {
border-right: 1px solid #BDBFBD;
}
.window-title {
margin: auto;
flex: 1;
text-align: center;
color: #aca9a2;
text-shadow: 0 1px 0 #fff;
}
.btn-close {
margin-left: 10px;
color: #4D6067;
box-shadow: -2px 0 0 -1px #c6c6c6, -1px 0 0 0 white;
}
.content {
display: flex;
flex: 1;
}
.sidebar {
min-width: 180px;
max-width: 80%;
background: #f3f3f3;
border-right: 1px solid #b4b4b4;
display: flex;
align-items: stretch;
}
.sidebar ::-webkit-scrollbar {
width: 10px;
}
.sidebar ::-webkit-scrollbar-track {
background: #c3c3c3;
border-radius: 10px;
margin: .2em;
position: absolute;
right: 10px;
padding: .2em 0;
transform: translateX(-20px);
}
.sidebar ::-webkit-scrollbar-thumb {
border-radius: 4px;
background: #f3f3f3;
border: 1px solid #c3c3c3;
}
.sidebar ::-webkit-scrollbar-thumb:hover {
background: #f8f8f8;
}
.sidebar .places {
overflow-y: auto;
flex: 1;
margin: 0;
padding: 0;
}
.sidebar .places-section-title {
color: #2E3436;
font-size: .9em;
margin: .8em 0 .4em 1em;
}
.sidebar .places-item {
list-style: none;
font-size: .8rem;
}
.sidebar .places-item a {
display: block;
padding-left: 2em;
line-height: 30px;
text-align: left;
margin-right: 2px;
color: #6d6e6b;
}
.sidebar .places-item a .fa:before {
width: 1em;
display: inline-block;
}
.sidebar .places-item a:hover {
background: #4A90D9;
}
.sidebar .places-item a:hover, .sidebar .places-item a:hover span {
color: #fff;
}
.sidebar .places-item a span {
margin-left: .5em;
color: #2E3436;
font-family: Helvetica, Arial, sans-serif;
}
.sidebar .places-item > .fa {
font-size: .8rem;
color: #888;
text-align: center;
margin-right: .8rem;
}
.sidebar .resizer {
width: 8px;
}
.sidebar .resizer:hover {
cursor: col-resize;
}
.file-view {
flex: 1;
background: #fff;
}
</style></head><body>
<h1 class="main-title">Gnome Files 3.12</h1>
<div class="window">
<header class="top-bar">
<div class="btn-group">
<button class="btn btn-prev">
<div class="fa fa-chevron-left"></div>
</button>
<button class="btn btn-next" disabled="disabled">
<div class="fa fa-chevron-right"></div>
</button>
</div>
<div class="btn-group">
<button class="btn">
<div class="fa fa-home"></div><span>Home</span>
</button>
<button class="btn"> <span>Projects</span></button>
<button class="btn active"><span>Gnome</span></button>
</div>
<div class="separator"></div>
<button class="btn">
<div class="fa fa-search"></div>
</button>
<div class="btn-group">
<button class="btn">
<div class="fa fa-bars"></div>
</button>
<button class="btn">
<div class="fa fa-th"></div>
</button>
<button class="btn">
<div class="fa fa-chevron-down"></div>
</button>
</div>
<button class="btn">
<div class="fa fa-cog"></div>
</button>
<button class="btn btn-close">
<div class="fa fa-times"></div>
</button>
</header>
<div class="content">
<div class="sidebar">
<ul class="places">
<h4 class="places-section-title">Places</h4>
<li class="places-item"><a href="#">
<div class="fa fa-clock-o"></div><span>Recents</span></a></li>
<li class="places-item"><a href="#">
<div class="fa fa-home"><span>Home</span></div></a></li>
<li class="places-item"><a href="#">
<div class="fa fa-download"><span>Downloads</span></div></a></li>
<li class="places-item"><a href="#">
<div class="fa fa-file"><span>Documents</span></div></a></li>
<li class="places-item"><a href="#">
<div class="fa fa-camera"><span>Images</span></div></a></li>
<li class="places-item"><a href="#">
<div class="fa fa-music"><span>Music</span></div></a></li>
<li class="places-item"><a href="#">
<div class="fa fa-video-camera"><span>Videos</span></div></a></li>
<li class="places-item"><a href="#">
<div class="fa fa-trash-o"><span>Trash</span></div></a></li>
<h4 class="places-section-title">Devices</h4>
<li class="places-item"><a href="#">
<div class="fa fa-hdd-o"></div><span>HDD</span></a><a href="#">
<div class="fa fa-flash"></div><span>usb 16GB</span></a></li>
<h4 class="places-section-title">Network</h4>
<li class="places-item"><a href="#">
<div class="fa fa-sitemap"></div><span>Connect to server</span></a></li>
</ul>
<div class="resizer"></div>
</div>
<div class="file-view"></div>
</div>
</div>
</body></html>
