كيفيه انشاء صفحة الوان فلات

مرحبا بكم اصدقائي،عدت لكم بعد غياب بسيط ومعي اضافه انا متاكد انها سوف تعجبكم هي عباره عن صفحة يمكنك اضافتها لمدونتك تعرض بها الالوان الفلاتيه الهادئه والتي يمكنك استخدامها للتصميم.
هذه الصفحة موجوده حتى في مدونة القيسي ويب يمكنك مشاهده معاينه حيه لها عن طريق الزر بالاسفل

شرح طريقة التركيب
1. الدخول إلى مدونه > إنشاء صفحه جديدة ثابتة > ثم قم بإضافة الكود البرمجي التالي في علامة التبويب HTML.

<li style="background: #5C97BF;">كود اللون #5C97BF

</li>

<li style="background: #4B77BE;">كود اللون #4B77BE

</li>

<li style="background: #1F3A93;">كود اللون #1F3A93

</li>

<li style="background: #2574A9;">كود اللون #2574A9

</li>

<li style="background: #67809F;">كود اللون #67809F

</li>

<li style="background: #34495E;">كود اللون #34495E

</li>

<li style="background: #3A539B;">كود اللون #3A539B

</li>

<li style="background: #1E8BC3;">كود اللون #1E8BC3

</li>

<li style="background: #6BB9F0;">كود اللون #6BB9F0

</li>

<li style="background: #22313F;">كود اللون #22313F

</li>

<li style="background: #336E7B;">كود اللون #336E7B

</li>

<li style="background: #19B5FE;">كود اللون #19B5FE

</li>

<li style="background: #89C4F4;">كود اللون #89C4F4

</li>

<li style="background: #2C3E50;">كود اللون #2C3E50

</li>

<li style="background: #3498DB;">كود اللون #3498DB

</li>

<li style="background: #22A7F0;">كود اللون #22A7F0

</li>

<li style="background: #94E0EE;">كود اللون #94E0EE

</li>

<li style="background: #52B3D9;">كود اللون #52B3D9

</li>

<li style="background: #59ABE3;">كود اللون #59ABE3

</li>

<li style="background: #26A65B;">كود اللون #26A65B

</li>

<li style="background: #1E824C;">كود اللون #1E824C

</li>

<li style="background: #00B16A;">كود اللون #00B16A

</li>

<li style="background: #2ABB9B;">كود اللون #2ABB9B

</li>

<li style="background: #4DAF7C;">كود اللون #4DAF7C

</li>

<li style="background: #03A678;">كود اللون #03A678

</li>

<li style="background: #26C281;">كود اللون #26C281

</li>

<li style="background: #019875;">كود اللون #019875

</li>

<li style="background: #3FC380;">كود اللون #3FC380

</li>

<li style="background: #16A085;">كود اللون #16A085

</li>

<li style="background: #2ECC71;">كود اللون #2ECC71

</li>

<li style="background: #C5EFF7;">كود اللون #C5EFF7

</li>

<li style="background: #C8F7C5;">كود اللون #C8F7C5

</li>

<li style="background: #049372;">كود اللون #049372

</li>

<li style="background: #36D7B7;">كود اللون #36D7B7

</li>

<li style="background: #66CC99;">كود اللون #66CC99

</li>

<li style="background: #1BA39C;">كود اللون #1BA39C

</li>

<li style="background: #1BBC9B;">كود اللون #1BBC9B

</li>

<li style="background: #65C6BB;">كود اللون #65C6BB

</li>

<li style="background: #BFBFBF;">كود اللون #BFBFBF

</li>

<li style="background: #ABB7B7;">كود اللون #ABB7B7

</li>

<li style="background: #DADFE1;">كود اللون #DADFE1

</li>

<li style="background: #95A5A6;">كود اللون #95A5A6

</li>

<li style="background: #C5DCE2;">كود اللون #C5DCE2

</li>

