"paint"
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/atflihoucine/pen/WjvwbB?limit=all&page=32&q=paint" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.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">body{ margin:0; padding:0; height:100vh; background-color:#2d5c8d } *{ box-sizing: border-box } .main-color{ background-color:#FFF; color:#423939; } .cont{ position:absolute; top:0; left:0; width:100%; height:100%; } .box{ border: 10px solid #423939; } .box{ width:200px; height:200px; padding:25px; border-radius: 50%; position:relative; margin:60px auto; } .box img{ width:100%; height:100%; border-radius: inherit; } .box div{ position:absolute; z-index: 1; width:40px; height:40px; text-align:center; line-height: 40px; box-shadow: 0 0 10px rgba(0,0,0,.5) } .box div:before, .box div:after{ content:''; position:absolute; background-color:inherit; } .top:before, .bottom:after{ top:-20%; height:140%; left:0; width:100%; z-index: -1 } .right:before, .left:after{ left:-20%; width:140%; top:0; height:100%; z-index: -1 } .box .face-box{ left:50%; top:0; transform:translate(-50% ,-50%) } .box .tw-box{ right:0; top:50%; transform:translate(50% ,-50%) } .box .gh-box{ bottom:0; left:50%; transform:translate(-50% ,50%) } .box .gl-box{ top:50%; left:0; transform:translate(-50% ,-50%) } .paint{ position:absolute; top:50%; z-index: 999; transform:translatey(-50%); width:40px; box-shadow: 0 10px 10px rgba(0,0,0,.4); border-radius:0 5px 5px 0; overflow: hidden; } .paint span{ display:block; height:40px; background-color:#FFF; line-height:40px; text-align:center; } .details{ border-top:1px solid rgba(0,0,0,.1); padding:10px; text-align:center } .details *{ margin:0; padding:10px; } .details :nth-child(2){ border-top:1px solid rgba(0,0,0,.1); border-bottom:1px solid rgba(0,0,0,.1); } .details .browser{ display:none; } /* ===== theme one ======*/ [data-th="one"] .main-color{ background-color:#003989; color:#fff; } [data-th="one"] .box{ border: 10px solid #fff; } /* ===== end theme one ======*/ /* two */ [data-th="two"] .main-color{ background-color:#f5e88f; color:#151a70; } [data-th="two"] .box{ border: 10px solid #151a70; } /* end theme two*/ /* ===== theme three ======*/ [data-th="three"] .main-color{ background-color:#dc32a4; color:#333333; } [data-th="three"] .box{ border: 10px solid#333333; } /* ===== end theme three ======*/ /* ===== theme four ======*/ [data-th="four"] .main-color{ background-color:#e2cdd6; color:#1c362b; } [data-th="four"] .box{ border: 10px solid #1c362b; } /* ===== end theme four ======*/ /* ===== theme five ======*/ [data-th="five"] .main-color{ background-color:#b17b31; color:#3c3c3c; } [data-th="five"] .box{ border: 10px solid #3c3c3c; } /* ===== end theme five ======*/ /* ===== theme six ======*/ [data-th="six"] .main-color{ background-color:#fff; color:#8c9c47; } [data-th="six"] .box{ border: 10px solid #8c9c47; } /* ===== end theme six ======*/ /* ===== theme seven ======*/ [data-th="seven"] .main-color{ background-color:#2c0757; color:#d6fda8; } [data-th="seven"] .box{ border: 10px solid #d6fda8; } /* ===== end theme seven ======*/ /* ===== theme eight ======*/ [data-th="eight"] .main-color{ background-color:#fff; color:#74c1bb; } [data-th="eight"] .box{ border: 10px solid #74c1bb; } /* ===== end theme eight ======*/ /* ===== theme nine ======*/ [data-th="nine"] .main-color{ background-color:#f39b2f; color:#282b32; } [data-th="nine"] .box{ border: 10px solid #282b32; } /* ===== end theme nine ======*/ /* ===== theme ten ======*/ [data-th="ten"] .main-color{ background-color:#ecc60d; color:#0d1b1c; } [data-th="ten"] .box{ border: 10px solid #0d1b1c; } /* ===== end theme ten ======*/</style></head><body> <body> <div class="paint"> <span class="default"> <i class="fa fa-rotate-left"></i> </span> <span data-theme="one" data-bg="#003989"></span> <span data-theme="two" data-bg="#f5e88f"></span> <span data-theme="three" data-bg="#dc32a4"></span> <span data-theme="four" data-bg="#e2cdd6"></span> <span data-theme="five" data-bg="#b17b31"></span> <span data-theme="six" data-bg="#FFF"></span> <span data-theme="seven" data-bg="#2c0757"></span> <span data-theme="eight" data-bg="#74c1bb"></span> <span data-theme="nine" data-bg="#f39b2f"></span> <span data-theme="ten" data-bg="#ecc60d"></span> </div> <div class="cont main-color"> <div class="box"> <img src="https://cdn-s3.si.com/s3fs-public/2014/06/09/brion_oconnor_400x400.png" alt=""> <div class="face-box top main-color"><i class="fa fa-facebook"></i></div> <div class="tw-box right main-color"><i class="fa fa-twitter"></i></div> <div class="gh-box bottom main-color"><i class="fa fa-github"></i></div> <div class="gl-box left main-color"><i class="fa fa-google"></i></div> </div> <div class="main-color details"> <h1>قم بتحديث الصفحة عند تغيير الالوان</h1> <h3>by houcine atfli</h3> <h3 class="browser">متصفحك لا يدعم localStorage</h3> </div> </div> </body> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script >$(document).ready(function(){ "use strict"; $(".paint span").each(function(){ var color = $(this).attr("data-bg"); $(this).css({backgroundColor: color }); }); $(".paint span[data-theme]").click(function(){ if (typeof(Storage) !== "undefined") { localStorage.myTheme = $(this).attr("data-theme"); $("body").attr('data-th' , localStorage.myTheme); } else { $(".browser").show(1000); } }); $("body").attr('data-th' , localStorage.myTheme); $("span.default").click(function(){ "use strict"; localStorage.clear(); $("body").removeAttr('data-th'); }); }); //# sourceURL=pen.js </script> </body></html>

Related: See More

Vue Material Kit

Questions / Comments: