"css"
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/melnik909/pen/mRMxEd" /> <style class="cp-pen-styles">/*! * Progress with CSS variables * Copyright Stas "melnik909" Melnikov (https://stas-melnikov.ru) * Licensed under the MIT license */ /* declaration variables for demo */ :root { --displayError: none; --displayDemo: block; --bgColor: #F8BBD0; --color: #C2185B; } /* setting a basic font size */ @media screen and (min-width: 981px) { html { font-size: 62.5%; } } @media screen and (min-width: 641px) and (max-width: 980px) { html { font-size: 9px; } } @media screen and (max-width: 640px) { html { font-size: 8px; } } body { font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Open Sans", "Helvetica Neue", "Segoe UI", sans-serif; font-size: 1.6rem; margin: 0; -webkit-overflow-scrolling: touch; background-color: #f0f0f0; } a { color: #C2185B; } .title { margin: 0 0 8rem; font-size: 3rem; font-weight: 300; } .error { font-size: 3rem; font-weight: 700; display: block; display: var(--displayError); } .error__hint { display: block; font-size: 1.8rem; margin-top: .5rem; } /* styles for layout */ .content { min-height: 100vh; padding-bottom: 8rem; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; } .main-container { min-width: 100px; max-width: 800px; padding-top: 6rem; margin-left: auto; margin-right: auto; text-align: center; padding-left: 1rem; padding-right: 1rem; } .footer { text-align: center; width: 100%; padding-top: 2rem; padding-bottom: 2rem; position: absolute; left: 0; bottom: 0; } @media screen and (max-width: 640px) { .footer { font-size: 1.4rem; } } .footer__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .melnik909 { margin-left: 2rem; } .demo { display: none; display: var(--displayDemo); } /* control-panel */ .control-panel { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 8rem; } @media screen and (max-width: 640px) { .control-panel { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .control-panel__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: 2%; } @media screen and (max-width: 640px) { .control-panel__item { margin-top: 5rem; } .control-panel__item:first-child { margin-top: 0; } } .control-panel__hint { font-weight: 700; margin-right: .5rem; } /* select select-color */ .select-color { width: 3rem; height: 3rem; display: inline-block; margin-left: .5rem; margin-right: .5rem; cursor: pointer; overflow: hidden; border-radius: 50%; text-indent: -999px; } .select-color_pink { background-color: #C2185B; } .select-color_purpure { background-color: #512DA8; } .select-color_red { background-color: #D32F2F; } .select-color_orange { background-color: #F57C00; } .select-color_green { background-color: #388E3C; } #pink:checked ~ .demo { --bgColor: #F8BBD0; --color: #C2185B; } #purpure:checked ~ .demo { --bgColor: #D1C4E9; --color: #512DA8; } #red:checked ~ .demo { --bgColor: #FFCDD2; --color: #D32F2F; } #orange:checked ~ .demo { --bgColor: #FFE0B2; --color: #F57C00; } #green:checked ~ .demo { --bgColor: #C8E6C9; --color: #388E3C; } /* switch */ .switch { position: absolute; top: 0; left: -9999px; } /* range */ .range { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .range:focus { outline: none; } .range::-webkit-slider-runnable-track { height: 3px; cursor: pointer; background-color: var(--bgColor); border: none; } .range::-webkit-slider-thumb { width: 2rem; height: 2rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: var(--color); border-radius: 50%; -webkit-appearance: none; appearance: none; } .range::-moz-range-track { height: 3px; cursor: pointer; background-color: var(--bgColor); border: none; } .range::-moz-range-thumb { width: 2rem; height: 2rem; transform: translateY(-5%); background-color: var(--color); border-radius: 50%; -moz-appearance: none; appearance: none; border: none; } /* * progress styles */ /* core styles */ :root { --cssuiProgressHeight: 2rem; } .cssui-progress__bar { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; display: block; height: var(--cssuiProgressHeight); background-color: var(--cssuiProgressBgColor); color: var(--cssuiProgressColor); } .cssui-progress__bar[value]::-webkit-progress-bar { background-color: var(--cssuiProgressBgColor); } .cssui-progress__bar[value]::-webkit-progress-value { background-color: var(--cssuiProgressColor); -webkit-transition: width .4s ease-out; transition: width .4s ease-out; } .cssui-progress__bar[value]::-moz-progress-bar { background-color: var(--cssuiProgressColor); } /* styles for demo */ .cssui-progress__bar { width: 85%; margin-right: auto; margin-left: auto; --cssuiProgressBgColor: var(--bgColor); --cssuiProgressColor: var(--color); --cssuiProgressHeight: 5px; } .cssui-progress__value { font-weight: 700; font-size: 2rem; margin-top: 1rem; display: inline-block; } </style></head><body> <div class="content"> <div class="main-container"> <input type="radio" id="pink" name="colors" class="switch" checked> <input type="radio" id="purpure" name="colors" class="switch"> <input type="radio" id="red" name="colors" class="switch"> <input type="radio" id="orange" name="colors" class="switch"> <input type="radio" id="green" name="colors" class="switch"> <div class="error"> <span>Your browser doesn't support a CSS Variables</span> <span class="error__hint">Use other browser. For example: Chrome or Firefox</span> </div> <div class="demo"> <h1 class="title">Progress with CSS variables</h1> <div class="control-panel"> <div class="control-panel__item"> <span class="control-panel__hint">Select color:</span> <label for="pink" class="select-color select-color_pink">Pink</label> <label for="purpure" class="select-color select-color_purpure">Purpure</label> <label for="red" class="select-color select-color_red">Red</label> <label for="orange" class="select-color select-color_orange">Orange</label> <label for="green" class="select-color select-color_green">Green</label> </div> <div class="control-panel__item"> <span class="control-panel__hint">Select value:</span> <input class="range js-value-progress" type="range" min="0" max="100" step="5" value="55"> </div> </div> <div class="cssui-progress js-progress"> <progress class="cssui-progress__bar js-progress__bar" max="100" value="55"></progress> <span class="js-progress__value cssui-progress__value">55%</span> </div> </div> </div> <footer class="footer"> <div class="main-container footer__container"> <div class="footer__column"> <span>You liked?</span> <a href="https://www.paypal.me/melnik909" class="donate" rel="noopener noreferrer" target="_blank">Buy me a tea?</a> </div> <a href="http://stas-melnikov.ru" class="melnik909" rel="noopener noreferrer" target="_blank">Developed by Stas Melnikov</a> </div> </footer> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://stas-melnikov.ru/codepen/ga.js'></script> <script >// change progress value (function(){ var progress = document.querySelector(".js-progress"), progressBar = progress.querySelector(".js-progress__bar"), progressValue = progress.querySelector(".js-progress__value"); document.querySelector(".js-value-progress").addEventListener("change", function(){ progressBar.value = this.value; progressValue.textContent = this.value + "%"; }); })(); //# sourceURL=pen.js </script> </body></html>

Related: See More

Awesome Landing Page

Questions / Comments: