/ / How To Make Flat UI Colors Responsive on Static pages

How To Make Flat UI Colors Responsive on Static pages

Maret 12, 2016
How To Make Flat UI Colors Responsive on Static pages. will share tutorial about How To Make Flat UI Colors Responsive on Static pages for your blog. Flatuicolorpicker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs. If you one of many blogger that pleased to design a Theme, HTML colors are very important for your blog design. I would give fresh design of HTML Colors for you. I have two style that is shared. If you interested one of them you can apply it easily. To make sure which one is best for you, I have added link demo below. Both of them are supported by responsive design. So, don't be afraid for missing best view on mobile also. It's really wonderful to be added on your blog or website.




How to add the Flat UI Colors on your page? You like my Demo above? If yes, it is very simple, you just go to Static pages then copy the script below and paste on your HTML (Not compose).

<p><center class="button_me" id="button_me">
<a class="button button_turquoise" href="https://www.blogger.com/null" onclick="colorToTurquoise()">Turquoise</a><a class="button button_green_sea" href="https://www.blogger.com/null" onclick="colorToGreenSea()">GreenSea</a><a class="button button_emerald" href="https://www.blogger.com/null" onclick="colorToEmerald()">Emerald</a><a class="button button_nephritis" href="https://www.blogger.com/null" onclick="colorToNephritis()">Nephritis</a><a class="button button_peter_river" href="https://www.blogger.com/null" onclick="colorToPeterRiver()">PRiver</a><a class="button button_belize_hole" href="https://www.blogger.com/null" onclick="colorToBelizeHole()">BelizeH</a><a class="button button_amethyst" href="https://www.blogger.com/null" onclick="colorToAmethyst()">Amethyst</a><a class="button button_wisteria" href="https://www.blogger.com/null" onclick="colorToWisteria()">Wisteria</a><a class="button button_wet_asphalt" href="https://www.blogger.com/null" onclick="colorToWetAsphalt()">WetA</a><a class="button button_midnight_blue" href="https://www.blogger.com/null" onclick="colorToMidnightBlue()">Midnight</a><a class="button button_sunflower" href="https://www.blogger.com/null" onclick="colorToSunflower()">Sunflower</a><a class="button button_orange" href="https://www.blogger.com/null" onclick="colorToOrange()">Orange</a><a class="button button_carrot" href="https://www.blogger.com/null" onclick="colorToCarrot()">Carrot</a><a class="button button_white_smoke" href="https://www.blogger.com/null" onclick="colorToWhiteSmoke()">WhiteSmoke</a><a class="button button_pumpkin" href="https://www.blogger.com/null" onclick="colorToPumpkin()">Pumpkin</a><a class="button button_alizarin" href="https://www.blogger.com/null" onclick="colorToAlizarin()">Alizarin</a><a class="button button_pomegranate" href="https://www.blogger.com/null" onclick="colorToPomegranate()">Pgranate</a><a class="button button_clouds" href="https://www.blogger.com/null" onclick="colorToClouds()">Clouds</a><a class="button button_silver" href="https://www.blogger.com/null" onclick="colorToSilver()">Silver</a><a class="button button_concrete" href="https://www.blogger.com/null" onclick="colorToConcrete()">Concrete</a><a class="button button_asbestos" href="https://www.blogger.com/null" onclick="colorToAsbestos()">Asbestos</a><a class="button button_chestnut_rose" href="https://www.blogger.com/null" onclick="colorToChestnutRose()">ChestnutR</a><a class="button button_alice_blue" href="https://www.blogger.com/null" onclick="colorToAliceBlue()">AliceBlue</a><a class="button button_spray" href="https://www.blogger.com/null" onclick="colorToSpray()">Spray</a><a class="button button_gossip" href="https://www.blogger.com/null" onclick="colorToGossip()">Gossip</a><a class="button button_cream_can" href="https://www.blogger.com/null" onclick="colorToCreamCan()">CreamCan</a><a class="button button_silver_tree" href="https://www.blogger.com/null" onclick="colorToSilverTree()">SilverTree</a><a class="button button_cape_honey" href="https://www.blogger.com/null" onclick="colorToCapeHoney()">CapeHoney</a><a class="button button_medium_turquoise" href="https://www.blogger.com/null" onclick="colorToMediumTurquoise()">MTurquoise</a><a class="button button_lynch" href="https://www.blogger.com/null" onclick="colorToLynch()">Lynch</a><a class="button button_crusta" href="https://www.blogger.com/null" onclick="colorToCrusta()">Crusta</a><a class="button button_jungle_green" href="https://www.blogger.com/null" onclick="colorToJungleGreen()">JungleG</a><a class="button button_hoki" href="https://www.blogger.com/null" onclick="colorToHoki()">Hoki</a><a class="button button_wax_flower" href="https://www.blogger.com/null" onclick="colorToWaxFlower()">WaxFlower</a><a class="button button_observatory" href="https://www.blogger.com/null" onclick="colorToObservatory()">Observat</a><a class="button button_ecstacy" href="https://www.blogger.com/null" onclick="colorToEcstasy()">Ecstacy</a></center>
<center>
<div class="wrap-header">
FLAT UI COLOR</div>
<div class="HTML-Colors" id="HTML-Colors">
<div class="colorName" id="colorName">
Please click the color button above,</div>
<div class="colorText" id="colorText">
Then copy the color code that you selected ..</div>
<br />
<section></section></div>
</center>
<style scoped="" type="text/css">
#sidebar-wrapper{display:none}#main-wrapper{float:none;width:100%;margin-right:0}.wrap-header{text-align:center;font-size:20px;background:#444;color:#fafafa;padding:10px;font-weight:700}.button_me{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:center;align-content:center;margin-bottom:20px}#button_me a:hover{color:#fff}.button{margin:0!important;text-transform:none;cursor:pointer;font-size:12px;line-height:3.4em;flex:100 100 8%;-webkit-flex:100 100 8%;-webkit-box-sizing:initial;-moz-box-sizing:initial;box-sizing:initial}.button_turquoise{border:5px solid #1abc9c;background:#1abc9c;color:#fff;padding:1px}.button_green_sea{border:5px solid #16a085;background:#16a085;color:#fff;padding:1px}.button_emerald{border:5px solid #2ecc71;background:#2ecc71;color:#fff;padding:1px}.button_nephritis{border:5px solid #27ae60;background:#27ae60;color:#fff;padding:1px}.button_peter_river{border:5px solid #3498db;background:#3498db;color:#fff;padding:1px}.button_belize_hole{border:5px solid #2980b9;background:#2980b9;color:#fff;padding:1px}.button_amethyst{border:5px solid #9b59b6;background:#9b59b6;color:#fff;padding:1px}.button_wisteria{border:5px solid #8e44ad;background:#8e44ad;color:#fff;padding:1px}.button_wet_asphalt{border:5px solid #34495e;background:#34495e;color:#fff;padding:1px}.button_midnight_blue{border:5px solid #2c3e50;background:#2c3e50;color:#fff;padding:1px}.button_sunflower{border:5px solid #f1c40f;background:#f1c40f;color:#fff;padding:1px}.button_orange{border:5px solid #f39c12;background:#f39c12;color:#fff;padding:1px}.button_carrot{border:5px solid #e67e22;background:#e67e22;color:#fff;padding:1px}.button_pumpkin{border:5px solid #d35400;background:#d35400;color:#fff;padding:1px}.button_alizarin{border:5px solid #e74c3c;background:#e74c3c;color:#fff;padding:1px}.button_pomegranate{border:5px solid #c0392b;background:#c0392b;color:#fff;padding:1px}.button_clouds{border:5px solid #ecf0f1;background:#ecf0f1;color:#808080;padding:1px}.button_silver{border:5px solid #bdc3c7;background:#bdc3c7;color:#fff;padding:1px}.button_concrete{border:5px solid #95a5a6;background:#95a5a6;color:#fff;padding:1px}.button_asbestos{border:5px solid #7f8c8d;background:#7f8c8d;color:#fff;padding:1px}.button_chestnut_rose{border:5px solid #D24D57;background:#D24D57;color:#fff;padding:1px}.button_alice_blue{border:5px solid #E4F1FE;background:#E4F1FE;color:#999;padding:1px}.button_spray{border:5px solid #81CFE0;background:#81CFE0;color:#fff;padding:1px}.button_gossip{border:5px solid #87D37C;background:#87D37C;color:#fff;padding:1px}.button_cream_can{border:5px solid #F5D76E;background:#F5D76E;color:#fff;padding:1px}.button_silver_tree{border:5px solid #68C3A3;background:#68C3A3;color:#fff;padding:1px}.button_cape_honey{border:5px solid #FDE3A7;background:#FDE3A7;color:#999;padding:1px}.button_medium_turquoise{border:5px solid #4ECDC4;background:#4ECDC4;color:#fff;padding:1px}.button_white_smoke{border:5px solid #ECECEC;background:#ECECEC;color:#999;padding:1px}.button_lynch{border:5px solid #6C7A89;background:#6C7A89;color:#fff;padding:1px}.button_crusta{border:5px solid #F2784B;background:#F2784B;color:#fff;padding:1px}.button_jungle_green{border:5px solid #26C281;background:#26C281;color:#fff;padding:1px}.button_hoki{border:5px solid #67809F;background:#67809F;color:#fff;padding:1px}.button_wax_flower{border:5px solid #F1A9A0;background:#F1A9A0;color:#fff;padding:1px}.button_observatory{border:5px solid #049372;background:#049372;color:#fff;padding:1px}.button_ecstacy{border:5px solid #F9690E;background:#F9690E;color:#fff;padding:1px}.HTML-Colors{line-height:normal;border:1px solid #38424b;padding-top:30px;font-size:28px;color:#999;width:100%;background:#ececec}section{background:#transparent;margin:30px;width:80%;color:#000;border-top-right-radius:5px;border-top-left-radius:5px;padding-left:20px;padding-right:20px;padding-top:1px;padding-bottom:1px;text-align:left}@media (max-width:800px){.button_me{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:center;align-content:center}.button{font-size:4px}.HTML-Colors{width:100%}}@media (max-width:320px){.button_me{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:center;align-content:center}.button{font-size:3px}.HTML-Colors{width:100%}}@media (max-width:360px){.button_me{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:center;align-content:center}.button{font-size:3px}}
</style><br />
<script type="text/javascript">
function colorToTurquoise(){document.getElementById("HTML-Colors").style.backgroundColor="#1abc9c";var e=document.getElementById("colorName");e.innerHTML="Turquoise",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#1abc9c"}function colorToGreenSea(){document.getElementById("HTML-Colors").style.backgroundColor="#16a085";var e=document.getElementById("colorName");e.innerHTML="Green Sea",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#16a085"}function colorToEmerald(){document.getElementById("HTML-Colors").style.backgroundColor="#2ecc71";var e=document.getElementById("colorName");e.innerHTML="Emerald",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#2ecc71"}function colorToNephritis(){document.getElementById("HTML-Colors").style.backgroundColor="#27ae60";var e=document.getElementById("colorName");e.innerHTML="Nephritis",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#27ae60"}function colorToPeterRiver(){document.getElementById("HTML-Colors").style.backgroundColor="#3498db";var e=document.getElementById("colorName");e.innerHTML="Peter River",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#3498db"}function colorToBelizeHole(){document.getElementById("HTML-Colors").style.backgroundColor="#2980b9";var e=document.getElementById("colorName");e.innerHTML="Belize Hole",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#2980b9"}function colorToAmethyst(){document.getElementById("HTML-Colors").style.backgroundColor="#9b59b6";var e=document.getElementById("colorName");e.innerHTML="Amethyst",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#9b59b6"}function colorToWisteria(){document.getElementById("HTML-Colors").style.backgroundColor="#8e44ad";var e=document.getElementById("colorName");e.innerHTML="Wisteria",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#8e44ad"}function colorToWetAsphalt(){document.getElementById("HTML-Colors").style.backgroundColor="#34495e";var e=document.getElementById("colorName");e.innerHTML="Wet Asphalt",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#34495e"}function colorToMidnightBlue(){document.getElementById("HTML-Colors").style.backgroundColor="#2c3e50";var e=document.getElementById("colorName");e.innerHTML="Midnight Blue",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#2c3e50"}function colorToSunflower(){document.getElementById("HTML-Colors").style.backgroundColor="#f1c40f";var e=document.getElementById("colorName");e.innerHTML="Sunflower",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#f1c40f"}function colorToOrange(){document.getElementById("HTML-Colors").style.backgroundColor="#f39c12";var e=document.getElementById("colorName");e.innerHTML="Orange",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#f39c12"}function colorToCarrot(){document.getElementById("HTML-Colors").style.backgroundColor="#e67e22";var e=document.getElementById("colorName");e.innerHTML="Carrot",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#e67e22"}function colorToPumpkin(){document.getElementById("HTML-Colors").style.backgroundColor="#d35400";var e=document.getElementById("colorName");e.innerHTML="Pumpkin",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#d35400"}function colorToAlizarin(){document.getElementById("HTML-Colors").style.backgroundColor="#e74c3c";var e=document.getElementById("colorName");e.innerHTML="Alizarin",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#e74c3c"}function colorToPomegranate(){document.getElementById("HTML-Colors").style.backgroundColor="#c0392b";var e=document.getElementById("colorName");e.innerHTML="Pomegranate",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#c0392b"}function colorToClouds(){document.getElementById("HTML-Colors").style.backgroundColor="#ecf0f1";var e=document.getElementById("colorName");e.innerHTML="Clouds",e.style.color="gray";var o=document.getElementById("colorText");o.style.color="gray",o.innerHTML="#ecf0f1"}function colorToSilver(){document.getElementById("HTML-Colors").style.backgroundColor="#bdc3c7";var e=document.getElementById("colorName");e.innerHTML="Silver",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#bdc3c7"}function colorToConcrete(){document.getElementById("HTML-Colors").style.backgroundColor="#95a5a6";var e=document.getElementById("colorName");e.innerHTML="Concrete",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#95a5a6"}function colorToAsbestos(){document.getElementById("HTML-Colors").style.backgroundColor="#7f8c8d";var e=document.getElementById("colorName");e.innerHTML="Asbestos",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#7f8c8d"}function colorToChestnutRose(){document.getElementById("HTML-Colors").style.backgroundColor="#D24D57";var e=document.getElementById("colorName");e.innerHTML="Chestnut Rose",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#D24D57"}function colorToAliceBlue(){document.getElementById("HTML-Colors").style.backgroundColor="#E4F1FE";var e=document.getElementById("colorName");e.innerHTML="Alice Blue",e.style.color="gray";var o=document.getElementById("colorText");o.style.color="gray",o.innerHTML="#E4F1FE"}function colorToSpray(){document.getElementById("HTML-Colors").style.backgroundColor="#81CFE0";var e=document.getElementById("colorName");e.innerHTML="Spray",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#81CFE0"}function colorToGossip(){document.getElementById("HTML-Colors").style.backgroundColor="#87D37C";var e=document.getElementById("colorName");e.innerHTML="Gossip",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#87D37C"}function colorToCreamCan(){document.getElementById("HTML-Colors").style.backgroundColor="#F5D76E";var e=document.getElementById("colorName");e.innerHTML="CreamCan",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#F5D76E"}function colorToSilverTree(){document.getElementById("HTML-Colors").style.backgroundColor="#68C3A3";var e=document.getElementById("colorName");e.innerHTML="SilverTree",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#68C3A3"}function colorToCapeHoney(){document.getElementById("HTML-Colors").style.backgroundColor="#FDE3A7";var e=document.getElementById("colorName");e.innerHTML="CapeHoney",e.style.color="gray";var o=document.getElementById("colorText");o.style.color="gray",o.innerHTML="#FDE3A7"}function colorToMediumTurquoise(){document.getElementById("HTML-Colors").style.backgroundColor="#4ECDC4";var e=document.getElementById("colorName");e.innerHTML="Medium Turquoise",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#4ECDC4"}function colorToWhiteSmoke(){document.getElementById("HTML-Colors").style.backgroundColor="#ECECEC";var e=document.getElementById("colorName");e.innerHTML="White Smoke",e.style.color="gray";var o=document.getElementById("colorText");o.style.color="gray",o.innerHTML="#ECECEC"}function colorToLynch(){document.getElementById("HTML-Colors").style.backgroundColor="#6C7A89";var e=document.getElementById("colorName");e.innerHTML="Lynch",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#6C7A89"}function colorToCrusta(){document.getElementById("HTML-Colors").style.backgroundColor="#F2784B";var e=document.getElementById("colorName");e.innerHTML="Crusta",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#F2784B"}function colorToJungleGreen(){document.getElementById("HTML-Colors").style.backgroundColor="#26C281";var e=document.getElementById("colorName");e.innerHTML="JungleGreen",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#26C281"}function colorToHoki(){document.getElementById("HTML-Colors").style.backgroundColor="#67809F";var e=document.getElementById("colorName");e.innerHTML="Hoki",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#67809F"}function colorToWaxFlower(){document.getElementById("HTML-Colors").style.backgroundColor="#F1A9A0";var e=document.getElementById("colorName");e.innerHTML="WaxFlower",e.style.color="gray";var o=document.getElementById("colorText");o.style.color="gray",o.innerHTML="#F1A9A0"}function colorToObservatory(){document.getElementById("HTML-Colors").style.backgroundColor="#049372";var e=document.getElementById("colorName");e.innerHTML="Observatory",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#049372"}function colorToEcstasy(){document.getElementById("HTML-Colors").style.backgroundColor="#F9690E";var e=document.getElementById("colorName");e.innerHTML="Ecstasy",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#F9690E"}
</script><br />
<div style="clear: both;">
</div>

The last step is click publish. Now, Flat UI Colors have been added on your Static pages. You don't need to search the colors code on the other blogs.




How to add the Flat UI Colors on your page? You like my Demo above? If yes! you just go to Static pages then copy the script below and paste on your HTML (Not compose). 

<div id="flatblogokay">
    <ul class="flatui">
      <li style="background: #5C97BF;"><span class="Large"><span class="Small">Color Code</span> #5C97BF</span>
      </li>
      <li style="background: #4B77BE;"><span class="Large"><span class="Small">Color Code</span> #4B77BE</span>
      </li>
      <li style="background: #1F3A93;"><span class="Large"><span class="Small">Color Code</span> #1F3A93</span>
      </li>
      <li style="background: #2574A9;"><span class="Large"><span class="Small">Color Code</span> #2574A9</span>
      </li>
      <li style="background: #67809F;"><span class="Large"><span class="Small">Color Code</span> #67809F</span>
      </li>
      <li style="background: #34495E;"><span class="Large"><span class="Small">Color Code</span> #34495E</span>
      </li>
      <li style="background: #3A539B;"><span class="Large"><span class="Small">Color Code</span> #3A539B</span>
      </li>
      <li style="background: #1E8BC3;"><span class="Large"><span class="Small">Color Code</span> #1E8BC3</span>
      </li>
      <li style="background: #6BB9F0;"><span class="Large"><span class="Small">Color Code</span> #6BB9F0</span>
      </li>
      <li style="background: #22313F;"><span class="Large"><span class="Small">Color Code</span> #22313F</span>
      </li>
      <li style="background: #336E7B;"><span class="Large"><span class="Small">Color Code</span> #336E7B</span>
      </li>
      <li style="background: #19B5FE;"><span class="Large"><span class="Small">Color Code</span> #19B5FE</span>
      </li>
      <li style="background: #89C4F4;"><span class="Large"><span class="Small">Color Code</span> #89C4F4</span>
      </li>
      <li style="background: #2C3E50;"><span class="Large"><span class="Small">Color Code</span> #2C3E50</span>
      </li>
      <li style="background: #3498DB;"><span class="Large"><span class="Small">Color Code</span> #3498DB</span>
      </li>
      <li style="background: #22A7F0;"><span class="Large"><span class="Small">Color Code</span> #22A7F0</span>
      </li>
      <li style="background: #94E0EE;"><span class="Large"><span class="Small">Color Code</span> #94E0EE</span>
      </li>
      <li style="background: #52B3D9;"><span class="Large"><span class="Small">Color Code</span> #52B3D9</span>
      </li>
      <li style="background: #59ABE3;"><span class="Large"><span class="Small">Color Code</span> #59ABE3</span>
      </li>
      <li style="background: #26A65B;"><span class="Large"><span class="Small">Color Code</span> #26A65B</span>
      </li>
      <li style="background: #1E824C;"><span class="Large"><span class="Small">Color Code</span> #1E824C</span>
      </li>
      <li style="background: #00B16A;"><span class="Large"><span class="Small">Color Code</span> #00B16A</span>
      </li>
      <li style="background: #2ABB9B;"><span class="Large"><span class="Small">Color Code</span> #2ABB9B</span>
      </li>
      <li style="background: #4DAF7C;"><span class="Large"><span class="Small">Color Code</span> #4DAF7C</span>
      </li>
      <li style="background: #03A678;"><span class="Large"><span class="Small">Color Code</span> #03A678</span>
      </li>
      <li style="background: #26C281;"><span class="Large"><span class="Small">Color Code</span> #26C281</span>
      </li>
      <li style="background: #019875;"><span class="Large"><span class="Small">Color Code</span> #019875</span>
      </li>
      <li style="background: #3FC380;"><span class="Large"><span class="Small">Color Code</span> #3FC380</span>
      </li>
      <li style="background: #16A085;"><span class="Large"><span class="Small">Color Code</span> #16A085</span>
      </li>
      <li style="background: #2ECC71;"><span class="Large"><span class="Small">Color Code</span> #2ECC71</span>
      </li>
      <li style="background: #C5EFF7;"><span class="Large"><span class="Small">Color Code</span> #C5EFF7</span>
      </li>
      <li style="background: #C8F7C5;"><span class="Large"><span class="Small">Color Code</span> #C8F7C5</span>
      </li>
      <li style="background: #049372;"><span class="Large"><span class="Small">Color Code</span> #049372</span>
      </li>
      <li style="background: #36D7B7;"><span class="Large"><span class="Small">Color Code</span> #36D7B7</span>
      </li>
      <li style="background: #66CC99;"><span class="Large"><span class="Small">Color Code</span> #66CC99</span>
      </li>
      <li style="background: #1BA39C;"><span class="Large"><span class="Small">Color Code</span> #1BA39C</span>
      </li>
      <li style="background: #1BBC9B;"><span class="Large"><span class="Small">Color Code</span> #1BBC9B</span>
      </li>
      <li style="background: #65C6BB;"><span class="Large"><span class="Small">Color Code</span> #65C6BB</span>
      </li>
      <li style="background: #BFBFBF;"><span class="Large"><span class="Small">Color Code</span> #BFBFBF</span>
      </li>
      <li style="background: #ABB7B7;"><span class="Large"><span class="Small">Color Code</span> #ABB7B7</span>
      </li>
      <li style="background: #DADFE1;"><span class="Large"><span class="Small">Color Code</span> #DADFE1</span>
      </li>
      <li style="background: #95A5A6;"><span class="Large"><span class="Small">Color Code</span> #95A5A6</span>
      </li>
      <li style="background: #C5DCE2;"><span class="Large"><span class="Small">Color Code</span> #C5DCE2</span>
      </li>
      <li style="background: #BDC3C7;"><span class="Large"><span class="Small">Color Code</span> #BDC3C7</span>
      </li>
      <li style="background: #EEEEEE;"><span class="Large"><span class="Small">Color Code</span> #EEEEEE</span>
      </li>
      <li style="background: #D2D7D3;"><span class="Large"><span class="Small">Color Code</span> #D2D7D3</span>
      </li>
      <li style="background: #F0E2C5;"><span class="Large"><span class="Small">Color Code</span> #F0E2C5</span>
      </li>
      <li style="background: #EB9532;"><span class="Large"><span class="Small">Color Code</span> #EB9532</span>
      </li>
      <li style="background: #E67E22;"><span class="Large"><span class="Small">Color Code</span> #E67E22</span>
      </li>
      <li style="background: #F27935;"><span class="Large"><span class="Small">Color Code</span> #F27935</span>
      </li>
      <li style="background: #F9BF3B;"><span class="Large"><span class="Small">Color Code</span> #F9BF3B</span>
      </li>
      <li style="background: #F7CA18;"><span class="Large"><span class="Small">Color Code</span> #F7CA18</span>
      </li>
      <li style="background: #F9690E;"><span class="Large"><span class="Small">Color Code</span> #F9690E</span>
      </li>
      <li style="background: #F39C12;"><span class="Large"><span class="Small">Color Code</span> #F39C12</span>
      </li>
      <li style="background: #D35400;"><span class="Large"><span class="Small">Color Code</span> #D35400</span>
      </li>
      <li style="background: #F4D03F;"><span class="Large"><span class="Small">Color Code</span> #F4D03F</span>
      </li>
      <li style="background: #F5AB35;"><span class="Large"><span class="Small">Color Code</span> #F5AB35</span>
      </li>
      <li style="background: #EB974E;"><span class="Large"><span class="Small">Color Code</span> #EB974E</span>
      </li>
      <li style="background: #F2784B;"><span class="Large"><span class="Small">Color Code</span> #F2784B</span>
      </li>
      <li style="background: #F4B350;"><span class="Large"><span class="Small">Color Code</span> #F4B350</span>
      </li>
      <li style="background: #E87E04;"><span class="Large"><span class="Small">Color Code</span> #E87E04</span>
      </li>
      <li style="background: #E74C3C;"><span class="Large"><span class="Small">Color Code</span> #E74C3C</span>
      </li>
      <li style="background: #CF000F;"><span class="Large"><span class="Small">Color Code</span> #CF000F</span>
      </li>
      <li style="background: #C0392B;"><span class="Large"><span class="Small">Color Code</span> #C0392B</span>
      </li>
      <li style="background: #D64541;"><span class="Large"><span class="Small">Color Code</span> #D64541</span>
      </li>
      <li style="background: #EF4836;"><span class="Large"><span class="Small">Color Code</span> #EF4836</span>
      </li>
      <li style="background: #96281B;"><span class="Large"><span class="Small">Color Code</span> #96281B</span>
      </li>
      <li style="background: #D91E18;"><span class="Large"><span class="Small">Color Code</span> #D91E18</span>
      </li>
      <li style="background: #E26A6A;"><span class="Large"><span class="Small">Color Code</span> #E26A6A</span>
      </li>
      <li style="background: #FF0000;"><span class="Large"><span class="Small">Color Code</span> #FF0000</span>
      </li>
      <li style="background: #F22613;"><span class="Large"><span class="Small">Color Code</span> #F22613</span>
      </li>
      <li style="background: #E08283;"><span class="Large"><span class="Small">Color Code</span> #E08283</span>
      </li>
      <li style="background: #9B59B6;"><span class="Large"><span class="Small">Color Code</span> #9B59B6</span>
      </li>
      <li style="background: #8E44AD;"><span class="Large"><span class="Small">Color Code</span> #8E44AD</span>
      </li>
      <li style="background: #BE90D4;"><span class="Large"><span class="Small">Color Code</span> #BE90D4</span>
      </li>
      <li style="background: #BF55EC;"><span class="Large"><span class="Small">Color Code</span> #BF55EC</span>
      </li>
      <li style="background: #9A12B3;"><span class="Large"><span class="Small">Color Code</span> #9A12B3</span>
      </li>
      <li style="background: #913D88;"><span class="Large"><span class="Small">Color Code</span> #913D88</span>
      </li>
      <li style="background: #722D6A;"><span class="Large"><span class="Small">Color Code</span> #722D6A</span>
      </li>
      <li style="background: #740A4E;"><span class="Large"><span class="Small">Color Code</span> #740A4E</span>
      </li>
    </ul>
</div>
<style scoped="" type="text/css">
/* Flat UI Color by Blogokay.com */
#flatblogokay ul.flatui{position:relative;display:table;width:100%;text-align:center;color:#fff;font-size:12px;margin:auto;position:relative;padding:0}
#flatblogokay ul.flatui li{position:relative;display:flex;float:left;width:25%;min-height:160px;padding:4%;list-style:none;background:#444;text-align:center;font-family:inherit;color:rgba(255,255,255,);font-size:1.1rem;margin:auto;font-weight:700;backface-visibility:hidden;transition:all .3s cubic-bezier(1,0.015,0.295,1.225)}
#flatblogokay ul.flatui li:hover{z-index:4}
#flatblogokay ul.flatui li:before{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:;z-index:1;opacity:0;visibility:hidden;transform:scale(0.4)}
#flatblogokay ul.flatui li:hover:before{opacity:1;visibility:visible;transform:scale(1.0)}
#flatblogokay ul.flatui li:after{content:'Copy The Code';display:block;position:absolute;padding:10px 0;font-weight:400;font-size:.8rem;left:0;right:0;bottom:0;opacity:0;color:rgba(255,255,255,.5);font-weight:700;visibility:hidden;transform:translate(0,30px);transition:all .3s cubic-bezier(1,0.015,0.295,1.225);transition-delay:.1s}
#flatblogokay ul.flatui li:hover:after{opacity:1;visibility:visible;transform:translate(0,-10px);z-index:1;transition-delay:.8s}
#flatblogokay ul.flatui li .Large{width:100%;padding:0;display:block;float:none;margin:auto;clear:both;z-index:3}
#flatblogokay ul.flatui li .Small{width:100%;padding:0;display:block;float:none;margin:0 auto 10px auto;font-weight:400;font-size:.8rem;clear:both;z-index:3}
@media screen and (max-width:800px){#flatblogokay ul.flatui li{width:33.3%;line-height:normal}}
@media screen and (max-width:640px){#flatblogokay ul.flatui li{width:50%}}
@media screen and (max-width:480px){#flatblogokay ul.flatui li{width:100%}}
</style>

The last step is click publish. Now, Flat UI Colors have been added on your Static pages. If you intersted with my post, don't forget to share this one.
Advertisement

Coment:

Tidak ada komentar