<li style="background: #BDC3C7;">كود اللون #BDC3C7

</li>

<li style="background: #EEEEEE;">كود اللون #EEEEEE

</li>

<li style="background: #D2D7D3;">كود اللون #D2D7D3

</li>

<li style="background: #F0E2C5;">كود اللون #F0E2C5

</li>

<li style="background: #EB9532;">كود اللون #EB9532

</li>

<li style="background: #E67E22;">كود اللون #E67E22

</li>

<li style="background: #F27935;">كود اللون #F27935

</li>

<li style="background: #F9BF3B;">كود اللون #F9BF3B

</li>

<li style="background: #F7CA18;">كود اللون #F7CA18

</li>

<li style="background: #F9690E;">كود اللون #F9690E

</li>

<li style="background: #F39C12;">كود اللون #F39C12

</li>

<li style="background: #D35400;">كود اللون #D35400

</li>

<li style="background: #F4D03F;">كود اللون #F4D03F

</li>

<li style="background: #F5AB35;">كود اللون #F5AB35

</li>

<li style="background: #EB974E;">كود اللون #EB974E

</li>

<li style="background: #F2784B;">كود اللون #F2784B

</li>

<li style="background: #F4B350;">كود اللون #F4B350

</li>

<li style="background: #E87E04;">كود اللون #E87E04

</li>

<li style="background: #E74C3C;">كود اللون #E74C3C

</li>

<li style="background: #CF000F;">كود اللون #CF000F

</li>

<li style="background: #C0392B;">كود اللون #C0392B

</li>

<li style="background: #D64541;">كود اللون #D64541

</li>

<li style="background: #EF4836;">كود اللون #EF4836

</li>

<li style="background: #96281B;">كود اللون #96281B

</li>

<li style="background: #D91E18;">كود اللون #D91E18

</li>

<li style="background: #E26A6A;">كود اللون #E26A6A

</li>

<li style="background: #FF0000;">كود اللون #FF0000

</li>

<li style="background: #F22613;">كود اللون #F22613

</li>

<li style="background: #E08283;">كود اللون #E08283

</li>

<li style="background: #9B59B6;">كود اللون #9B59B6

</li>

<li style="background: #8E44AD;">كود اللون #8E44AD

</li>

<li style="background: #BE90D4;">كود اللون #BE90D4

</li>

<li style="background: #BF55EC;">كود اللون #BF55EC

</li>

<li style="background: #9A12B3;">كود اللون #9A12B3

</li>

<li style="background: #913D88;">كود اللون #913D88

</li>

<li style="background: #722D6A;">كود اللون #722D6A

</li>

<li style="background: #740A4E;">كود اللون #740A4E

</li>

</ul>

</div>

/* Flat UI Color by qaisi1web.blogspot.com */

#flatuqaisi1web ul.flatui{position:relative;display:table;width:100%;text-align:center;color:#fff;font-size:12px;margin:auto;position:relative;padding:0}

#flatuqaisi1web 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)}

#flatuqaisi1web ul.flatui li:hover{z-index:4}

#flatuqaisi1web 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)}

#flatuqaisi1web ul.flatui li:hover:before{opacity:1;visibility:visible;transform:scale(1.0)}

#flatuqaisi1web ul.flatui li:after{content:'نسخ كود اللون';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}

#flatuqaisi1web ul.flatui li:hover:after{opacity:1;visibility:visible;transform:translate(0,-10px);z-index:1;transition-delay:.8s}

#flatuqaisi1web ul.flatui li .kodebesar{width:100%;padding:0;display:block;float:none;margin:auto;clear:both;z-index:3}

#flatuqaisi1web ul.flatui li .kodekecil{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){#flatuqaisi1web ul.flatui li{width:33.3%;line-height:normal}}

@media screen and (max-width:640px){#flatuqaisi1web ul.flatui li{width:50%}}

@media screen and (max-width:480px){#flatuqaisi1web ul.flatui li{width:100%}}

</style>