"flat ui color"
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 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/reimersjan/pen/khEsA?limit=all&page=2&q=color" /> <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> <style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Carrois+Gothic+SC); * { box-sizing: border-box } html, body { width: 100%; height: 100%; } div { float: left; display: block; color: #fff; width: 20%; height: 25%; position: relative; transition: opacity 0.5s ease; } div:hover { opacity: 0.85; } p { font-family: 'Carrois Gothic SC'; font-size: 1em; position: absolute; bottom: 0; padding-left: 0.5em; margin-bottom: 0.3em; text-transform: uppercase; } .turquoise { background: #1abc9c; } .emerland { background: #2ecc71; } .peterriver { background: #3498db; } .amethyst { background: #9b59b6; } .wetasphalt { background: #34495e; } .greensea { background: #16a085; } .nephritis { background: #27ae60; } .belizehole { background: #2980b9; } .wisteria { background: #8e44ad; } .midnightblue { background: #2c3e50; } .sunflower { background: #f1c40f; } .carrot { background: #e67e22; } .alizarin { background: #e74c3c; } .clouds { background: #ecf0f1; color: #999; } .concrete { background: #95a5a6; } .orange { background: #f39c12; } .pumpkin { background: #d35400; } .pomegranate { background: #c0392b; } .silver { background: #bdc3c7; } .asbestos { background: #7f8c8d; }</style></head><body> <div class="turquoise"><p>Turquoise</p></div> <div class="emerland"><p>Emerland</p></div> <div class="peterriver"><p>Peter River</p></div> <div class="amethyst"><p>Amethyst</p></div> <div class="wetasphalt"><p>Wet Asphalt</p></div> <div class="greensea"><p>Green Sea</p></div> <div class="nephritis"><p>Nephritis</p></div> <div class="belizehole"><p>BelizeHole</p></div> <div class="wisteria"><p>Wisteria</p></div> <div class="midnightblue"><p>Midnight Blue</p></div> <div class="sunflower"><p>Sun Flower</p></div> <div class="carrot"><p>Carrot</p></div> <div class="alizarin"><p>Alizarin</p></div> <div class="clouds"><p>Clouds</p></div> <div class="concrete"><p>Concrete</p></div> <div class="orange"><p>Orange</p></div> <div class="pumpkin"><p>Pumpkin</p></div> <div class="pomegranate"><p>Pomegranate</p></div> <div class="silver"><p>Silver</p></div> <div class="asbestos"><p>Asbestos</p></div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script >// inspired by flatuicolors.com // they've built that in flash, dunno why // // update: okay, so they use flash only to // copy to clipboard, see comments for discussion //# sourceURL=pen.js </script> </body></html>

Related: See More

Rubik Presentation Page
Outlined Flat Buttons
Flat Responsive Dashboard Design
Flat User Profile / Interface UI

Questions / Comments: