"ubuntu"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<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 lang='en' 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/HossamAli/pen/KvmeJO?limit=all&page=30&q=terminal" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> <style class="cp-pen-styles">@font-face { font-family: Ubuntu-L; src: url(../fonts/ubuntu-font-family-0.83/Ubuntu-L.ttf); } body { font-family: 'Ubuntu-L', Arial; margin: 0; padding: 0; overflow: hidden; } .nav { background-color: #514F48; color: #f2f2f2; font-size: 20px; box-shadow: 0 0 10px #000; padding: 3px; overflow: hidden; } .nav .left { float: left; } .nav .right { float: right; } .nav .right i { padding-right: 2px; padding-left: 2px; font-size: 15px; } .nav .right .language { font-style: normal; background-color: #f2f2f2; color: #555; font-size: 15px; padding: 1px; border-radius: 2px; font-weight: bold; } .nav .right .fa-battery-full { transform: rotate(270deg); } .nav .right .time { margin-top: 250px; } .luncher { background-color: #701057; width: 4%; float: left; color: #FFF; text-align: center; font-size: 30px; } .luncher button { background: none; border: none; } .luncher button:focus, .luncher button:active, .luncher button:hover { border: none; outline: none; } .luncher img { width: 100%; padding-top: 10px; } .luncher i { display: block; padding-top: 10px; padding-bottom: 10px; transition: all 0.3s ease-in-out; } .luncher i.fa-firefox { color: #e66000; } .luncher i.fa-folder { color: #fbb034; } .luncher i.fa-cog { color: #00bce4; } .desktop-overlay { position: fixed; top: 5.3%; left: 4%; right: 0; bottom: 0; width: 100%; height: 100%; background-color: rgba(112, 16, 87, 0.6); flaot: right; } .overlay-content { color: #fff; overflow: hidden; } .overlay-content .textbox { margin: 10px; } .overlay-content .textbox .search-icon { border: 1px solid #EEE; border-right: none; padding: 7px; } .overlay-content .textbox .search{ background: transparent; border: 1px solid #EEE; border-radius: 3px; margin-top: 0; padding: 5px; width: 90%; color: #EEE; margin-left: -4px; font-size: 14px; font-weight: bolder; } .overlay-content .textbox .search:focus { outline: none; } .overlay-content .textbox .search::placeholder { color: #EEE; font-style: italic; font-weight: normal; } .overlay-content .boxes { margin: 10px; margin-top: 20px; } .overlay-content .boxes .heading { font-family: Arial; overflow: hidden; font-size: 16px; cursor: pointer; width: 92%; padding-top: 10px; padding-left: 5px; } .overlay-content .boxes .heading:hover { background-color: rgba(255, 255, 255, 0.3); } .overlay-content .boxes .box { text-align: center; float: left; width: 12%; } .overlay-content .boxes .box i { font-size: 35px; padding: 30px; color: #fbb034; } .overlay-content .boxes .box p { text-align: center; } .overlay-content .boxes .box i.fa-facebook-official { color: #3b5998; } .overlay-content .boxes .box i.fa-firefox { color: #e66000; } .overlay-content .boxes .box i.fa-chrome { color: #377EF0; } .overlay-content .boxes .box i.fa-cog { color: #00bce4; } .overlay-content .boxes .box i.fa-calculator { color: #050f2c; } .overlay-content .boxes .box i:hover { background-color: rgba(255, 255, 255, 0.3); } .overlay-content .files { margin-bottom: 20px; } .desktop { background-image: url('http://ubuntuhandbook.org/wp-content/uploads/2016/02/xerus_wallpaper.jpg'); background-size: cover; background-attachment: fixed; background-position: center; } .opacity { opacity: 0.5; } .opacity:hover { opacity: 1; } @media(max-width: 768px) { .nav .left , .nav .right { width: 100%; float: none; text-align: center; } .nav .right { margin-top: 10px; } .luncher { width: 15%; } .luncher span i { padding: 10px; } .overlay-content .textbox .search { width: 70%; } .overlay-content .boxes .box p { text-align: center; } .desktop-overlay { top: 19%; left: 15%; } }</style></head><body> <div class="nav"> <div class="left"> Ubuntu Desktop </div> <div class="right"> <i class="fa fa-wifi fa-fw"></i> <i class="language">En</i> <i class="fa fa-battery-full fa-fw"></i> <i class="fa fa-volume-up fa-fw"></i> <span class="time"></span> <span class="am-pm"></span> <i class="fa fa-power-off fa-fw"></i> </div> </div> <div class="luncher"> <button href="#" data-toggle="tooltip" title="Serach your computer"> <img src="https://design.ubuntu.com/wp-content/uploads/logo-ubuntu_cof-orange-hex.svg"> </button> <span data-toggle="tooltip" title="Files"> <i class="fa fa-folder"></i> </span> <span data-toggle="tooltip" title="Firefox Web Browser"> <i class="fa fa-firefox"></i> </span> <span data-toggle="tooltip" title="System Setting"> <i class="fa fa-cog"></i> </span> <span data-toggle="tooltip" title="Terminal"> <i class="fa fa-terminal"></i> </span> </div> <div class="desktop-overlay"> <div class="overlay-content"> <div class="textbox"> <span class="search-icon"><i class="fa fa-search"></i></span> <input type="text" class="search" placeholder="Search your computer"> </div> <div class="boxes"> <div class="files"> <div class="heading"> <p>Files & Folders</p> </div> <div class="box"> <i class="fa fa-file"></i> <p>File</p> </div> <div class="box"> <i class="fa fa-file"></i> <p>File</p> </div> <div class="box"> <i class="fa fa-folder"></i> <p>Folder</p> </div> <div class="box"> <i class="fa fa-folder"></i> <p>Folder</p> </div> <div class="box"> <i class="fa fa-folder"></i> <p>Folder</p> </div> <div class="box"> <i class="fa fa-file"></i> <p>File</p> </div> <div class="box"> <i class="fa fa-folder"></i> <p>Folder</p> </div> <div class="box"> <i class="fa fa-file"></i> <p>File</p> </div> </div> <div class="apps"> <div class="heading"> <p>Applications</p> </div> <div class="box"> <i class="fa fa-facebook-official"></i> <p>Facebook</p> </div> <div class="box"> <i class="fa fa-firefox"></i> <p>Firefox</p> </div> <div class="box"> <i class="fa fa-chrome"></i> <p>Chromium</p> </div> <div class="box"> <i class="fa fa-cog"></i> <p>System Setting</p> </div> <div class="box"> <i class="fa fa-calculator"></i> <p>Calculator</p> </div> </div> </div> </div> </div> <div class="desktop"></div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script >$(function() { setInterval(function() { var time = new Date(), hours = time.getHours(), minutes = time.getMinutes(); if (minutes < 10 ) { minutes = "0" + minutes; } if (hours >= 12) { hours = hours - 12; $('.nav .right .am-pm').text('PM'); } else { $('.nav .right .am-pm').text('AM'); } $('.nav .right .time').text(hours + ':' + minutes); },1000); var height = $(window).height() - $('.nav').height(); $('.luncher').height(height); $('.desktop').height(height); $('.desktop-overlay').hide(); $('.luncher button').click(function() { $('.desktop-overlay').fadeToggle('200'); $('.luncher i').toggleClass('opacity'); }); }); //# sourceURL=pen.js </script> </body></html>

Related: See More

Light Bootstrap Dashboard Angular

Questions / Comments: