كود أقسام الموقع حديث متجاوب مع الموبايل وبأكثر من شكل

كود أقسام الموقع حديث متجاوب مع الموبايل وبأكثر من شكل


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


بشكل ممتاز للغاية وتأثيرات رائعة جداً وكبيرة الحجم لمزيد من لفت الإنتباه وبتأثيرات وألوان مميزة للغاية وتتفاعل مع الزائر حتى تشجعه على مزيد من تصفح موقعك وقراءة المزيد من المقالات ويرجع ذلك وكسبب من أسبابه هو التنسيق الجيد والإستغلال المناسب للمساحات بالمدونة والقالب.


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


الإضافة تفاعلية وبمؤثرات رائعة ومميزة ويمكنها نقل شكل ومستوى موقعك لمستوى أخر من التميز والأناقة في الأداء وبأكثر من شكل وطريقة لتتطور بموقعك وبتنسيقه إضافة إلى الإهتمام بالطبع بالمحتوى الخاص بموقعك وهو الأهم.


ولعل البعض قد يتسائل

ما هي أفضل إضافة وكود لأقسام الموقع لقالب بلوجر؟

ما هو أفضل كود أقسام الموقع حديث بمؤثرات متميزة؟

أين أجد أفضل كود أقسام مواقع لبلوجر حديث ومتفاعل مع الزائر؟

وكل هذا وأكثر سيتم الإجابة عنه في كامل المقال

ولنبدأ بمعاينة الأكواد على الطبيعة وبعدها وأسفلها مباشرة كود الإضافة وبالأسفل تماماً سيكون هناك شرح التعديل على الكود بالشكل والألوان المناسبة لموقعك وكذلك الروابط وأسماء الأقسام حتى تصل لأفضل إضافة مناسبة جداً لموقعك ومخصصة له ومتجاوبة مع الموبايل كذلك وتلك نقطة لا يجب أن نتجاهلها إطلاقاً لأهميتها لكثرة وجود مستخدمين الموبايل حديثاً ونحن نريد دائماً الوصول لأفضل تجربة مستخدم ممكنة للموقع بكل تأكيد.



معاينة أقسام الموقع 1



كود أقسام الموقع 1
      <div class="catego6941">
          <div dir="rtl" class="container06831">
              
              
              
            <div class="catbox5371">
              <a href="#">
                <div class="icons9531">
                    <svg xmlns="http://www.w3.org/2000/svg" class="svg675" width="50" height="50" viewBox="0 0 24 24"><path d="M21 13v10h-6v-6h-6v6h-6v-10h-3l12-12 12 12h-3zm-1-5.907v-5.093h-3v2.093l3 3z"/></svg>
                    <h4>الرئيسية</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5371">
              <a href="#">
                <div class="icons9531">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path d="M19 2c0-1.104-.896-2-2-2h-10c-1.104 0-2 .896-2 2v20c0 1.104.896 2 2 2h10c1.104 0 2-.896 2-2v-20zm-8.5 0h3c.276 0 .5.224.5.5s-.224.5-.5.5h-3c-.276 0-.5-.224-.5-.5s.224-.5.5-.5zm1.5 20c-.553 0-1-.448-1-1s.447-1 1-1c.552 0 .999.448.999 1s-.447 1-.999 1zm5-3h-10v-14.024h10v14.024z"/></svg>
                    <h4>الموبايل</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5371">
              <a href="#">
                <div class="icons9531">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path d="M17 12c-3.313 0-6 2.687-6 6s2.687 6 6 6 6-2.687 6-6-2.687-6-6-6zm.5 8.474v.526h-.5v-.499c-.518-.009-1.053-.132-1.5-.363l.228-.822c.478.186 1.114.383 1.612.27.574-.13.692-.721.057-1.005-.465-.217-1.889-.402-1.889-1.622 0-.681.52-1.292 1.492-1.425v-.534h.5v.509c.362.01.768.073 1.221.21l-.181.824c-.384-.135-.808-.257-1.222-.232-.744.043-.81.688-.29.958.856.402 1.972.7 1.972 1.773.001.858-.672 1.315-1.5 1.432zm1.624-10.179c1.132-.223 2.162-.626 2.876-1.197v.652c0 .499-.386.955-1.007 1.328-.581-.337-1.208-.6-1.869-.783zm-2.124-5.795c2.673 0 5-1.007 5-2.25s-2.327-2.25-5-2.25c-2.672 0-5 1.007-5 2.25s2.328 2.25 5 2.25zm.093-2.009c-.299-.09-1.214-.166-1.214-.675 0-.284.334-.537.958-.593v-.223h.321v.211c.234.005.494.03.784.09l-.116.342c-.221-.051-.467-.099-.708-.099l-.072.001c-.482.02-.521.287-.188.399.547.169 1.267.292 1.267.74 0 .357-.434.548-.967.596v.22h-.321v-.208c-.328-.003-.676-.056-.962-.152l.147-.343c.244.063.552.126.828.126l.208-.014c.369-.053.443-.3.035-.418zm-11.093 13.009c1.445 0 2.775-.301 3.705-.768.311-.69.714-1.329 1.198-1.899-.451-1.043-2.539-1.833-4.903-1.833-2.672 0-5 1.007-5 2.25s2.328 2.25 5 2.25zm.093-2.009c-.299-.09-1.214-.166-1.214-.675 0-.284.335-.537.958-.593v-.223h.321v.211c.234.005.494.03.784.09l-.117.342c-.22-.051-.466-.099-.707-.099l-.072.001c-.482.02-.52.287-.188.399.547.169 1.267.292 1.267.74 0 .357-.434.548-.967.596v.22h-.321v-.208c-.329-.003-.676-.056-.962-.152l.147-.343c.244.063.552.126.828.126l.208-.014c.368-.053.443-.3.035-.418zm4.003 8.531c-.919.59-2.44.978-4.096.978-2.672 0-5-1.007-5-2.25v-.652c1.146.918 3.109 1.402 5 1.402 1.236 0 2.499-.211 3.549-.611.153.394.336.773.547 1.133zm-9.096-3.772v-.651c1.146.917 3.109 1.401 5 1.401 1.039 0 2.094-.151 3.028-.435.033.469.107.926.218 1.37-.888.347-2.024.565-3.246.565-2.672 0-5-1.007-5-2.25zm0-2.5v-.652c1.146.918 3.109 1.402 5 1.402 1.127 0 2.275-.176 3.266-.509-.128.493-.21 1.002-.241 1.526-.854.298-1.903.483-3.025.483-2.672 0-5-1.007-5-2.25zm11-11v-.652c1.146.918 3.109 1.402 5 1.402 1.892 0 3.854-.484 5-1.402v.652c0 1.243-2.327 2.25-5 2.25-2.672 0-5-1.007-5-2.25zm0 5v-.652c.713.571 1.744.974 2.876 1.197-.661.183-1.287.446-1.868.783-.622-.373-1.008-.829-1.008-1.328zm0-2.5v-.651c1.146.917 3.109 1.401 5 1.401 1.892 0 3.854-.484 5-1.401v.651c0 1.243-2.327 2.25-5 2.25-2.672 0-5-1.007-5-2.25z"/></svg>
                    <h4>ربح المال من الإنترنت</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5371">
              <a href="#">
                <div class="icons9531">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path d="M6 2l1.171.203c-.355 2.245.791 2.519 2.699 2.874 1.468.273 3.13.622 3.13 3.284v.639h-1.183v-.639c0-1.556-.48-1.809-2.164-2.122-2.583-.48-4.096-1.391-3.653-4.239zm18 14c0 3.312-2.607 6-5.825 6-1.511 0-2.886-.595-3.921-1.565-1.311-1.229-3.278-1.132-4.55.038-1.03.948-2.389 1.527-3.879 1.527-3.217 0-5.825-2.688-5.825-6s2.608-6 5.825-6l12.563.007c3.118.116 5.612 2.755 5.612 5.993zm-15-1h-2v-2h-2v2h-2v2h2v2h2v-2h2v-2zm4 1h-2v1h2v-1zm4-2c0 .552.447 1 1 1s1-.448 1-1-.447-1-1-1-1 .448-1 1zm0 2c0-.552-.447-1-1-1s-1 .448-1 1 .447 1 1 1 1-.448 1-1zm2 2c0-.552-.447-1-1-1s-1 .448-1 1 .447 1 1 1 1-.448 1-1zm2-2c0-.552-.447-1-1-1s-1 .448-1 1 .447 1 1 1 1-.448 1-1z"/></svg>
                    <h4>ألعاب</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5371">
              <a href="#">
                <div class="icons9531">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path d="M7 15h13v1h-13v-1zm4-4v3h5v-3h-5zm-1 0h-3v1h3v-1zm-3 3h3v-1h-3v1zm13-1h-3v1h3v-1zm-6.951-6.573v-.396h-1.215v1.941h1.255v-.396h-.78v-.406h.698v-.393h-.698v-.35h.74zm1.396.261l.238 1.284h.5l.501-1.941h-.482l-.249 1.32-.238-1.32h-.492l-.27 1.345-.24-1.345h-.505l.46 1.941h.506l.271-1.284zm1.901.916c-.149 0-.324-.043-.466-.116l-.024-.013-.098.398.015.008c.102.058.318.119.547.119.581 0 .788-.328.788-.61 0-.272-.161-.458-.507-.586-.254-.096-.338-.145-.338-.247 0-.098.1-.161.254-.161.136 0 .266.03.388.088l.023.011.107-.39-.015-.007c-.145-.065-.311-.098-.495-.098-.442 0-.739.239-.739.593 0 .262.181.458.535.581.227.081.304.144.304.247 0 .117-.102.183-.279.183zm-5.325.368h.485v-1.941h-.438v1.189l-.641-1.189h-.535v1.941h.438v-1.327l.691 1.327zm8.979 1.028h-13v1h13v-1zm0 2h-3v1h3v-1zm-17-9v17.199c0 .771-1 .771-1 0v-15.199h-2v15.98c0 1.115.905 2.02 2.02 2.02h19.958c1.117 0 2.022-.904 2.022-2.02v-17.98h-21zm19 16h-17v-14h17v14z"/></svg>
                    <h4>أخبار</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5371">
              <a href="#">
                <div class="icons9531">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path d="M19.899 19.899c.168.145.072.381-.132.618-.156.183-.305.283-.434.283l-.156-.06c-.157-.136-.089-.383.123-.625.144-.166.302-.276.44-.276l.159.06zm-1.421-5.899h-4.478v4.48l5.518 5.52 4.482-4.48-5.522-5.52zm-.447 3.364c.21-.245.479-.379.745-.379.188 0 .374.067.538.208.403.346.376.835.033 1.234-.234.272-.502.39-.752.39-.198 0-.385-.074-.534-.202-.354-.307-.407-.813-.03-1.251zm-2.031-.614c-.413 0-.75-.335-.75-.75s.338-.75.75-.75.75.335.75.75-.337.75-.75.75zm1.25 2.866l3.417-1.262.295.252-3.42 1.259-.292-.249zm2.944 1.225c-.233.272-.5.39-.75.39-.197 0-.384-.074-.533-.202-.353-.302-.405-.809-.032-1.25.21-.245.479-.379.745-.379.188 0 .374.066.539.208.402.345.377.834.031 1.233zm-1.864-2.516c-.158-.136-.09-.383.119-.627.144-.166.304-.275.442-.275l.157.059c.168.145.075.384-.128.621-.156.182-.307.283-.436.283l-.154-.061zm-6.33-10.325c1.066 0 2-.936 2-2.002v-1.098l-1.047-4.9h-1.906l-1.047 4.902v1.098c0 1.067.934 2 2 2zm3-2c0 1.067.934 2 2 2s1.998-.833 1.998-1.9v-1.098l-2.994-5.002h-1.943l.939 4.902v1.098zm5 0c0 1.067.934 2 2 2s2-.865 2-1.932v-1.097l-4.873-4.971h-2.014l2.887 4.902v1.098zm-8.312 13h-8.688v-7h18v1.693l2 1.999v-5.692h-22v14h15.69l-5.002-5zm-7.688-12.932v-1.097l2.887-4.971h-2.014l-4.873 4.971v1.098c0 1.066.934 1.931 2 1.931s2-.865 2-1.932zm1 0c0 1.067.934 1.932 2 1.932s2-.865 2-1.932v-1.097l.939-4.971h-1.943l-2.996 4.971v1.097z"/></svg>
                    <h4>تخفيضات</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5371">
              <a href="#">
                <div class="icons9531">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path d="M0 12v-8.646l10-1.355v10.001h-10zm11 0h13v-12l-13 1.807v10.193zm-1 1h-10v7.646l10 1.355v-9.001zm1 0v9.194l13 1.806v-11h-13z"/></svg>
                    <h4>ويندوز</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5371">
              <a href="#">
                <div class="icons9531">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path d="M24 10.935v2.131l-8 3.947v-2.23l5.64-2.783-5.64-2.79v-2.223l8 3.948zm-16 3.848l-5.64-2.783 5.64-2.79v-2.223l-8 3.948v2.131l8 3.947v-2.23zm7.047-10.783h-2.078l-4.011 16h2.073l4.016-16z"/></svg>
                    <h4>برمجة</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5371">
              <a href="#">
                <div class="icons9531">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path d="M4.5.257l3.771 3.771c.409 1.889-2.33 4.66-4.242 4.242l-3.771-3.77c-.172.584-.258 1.188-.258 1.792 0 1.602.607 3.202 1.83 4.426 1.351 1.351 3.164 1.958 4.931 1.821.933-.072 1.852.269 2.514.931l9.662 9.662c.578.578 1.337.868 2.097.868 1.661 0 3.001-1.364 2.966-3.03-.016-.737-.306-1.47-.868-2.033l-9.662-9.663c-.662-.661-1.002-1.581-.931-2.514.137-1.767-.471-3.58-1.82-4.93-1.225-1.224-2.825-1.83-4.428-1.83-.603 0-1.207.086-1.791.257zm17.5 20.743c0 .553-.447 1-1 1-.553 0-1-.448-1-1s.447-1 1-1 1 .447 1 1z"/></svg>
                    <h4>صيانة</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5371">
              <a href="#">
                <div class="icons9531">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path d="M23 5v13.883l-1 .117v-16c-3.895.119-7.505.762-10.002 2.316-2.496-1.554-6.102-2.197-9.998-2.316v16l-1-.117v-13.883h-1v15h9.057c1.479 0 1.641 1 2.941 1 1.304 0 1.461-1 2.942-1h9.06v-15h-1zm-12 13.645c-1.946-.772-4.137-1.269-7-1.484v-12.051c2.352.197 4.996.675 7 1.922v11.613zm9-1.484c-2.863.215-5.054.712-7 1.484v-11.613c2.004-1.247 4.648-1.725 7-1.922v12.051z"/></svg>
                    <h4>كتب ومراجع</h4>
                </div>
              </a>
            </div>
              
              
                          <div class="catbox5371">
              <a href="#">
                <div class="icons9531">
                    <svg width="50" height="50" viewBox="0 -24.48 122.88 122.88" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  style="enable-background:new 0 0 122.88 73.91" xml:space="preserve">
                    <style type="text/css">
                    <![CDATA[
	                .st0{fill-rule:evenodd;clip-rule:evenodd;}
                    ]]>
                    </style>
                    <g>
                    <path class="st0" d="M97.31,36.95c0,9.92-3.49,18.39-10.48,25.38c-7,7-15.46,10.5-25.38,10.5c-9.88,0-18.34-3.49-25.35-10.5 c-7-6.99-10.52-15.46-10.52-25.38c0-9.89,3.51-18.32,10.52-25.34c7.03-7,15.48-10.52,25.35-10.52c9.92,0,18.38,3.51,25.38,10.52 C93.81,18.63,97.31,27.06,97.31,36.95L97.31,36.95L97.31,36.95L97.31,36.95z M16.37,30.34c3.15-2.15,4.73-4.96,4.46-11.39V2.42 c-0.03-2.31-4.22-2.59-4.43,0l-0.16,13.41c-0.01,2.51-3.78,2.59-3.77,0l0.16-13.87c-0.05-2.48-4.05-2.73-4.1,0 c0,3.85-0.16,10.02-0.16,13.87c0.2,2.43-3.3,2.75-3.21,0L5.32,2.05C5.23,0.18,3.17-0.49,1.77,0.39C0.28,1.34,0.58,3.25,0.52,4.86 L0,20.68c0.08,4.6,1.29,8.34,4.89,9.93c0.55,0.24,1.31,0.43,2.19,0.56L5.84,69.75c-0.07,2.29,1.8,4.16,3.99,4.16h0.5 c2.47,0,4.56-2.11,4.49-4.68l-1.09-38.07C14.88,30.98,15.83,30.71,16.37,30.34L16.37,30.34z M106.74,68.59l-0.06-34.65 c-12.15-7.02-8.28-34.07,3.88-33.92c14.78,0.17,16.53,30.48,3.82,33.81l0.94,34.9C115.5,75.33,106.75,75.94,106.74,68.59 L106.74,68.59z M82.33,36.92c0,5.78-2.03,10.71-6.12,14.8c-4.08,4.07-9.01,6.12-14.79,6.12c-5.74,0-10.67-2.05-14.75-6.12 c-4.08-4.09-6.12-9.02-6.12-14.8c0-5.74,2.04-10.67,6.12-14.74c4.09-4.07,9.01-6.12,14.75-6.12C73.03,16.07,82.33,25.3,82.33,36.92 L82.33,36.92L82.33,36.92z M87.22,36.92c0-7.1-2.5-13.17-7.53-18.2s-11.12-7.53-18.27-7.53c-7.13,0-13.2,2.5-18.2,7.53 c-5.03,5.03-7.56,11.1-7.56,18.2c0,7.12,2.53,13.19,7.56,18.24c5,5.04,11.07,7.57,18.2,7.57c7.14,0,13.23-2.53,18.27-7.57 C84.71,50.1,87.22,44.03,87.22,36.92L87.22,36.92L87.22,36.92L87.22,36.92z"/>
                    </g>
                    </svg>
                    <h4>مطاعم ومأكولات</h4>
                </div>
              </a>
            </div>
              
              
                          <div class="catbox5371">
              <a href="#">
                <div class="icons9531">
                    <svg height="50" width="50" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
	                viewBox="0 0 122.88 122.88" xml:space="preserve">
                    <style type="text/css">
	                .st0{fill-rule:evenodd;clip-rule:evenodd;}
                    </style>
                    <g>
	                <path class="st0" d="M16.63,105.75c0.01-4.03,2.3-7.97,6.03-12.38L1.09,79.73c-1.36-0.59-1.33-1.42-0.54-2.4l4.57-3.9
		            c0.83-0.51,1.71-0.73,2.66-0.47l26.62,4.5l22.18-24.02L4.8,18.41c-1.31-0.77-1.42-1.64-0.07-2.65l7.47-5.96l67.5,18.97L99.64,7.45
		            c6.69-5.79,13.19-8.38,18.18-7.15c2.75,0.68,3.72,1.5,4.57,4.08c1.65,5.06-0.91,11.86-6.96,18.86L94.11,43.18l18.97,67.5
		            l-5.96,7.47c-1.01,1.34-1.88,1.23-2.65-0.07L69.43,66.31L45.41,88.48l4.5,26.62c0.26,0.94,0.05,1.82-0.47,2.66l-3.9,4.57
		            c-0.97,0.79-1.81,0.82-2.4-0.54l-13.64-21.57c-4.43,3.74-8.37,6.03-12.42,6.03C16.71,106.24,16.63,106.11,16.63,105.75
		            L16.63,105.75z"/>
                    </g>
                    </svg>
                    <h4>سفر وسياحة</h4>
                </div>
              </a>
            </div>
              
              
              
          </div>
      </div>
    <style>
        .catego6941{
            height: auto;
            width: auto;
            text-align: center;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            background: linear-gradient(355deg,#f6f4ff,#fff,#e8e4ff);
        }
        .container06831{
            display: flex;
            justify-content: space-around;
            justify-items: center;
            flex-wrap: wrap;
            text-align: center;
            border: 1px solid #eceaea;
            border-radius: 5px;
            margin: 1px;
            padding: 10px;
        }
        .container06831 a{
            text-decoration: none;
        }
        .catbox5371{
            margin-top: 10px;
        }
        .icons9531{
            width: 150px;
            height: 120px;
            border: 1px solid #eceaea;
            border-radius: 5px;
            text-align: center;
	    transition: box-shadow 0.4s ease;
            background: linear-gradient(60deg,#f6f4ff,#fff,#e8e4ff);
            color: darkslateblue;
            fill:darkslateblue;
	    animation: flipInX1 1s linear 1;
        }
        .icons9531 svg{
            padding: 3px;
            margin:3px 1px;

        }
        .icons9531 h4{
            padding: 3px;
            margin:3px 1px;
            font-size: 16px;
        }
        .icons9531:hover{
            box-shadow:3px 3px 10px #eceaea;
            animation: move9751 2s .1s linear infinite , color9741 2s .1s linear infinite;
            background: linear-gradient(60deg,#e8e4ff,#fff,#f6f4ff);
        }
        
        	@keyframes move9751{
        0% {
            transform: translate(1px, 1px) rotate(0deg)
        }
        20% {
            transform: translate(-1px, -2px) rotate(-1deg)
        }
        40% {
            transform: translate(-3px, 0px) rotate(1deg)
        }
        60% {
            transform: translate(0px, 0px) rotate(0deg)
        }
        80% {
            transform: translate(0px, 0px) rotate(0deg)
        }
        90% {
            transform: translate(0px, 0px) rotate(0deg)
        }
        100% {
            transform: translate(0px, 0px) rotate(0deg)
        }
	}
        
        
	 @keyframes color9741 {
	 0% {
	   color: #1d08a0;fill: #1d08a0;
	 }
	 50% {
	   color: #880397;fill: #880397;
	 }
	 100% {
	   color: #1d08a0;fill: #1d08a0;
	 }
	
	}

@-webkit-keyframes flipInX1 { 
    0% { 
        -webkit-transform: perspective(400px) rotateX(90deg); 
        opacity: 0; 
    } 
    40% { 
        -webkit-transform: perspective(400px) rotateX(-10deg); 
    } 
    70% { 
        -webkit-transform: perspective(400px) rotateX(10deg); 
    } 
    100% { 
        -webkit-transform: perspective(400px) rotateX(0deg); 
        opacity: 1; 
    } 
} 
@keyframes flipInX1 { 
    0% { 
        transform: perspective(400px) rotateX(90deg); 
        opacity: 0; 
    } 
    40% { 
        transform: perspective(400px) rotateX(-10deg); 
    } 
    70% { 
        transform: perspective(400px) rotateX(10deg); 
    } 
    100% { 
        transform: perspective(400px) rotateX(0deg); 
        opacity: 1; 
    } 
} 
.flipInX1.go { 
    -webkit-backface-visibility: visible !important; 
    -webkit-animation-name: flipInX1; 
    backface-visibility: visible !important; 
    animation-name: flipInX1; 
}


    </style>



معاينة أقسام الموقع 2



كود أقسام الموقع 2
      <div class="catego6942">
          <div dir="rtl" class="container06832">
              
              
              
            <div class="catbox5372">
              <a href="#">
                <div class="icons9532">
                    <svg xmlns="http://www.w3.org/2000/svg" class="svg675" width="25" height="25" viewBox="0 0 24 24"><path d="M21 13v10h-6v-6h-6v6h-6v-10h-3l12-12 12 12h-3zm-1-5.907v-5.093h-3v2.093l3 3z"/></svg>
                    <h4>الرئيسية</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5372">
              <a href="#">
                <div class="icons9532">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path d="M19 2c0-1.104-.896-2-2-2h-10c-1.104 0-2 .896-2 2v20c0 1.104.896 2 2 2h10c1.104 0 2-.896 2-2v-20zm-8.5 0h3c.276 0 .5.224.5.5s-.224.5-.5.5h-3c-.276 0-.5-.224-.5-.5s.224-.5.5-.5zm1.5 20c-.553 0-1-.448-1-1s.447-1 1-1c.552 0 .999.448.999 1s-.447 1-.999 1zm5-3h-10v-14.024h10v14.024z"/></svg>
                    <h4>الموبايل</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5372">
              <a href="#">
                <div class="icons9532">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path d="M17 12c-3.313 0-6 2.687-6 6s2.687 6 6 6 6-2.687 6-6-2.687-6-6-6zm.5 8.474v.526h-.5v-.499c-.518-.009-1.053-.132-1.5-.363l.228-.822c.478.186 1.114.383 1.612.27.574-.13.692-.721.057-1.005-.465-.217-1.889-.402-1.889-1.622 0-.681.52-1.292 1.492-1.425v-.534h.5v.509c.362.01.768.073 1.221.21l-.181.824c-.384-.135-.808-.257-1.222-.232-.744.043-.81.688-.29.958.856.402 1.972.7 1.972 1.773.001.858-.672 1.315-1.5 1.432zm1.624-10.179c1.132-.223 2.162-.626 2.876-1.197v.652c0 .499-.386.955-1.007 1.328-.581-.337-1.208-.6-1.869-.783zm-2.124-5.795c2.673 0 5-1.007 5-2.25s-2.327-2.25-5-2.25c-2.672 0-5 1.007-5 2.25s2.328 2.25 5 2.25zm.093-2.009c-.299-.09-1.214-.166-1.214-.675 0-.284.334-.537.958-.593v-.223h.321v.211c.234.005.494.03.784.09l-.116.342c-.221-.051-.467-.099-.708-.099l-.072.001c-.482.02-.521.287-.188.399.547.169 1.267.292 1.267.74 0 .357-.434.548-.967.596v.22h-.321v-.208c-.328-.003-.676-.056-.962-.152l.147-.343c.244.063.552.126.828.126l.208-.014c.369-.053.443-.3.035-.418zm-11.093 13.009c1.445 0 2.775-.301 3.705-.768.311-.69.714-1.329 1.198-1.899-.451-1.043-2.539-1.833-4.903-1.833-2.672 0-5 1.007-5 2.25s2.328 2.25 5 2.25zm.093-2.009c-.299-.09-1.214-.166-1.214-.675 0-.284.335-.537.958-.593v-.223h.321v.211c.234.005.494.03.784.09l-.117.342c-.22-.051-.466-.099-.707-.099l-.072.001c-.482.02-.52.287-.188.399.547.169 1.267.292 1.267.74 0 .357-.434.548-.967.596v.22h-.321v-.208c-.329-.003-.676-.056-.962-.152l.147-.343c.244.063.552.126.828.126l.208-.014c.368-.053.443-.3.035-.418zm4.003 8.531c-.919.59-2.44.978-4.096.978-2.672 0-5-1.007-5-2.25v-.652c1.146.918 3.109 1.402 5 1.402 1.236 0 2.499-.211 3.549-.611.153.394.336.773.547 1.133zm-9.096-3.772v-.651c1.146.917 3.109 1.401 5 1.401 1.039 0 2.094-.151 3.028-.435.033.469.107.926.218 1.37-.888.347-2.024.565-3.246.565-2.672 0-5-1.007-5-2.25zm0-2.5v-.652c1.146.918 3.109 1.402 5 1.402 1.127 0 2.275-.176 3.266-.509-.128.493-.21 1.002-.241 1.526-.854.298-1.903.483-3.025.483-2.672 0-5-1.007-5-2.25zm11-11v-.652c1.146.918 3.109 1.402 5 1.402 1.892 0 3.854-.484 5-1.402v.652c0 1.243-2.327 2.25-5 2.25-2.672 0-5-1.007-5-2.25zm0 5v-.652c.713.571 1.744.974 2.876 1.197-.661.183-1.287.446-1.868.783-.622-.373-1.008-.829-1.008-1.328zm0-2.5v-.651c1.146.917 3.109 1.401 5 1.401 1.892 0 3.854-.484 5-1.401v.651c0 1.243-2.327 2.25-5 2.25-2.672 0-5-1.007-5-2.25z"/></svg>
                    <h4>ربح المال من الإنترنت</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5372">
              <a href="#">
                <div class="icons9532">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path d="M6 2l1.171.203c-.355 2.245.791 2.519 2.699 2.874 1.468.273 3.13.622 3.13 3.284v.639h-1.183v-.639c0-1.556-.48-1.809-2.164-2.122-2.583-.48-4.096-1.391-3.653-4.239zm18 14c0 3.312-2.607 6-5.825 6-1.511 0-2.886-.595-3.921-1.565-1.311-1.229-3.278-1.132-4.55.038-1.03.948-2.389 1.527-3.879 1.527-3.217 0-5.825-2.688-5.825-6s2.608-6 5.825-6l12.563.007c3.118.116 5.612 2.755 5.612 5.993zm-15-1h-2v-2h-2v2h-2v2h2v2h2v-2h2v-2zm4 1h-2v1h2v-1zm4-2c0 .552.447 1 1 1s1-.448 1-1-.447-1-1-1-1 .448-1 1zm0 2c0-.552-.447-1-1-1s-1 .448-1 1 .447 1 1 1 1-.448 1-1zm2 2c0-.552-.447-1-1-1s-1 .448-1 1 .447 1 1 1 1-.448 1-1zm2-2c0-.552-.447-1-1-1s-1 .448-1 1 .447 1 1 1 1-.448 1-1z"/></svg>
                    <h4>ألعاب</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5372">
              <a href="#">
                <div class="icons9532">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path d="M7 15h13v1h-13v-1zm4-4v3h5v-3h-5zm-1 0h-3v1h3v-1zm-3 3h3v-1h-3v1zm13-1h-3v1h3v-1zm-6.951-6.573v-.396h-1.215v1.941h1.255v-.396h-.78v-.406h.698v-.393h-.698v-.35h.74zm1.396.261l.238 1.284h.5l.501-1.941h-.482l-.249 1.32-.238-1.32h-.492l-.27 1.345-.24-1.345h-.505l.46 1.941h.506l.271-1.284zm1.901.916c-.149 0-.324-.043-.466-.116l-.024-.013-.098.398.015.008c.102.058.318.119.547.119.581 0 .788-.328.788-.61 0-.272-.161-.458-.507-.586-.254-.096-.338-.145-.338-.247 0-.098.1-.161.254-.161.136 0 .266.03.388.088l.023.011.107-.39-.015-.007c-.145-.065-.311-.098-.495-.098-.442 0-.739.239-.739.593 0 .262.181.458.535.581.227.081.304.144.304.247 0 .117-.102.183-.279.183zm-5.325.368h.485v-1.941h-.438v1.189l-.641-1.189h-.535v1.941h.438v-1.327l.691 1.327zm8.979 1.028h-13v1h13v-1zm0 2h-3v1h3v-1zm-17-9v17.199c0 .771-1 .771-1 0v-15.199h-2v15.98c0 1.115.905 2.02 2.02 2.02h19.958c1.117 0 2.022-.904 2.022-2.02v-17.98h-21zm19 16h-17v-14h17v14z"/></svg>
                    <h4>أخبار</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5372">
              <a href="#">
                <div class="icons9532">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path d="M19.899 19.899c.168.145.072.381-.132.618-.156.183-.305.283-.434.283l-.156-.06c-.157-.136-.089-.383.123-.625.144-.166.302-.276.44-.276l.159.06zm-1.421-5.899h-4.478v4.48l5.518 5.52 4.482-4.48-5.522-5.52zm-.447 3.364c.21-.245.479-.379.745-.379.188 0 .374.067.538.208.403.346.376.835.033 1.234-.234.272-.502.39-.752.39-.198 0-.385-.074-.534-.202-.354-.307-.407-.813-.03-1.251zm-2.031-.614c-.413 0-.75-.335-.75-.75s.338-.75.75-.75.75.335.75.75-.337.75-.75.75zm1.25 2.866l3.417-1.262.295.252-3.42 1.259-.292-.249zm2.944 1.225c-.233.272-.5.39-.75.39-.197 0-.384-.074-.533-.202-.353-.302-.405-.809-.032-1.25.21-.245.479-.379.745-.379.188 0 .374.066.539.208.402.345.377.834.031 1.233zm-1.864-2.516c-.158-.136-.09-.383.119-.627.144-.166.304-.275.442-.275l.157.059c.168.145.075.384-.128.621-.156.182-.307.283-.436.283l-.154-.061zm-6.33-10.325c1.066 0 2-.936 2-2.002v-1.098l-1.047-4.9h-1.906l-1.047 4.902v1.098c0 1.067.934 2 2 2zm3-2c0 1.067.934 2 2 2s1.998-.833 1.998-1.9v-1.098l-2.994-5.002h-1.943l.939 4.902v1.098zm5 0c0 1.067.934 2 2 2s2-.865 2-1.932v-1.097l-4.873-4.971h-2.014l2.887 4.902v1.098zm-8.312 13h-8.688v-7h18v1.693l2 1.999v-5.692h-22v14h15.69l-5.002-5zm-7.688-12.932v-1.097l2.887-4.971h-2.014l-4.873 4.971v1.098c0 1.066.934 1.931 2 1.931s2-.865 2-1.932zm1 0c0 1.067.934 1.932 2 1.932s2-.865 2-1.932v-1.097l.939-4.971h-1.943l-2.996 4.971v1.097z"/></svg>
                    <h4>تخفيضات</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5372">
              <a href="#">
                <div class="icons9532">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path d="M0 12v-8.646l10-1.355v10.001h-10zm11 0h13v-12l-13 1.807v10.193zm-1 1h-10v7.646l10 1.355v-9.001zm1 0v9.194l13 1.806v-11h-13z"/></svg>
                    <h4>ويندوز</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5372">
              <a href="#">
                <div class="icons9532">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path d="M24 10.935v2.131l-8 3.947v-2.23l5.64-2.783-5.64-2.79v-2.223l8 3.948zm-16 3.848l-5.64-2.783 5.64-2.79v-2.223l-8 3.948v2.131l8 3.947v-2.23zm7.047-10.783h-2.078l-4.011 16h2.073l4.016-16z"/></svg>
                    <h4>برمجة</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5372">
              <a href="#">
                <div class="icons9532">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path d="M4.5.257l3.771 3.771c.409 1.889-2.33 4.66-4.242 4.242l-3.771-3.77c-.172.584-.258 1.188-.258 1.792 0 1.602.607 3.202 1.83 4.426 1.351 1.351 3.164 1.958 4.931 1.821.933-.072 1.852.269 2.514.931l9.662 9.662c.578.578 1.337.868 2.097.868 1.661 0 3.001-1.364 2.966-3.03-.016-.737-.306-1.47-.868-2.033l-9.662-9.663c-.662-.661-1.002-1.581-.931-2.514.137-1.767-.471-3.58-1.82-4.93-1.225-1.224-2.825-1.83-4.428-1.83-.603 0-1.207.086-1.791.257zm17.5 20.743c0 .553-.447 1-1 1-.553 0-1-.448-1-1s.447-1 1-1 1 .447 1 1z"/></svg>
                    <h4>صيانة</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5372">
              <a href="#">
                <div class="icons9532">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path d="M23 5v13.883l-1 .117v-16c-3.895.119-7.505.762-10.002 2.316-2.496-1.554-6.102-2.197-9.998-2.316v16l-1-.117v-13.883h-1v15h9.057c1.479 0 1.641 1 2.941 1 1.304 0 1.461-1 2.942-1h9.06v-15h-1zm-12 13.645c-1.946-.772-4.137-1.269-7-1.484v-12.051c2.352.197 4.996.675 7 1.922v11.613zm9-1.484c-2.863.215-5.054.712-7 1.484v-11.613c2.004-1.247 4.648-1.725 7-1.922v12.051z"/></svg>
                    <h4>كتب ومراجع</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5372">
              <a href="#">
                <div class="icons9532">
                    <svg width="25" height="25" viewBox="0 -24.48 122.88 122.88" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  style="enable-background:new 0 0 122.88 73.91" xml:space="preserve">
                    <style type="text/css">
                    <![CDATA[
	                .st0{fill-rule:evenodd;clip-rule:evenodd;}
                    ]]>
                    </style>
                    <g>
                    <path class="st0" d="M97.31,36.95c0,9.92-3.49,18.39-10.48,25.38c-7,7-15.46,10.5-25.38,10.5c-9.88,0-18.34-3.49-25.35-10.5 c-7-6.99-10.52-15.46-10.52-25.38c0-9.89,3.51-18.32,10.52-25.34c7.03-7,15.48-10.52,25.35-10.52c9.92,0,18.38,3.51,25.38,10.52 C93.81,18.63,97.31,27.06,97.31,36.95L97.31,36.95L97.31,36.95L97.31,36.95z M16.37,30.34c3.15-2.15,4.73-4.96,4.46-11.39V2.42 c-0.03-2.31-4.22-2.59-4.43,0l-0.16,13.41c-0.01,2.51-3.78,2.59-3.77,0l0.16-13.87c-0.05-2.48-4.05-2.73-4.1,0 c0,3.85-0.16,10.02-0.16,13.87c0.2,2.43-3.3,2.75-3.21,0L5.32,2.05C5.23,0.18,3.17-0.49,1.77,0.39C0.28,1.34,0.58,3.25,0.52,4.86 L0,20.68c0.08,4.6,1.29,8.34,4.89,9.93c0.55,0.24,1.31,0.43,2.19,0.56L5.84,69.75c-0.07,2.29,1.8,4.16,3.99,4.16h0.5 c2.47,0,4.56-2.11,4.49-4.68l-1.09-38.07C14.88,30.98,15.83,30.71,16.37,30.34L16.37,30.34z M106.74,68.59l-0.06-34.65 c-12.15-7.02-8.28-34.07,3.88-33.92c14.78,0.17,16.53,30.48,3.82,33.81l0.94,34.9C115.5,75.33,106.75,75.94,106.74,68.59 L106.74,68.59z M82.33,36.92c0,5.78-2.03,10.71-6.12,14.8c-4.08,4.07-9.01,6.12-14.79,6.12c-5.74,0-10.67-2.05-14.75-6.12 c-4.08-4.09-6.12-9.02-6.12-14.8c0-5.74,2.04-10.67,6.12-14.74c4.09-4.07,9.01-6.12,14.75-6.12C73.03,16.07,82.33,25.3,82.33,36.92 L82.33,36.92L82.33,36.92z M87.22,36.92c0-7.1-2.5-13.17-7.53-18.2s-11.12-7.53-18.27-7.53c-7.13,0-13.2,2.5-18.2,7.53 c-5.03,5.03-7.56,11.1-7.56,18.2c0,7.12,2.53,13.19,7.56,18.24c5,5.04,11.07,7.57,18.2,7.57c7.14,0,13.23-2.53,18.27-7.57 C84.71,50.1,87.22,44.03,87.22,36.92L87.22,36.92L87.22,36.92L87.22,36.92z"/>
                    </g>
                    </svg>
                    <h4>مطاعم ومأكولات</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5372">
              <a href="#">
                <div class="icons9532">
                    <svg height="25" width="25" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
	                viewBox="0 0 122.88 122.88" xml:space="preserve">
                    <style type="text/css">
	                .st0{fill-rule:evenodd;clip-rule:evenodd;}
                    </style>
                    <g>
	                <path class="st0" d="M16.63,105.75c0.01-4.03,2.3-7.97,6.03-12.38L1.09,79.73c-1.36-0.59-1.33-1.42-0.54-2.4l4.57-3.9
		            c0.83-0.51,1.71-0.73,2.66-0.47l26.62,4.5l22.18-24.02L4.8,18.41c-1.31-0.77-1.42-1.64-0.07-2.65l7.47-5.96l67.5,18.97L99.64,7.45
		            c6.69-5.79,13.19-8.38,18.18-7.15c2.75,0.68,3.72,1.5,4.57,4.08c1.65,5.06-0.91,11.86-6.96,18.86L94.11,43.18l18.97,67.5
		            l-5.96,7.47c-1.01,1.34-1.88,1.23-2.65-0.07L69.43,66.31L45.41,88.48l4.5,26.62c0.26,0.94,0.05,1.82-0.47,2.66l-3.9,4.57
		            c-0.97,0.79-1.81,0.82-2.4-0.54l-13.64-21.57c-4.43,3.74-8.37,6.03-12.42,6.03C16.71,106.24,16.63,106.11,16.63,105.75
		            L16.63,105.75z"/>
                    </g>
                    </svg>
                    <h4>سفر وسياحة</h4>
                </div>
              </a>
            </div>
              
              
              
          </div>
      </div>
    <style>
        .catego6942{
            height: auto;
            width: auto;
            text-align: center;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            background: linear-gradient(355deg,#f6f4ff,#fff,#e8e4ff);
        }
        .container06832{
            display: flex;
            justify-content: space-around;
            justify-items: center;
            flex-wrap: wrap;
            text-align: center;
            border: 1px solid #eceaea;
            border-radius: 5px;
            margin: 1px;
            padding: 10px;
        }
        .container06832 a{
            text-decoration: none;
        }
        .catbox5372{
            margin-top: 10px;
        }
        .icons9532{
            width: 95px;
            height: 80px;
            border: 1px solid #eceaea;
            border-radius: 5px;
            text-align: center;
	    transition: box-shadow 0.4s ease;
            background: linear-gradient(60deg,#f6f4ff,#fff,#e8e4ff);
            color: darkslateblue;
            fill:darkslateblue;
	    animation: flipInX2 1s linear 1;
        }
        .icons9532 svg{
            padding: 3px;
            margin:3px 1px;

        }
        .icons9532 h4{
            padding: 3px;
            margin:3px 1px;
            font-size: 10px;
        }
        .icons9532:hover{
            box-shadow:3px 3px 10px #eceaea;
            animation: move9752 2s .1s linear infinite , color9742 2s .1s linear infinite;
            background: linear-gradient(60deg,#e8e4ff,#fff,#f6f4ff);
        }
        
        	@keyframes move9752{
        0% {
            transform: translate(1px, 1px) rotate(0deg)
        }
        20% {
            transform: translate(-1px, -2px) rotate(-1deg)
        }
        40% {
            transform: translate(-3px, 0px) rotate(1deg)
        }
        60% {
            transform: translate(0px, 0px) rotate(0deg)
        }
        80% {
            transform: translate(0px, 0px) rotate(0deg)
        }
        90% {
            transform: translate(0px, 0px) rotate(0deg)
        }
        100% {
            transform: translate(0px, 0px) rotate(0deg)
        }
	}
        
        
	 @keyframes color9742 {
	 0% {
	   color: #1d08a0;fill: #1d08a0;
	 }
	 50% {
	   color: #880397;fill: #880397;
	 }
	 100% {
	   color: #1d08a0;fill: #1d08a0;
	 }
	
	}

@-webkit-keyframes flipInX2 { 
    0% { 
        -webkit-transform: perspective(400px) rotateX(90deg); 
        opacity: 0; 
    } 
    40% { 
        -webkit-transform: perspective(400px) rotateX(-10deg); 
    } 
    70% { 
        -webkit-transform: perspective(400px) rotateX(10deg); 
    } 
    100% { 
        -webkit-transform: perspective(400px) rotateX(0deg); 
        opacity: 1; 
    } 
} 
@keyframes flipInX2 { 
    0% { 
        transform: perspective(400px) rotateX(90deg); 
        opacity: 0; 
    } 
    40% { 
        transform: perspective(400px) rotateX(-10deg); 
    } 
    70% { 
        transform: perspective(400px) rotateX(10deg); 
    } 
    100% { 
        transform: perspective(400px) rotateX(0deg); 
        opacity: 1; 
    } 
} 
.flipInX2.go { 
    -webkit-backface-visibility: visible !important; 
    -webkit-animation-name: flipInX2; 
    backface-visibility: visible !important; 
    animation-name: flipInX2; 
}

    </style>



معاينة أقسام الموقع 3



كود أقسام الموقع 3
      <div class="catego6943">
          <div dir="rtl" class="container06833">
              
              
              
            <div class="catbox5373">
              <a href="#">
                <div class="icons9533">
                    <svg xmlns="http://www.w3.org/2000/svg" class="svg675" width="50" height="50" viewBox="0 0 24 24"><path d="M21 13v10h-6v-6h-6v6h-6v-10h-3l12-12 12 12h-3zm-1-5.907v-5.093h-3v2.093l3 3z"/></svg>
                    <h4>الرئيسية</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5373">
              <a href="#">
                <div class="icons9533">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path d="M19 2c0-1.104-.896-2-2-2h-10c-1.104 0-2 .896-2 2v20c0 1.104.896 2 2 2h10c1.104 0 2-.896 2-2v-20zm-8.5 0h3c.276 0 .5.224.5.5s-.224.5-.5.5h-3c-.276 0-.5-.224-.5-.5s.224-.5.5-.5zm1.5 20c-.553 0-1-.448-1-1s.447-1 1-1c.552 0 .999.448.999 1s-.447 1-.999 1zm5-3h-10v-14.024h10v14.024z"/></svg>
                    <h4>الموبايل</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5373">
              <a href="#">
                <div class="icons9533">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path d="M17 12c-3.313 0-6 2.687-6 6s2.687 6 6 6 6-2.687 6-6-2.687-6-6-6zm.5 8.474v.526h-.5v-.499c-.518-.009-1.053-.132-1.5-.363l.228-.822c.478.186 1.114.383 1.612.27.574-.13.692-.721.057-1.005-.465-.217-1.889-.402-1.889-1.622 0-.681.52-1.292 1.492-1.425v-.534h.5v.509c.362.01.768.073 1.221.21l-.181.824c-.384-.135-.808-.257-1.222-.232-.744.043-.81.688-.29.958.856.402 1.972.7 1.972 1.773.001.858-.672 1.315-1.5 1.432zm1.624-10.179c1.132-.223 2.162-.626 2.876-1.197v.652c0 .499-.386.955-1.007 1.328-.581-.337-1.208-.6-1.869-.783zm-2.124-5.795c2.673 0 5-1.007 5-2.25s-2.327-2.25-5-2.25c-2.672 0-5 1.007-5 2.25s2.328 2.25 5 2.25zm.093-2.009c-.299-.09-1.214-.166-1.214-.675 0-.284.334-.537.958-.593v-.223h.321v.211c.234.005.494.03.784.09l-.116.342c-.221-.051-.467-.099-.708-.099l-.072.001c-.482.02-.521.287-.188.399.547.169 1.267.292 1.267.74 0 .357-.434.548-.967.596v.22h-.321v-.208c-.328-.003-.676-.056-.962-.152l.147-.343c.244.063.552.126.828.126l.208-.014c.369-.053.443-.3.035-.418zm-11.093 13.009c1.445 0 2.775-.301 3.705-.768.311-.69.714-1.329 1.198-1.899-.451-1.043-2.539-1.833-4.903-1.833-2.672 0-5 1.007-5 2.25s2.328 2.25 5 2.25zm.093-2.009c-.299-.09-1.214-.166-1.214-.675 0-.284.335-.537.958-.593v-.223h.321v.211c.234.005.494.03.784.09l-.117.342c-.22-.051-.466-.099-.707-.099l-.072.001c-.482.02-.52.287-.188.399.547.169 1.267.292 1.267.74 0 .357-.434.548-.967.596v.22h-.321v-.208c-.329-.003-.676-.056-.962-.152l.147-.343c.244.063.552.126.828.126l.208-.014c.368-.053.443-.3.035-.418zm4.003 8.531c-.919.59-2.44.978-4.096.978-2.672 0-5-1.007-5-2.25v-.652c1.146.918 3.109 1.402 5 1.402 1.236 0 2.499-.211 3.549-.611.153.394.336.773.547 1.133zm-9.096-3.772v-.651c1.146.917 3.109 1.401 5 1.401 1.039 0 2.094-.151 3.028-.435.033.469.107.926.218 1.37-.888.347-2.024.565-3.246.565-2.672 0-5-1.007-5-2.25zm0-2.5v-.652c1.146.918 3.109 1.402 5 1.402 1.127 0 2.275-.176 3.266-.509-.128.493-.21 1.002-.241 1.526-.854.298-1.903.483-3.025.483-2.672 0-5-1.007-5-2.25zm11-11v-.652c1.146.918 3.109 1.402 5 1.402 1.892 0 3.854-.484 5-1.402v.652c0 1.243-2.327 2.25-5 2.25-2.672 0-5-1.007-5-2.25zm0 5v-.652c.713.571 1.744.974 2.876 1.197-.661.183-1.287.446-1.868.783-.622-.373-1.008-.829-1.008-1.328zm0-2.5v-.651c1.146.917 3.109 1.401 5 1.401 1.892 0 3.854-.484 5-1.401v.651c0 1.243-2.327 2.25-5 2.25-2.672 0-5-1.007-5-2.25z"/></svg>
                    <h4>ربح المال من الإنترنت</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5373">
              <a href="#">
                <div class="icons9533">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path d="M6 2l1.171.203c-.355 2.245.791 2.519 2.699 2.874 1.468.273 3.13.622 3.13 3.284v.639h-1.183v-.639c0-1.556-.48-1.809-2.164-2.122-2.583-.48-4.096-1.391-3.653-4.239zm18 14c0 3.312-2.607 6-5.825 6-1.511 0-2.886-.595-3.921-1.565-1.311-1.229-3.278-1.132-4.55.038-1.03.948-2.389 1.527-3.879 1.527-3.217 0-5.825-2.688-5.825-6s2.608-6 5.825-6l12.563.007c3.118.116 5.612 2.755 5.612 5.993zm-15-1h-2v-2h-2v2h-2v2h2v2h2v-2h2v-2zm4 1h-2v1h2v-1zm4-2c0 .552.447 1 1 1s1-.448 1-1-.447-1-1-1-1 .448-1 1zm0 2c0-.552-.447-1-1-1s-1 .448-1 1 .447 1 1 1 1-.448 1-1zm2 2c0-.552-.447-1-1-1s-1 .448-1 1 .447 1 1 1 1-.448 1-1zm2-2c0-.552-.447-1-1-1s-1 .448-1 1 .447 1 1 1 1-.448 1-1z"/></svg>
                    <h4>ألعاب</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5373">
              <a href="#">
                <div class="icons9533">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path d="M7 15h13v1h-13v-1zm4-4v3h5v-3h-5zm-1 0h-3v1h3v-1zm-3 3h3v-1h-3v1zm13-1h-3v1h3v-1zm-6.951-6.573v-.396h-1.215v1.941h1.255v-.396h-.78v-.406h.698v-.393h-.698v-.35h.74zm1.396.261l.238 1.284h.5l.501-1.941h-.482l-.249 1.32-.238-1.32h-.492l-.27 1.345-.24-1.345h-.505l.46 1.941h.506l.271-1.284zm1.901.916c-.149 0-.324-.043-.466-.116l-.024-.013-.098.398.015.008c.102.058.318.119.547.119.581 0 .788-.328.788-.61 0-.272-.161-.458-.507-.586-.254-.096-.338-.145-.338-.247 0-.098.1-.161.254-.161.136 0 .266.03.388.088l.023.011.107-.39-.015-.007c-.145-.065-.311-.098-.495-.098-.442 0-.739.239-.739.593 0 .262.181.458.535.581.227.081.304.144.304.247 0 .117-.102.183-.279.183zm-5.325.368h.485v-1.941h-.438v1.189l-.641-1.189h-.535v1.941h.438v-1.327l.691 1.327zm8.979 1.028h-13v1h13v-1zm0 2h-3v1h3v-1zm-17-9v17.199c0 .771-1 .771-1 0v-15.199h-2v15.98c0 1.115.905 2.02 2.02 2.02h19.958c1.117 0 2.022-.904 2.022-2.02v-17.98h-21zm19 16h-17v-14h17v14z"/></svg>
                    <h4>أخبار</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5373">
              <a href="#">
                <div class="icons9533">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path d="M19.899 19.899c.168.145.072.381-.132.618-.156.183-.305.283-.434.283l-.156-.06c-.157-.136-.089-.383.123-.625.144-.166.302-.276.44-.276l.159.06zm-1.421-5.899h-4.478v4.48l5.518 5.52 4.482-4.48-5.522-5.52zm-.447 3.364c.21-.245.479-.379.745-.379.188 0 .374.067.538.208.403.346.376.835.033 1.234-.234.272-.502.39-.752.39-.198 0-.385-.074-.534-.202-.354-.307-.407-.813-.03-1.251zm-2.031-.614c-.413 0-.75-.335-.75-.75s.338-.75.75-.75.75.335.75.75-.337.75-.75.75zm1.25 2.866l3.417-1.262.295.252-3.42 1.259-.292-.249zm2.944 1.225c-.233.272-.5.39-.75.39-.197 0-.384-.074-.533-.202-.353-.302-.405-.809-.032-1.25.21-.245.479-.379.745-.379.188 0 .374.066.539.208.402.345.377.834.031 1.233zm-1.864-2.516c-.158-.136-.09-.383.119-.627.144-.166.304-.275.442-.275l.157.059c.168.145.075.384-.128.621-.156.182-.307.283-.436.283l-.154-.061zm-6.33-10.325c1.066 0 2-.936 2-2.002v-1.098l-1.047-4.9h-1.906l-1.047 4.902v1.098c0 1.067.934 2 2 2zm3-2c0 1.067.934 2 2 2s1.998-.833 1.998-1.9v-1.098l-2.994-5.002h-1.943l.939 4.902v1.098zm5 0c0 1.067.934 2 2 2s2-.865 2-1.932v-1.097l-4.873-4.971h-2.014l2.887 4.902v1.098zm-8.312 13h-8.688v-7h18v1.693l2 1.999v-5.692h-22v14h15.69l-5.002-5zm-7.688-12.932v-1.097l2.887-4.971h-2.014l-4.873 4.971v1.098c0 1.066.934 1.931 2 1.931s2-.865 2-1.932zm1 0c0 1.067.934 1.932 2 1.932s2-.865 2-1.932v-1.097l.939-4.971h-1.943l-2.996 4.971v1.097z"/></svg>
                    <h4>تخفيضات</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5373">
              <a href="#">
                <div class="icons9533">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path d="M0 12v-8.646l10-1.355v10.001h-10zm11 0h13v-12l-13 1.807v10.193zm-1 1h-10v7.646l10 1.355v-9.001zm1 0v9.194l13 1.806v-11h-13z"/></svg>
                    <h4>ويندوز</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5373">
              <a href="#">
                <div class="icons9533">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path d="M24 10.935v2.131l-8 3.947v-2.23l5.64-2.783-5.64-2.79v-2.223l8 3.948zm-16 3.848l-5.64-2.783 5.64-2.79v-2.223l-8 3.948v2.131l8 3.947v-2.23zm7.047-10.783h-2.078l-4.011 16h2.073l4.016-16z"/></svg>
                    <h4>برمجة</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5373">
              <a href="#">
                <div class="icons9533">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path d="M4.5.257l3.771 3.771c.409 1.889-2.33 4.66-4.242 4.242l-3.771-3.77c-.172.584-.258 1.188-.258 1.792 0 1.602.607 3.202 1.83 4.426 1.351 1.351 3.164 1.958 4.931 1.821.933-.072 1.852.269 2.514.931l9.662 9.662c.578.578 1.337.868 2.097.868 1.661 0 3.001-1.364 2.966-3.03-.016-.737-.306-1.47-.868-2.033l-9.662-9.663c-.662-.661-1.002-1.581-.931-2.514.137-1.767-.471-3.58-1.82-4.93-1.225-1.224-2.825-1.83-4.428-1.83-.603 0-1.207.086-1.791.257zm17.5 20.743c0 .553-.447 1-1 1-.553 0-1-.448-1-1s.447-1 1-1 1 .447 1 1z"/></svg>
                    <h4>صيانة</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5373">
              <a href="#">
                <div class="icons9533">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path d="M23 5v13.883l-1 .117v-16c-3.895.119-7.505.762-10.002 2.316-2.496-1.554-6.102-2.197-9.998-2.316v16l-1-.117v-13.883h-1v15h9.057c1.479 0 1.641 1 2.941 1 1.304 0 1.461-1 2.942-1h9.06v-15h-1zm-12 13.645c-1.946-.772-4.137-1.269-7-1.484v-12.051c2.352.197 4.996.675 7 1.922v11.613zm9-1.484c-2.863.215-5.054.712-7 1.484v-11.613c2.004-1.247 4.648-1.725 7-1.922v12.051z"/></svg>
                    <h4>كتب ومراجع</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5373">
              <a href="#">
                <div class="icons9533">
                    <svg width="50" height="50" viewBox="0 -24.48 122.88 122.88" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  style="enable-background:new 0 0 122.88 73.91" xml:space="preserve">
                    <style type="text/css">
                    <![CDATA[
	                .st0{fill-rule:evenodd;clip-rule:evenodd;}
                    ]]>
                    </style>
                    <g>
                    <path class="st0" d="M97.31,36.95c0,9.92-3.49,18.39-10.48,25.38c-7,7-15.46,10.5-25.38,10.5c-9.88,0-18.34-3.49-25.35-10.5 c-7-6.99-10.52-15.46-10.52-25.38c0-9.89,3.51-18.32,10.52-25.34c7.03-7,15.48-10.52,25.35-10.52c9.92,0,18.38,3.51,25.38,10.52 C93.81,18.63,97.31,27.06,97.31,36.95L97.31,36.95L97.31,36.95L97.31,36.95z M16.37,30.34c3.15-2.15,4.73-4.96,4.46-11.39V2.42 c-0.03-2.31-4.22-2.59-4.43,0l-0.16,13.41c-0.01,2.51-3.78,2.59-3.77,0l0.16-13.87c-0.05-2.48-4.05-2.73-4.1,0 c0,3.85-0.16,10.02-0.16,13.87c0.2,2.43-3.3,2.75-3.21,0L5.32,2.05C5.23,0.18,3.17-0.49,1.77,0.39C0.28,1.34,0.58,3.25,0.52,4.86 L0,20.68c0.08,4.6,1.29,8.34,4.89,9.93c0.55,0.24,1.31,0.43,2.19,0.56L5.84,69.75c-0.07,2.29,1.8,4.16,3.99,4.16h0.5 c2.47,0,4.56-2.11,4.49-4.68l-1.09-38.07C14.88,30.98,15.83,30.71,16.37,30.34L16.37,30.34z M106.74,68.59l-0.06-34.65 c-12.15-7.02-8.28-34.07,3.88-33.92c14.78,0.17,16.53,30.48,3.82,33.81l0.94,34.9C115.5,75.33,106.75,75.94,106.74,68.59 L106.74,68.59z M82.33,36.92c0,5.78-2.03,10.71-6.12,14.8c-4.08,4.07-9.01,6.12-14.79,6.12c-5.74,0-10.67-2.05-14.75-6.12 c-4.08-4.09-6.12-9.02-6.12-14.8c0-5.74,2.04-10.67,6.12-14.74c4.09-4.07,9.01-6.12,14.75-6.12C73.03,16.07,82.33,25.3,82.33,36.92 L82.33,36.92L82.33,36.92z M87.22,36.92c0-7.1-2.5-13.17-7.53-18.2s-11.12-7.53-18.27-7.53c-7.13,0-13.2,2.5-18.2,7.53 c-5.03,5.03-7.56,11.1-7.56,18.2c0,7.12,2.53,13.19,7.56,18.24c5,5.04,11.07,7.57,18.2,7.57c7.14,0,13.23-2.53,18.27-7.57 C84.71,50.1,87.22,44.03,87.22,36.92L87.22,36.92L87.22,36.92L87.22,36.92z"/>
                    </g>
                    </svg>
                    <h4>مطاعم ومأكولات</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5373">
              <a href="#">
                <div class="icons9533">
                    <svg height="50" width="50" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
	                viewBox="0 0 122.88 122.88" xml:space="preserve">
                    <style type="text/css">
	                .st0{fill-rule:evenodd;clip-rule:evenodd;}
                    </style>
                    <g>
	                <path class="st0" d="M16.63,105.75c0.01-4.03,2.3-7.97,6.03-12.38L1.09,79.73c-1.36-0.59-1.33-1.42-0.54-2.4l4.57-3.9
		            c0.83-0.51,1.71-0.73,2.66-0.47l26.62,4.5l22.18-24.02L4.8,18.41c-1.31-0.77-1.42-1.64-0.07-2.65l7.47-5.96l67.5,18.97L99.64,7.45
		            c6.69-5.79,13.19-8.38,18.18-7.15c2.75,0.68,3.72,1.5,4.57,4.08c1.65,5.06-0.91,11.86-6.96,18.86L94.11,43.18l18.97,67.5
		            l-5.96,7.47c-1.01,1.34-1.88,1.23-2.65-0.07L69.43,66.31L45.41,88.48l4.5,26.62c0.26,0.94,0.05,1.82-0.47,2.66l-3.9,4.57
		            c-0.97,0.79-1.81,0.82-2.4-0.54l-13.64-21.57c-4.43,3.74-8.37,6.03-12.42,6.03C16.71,106.24,16.63,106.11,16.63,105.75
		            L16.63,105.75z"/>
                    </g>
                    </svg>
                    <h4>سفر وسياحة</h4>
                </div>
              </a>
            </div>
              
              
              
          </div>
      </div>
    <style>
        .catego6943{
            height: auto;
            width: auto;
            text-align: center;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            background: linear-gradient(355deg,#f6f4ff,#fff,#e8e4ff);
            border: 1px solid #eceaea;
            border-radius: 5px;
        }
        .container06833{
            display: flex;
            justify-content: space-around;
            justify-items: center;
            flex-wrap: wrap;
            text-align: center;
            margin: 5px;
            padding: 10px;
        }
        .container06833 a{
            text-decoration: none;
        }
        .catbox5373{
            margin: 10px;
    	    position: relative;
            width: 170px;
            height: 170px;
        }
        .catbox5373 a{
	    width: 150px;
            height: 150px;
	    display: block;
            margin: 5px;
	}
        .catbox5373::before{
            width: 156px;
            height: 156px;
            border: 1px solid #eceaea;
            border-radius: 50%;
	    animation: spin3 4s linear infinite;
            background: linear-gradient(60deg,#f6f4ff,#fff,#e8e4ff);
            text-align: center;
	    content: "";
    	    display: block;
    	    position: absolute;
        }
        .icons9533{
            width: 150px;
            height: 150px;
            border: 1px solid #eceaea;
            border-radius: 50%;
            text-align: center;
	    transition: box-shadow 0.4s ease;
            background: linear-gradient(60deg,#f6f4ff,#fff,#e8e4ff);
            color: darkslateblue;
            fill:darkslateblue;
	    position: absolute;
	    right:3px;
	    top:3px;
	    animation: flip3 1s linear 1;
        }
        .icons9533 svg{
            padding: 7px;
            margin:3px 1px;

        }
        .icons9533 h4{
            padding: 3px;
            margin:3px 1px;
            font-size: 16px;
        }
        .icons9533:hover{
            box-shadow:3px 3px 10px #eceaea;
            animation: move9753 2s .1s linear infinite , color9743 2s .1s linear infinite;
            background: linear-gradient(60deg,#e8e4ff,#fff,#f6f4ff);
        }
        
        	@keyframes move9753{
        0% {
            transform: translate(1px, 1px) rotate(0deg)
        }
        20% {
            transform: translate(-1px, -2px) rotate(-1deg)
        }
        40% {
            transform: translate(-3px, 0px) rotate(1deg)
        }
        60% {
            transform: translate(0px, 0px) rotate(0deg)
        }
        80% {
            transform: translate(0px, 0px) rotate(0deg)
        }
        90% {
            transform: translate(0px, 0px) rotate(0deg)
        }
        100% {
            transform: translate(0px, 0px) rotate(0deg)
        }
	}
        
        
	 @keyframes color9743 {
	 0% {
	   color: #1d08a0;fill: #1d08a0;
	 }
	 50% {
	   color: #880397;fill: #880397;
	 }
	 100% {
	   color: #1d08a0;fill: #1d08a0;
	 }
	
	}

	@keyframes spin3{
	100%{
	   -webkit-transform:rotate(360deg);transform:rotate(360deg);
	 }
	}

@-webkit-keyframes flip3 { 
    0% { 
        -webkit-transform: perspective(800px) rotateY(0); 
        -webkit-animation-timing-function: ease-out; 
    } 
    40% { 
        -webkit-transform: perspective(800px) translateZ(150px) rotateY(170deg); 
        -webkit-animation-timing-function: ease-out; 
    } 
    50% { 
        -webkit-transform: perspective(800px) translateZ(150px) rotateY(190deg) scale(1); 
        -webkit-animation-timing-function: ease-in; 
    } 
    80% { 
        -webkit-transform: perspective(800px) rotateY(360deg) scale(.95); 
        -webkit-animation-timing-function: ease-in; 
    } 
    100% { 
        -webkit-transform: perspective(800px) scale(1); 
        -webkit-animation-timing-function: ease-in; 
    } 
}
@keyframes flip3 { 
    0% { 
        transform: perspective(800px) rotateY(0); 
        animation-timing-function: ease-out; 
    } 
    40% { 
        transform: perspective(800px) translateZ(150px) rotateY(170deg); 
        animation-timing-function: ease-out; 
    } 
    50% { 
        transform: perspective(800px) translateZ(150px) rotateY(190deg) scale(1); 
        animation-timing-function: ease-in; 
    } 
    80% { 
        transform: perspective(800px) rotateY(360deg) scale(.95); 
        animation-timing-function: ease-in; 
    } 
    100% { 
        transform: perspective(800px) scale(1); 
        animation-timing-function: ease-in; 
    } 
} 
.flip3.go { 
    -webkit-backface-visibility: visible !important; 
    -webkit-animation-name: flip3; 
    backface-visibility: visible !important; 
    animation-name: flip3; 
}


    </style>



معاينة أقسام الموقع 4



كود أقسام الموقع 4
      <div class="catego6944">
          <div dir="rtl" class="container06834">
              
              
              
            <div class="catbox5374">
              <a href="#">
                <div class="icons9534">
                    <svg xmlns="http://www.w3.org/2000/svg" class="svg675" width="25" height="25" viewBox="0 0 24 24"><path d="M21 13v10h-6v-6h-6v6h-6v-10h-3l12-12 12 12h-3zm-1-5.907v-5.093h-3v2.093l3 3z"/></svg>
                    <h4>الرئيسية</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5374">
              <a href="#">
                <div class="icons9534">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path d="M19 2c0-1.104-.896-2-2-2h-10c-1.104 0-2 .896-2 2v20c0 1.104.896 2 2 2h10c1.104 0 2-.896 2-2v-20zm-8.5 0h3c.276 0 .5.224.5.5s-.224.5-.5.5h-3c-.276 0-.5-.224-.5-.5s.224-.5.5-.5zm1.5 20c-.553 0-1-.448-1-1s.447-1 1-1c.552 0 .999.448.999 1s-.447 1-.999 1zm5-3h-10v-14.024h10v14.024z"/></svg>
                    <h4>الموبايل</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5374">
              <a href="#">
                <div class="icons9534">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path d="M17 12c-3.313 0-6 2.687-6 6s2.687 6 6 6 6-2.687 6-6-2.687-6-6-6zm.5 8.474v.526h-.5v-.499c-.518-.009-1.053-.132-1.5-.363l.228-.822c.478.186 1.114.383 1.612.27.574-.13.692-.721.057-1.005-.465-.217-1.889-.402-1.889-1.622 0-.681.52-1.292 1.492-1.425v-.534h.5v.509c.362.01.768.073 1.221.21l-.181.824c-.384-.135-.808-.257-1.222-.232-.744.043-.81.688-.29.958.856.402 1.972.7 1.972 1.773.001.858-.672 1.315-1.5 1.432zm1.624-10.179c1.132-.223 2.162-.626 2.876-1.197v.652c0 .499-.386.955-1.007 1.328-.581-.337-1.208-.6-1.869-.783zm-2.124-5.795c2.673 0 5-1.007 5-2.25s-2.327-2.25-5-2.25c-2.672 0-5 1.007-5 2.25s2.328 2.25 5 2.25zm.093-2.009c-.299-.09-1.214-.166-1.214-.675 0-.284.334-.537.958-.593v-.223h.321v.211c.234.005.494.03.784.09l-.116.342c-.221-.051-.467-.099-.708-.099l-.072.001c-.482.02-.521.287-.188.399.547.169 1.267.292 1.267.74 0 .357-.434.548-.967.596v.22h-.321v-.208c-.328-.003-.676-.056-.962-.152l.147-.343c.244.063.552.126.828.126l.208-.014c.369-.053.443-.3.035-.418zm-11.093 13.009c1.445 0 2.775-.301 3.705-.768.311-.69.714-1.329 1.198-1.899-.451-1.043-2.539-1.833-4.903-1.833-2.672 0-5 1.007-5 2.25s2.328 2.25 5 2.25zm.093-2.009c-.299-.09-1.214-.166-1.214-.675 0-.284.335-.537.958-.593v-.223h.321v.211c.234.005.494.03.784.09l-.117.342c-.22-.051-.466-.099-.707-.099l-.072.001c-.482.02-.52.287-.188.399.547.169 1.267.292 1.267.74 0 .357-.434.548-.967.596v.22h-.321v-.208c-.329-.003-.676-.056-.962-.152l.147-.343c.244.063.552.126.828.126l.208-.014c.368-.053.443-.3.035-.418zm4.003 8.531c-.919.59-2.44.978-4.096.978-2.672 0-5-1.007-5-2.25v-.652c1.146.918 3.109 1.402 5 1.402 1.236 0 2.499-.211 3.549-.611.153.394.336.773.547 1.133zm-9.096-3.772v-.651c1.146.917 3.109 1.401 5 1.401 1.039 0 2.094-.151 3.028-.435.033.469.107.926.218 1.37-.888.347-2.024.565-3.246.565-2.672 0-5-1.007-5-2.25zm0-2.5v-.652c1.146.918 3.109 1.402 5 1.402 1.127 0 2.275-.176 3.266-.509-.128.493-.21 1.002-.241 1.526-.854.298-1.903.483-3.025.483-2.672 0-5-1.007-5-2.25zm11-11v-.652c1.146.918 3.109 1.402 5 1.402 1.892 0 3.854-.484 5-1.402v.652c0 1.243-2.327 2.25-5 2.25-2.672 0-5-1.007-5-2.25zm0 5v-.652c.713.571 1.744.974 2.876 1.197-.661.183-1.287.446-1.868.783-.622-.373-1.008-.829-1.008-1.328zm0-2.5v-.651c1.146.917 3.109 1.401 5 1.401 1.892 0 3.854-.484 5-1.401v.651c0 1.243-2.327 2.25-5 2.25-2.672 0-5-1.007-5-2.25z"/></svg>
                    <h4>ربح المال من الإنترنت</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5374">
              <a href="#">
                <div class="icons9534">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path d="M6 2l1.171.203c-.355 2.245.791 2.519 2.699 2.874 1.468.273 3.13.622 3.13 3.284v.639h-1.183v-.639c0-1.556-.48-1.809-2.164-2.122-2.583-.48-4.096-1.391-3.653-4.239zm18 14c0 3.312-2.607 6-5.825 6-1.511 0-2.886-.595-3.921-1.565-1.311-1.229-3.278-1.132-4.55.038-1.03.948-2.389 1.527-3.879 1.527-3.217 0-5.825-2.688-5.825-6s2.608-6 5.825-6l12.563.007c3.118.116 5.612 2.755 5.612 5.993zm-15-1h-2v-2h-2v2h-2v2h2v2h2v-2h2v-2zm4 1h-2v1h2v-1zm4-2c0 .552.447 1 1 1s1-.448 1-1-.447-1-1-1-1 .448-1 1zm0 2c0-.552-.447-1-1-1s-1 .448-1 1 .447 1 1 1 1-.448 1-1zm2 2c0-.552-.447-1-1-1s-1 .448-1 1 .447 1 1 1 1-.448 1-1zm2-2c0-.552-.447-1-1-1s-1 .448-1 1 .447 1 1 1 1-.448 1-1z"/></svg>
                    <h4>ألعاب</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5374">
              <a href="#">
                <div class="icons9534">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path d="M7 15h13v1h-13v-1zm4-4v3h5v-3h-5zm-1 0h-3v1h3v-1zm-3 3h3v-1h-3v1zm13-1h-3v1h3v-1zm-6.951-6.573v-.396h-1.215v1.941h1.255v-.396h-.78v-.406h.698v-.393h-.698v-.35h.74zm1.396.261l.238 1.284h.5l.501-1.941h-.482l-.249 1.32-.238-1.32h-.492l-.27 1.345-.24-1.345h-.505l.46 1.941h.506l.271-1.284zm1.901.916c-.149 0-.324-.043-.466-.116l-.024-.013-.098.398.015.008c.102.058.318.119.547.119.581 0 .788-.328.788-.61 0-.272-.161-.458-.507-.586-.254-.096-.338-.145-.338-.247 0-.098.1-.161.254-.161.136 0 .266.03.388.088l.023.011.107-.39-.015-.007c-.145-.065-.311-.098-.495-.098-.442 0-.739.239-.739.593 0 .262.181.458.535.581.227.081.304.144.304.247 0 .117-.102.183-.279.183zm-5.325.368h.485v-1.941h-.438v1.189l-.641-1.189h-.535v1.941h.438v-1.327l.691 1.327zm8.979 1.028h-13v1h13v-1zm0 2h-3v1h3v-1zm-17-9v17.199c0 .771-1 .771-1 0v-15.199h-2v15.98c0 1.115.905 2.02 2.02 2.02h19.958c1.117 0 2.022-.904 2.022-2.02v-17.98h-21zm19 16h-17v-14h17v14z"/></svg>
                    <h4>أخبار</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5374">
              <a href="#">
                <div class="icons9534">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path d="M19.899 19.899c.168.145.072.381-.132.618-.156.183-.305.283-.434.283l-.156-.06c-.157-.136-.089-.383.123-.625.144-.166.302-.276.44-.276l.159.06zm-1.421-5.899h-4.478v4.48l5.518 5.52 4.482-4.48-5.522-5.52zm-.447 3.364c.21-.245.479-.379.745-.379.188 0 .374.067.538.208.403.346.376.835.033 1.234-.234.272-.502.39-.752.39-.198 0-.385-.074-.534-.202-.354-.307-.407-.813-.03-1.251zm-2.031-.614c-.413 0-.75-.335-.75-.75s.338-.75.75-.75.75.335.75.75-.337.75-.75.75zm1.25 2.866l3.417-1.262.295.252-3.42 1.259-.292-.249zm2.944 1.225c-.233.272-.5.39-.75.39-.197 0-.384-.074-.533-.202-.353-.302-.405-.809-.032-1.25.21-.245.479-.379.745-.379.188 0 .374.066.539.208.402.345.377.834.031 1.233zm-1.864-2.516c-.158-.136-.09-.383.119-.627.144-.166.304-.275.442-.275l.157.059c.168.145.075.384-.128.621-.156.182-.307.283-.436.283l-.154-.061zm-6.33-10.325c1.066 0 2-.936 2-2.002v-1.098l-1.047-4.9h-1.906l-1.047 4.902v1.098c0 1.067.934 2 2 2zm3-2c0 1.067.934 2 2 2s1.998-.833 1.998-1.9v-1.098l-2.994-5.002h-1.943l.939 4.902v1.098zm5 0c0 1.067.934 2 2 2s2-.865 2-1.932v-1.097l-4.873-4.971h-2.014l2.887 4.902v1.098zm-8.312 13h-8.688v-7h18v1.693l2 1.999v-5.692h-22v14h15.69l-5.002-5zm-7.688-12.932v-1.097l2.887-4.971h-2.014l-4.873 4.971v1.098c0 1.066.934 1.931 2 1.931s2-.865 2-1.932zm1 0c0 1.067.934 1.932 2 1.932s2-.865 2-1.932v-1.097l.939-4.971h-1.943l-2.996 4.971v1.097z"/></svg>
                    <h4>تخفيضات</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5374">
              <a href="#">
                <div class="icons9534">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path d="M0 12v-8.646l10-1.355v10.001h-10zm11 0h13v-12l-13 1.807v10.193zm-1 1h-10v7.646l10 1.355v-9.001zm1 0v9.194l13 1.806v-11h-13z"/></svg>
                    <h4>ويندوز</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5374">
              <a href="#">
                <div class="icons9534">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path d="M24 10.935v2.131l-8 3.947v-2.23l5.64-2.783-5.64-2.79v-2.223l8 3.948zm-16 3.848l-5.64-2.783 5.64-2.79v-2.223l-8 3.948v2.131l8 3.947v-2.23zm7.047-10.783h-2.078l-4.011 16h2.073l4.016-16z"/></svg>
                    <h4>برمجة</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5374">
              <a href="#">
                <div class="icons9534">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path d="M4.5.257l3.771 3.771c.409 1.889-2.33 4.66-4.242 4.242l-3.771-3.77c-.172.584-.258 1.188-.258 1.792 0 1.602.607 3.202 1.83 4.426 1.351 1.351 3.164 1.958 4.931 1.821.933-.072 1.852.269 2.514.931l9.662 9.662c.578.578 1.337.868 2.097.868 1.661 0 3.001-1.364 2.966-3.03-.016-.737-.306-1.47-.868-2.033l-9.662-9.663c-.662-.661-1.002-1.581-.931-2.514.137-1.767-.471-3.58-1.82-4.93-1.225-1.224-2.825-1.83-4.428-1.83-.603 0-1.207.086-1.791.257zm17.5 20.743c0 .553-.447 1-1 1-.553 0-1-.448-1-1s.447-1 1-1 1 .447 1 1z"/></svg>
                    <h4>صيانة</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5374">
              <a href="#">
                <div class="icons9534">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path d="M23 5v13.883l-1 .117v-16c-3.895.119-7.505.762-10.002 2.316-2.496-1.554-6.102-2.197-9.998-2.316v16l-1-.117v-13.883h-1v15h9.057c1.479 0 1.641 1 2.941 1 1.304 0 1.461-1 2.942-1h9.06v-15h-1zm-12 13.645c-1.946-.772-4.137-1.269-7-1.484v-12.051c2.352.197 4.996.675 7 1.922v11.613zm9-1.484c-2.863.215-5.054.712-7 1.484v-11.613c2.004-1.247 4.648-1.725 7-1.922v12.051z"/></svg>
                    <h4>كتب ومراجع</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5374">
              <a href="#">
                <div class="icons9534">
                    <svg width="25" height="25" viewBox="0 -24.48 122.88 122.88" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  style="enable-background:new 0 0 122.88 73.91" xml:space="preserve">
                    <style type="text/css">
                    <![CDATA[
	                .st0{fill-rule:evenodd;clip-rule:evenodd;}
                    ]]>
                    </style>
                    <g>
                    <path class="st0" d="M97.31,36.95c0,9.92-3.49,18.39-10.48,25.38c-7,7-15.46,10.5-25.38,10.5c-9.88,0-18.34-3.49-25.35-10.5 c-7-6.99-10.52-15.46-10.52-25.38c0-9.89,3.51-18.32,10.52-25.34c7.03-7,15.48-10.52,25.35-10.52c9.92,0,18.38,3.51,25.38,10.52 C93.81,18.63,97.31,27.06,97.31,36.95L97.31,36.95L97.31,36.95L97.31,36.95z M16.37,30.34c3.15-2.15,4.73-4.96,4.46-11.39V2.42 c-0.03-2.31-4.22-2.59-4.43,0l-0.16,13.41c-0.01,2.51-3.78,2.59-3.77,0l0.16-13.87c-0.05-2.48-4.05-2.73-4.1,0 c0,3.85-0.16,10.02-0.16,13.87c0.2,2.43-3.3,2.75-3.21,0L5.32,2.05C5.23,0.18,3.17-0.49,1.77,0.39C0.28,1.34,0.58,3.25,0.52,4.86 L0,20.68c0.08,4.6,1.29,8.34,4.89,9.93c0.55,0.24,1.31,0.43,2.19,0.56L5.84,69.75c-0.07,2.29,1.8,4.16,3.99,4.16h0.5 c2.47,0,4.56-2.11,4.49-4.68l-1.09-38.07C14.88,30.98,15.83,30.71,16.37,30.34L16.37,30.34z M106.74,68.59l-0.06-34.65 c-12.15-7.02-8.28-34.07,3.88-33.92c14.78,0.17,16.53,30.48,3.82,33.81l0.94,34.9C115.5,75.33,106.75,75.94,106.74,68.59 L106.74,68.59z M82.33,36.92c0,5.78-2.03,10.71-6.12,14.8c-4.08,4.07-9.01,6.12-14.79,6.12c-5.74,0-10.67-2.05-14.75-6.12 c-4.08-4.09-6.12-9.02-6.12-14.8c0-5.74,2.04-10.67,6.12-14.74c4.09-4.07,9.01-6.12,14.75-6.12C73.03,16.07,82.33,25.3,82.33,36.92 L82.33,36.92L82.33,36.92z M87.22,36.92c0-7.1-2.5-13.17-7.53-18.2s-11.12-7.53-18.27-7.53c-7.13,0-13.2,2.5-18.2,7.53 c-5.03,5.03-7.56,11.1-7.56,18.2c0,7.12,2.53,13.19,7.56,18.24c5,5.04,11.07,7.57,18.2,7.57c7.14,0,13.23-2.53,18.27-7.57 C84.71,50.1,87.22,44.03,87.22,36.92L87.22,36.92L87.22,36.92L87.22,36.92z"/>
                    </g>
                    </svg>
                    <h4>مطاعم ومأكولات</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5374">
              <a href="#">
                <div class="icons9534">
                    <svg height="25" width="25" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
	                viewBox="0 0 122.88 122.88" xml:space="preserve">
                    <style type="text/css">
	                .st0{fill-rule:evenodd;clip-rule:evenodd;}
                    </style>
                    <g>
	                <path class="st0" d="M16.63,105.75c0.01-4.03,2.3-7.97,6.03-12.38L1.09,79.73c-1.36-0.59-1.33-1.42-0.54-2.4l4.57-3.9
		            c0.83-0.51,1.71-0.73,2.66-0.47l26.62,4.5l22.18-24.02L4.8,18.41c-1.31-0.77-1.42-1.64-0.07-2.65l7.47-5.96l67.5,18.97L99.64,7.45
		            c6.69-5.79,13.19-8.38,18.18-7.15c2.75,0.68,3.72,1.5,4.57,4.08c1.65,5.06-0.91,11.86-6.96,18.86L94.11,43.18l18.97,67.5
		            l-5.96,7.47c-1.01,1.34-1.88,1.23-2.65-0.07L69.43,66.31L45.41,88.48l4.5,26.62c0.26,0.94,0.05,1.82-0.47,2.66l-3.9,4.57
		            c-0.97,0.79-1.81,0.82-2.4-0.54l-13.64-21.57c-4.43,3.74-8.37,6.03-12.42,6.03C16.71,106.24,16.63,106.11,16.63,105.75
		            L16.63,105.75z"/>
                    </g>
                    </svg>
                    <h4>سفر وسياحة</h4>
                </div>
              </a>
            </div>
              
              
              
          </div>
      </div>
    <style>
        .catego6944{
            height: auto;
            width: auto;
            text-align: center;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            background: linear-gradient(355deg,#f6f4ff,#fff,#e8e4ff);
            border: 1px solid #eceaea;
            border-radius: 5px;
        }
        .container06834{
            display: flex;
            justify-content: space-around;
            justify-items: center;
            flex-wrap: wrap;
            text-align: center;
            margin: 5px;
            padding: 10px;
        }
        .container06834 a{
            text-decoration: none;
        }
        .catbox5374{
            margin: 6px;
    	    position: relative;
            width: 105px;
            height: 105px;
        }
        .catbox5374 a{
	    width: 95px;
            height: 95px;
	    display: block;
            margin: 5px;
	}
        .catbox5374::before{
            width: 98px;
            height: 98px;
            border: 1px solid #eceaea;
            border-radius: 50%;
	    animation: spin4 4s linear infinite;
            background: linear-gradient(60deg,#f6f4ff,#fff,#e8e4ff);
            text-align: center;
	    content: "";
    	    display: block;
    	    position: absolute;
        }
        .icons9534{
            width: 95px;
            height: 95px;
            border: 1px solid #eceaea;
            border-radius: 50%;
            text-align: center;
	    transition: box-shadow 0.4s ease;
            background: linear-gradient(60deg,#f6f4ff,#fff,#e8e4ff);
            color: darkslateblue;
            fill:darkslateblue;
	    position: absolute;
	    right:3px;
	    top:3px;
	    animation: flip4 1s linear 1;
        }
        .icons9534 svg{
            padding: 7px;
            margin:3px 1px;

        }
        .icons9534 h4{
            padding: 3px;
            margin:3px 1px;
            font-size: 10px;
        }
        .icons9534:hover{
            box-shadow:3px 3px 10px #eceaea;
            animation: move9754 2s .1s linear infinite , color9744 2s .1s linear infinite;
            background: linear-gradient(60deg,#e8e4ff,#fff,#f6f4ff);
        }
        
        	@keyframes move9754{
        0% {
            transform: translate(1px, 1px) rotate(0deg)
        }
        20% {
            transform: translate(-1px, -2px) rotate(-1deg)
        }
        40% {
            transform: translate(-3px, 0px) rotate(1deg)
        }
        60% {
            transform: translate(0px, 0px) rotate(0deg)
        }
        80% {
            transform: translate(0px, 0px) rotate(0deg)
        }
        90% {
            transform: translate(0px, 0px) rotate(0deg)
        }
        100% {
            transform: translate(0px, 0px) rotate(0deg)
        }
	}
        
        
	 @keyframes color9744 {
	 0% {
	   color: #1d08a0;fill: #1d08a0;
	 }
	 50% {
	   color: #880397;fill: #880397;
	 }
	 100% {
	   color: #1d08a0;fill: #1d08a0;
	 }
	
	}

	@keyframes spin4{
	100%{
	   -webkit-transform:rotate(360deg);transform:rotate(360deg);
	 }
	}

@-webkit-keyframes flip4 { 
    0% { 
        -webkit-transform: perspective(800px) rotateY(0); 
        -webkit-animation-timing-function: ease-out; 
    } 
    40% { 
        -webkit-transform: perspective(800px) translateZ(150px) rotateY(170deg); 
        -webkit-animation-timing-function: ease-out; 
    } 
    50% { 
        -webkit-transform: perspective(800px) translateZ(150px) rotateY(190deg) scale(1); 
        -webkit-animation-timing-function: ease-in; 
    } 
    80% { 
        -webkit-transform: perspective(800px) rotateY(360deg) scale(.95); 
        -webkit-animation-timing-function: ease-in; 
    } 
    100% { 
        -webkit-transform: perspective(800px) scale(1); 
        -webkit-animation-timing-function: ease-in; 
    } 
}
@keyframes flip4 { 
    0% { 
        transform: perspective(800px) rotateY(0); 
        animation-timing-function: ease-out; 
    } 
    40% { 
        transform: perspective(800px) translateZ(150px) rotateY(170deg); 
        animation-timing-function: ease-out; 
    } 
    50% { 
        transform: perspective(800px) translateZ(150px) rotateY(190deg) scale(1); 
        animation-timing-function: ease-in; 
    } 
    80% { 
        transform: perspective(800px) rotateY(360deg) scale(.95); 
        animation-timing-function: ease-in; 
    } 
    100% { 
        transform: perspective(800px) scale(1); 
        animation-timing-function: ease-in; 
    } 
} 
.flip4.go { 
    -webkit-backface-visibility: visible !important; 
    -webkit-animation-name: flip4; 
    backface-visibility: visible !important; 
    animation-name: flip4; 
}


    </style>



معاينة أقسام الموقع 5



كود أقسام الموقع 5
      <div class="catego6945">
          <div dir="rtl" class="container06835">
              
              
              
            <div class="catbox5375">
              <a href="#">
                <div class="icons9535">
                    <svg xmlns="http://www.w3.org/2000/svg" class="svg675" width="50" height="50" viewBox="0 0 24 24"><path d="M21 13v10h-6v-6h-6v6h-6v-10h-3l12-12 12 12h-3zm-1-5.907v-5.093h-3v2.093l3 3z"/></svg>
                    <h4>الرئيسية</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5375">
              <a href="#">
                <div class="icons9535">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path d="M19 2c0-1.104-.896-2-2-2h-10c-1.104 0-2 .896-2 2v20c0 1.104.896 2 2 2h10c1.104 0 2-.896 2-2v-20zm-8.5 0h3c.276 0 .5.224.5.5s-.224.5-.5.5h-3c-.276 0-.5-.224-.5-.5s.224-.5.5-.5zm1.5 20c-.553 0-1-.448-1-1s.447-1 1-1c.552 0 .999.448.999 1s-.447 1-.999 1zm5-3h-10v-14.024h10v14.024z"/></svg>
                    <h4>الموبايل</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5375">
              <a href="#">
                <div class="icons9535">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path d="M17 12c-3.313 0-6 2.687-6 6s2.687 6 6 6 6-2.687 6-6-2.687-6-6-6zm.5 8.474v.526h-.5v-.499c-.518-.009-1.053-.132-1.5-.363l.228-.822c.478.186 1.114.383 1.612.27.574-.13.692-.721.057-1.005-.465-.217-1.889-.402-1.889-1.622 0-.681.52-1.292 1.492-1.425v-.534h.5v.509c.362.01.768.073 1.221.21l-.181.824c-.384-.135-.808-.257-1.222-.232-.744.043-.81.688-.29.958.856.402 1.972.7 1.972 1.773.001.858-.672 1.315-1.5 1.432zm1.624-10.179c1.132-.223 2.162-.626 2.876-1.197v.652c0 .499-.386.955-1.007 1.328-.581-.337-1.208-.6-1.869-.783zm-2.124-5.795c2.673 0 5-1.007 5-2.25s-2.327-2.25-5-2.25c-2.672 0-5 1.007-5 2.25s2.328 2.25 5 2.25zm.093-2.009c-.299-.09-1.214-.166-1.214-.675 0-.284.334-.537.958-.593v-.223h.321v.211c.234.005.494.03.784.09l-.116.342c-.221-.051-.467-.099-.708-.099l-.072.001c-.482.02-.521.287-.188.399.547.169 1.267.292 1.267.74 0 .357-.434.548-.967.596v.22h-.321v-.208c-.328-.003-.676-.056-.962-.152l.147-.343c.244.063.552.126.828.126l.208-.014c.369-.053.443-.3.035-.418zm-11.093 13.009c1.445 0 2.775-.301 3.705-.768.311-.69.714-1.329 1.198-1.899-.451-1.043-2.539-1.833-4.903-1.833-2.672 0-5 1.007-5 2.25s2.328 2.25 5 2.25zm.093-2.009c-.299-.09-1.214-.166-1.214-.675 0-.284.335-.537.958-.593v-.223h.321v.211c.234.005.494.03.784.09l-.117.342c-.22-.051-.466-.099-.707-.099l-.072.001c-.482.02-.52.287-.188.399.547.169 1.267.292 1.267.74 0 .357-.434.548-.967.596v.22h-.321v-.208c-.329-.003-.676-.056-.962-.152l.147-.343c.244.063.552.126.828.126l.208-.014c.368-.053.443-.3.035-.418zm4.003 8.531c-.919.59-2.44.978-4.096.978-2.672 0-5-1.007-5-2.25v-.652c1.146.918 3.109 1.402 5 1.402 1.236 0 2.499-.211 3.549-.611.153.394.336.773.547 1.133zm-9.096-3.772v-.651c1.146.917 3.109 1.401 5 1.401 1.039 0 2.094-.151 3.028-.435.033.469.107.926.218 1.37-.888.347-2.024.565-3.246.565-2.672 0-5-1.007-5-2.25zm0-2.5v-.652c1.146.918 3.109 1.402 5 1.402 1.127 0 2.275-.176 3.266-.509-.128.493-.21 1.002-.241 1.526-.854.298-1.903.483-3.025.483-2.672 0-5-1.007-5-2.25zm11-11v-.652c1.146.918 3.109 1.402 5 1.402 1.892 0 3.854-.484 5-1.402v.652c0 1.243-2.327 2.25-5 2.25-2.672 0-5-1.007-5-2.25zm0 5v-.652c.713.571 1.744.974 2.876 1.197-.661.183-1.287.446-1.868.783-.622-.373-1.008-.829-1.008-1.328zm0-2.5v-.651c1.146.917 3.109 1.401 5 1.401 1.892 0 3.854-.484 5-1.401v.651c0 1.243-2.327 2.25-5 2.25-2.672 0-5-1.007-5-2.25z"/></svg>
                    <h4>ربح المال من الإنترنت</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5375">
              <a href="#">
                <div class="icons9535">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path d="M6 2l1.171.203c-.355 2.245.791 2.519 2.699 2.874 1.468.273 3.13.622 3.13 3.284v.639h-1.183v-.639c0-1.556-.48-1.809-2.164-2.122-2.583-.48-4.096-1.391-3.653-4.239zm18 14c0 3.312-2.607 6-5.825 6-1.511 0-2.886-.595-3.921-1.565-1.311-1.229-3.278-1.132-4.55.038-1.03.948-2.389 1.527-3.879 1.527-3.217 0-5.825-2.688-5.825-6s2.608-6 5.825-6l12.563.007c3.118.116 5.612 2.755 5.612 5.993zm-15-1h-2v-2h-2v2h-2v2h2v2h2v-2h2v-2zm4 1h-2v1h2v-1zm4-2c0 .552.447 1 1 1s1-.448 1-1-.447-1-1-1-1 .448-1 1zm0 2c0-.552-.447-1-1-1s-1 .448-1 1 .447 1 1 1 1-.448 1-1zm2 2c0-.552-.447-1-1-1s-1 .448-1 1 .447 1 1 1 1-.448 1-1zm2-2c0-.552-.447-1-1-1s-1 .448-1 1 .447 1 1 1 1-.448 1-1z"/></svg>
                    <h4>ألعاب</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5375">
              <a href="#">
                <div class="icons9535">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path d="M7 15h13v1h-13v-1zm4-4v3h5v-3h-5zm-1 0h-3v1h3v-1zm-3 3h3v-1h-3v1zm13-1h-3v1h3v-1zm-6.951-6.573v-.396h-1.215v1.941h1.255v-.396h-.78v-.406h.698v-.393h-.698v-.35h.74zm1.396.261l.238 1.284h.5l.501-1.941h-.482l-.249 1.32-.238-1.32h-.492l-.27 1.345-.24-1.345h-.505l.46 1.941h.506l.271-1.284zm1.901.916c-.149 0-.324-.043-.466-.116l-.024-.013-.098.398.015.008c.102.058.318.119.547.119.581 0 .788-.328.788-.61 0-.272-.161-.458-.507-.586-.254-.096-.338-.145-.338-.247 0-.098.1-.161.254-.161.136 0 .266.03.388.088l.023.011.107-.39-.015-.007c-.145-.065-.311-.098-.495-.098-.442 0-.739.239-.739.593 0 .262.181.458.535.581.227.081.304.144.304.247 0 .117-.102.183-.279.183zm-5.325.368h.485v-1.941h-.438v1.189l-.641-1.189h-.535v1.941h.438v-1.327l.691 1.327zm8.979 1.028h-13v1h13v-1zm0 2h-3v1h3v-1zm-17-9v17.199c0 .771-1 .771-1 0v-15.199h-2v15.98c0 1.115.905 2.02 2.02 2.02h19.958c1.117 0 2.022-.904 2.022-2.02v-17.98h-21zm19 16h-17v-14h17v14z"/></svg>
                    <h4>أخبار</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5375">
              <a href="#">
                <div class="icons9535">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path d="M19.899 19.899c.168.145.072.381-.132.618-.156.183-.305.283-.434.283l-.156-.06c-.157-.136-.089-.383.123-.625.144-.166.302-.276.44-.276l.159.06zm-1.421-5.899h-4.478v4.48l5.518 5.52 4.482-4.48-5.522-5.52zm-.447 3.364c.21-.245.479-.379.745-.379.188 0 .374.067.538.208.403.346.376.835.033 1.234-.234.272-.502.39-.752.39-.198 0-.385-.074-.534-.202-.354-.307-.407-.813-.03-1.251zm-2.031-.614c-.413 0-.75-.335-.75-.75s.338-.75.75-.75.75.335.75.75-.337.75-.75.75zm1.25 2.866l3.417-1.262.295.252-3.42 1.259-.292-.249zm2.944 1.225c-.233.272-.5.39-.75.39-.197 0-.384-.074-.533-.202-.353-.302-.405-.809-.032-1.25.21-.245.479-.379.745-.379.188 0 .374.066.539.208.402.345.377.834.031 1.233zm-1.864-2.516c-.158-.136-.09-.383.119-.627.144-.166.304-.275.442-.275l.157.059c.168.145.075.384-.128.621-.156.182-.307.283-.436.283l-.154-.061zm-6.33-10.325c1.066 0 2-.936 2-2.002v-1.098l-1.047-4.9h-1.906l-1.047 4.902v1.098c0 1.067.934 2 2 2zm3-2c0 1.067.934 2 2 2s1.998-.833 1.998-1.9v-1.098l-2.994-5.002h-1.943l.939 4.902v1.098zm5 0c0 1.067.934 2 2 2s2-.865 2-1.932v-1.097l-4.873-4.971h-2.014l2.887 4.902v1.098zm-8.312 13h-8.688v-7h18v1.693l2 1.999v-5.692h-22v14h15.69l-5.002-5zm-7.688-12.932v-1.097l2.887-4.971h-2.014l-4.873 4.971v1.098c0 1.066.934 1.931 2 1.931s2-.865 2-1.932zm1 0c0 1.067.934 1.932 2 1.932s2-.865 2-1.932v-1.097l.939-4.971h-1.943l-2.996 4.971v1.097z"/></svg>
                    <h4>تخفيضات</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5375">
              <a href="#">
                <div class="icons9535">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path d="M0 12v-8.646l10-1.355v10.001h-10zm11 0h13v-12l-13 1.807v10.193zm-1 1h-10v7.646l10 1.355v-9.001zm1 0v9.194l13 1.806v-11h-13z"/></svg>
                    <h4>ويندوز</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5375">
              <a href="#">
                <div class="icons9535">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path d="M24 10.935v2.131l-8 3.947v-2.23l5.64-2.783-5.64-2.79v-2.223l8 3.948zm-16 3.848l-5.64-2.783 5.64-2.79v-2.223l-8 3.948v2.131l8 3.947v-2.23zm7.047-10.783h-2.078l-4.011 16h2.073l4.016-16z"/></svg>
                    <h4>برمجة</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5375">
              <a href="#">
                <div class="icons9535">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path d="M4.5.257l3.771 3.771c.409 1.889-2.33 4.66-4.242 4.242l-3.771-3.77c-.172.584-.258 1.188-.258 1.792 0 1.602.607 3.202 1.83 4.426 1.351 1.351 3.164 1.958 4.931 1.821.933-.072 1.852.269 2.514.931l9.662 9.662c.578.578 1.337.868 2.097.868 1.661 0 3.001-1.364 2.966-3.03-.016-.737-.306-1.47-.868-2.033l-9.662-9.663c-.662-.661-1.002-1.581-.931-2.514.137-1.767-.471-3.58-1.82-4.93-1.225-1.224-2.825-1.83-4.428-1.83-.603 0-1.207.086-1.791.257zm17.5 20.743c0 .553-.447 1-1 1-.553 0-1-.448-1-1s.447-1 1-1 1 .447 1 1z"/></svg>
                    <h4>صيانة</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5375">
              <a href="#">
                <div class="icons9535">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path d="M23 5v13.883l-1 .117v-16c-3.895.119-7.505.762-10.002 2.316-2.496-1.554-6.102-2.197-9.998-2.316v16l-1-.117v-13.883h-1v15h9.057c1.479 0 1.641 1 2.941 1 1.304 0 1.461-1 2.942-1h9.06v-15h-1zm-12 13.645c-1.946-.772-4.137-1.269-7-1.484v-12.051c2.352.197 4.996.675 7 1.922v11.613zm9-1.484c-2.863.215-5.054.712-7 1.484v-11.613c2.004-1.247 4.648-1.725 7-1.922v12.051z"/></svg>
                    <h4>كتب ومراجع</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5375">
              <a href="#">
                <div class="icons9535">
                    <svg width="50" height="50" viewBox="0 -24.48 122.88 122.88" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  style="enable-background:new 0 0 122.88 73.91" xml:space="preserve">
                    <style type="text/css">
                    <![CDATA[
	                .st0{fill-rule:evenodd;clip-rule:evenodd;}
                    ]]>
                    </style>
                    <g>
                    <path class="st0" d="M97.31,36.95c0,9.92-3.49,18.39-10.48,25.38c-7,7-15.46,10.5-25.38,10.5c-9.88,0-18.34-3.49-25.35-10.5 c-7-6.99-10.52-15.46-10.52-25.38c0-9.89,3.51-18.32,10.52-25.34c7.03-7,15.48-10.52,25.35-10.52c9.92,0,18.38,3.51,25.38,10.52 C93.81,18.63,97.31,27.06,97.31,36.95L97.31,36.95L97.31,36.95L97.31,36.95z M16.37,30.34c3.15-2.15,4.73-4.96,4.46-11.39V2.42 c-0.03-2.31-4.22-2.59-4.43,0l-0.16,13.41c-0.01,2.51-3.78,2.59-3.77,0l0.16-13.87c-0.05-2.48-4.05-2.73-4.1,0 c0,3.85-0.16,10.02-0.16,13.87c0.2,2.43-3.3,2.75-3.21,0L5.32,2.05C5.23,0.18,3.17-0.49,1.77,0.39C0.28,1.34,0.58,3.25,0.52,4.86 L0,20.68c0.08,4.6,1.29,8.34,4.89,9.93c0.55,0.24,1.31,0.43,2.19,0.56L5.84,69.75c-0.07,2.29,1.8,4.16,3.99,4.16h0.5 c2.47,0,4.56-2.11,4.49-4.68l-1.09-38.07C14.88,30.98,15.83,30.71,16.37,30.34L16.37,30.34z M106.74,68.59l-0.06-34.65 c-12.15-7.02-8.28-34.07,3.88-33.92c14.78,0.17,16.53,30.48,3.82,33.81l0.94,34.9C115.5,75.33,106.75,75.94,106.74,68.59 L106.74,68.59z M82.33,36.92c0,5.78-2.03,10.71-6.12,14.8c-4.08,4.07-9.01,6.12-14.79,6.12c-5.74,0-10.67-2.05-14.75-6.12 c-4.08-4.09-6.12-9.02-6.12-14.8c0-5.74,2.04-10.67,6.12-14.74c4.09-4.07,9.01-6.12,14.75-6.12C73.03,16.07,82.33,25.3,82.33,36.92 L82.33,36.92L82.33,36.92z M87.22,36.92c0-7.1-2.5-13.17-7.53-18.2s-11.12-7.53-18.27-7.53c-7.13,0-13.2,2.5-18.2,7.53 c-5.03,5.03-7.56,11.1-7.56,18.2c0,7.12,2.53,13.19,7.56,18.24c5,5.04,11.07,7.57,18.2,7.57c7.14,0,13.23-2.53,18.27-7.57 C84.71,50.1,87.22,44.03,87.22,36.92L87.22,36.92L87.22,36.92L87.22,36.92z"/>
                    </g>
                    </svg>
                    <h4>مطاعم ومأكولات</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5375">
              <a href="#">
                <div class="icons9535">
                    <svg height="50" width="50" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
	                viewBox="0 0 122.88 122.88" xml:space="preserve">
                    <style type="text/css">
	                .st0{fill-rule:evenodd;clip-rule:evenodd;}
                    </style>
                    <g>
	                <path class="st0" d="M16.63,105.75c0.01-4.03,2.3-7.97,6.03-12.38L1.09,79.73c-1.36-0.59-1.33-1.42-0.54-2.4l4.57-3.9
		            c0.83-0.51,1.71-0.73,2.66-0.47l26.62,4.5l22.18-24.02L4.8,18.41c-1.31-0.77-1.42-1.64-0.07-2.65l7.47-5.96l67.5,18.97L99.64,7.45
		            c6.69-5.79,13.19-8.38,18.18-7.15c2.75,0.68,3.72,1.5,4.57,4.08c1.65,5.06-0.91,11.86-6.96,18.86L94.11,43.18l18.97,67.5
		            l-5.96,7.47c-1.01,1.34-1.88,1.23-2.65-0.07L69.43,66.31L45.41,88.48l4.5,26.62c0.26,0.94,0.05,1.82-0.47,2.66l-3.9,4.57
		            c-0.97,0.79-1.81,0.82-2.4-0.54l-13.64-21.57c-4.43,3.74-8.37,6.03-12.42,6.03C16.71,106.24,16.63,106.11,16.63,105.75
		            L16.63,105.75z"/>
                    </g>
                    </svg>
                    <h4>سفر وسياحة</h4>
                </div>
              </a>
            </div>
              
              
              
          </div>
      </div>
    <style>
        .catego6945{
            height: auto;
            width: auto;
            text-align: center;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            background: linear-gradient(355deg,#f6f4ff,#fff,#e8e4ff);
        }
        .container06835{
            display: flex;
            justify-content: space-around;
            justify-items: center;
            flex-wrap: wrap;
            text-align: center;
            border: 1px solid #eceaea;
            border-radius: 5px;
            margin: 1px;
            padding: 10px;
        }
        .container06835 a{
            text-decoration: none;
        }
        .catbox5375{
            margin-top: 10px;
        }
        .icons9535{
            width: 150px;
            height: 120px;
            border: 3px solid transparent;
            border-radius: 5px;
            text-align: center;
	    transition: box-shadow 0.4s ease;
            background: linear-gradient(60deg,#f6f4ff,#fff,#e8e4ff);
            color: darkslateblue;
            fill:darkslateblue;
	    animation: growIn5 1s linear 1;
        }
        .icons9535 svg{
            padding: 3px;
            margin:3px 1px;

        }
        .icons9535 h4{
            padding: 3px;
            margin:3px 1px;
            font-size: 16px;
        }
        .icons9535:hover{
            box-shadow:3px 3px 10px #eceaea;
            animation: color9745 2s .1s linear infinite , 2s rotate5 linear infinite , pulse5 1s linear 1;
            background: linear-gradient(60deg,#e8e4ff,#fff,#f6f4ff);
	    border-image: linear-gradient(var(--angle), #743ad5, #d53a9d) 1;
        }
        
        	@keyframes move9755{
        0% {
            transform: translate(1px, 1px) rotate(0deg)
        }
        20% {
            transform: translate(-1px, -2px) rotate(-1deg)
        }
        40% {
            transform: translate(-3px, 0px) rotate(1deg)
        }
        60% {
            transform: translate(0px, 0px) rotate(0deg)
        }
        80% {
            transform: translate(0px, 0px) rotate(0deg)
        }
        90% {
            transform: translate(0px, 0px) rotate(0deg)
        }
        100% {
            transform: translate(0px, 0px) rotate(0deg)
        }
	}
        
        
	 @keyframes color9745 {
	 0% {
	   color: #1d08a0;fill: #1d08a0;
	 }
	 50% {
	   color: #880397;fill: #880397;
	 }
	 100% {
	   color: #1d08a0;fill: #1d08a0;
	 }
	
	}

	@keyframes rotate5 {
  	to {
    	--angle: 360deg;
  	 }
	}

	@property --angle {
  	syntax: '<angle>';
  	initial-value: 0deg;
  	inherits: false;
	}

@-webkit-keyframes growIn5 { 
    0% { 
        -webkit-transform: scale(0.2); 
        opacity:0;
    } 
    50% { 
        -webkit-transform: scale(1.2); 
        
    } 
    100% { 
        -webkit-transform: scale(1); 
        opacity:1;
    } 
} 
@keyframes growIn5 { 
    0% { 
        transform: scale(0.2); 
        opacity:0;
    } 
    50% { 
        transform: scale(1.2); 
        
    } 
    100% { 
        transform: scale(1); 
        opacity:1;
    } 
} 
.growIn5 { 

    -webkit-transform: scale(0.2);
    transform: scale(0.2);
    opacity:0;
}
.growIn5.go{
    -webkit-animation-name: growIn5; 
    animation-name: growIn5; 
}

@-webkit-keyframes pulse5 { 
    0% { -webkit-transform: scale(1); } 
    50% { -webkit-transform: scale(1.1); } 
    100% { -webkit-transform: scale(1); } 
} 
@keyframes pulse5 { 
    0% { transform: scale(1); } 
    50% { transform: scale(1.1); } 
    100% { transform: scale(1); } 
} 
.pulse5.go { 
    -webkit-animation-name: pulse5; 
    animation-name: pulse5; 
}

    </style>



معاينة أقسام الموقع 6



كود أقسام الموقع 6
      <div class="catego6946">
          <div dir="rtl" class="container06836">
              
              
              
            <div class="catbox5376">
              <a href="#">
                <div class="icons9536">
                    <svg xmlns="http://www.w3.org/2000/svg" class="svg675" width="25" height="25" viewBox="0 0 24 24"><path d="M21 13v10h-6v-6h-6v6h-6v-10h-3l12-12 12 12h-3zm-1-5.907v-5.093h-3v2.093l3 3z"/></svg>
                    <h4>الرئيسية</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5376">
              <a href="#">
                <div class="icons9536">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path d="M19 2c0-1.104-.896-2-2-2h-10c-1.104 0-2 .896-2 2v20c0 1.104.896 2 2 2h10c1.104 0 2-.896 2-2v-20zm-8.5 0h3c.276 0 .5.224.5.5s-.224.5-.5.5h-3c-.276 0-.5-.224-.5-.5s.224-.5.5-.5zm1.5 20c-.553 0-1-.448-1-1s.447-1 1-1c.552 0 .999.448.999 1s-.447 1-.999 1zm5-3h-10v-14.024h10v14.024z"/></svg>
                    <h4>الموبايل</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5376">
              <a href="#">
                <div class="icons9536">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path d="M17 12c-3.313 0-6 2.687-6 6s2.687 6 6 6 6-2.687 6-6-2.687-6-6-6zm.5 8.474v.526h-.5v-.499c-.518-.009-1.053-.132-1.5-.363l.228-.822c.478.186 1.114.383 1.612.27.574-.13.692-.721.057-1.005-.465-.217-1.889-.402-1.889-1.622 0-.681.52-1.292 1.492-1.425v-.534h.5v.509c.362.01.768.073 1.221.21l-.181.824c-.384-.135-.808-.257-1.222-.232-.744.043-.81.688-.29.958.856.402 1.972.7 1.972 1.773.001.858-.672 1.315-1.5 1.432zm1.624-10.179c1.132-.223 2.162-.626 2.876-1.197v.652c0 .499-.386.955-1.007 1.328-.581-.337-1.208-.6-1.869-.783zm-2.124-5.795c2.673 0 5-1.007 5-2.25s-2.327-2.25-5-2.25c-2.672 0-5 1.007-5 2.25s2.328 2.25 5 2.25zm.093-2.009c-.299-.09-1.214-.166-1.214-.675 0-.284.334-.537.958-.593v-.223h.321v.211c.234.005.494.03.784.09l-.116.342c-.221-.051-.467-.099-.708-.099l-.072.001c-.482.02-.521.287-.188.399.547.169 1.267.292 1.267.74 0 .357-.434.548-.967.596v.22h-.321v-.208c-.328-.003-.676-.056-.962-.152l.147-.343c.244.063.552.126.828.126l.208-.014c.369-.053.443-.3.035-.418zm-11.093 13.009c1.445 0 2.775-.301 3.705-.768.311-.69.714-1.329 1.198-1.899-.451-1.043-2.539-1.833-4.903-1.833-2.672 0-5 1.007-5 2.25s2.328 2.25 5 2.25zm.093-2.009c-.299-.09-1.214-.166-1.214-.675 0-.284.335-.537.958-.593v-.223h.321v.211c.234.005.494.03.784.09l-.117.342c-.22-.051-.466-.099-.707-.099l-.072.001c-.482.02-.52.287-.188.399.547.169 1.267.292 1.267.74 0 .357-.434.548-.967.596v.22h-.321v-.208c-.329-.003-.676-.056-.962-.152l.147-.343c.244.063.552.126.828.126l.208-.014c.368-.053.443-.3.035-.418zm4.003 8.531c-.919.59-2.44.978-4.096.978-2.672 0-5-1.007-5-2.25v-.652c1.146.918 3.109 1.402 5 1.402 1.236 0 2.499-.211 3.549-.611.153.394.336.773.547 1.133zm-9.096-3.772v-.651c1.146.917 3.109 1.401 5 1.401 1.039 0 2.094-.151 3.028-.435.033.469.107.926.218 1.37-.888.347-2.024.565-3.246.565-2.672 0-5-1.007-5-2.25zm0-2.5v-.652c1.146.918 3.109 1.402 5 1.402 1.127 0 2.275-.176 3.266-.509-.128.493-.21 1.002-.241 1.526-.854.298-1.903.483-3.025.483-2.672 0-5-1.007-5-2.25zm11-11v-.652c1.146.918 3.109 1.402 5 1.402 1.892 0 3.854-.484 5-1.402v.652c0 1.243-2.327 2.25-5 2.25-2.672 0-5-1.007-5-2.25zm0 5v-.652c.713.571 1.744.974 2.876 1.197-.661.183-1.287.446-1.868.783-.622-.373-1.008-.829-1.008-1.328zm0-2.5v-.651c1.146.917 3.109 1.401 5 1.401 1.892 0 3.854-.484 5-1.401v.651c0 1.243-2.327 2.25-5 2.25-2.672 0-5-1.007-5-2.25z"/></svg>
                    <h4>ربح المال من الإنترنت</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5376">
              <a href="#">
                <div class="icons9536">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path d="M6 2l1.171.203c-.355 2.245.791 2.519 2.699 2.874 1.468.273 3.13.622 3.13 3.284v.639h-1.183v-.639c0-1.556-.48-1.809-2.164-2.122-2.583-.48-4.096-1.391-3.653-4.239zm18 14c0 3.312-2.607 6-5.825 6-1.511 0-2.886-.595-3.921-1.565-1.311-1.229-3.278-1.132-4.55.038-1.03.948-2.389 1.527-3.879 1.527-3.217 0-5.825-2.688-5.825-6s2.608-6 5.825-6l12.563.007c3.118.116 5.612 2.755 5.612 5.993zm-15-1h-2v-2h-2v2h-2v2h2v2h2v-2h2v-2zm4 1h-2v1h2v-1zm4-2c0 .552.447 1 1 1s1-.448 1-1-.447-1-1-1-1 .448-1 1zm0 2c0-.552-.447-1-1-1s-1 .448-1 1 .447 1 1 1 1-.448 1-1zm2 2c0-.552-.447-1-1-1s-1 .448-1 1 .447 1 1 1 1-.448 1-1zm2-2c0-.552-.447-1-1-1s-1 .448-1 1 .447 1 1 1 1-.448 1-1z"/></svg>
                    <h4>ألعاب</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5376">
              <a href="#">
                <div class="icons9536">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path d="M7 15h13v1h-13v-1zm4-4v3h5v-3h-5zm-1 0h-3v1h3v-1zm-3 3h3v-1h-3v1zm13-1h-3v1h3v-1zm-6.951-6.573v-.396h-1.215v1.941h1.255v-.396h-.78v-.406h.698v-.393h-.698v-.35h.74zm1.396.261l.238 1.284h.5l.501-1.941h-.482l-.249 1.32-.238-1.32h-.492l-.27 1.345-.24-1.345h-.505l.46 1.941h.506l.271-1.284zm1.901.916c-.149 0-.324-.043-.466-.116l-.024-.013-.098.398.015.008c.102.058.318.119.547.119.581 0 .788-.328.788-.61 0-.272-.161-.458-.507-.586-.254-.096-.338-.145-.338-.247 0-.098.1-.161.254-.161.136 0 .266.03.388.088l.023.011.107-.39-.015-.007c-.145-.065-.311-.098-.495-.098-.442 0-.739.239-.739.593 0 .262.181.458.535.581.227.081.304.144.304.247 0 .117-.102.183-.279.183zm-5.325.368h.485v-1.941h-.438v1.189l-.641-1.189h-.535v1.941h.438v-1.327l.691 1.327zm8.979 1.028h-13v1h13v-1zm0 2h-3v1h3v-1zm-17-9v17.199c0 .771-1 .771-1 0v-15.199h-2v15.98c0 1.115.905 2.02 2.02 2.02h19.958c1.117 0 2.022-.904 2.022-2.02v-17.98h-21zm19 16h-17v-14h17v14z"/></svg>
                    <h4>أخبار</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5376">
              <a href="#">
                <div class="icons9536">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path d="M19.899 19.899c.168.145.072.381-.132.618-.156.183-.305.283-.434.283l-.156-.06c-.157-.136-.089-.383.123-.625.144-.166.302-.276.44-.276l.159.06zm-1.421-5.899h-4.478v4.48l5.518 5.52 4.482-4.48-5.522-5.52zm-.447 3.364c.21-.245.479-.379.745-.379.188 0 .374.067.538.208.403.346.376.835.033 1.234-.234.272-.502.39-.752.39-.198 0-.385-.074-.534-.202-.354-.307-.407-.813-.03-1.251zm-2.031-.614c-.413 0-.75-.335-.75-.75s.338-.75.75-.75.75.335.75.75-.337.75-.75.75zm1.25 2.866l3.417-1.262.295.252-3.42 1.259-.292-.249zm2.944 1.225c-.233.272-.5.39-.75.39-.197 0-.384-.074-.533-.202-.353-.302-.405-.809-.032-1.25.21-.245.479-.379.745-.379.188 0 .374.066.539.208.402.345.377.834.031 1.233zm-1.864-2.516c-.158-.136-.09-.383.119-.627.144-.166.304-.275.442-.275l.157.059c.168.145.075.384-.128.621-.156.182-.307.283-.436.283l-.154-.061zm-6.33-10.325c1.066 0 2-.936 2-2.002v-1.098l-1.047-4.9h-1.906l-1.047 4.902v1.098c0 1.067.934 2 2 2zm3-2c0 1.067.934 2 2 2s1.998-.833 1.998-1.9v-1.098l-2.994-5.002h-1.943l.939 4.902v1.098zm5 0c0 1.067.934 2 2 2s2-.865 2-1.932v-1.097l-4.873-4.971h-2.014l2.887 4.902v1.098zm-8.312 13h-8.688v-7h18v1.693l2 1.999v-5.692h-22v14h15.69l-5.002-5zm-7.688-12.932v-1.097l2.887-4.971h-2.014l-4.873 4.971v1.098c0 1.066.934 1.931 2 1.931s2-.865 2-1.932zm1 0c0 1.067.934 1.932 2 1.932s2-.865 2-1.932v-1.097l.939-4.971h-1.943l-2.996 4.971v1.097z"/></svg>
                    <h4>تخفيضات</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5376">
              <a href="#">
                <div class="icons9536">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path d="M0 12v-8.646l10-1.355v10.001h-10zm11 0h13v-12l-13 1.807v10.193zm-1 1h-10v7.646l10 1.355v-9.001zm1 0v9.194l13 1.806v-11h-13z"/></svg>
                    <h4>ويندوز</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5376">
              <a href="#">
                <div class="icons9536">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path d="M24 10.935v2.131l-8 3.947v-2.23l5.64-2.783-5.64-2.79v-2.223l8 3.948zm-16 3.848l-5.64-2.783 5.64-2.79v-2.223l-8 3.948v2.131l8 3.947v-2.23zm7.047-10.783h-2.078l-4.011 16h2.073l4.016-16z"/></svg>
                    <h4>برمجة</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5376">
              <a href="#">
                <div class="icons9536">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path d="M4.5.257l3.771 3.771c.409 1.889-2.33 4.66-4.242 4.242l-3.771-3.77c-.172.584-.258 1.188-.258 1.792 0 1.602.607 3.202 1.83 4.426 1.351 1.351 3.164 1.958 4.931 1.821.933-.072 1.852.269 2.514.931l9.662 9.662c.578.578 1.337.868 2.097.868 1.661 0 3.001-1.364 2.966-3.03-.016-.737-.306-1.47-.868-2.033l-9.662-9.663c-.662-.661-1.002-1.581-.931-2.514.137-1.767-.471-3.58-1.82-4.93-1.225-1.224-2.825-1.83-4.428-1.83-.603 0-1.207.086-1.791.257zm17.5 20.743c0 .553-.447 1-1 1-.553 0-1-.448-1-1s.447-1 1-1 1 .447 1 1z"/></svg>
                    <h4>صيانة</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5376">
              <a href="#">
                <div class="icons9536">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path d="M23 5v13.883l-1 .117v-16c-3.895.119-7.505.762-10.002 2.316-2.496-1.554-6.102-2.197-9.998-2.316v16l-1-.117v-13.883h-1v15h9.057c1.479 0 1.641 1 2.941 1 1.304 0 1.461-1 2.942-1h9.06v-15h-1zm-12 13.645c-1.946-.772-4.137-1.269-7-1.484v-12.051c2.352.197 4.996.675 7 1.922v11.613zm9-1.484c-2.863.215-5.054.712-7 1.484v-11.613c2.004-1.247 4.648-1.725 7-1.922v12.051z"/></svg>
                    <h4>كتب ومراجع</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5376">
              <a href="#">
                <div class="icons9536">
                    <svg width="25" height="25" viewBox="0 -24.48 122.88 122.88" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  style="enable-background:new 0 0 122.88 73.91" xml:space="preserve">
                    <style type="text/css">
                    <![CDATA[
	                .st0{fill-rule:evenodd;clip-rule:evenodd;}
                    ]]>
                    </style>
                    <g>
                    <path class="st0" d="M97.31,36.95c0,9.92-3.49,18.39-10.48,25.38c-7,7-15.46,10.5-25.38,10.5c-9.88,0-18.34-3.49-25.35-10.5 c-7-6.99-10.52-15.46-10.52-25.38c0-9.89,3.51-18.32,10.52-25.34c7.03-7,15.48-10.52,25.35-10.52c9.92,0,18.38,3.51,25.38,10.52 C93.81,18.63,97.31,27.06,97.31,36.95L97.31,36.95L97.31,36.95L97.31,36.95z M16.37,30.34c3.15-2.15,4.73-4.96,4.46-11.39V2.42 c-0.03-2.31-4.22-2.59-4.43,0l-0.16,13.41c-0.01,2.51-3.78,2.59-3.77,0l0.16-13.87c-0.05-2.48-4.05-2.73-4.1,0 c0,3.85-0.16,10.02-0.16,13.87c0.2,2.43-3.3,2.75-3.21,0L5.32,2.05C5.23,0.18,3.17-0.49,1.77,0.39C0.28,1.34,0.58,3.25,0.52,4.86 L0,20.68c0.08,4.6,1.29,8.34,4.89,9.93c0.55,0.24,1.31,0.43,2.19,0.56L5.84,69.75c-0.07,2.29,1.8,4.16,3.99,4.16h0.5 c2.47,0,4.56-2.11,4.49-4.68l-1.09-38.07C14.88,30.98,15.83,30.71,16.37,30.34L16.37,30.34z M106.74,68.59l-0.06-34.65 c-12.15-7.02-8.28-34.07,3.88-33.92c14.78,0.17,16.53,30.48,3.82,33.81l0.94,34.9C115.5,75.33,106.75,75.94,106.74,68.59 L106.74,68.59z M82.33,36.92c0,5.78-2.03,10.71-6.12,14.8c-4.08,4.07-9.01,6.12-14.79,6.12c-5.74,0-10.67-2.05-14.75-6.12 c-4.08-4.09-6.12-9.02-6.12-14.8c0-5.74,2.04-10.67,6.12-14.74c4.09-4.07,9.01-6.12,14.75-6.12C73.03,16.07,82.33,25.3,82.33,36.92 L82.33,36.92L82.33,36.92z M87.22,36.92c0-7.1-2.5-13.17-7.53-18.2s-11.12-7.53-18.27-7.53c-7.13,0-13.2,2.5-18.2,7.53 c-5.03,5.03-7.56,11.1-7.56,18.2c0,7.12,2.53,13.19,7.56,18.24c5,5.04,11.07,7.57,18.2,7.57c7.14,0,13.23-2.53,18.27-7.57 C84.71,50.1,87.22,44.03,87.22,36.92L87.22,36.92L87.22,36.92L87.22,36.92z"/>
                    </g>
                    </svg>
                    <h4>مطاعم ومأكولات</h4>
                </div>
              </a>
            </div>
              
              
            <div class="catbox5376">
              <a href="#">
                <div class="icons9536">
                    <svg height="25" width="25" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
	                viewBox="0 0 122.88 122.88" xml:space="preserve">
                    <style type="text/css">
	                .st0{fill-rule:evenodd;clip-rule:evenodd;}
                    </style>
                    <g>
	                <path class="st0" d="M16.63,105.75c0.01-4.03,2.3-7.97,6.03-12.38L1.09,79.73c-1.36-0.59-1.33-1.42-0.54-2.4l4.57-3.9
		            c0.83-0.51,1.71-0.73,2.66-0.47l26.62,4.5l22.18-24.02L4.8,18.41c-1.31-0.77-1.42-1.64-0.07-2.65l7.47-5.96l67.5,18.97L99.64,7.45
		            c6.69-5.79,13.19-8.38,18.18-7.15c2.75,0.68,3.72,1.5,4.57,4.08c1.65,5.06-0.91,11.86-6.96,18.86L94.11,43.18l18.97,67.5
		            l-5.96,7.47c-1.01,1.34-1.88,1.23-2.65-0.07L69.43,66.31L45.41,88.48l4.5,26.62c0.26,0.94,0.05,1.82-0.47,2.66l-3.9,4.57
		            c-0.97,0.79-1.81,0.82-2.4-0.54l-13.64-21.57c-4.43,3.74-8.37,6.03-12.42,6.03C16.71,106.24,16.63,106.11,16.63,105.75
		            L16.63,105.75z"/>
                    </g>
                    </svg>
                    <h4>سفر وسياحة</h4>
                </div>
              </a>
            </div>
              
              
              
          </div>
      </div>
    <style>
        .catego6946{
            height: auto;
            width: auto;
            text-align: center;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            background: linear-gradient(355deg,#f6f4ff,#fff,#e8e4ff);
        }
        .container06836{
            display: flex;
            justify-content: space-around;
            justify-items: center;
            flex-wrap: wrap;
            text-align: center;
            border: 1px solid #eceaea;
            border-radius: 5px;
            margin: 1px;
            padding: 10px;
        }
        .container06836 a{
            text-decoration: none;
        }
        .catbox5376{
            margin-top: 10px;
        }
        .icons9536{
            width: 95px;
            height: 80px;
            border: 3px solid transparent;
            border-radius: 5px;
            text-align: center;
	    transition: box-shadow 0.4s ease;
            background: linear-gradient(60deg,#f6f4ff,#fff,#e8e4ff);
            color: darkslateblue;
            fill:darkslateblue;
	    animation: growIn6 1s linear 1;
        }
        .icons9536 svg{
            padding: 3px;
            margin:3px 1px;

        }
        .icons9536 h4{
            padding: 3px;
            margin:3px 1px;
            font-size: 10px;
        }
        .icons9536:hover{
            box-shadow:3px 3px 10px #eceaea;
            animation: color9746 2s .1s linear infinite , 2s rotate6 linear infinite , pulse6 1s linear 1;
            background: linear-gradient(60deg,#e8e4ff,#fff,#f6f4ff);
	    border-image: linear-gradient(var(--angle), #743ad5, #d53a9d) 1;
        }
        
        	@keyframes move9756{
        0% {
            transform: translate(1px, 1px) rotate(0deg)
        }
        20% {
            transform: translate(-1px, -2px) rotate(-1deg)
        }
        40% {
            transform: translate(-3px, 0px) rotate(1deg)
        }
        60% {
            transform: translate(0px, 0px) rotate(0deg)
        }
        80% {
            transform: translate(0px, 0px) rotate(0deg)
        }
        90% {
            transform: translate(0px, 0px) rotate(0deg)
        }
        100% {
            transform: translate(0px, 0px) rotate(0deg)
        }
	}
        
        
	 @keyframes color9746 {
	 0% {
	   color: #1d08a0;fill: #1d08a0;
	 }
	 50% {
	   color: #880397;fill: #880397;
	 }
	 100% {
	   color: #1d08a0;fill: #1d08a0;
	 }
	
	}

	@keyframes rotate6 {
  	to {
    	--angle: 360deg;
  	 }
	}

	@property --angle {
  	syntax: '<angle>';
  	initial-value: 0deg;
  	inherits: false;
	}

@-webkit-keyframes growIn6 { 
    0% { 
        -webkit-transform: scale(0.2); 
        opacity:0;
    } 
    50% { 
        -webkit-transform: scale(1.2); 
        
    } 
    100% { 
        -webkit-transform: scale(1); 
        opacity:1;
    } 
} 
@keyframes growIn6 { 
    0% { 
        transform: scale(0.2); 
        opacity:0;
    } 
    50% { 
        transform: scale(1.2); 
        
    } 
    100% { 
        transform: scale(1); 
        opacity:1;
    } 
} 
.growIn6 { 

    -webkit-transform: scale(0.2);
    transform: scale(0.2);
    opacity:0;
}
.growIn6.go{
    -webkit-animation-name: growIn6; 
    animation-name: growIn6; 
}

@-webkit-keyframes pulse6 { 
    0% { -webkit-transform: scale(1); } 
    50% { -webkit-transform: scale(1.1); } 
    100% { -webkit-transform: scale(1); } 
} 
@keyframes pulse6 { 
    0% { transform: scale(1); } 
    50% { transform: scale(1.1); } 
    100% { transform: scale(1); } 
} 
.pulse6.go { 
    -webkit-animation-name: pulse6; 
    animation-name: pulse6; 
}

    </style>




والأن وبعد إختيار الكود الذي يناسبك يمكنك التعديل على كود الإضافة كالأتي

لتغيير الروابط وكذلك أسماء الأقسام سوف تقوم بالبحث عن الجملة

<a href="#">

وتغير علامة الشباك # برابط القسم الذي تريد وأما عن أسماء الأقسام نفسها ستجد إسم القسم موجود بالسطر الثالث أسفل كود رابط القسم وستجده على الشكل

<h4>الرئيسية</h4>

لتغيره بالإسم الذي تريد وبهذا يكون تعديل الروابط وأسماء الأقسام تم بكل سهولة ولننتقل الأن إلى تعديل خلفية الإضافة كاملة والأقسام وهي كالأتي


لتعديل خلفية الإضافة كاملة للون الأبيض على سبيل المثال سنبحث عن الجملة

355deg

وستجد بعدها أكواد الألوان التالية

#f6f4ff

#fff

#e8e4ff

غيرها جميعاً للكود

#fff


وفي حالة أردت تغيير لون خلفية الإضافة لألوان أخرى عليك كتابة الجملة " html color picker " وإختيار لون ما فاتح للغاية قريب للأبيض وبعدها تقوم بإستبداله بالكود

#f6f4ff

بكامل الإضافة وستجد الكود مكرر 3 مرات وعليك تغييره 3 مرات وستجده متكرر بإضافة الدوائر 4 مرات وعليك تغييره 4 مرات وبعدها تقوم بإختيار لون نفس الدرجة ولكنه داكن أكثر ولكن مازال لون فاتح وتقوم بإستبداله بكود الألوان

#e8e4ff

ستجده موجود 3 مرات وعليك تغييره 3 مرات كذلك ونفس الأمر عليك إستبداله بإضافة الدوائر 4 مرات أيضاً.


وأما عن تغيير لون الكتابة والأيقونة بالإضافة عليك البحث عن الجملة

darkslateblue

وإستبداله بأي كود ألوان أخر تريد للخطوط والأيقونات


وأما عن ألوان الخط والأيقونة المتغيرة أثناء المرور بسهم الماوس عليها فيمكنك تغيير تلك الألوان بالبحث عن كود الألوان

#1d08a0

وستجده موجود بالإضافة 4 مرات وعليك تغييره للون داكن جداً كما تريد من خلال البحث بجوجل عن الجملة " html color picker "

ونبحث بعدها عن الجملة

#880397

وستجدها مرتين وتغيرها بأي كود أخر للألوان ويجب أن يكون لون داكن جداً وبهذا تكون قد عدلت جميع الألوان بالإضافة بكل سهولة وبساطة.

وأما في حالة أردت حذف قسم أو أكثر من الإضافة والإكتفاء بعدد معين من الأقسام فقط عليك تحديد كامل كود القسم الذي تريده وليكن قسم الأخبار وسيكون على هذا الشكل


            <div class="catbox5371">

              <a href="#">

                <div class="icons9531">

                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path d="M7 15h13v1h-13v-1zm4-4v3h5v-3h-5zm-1 0h-3v1h3v-1zm-3 3h3v-1h-3v1zm13-1h-3v1h3v-1zm-6.951-6.573v-.396h-1.215v1.941h1.255v-.396h-.78v-.406h.698v-.393h-.698v-.35h.74zm1.396.261l.238 1.284h.5l.501-1.941h-.482l-.249 1.32-.238-1.32h-.492l-.27 1.345-.24-1.345h-.505l.46 1.941h.506l.271-1.284zm1.901.916c-.149 0-.324-.043-.466-.116l-.024-.013-.098.398.015.008c.102.058.318.119.547.119.581 0 .788-.328.788-.61 0-.272-.161-.458-.507-.586-.254-.096-.338-.145-.338-.247 0-.098.1-.161.254-.161.136 0 .266.03.388.088l.023.011.107-.39-.015-.007c-.145-.065-.311-.098-.495-.098-.442 0-.739.239-.739.593 0 .262.181.458.535.581.227.081.304.144.304.247 0 .117-.102.183-.279.183zm-5.325.368h.485v-1.941h-.438v1.189l-.641-1.189h-.535v1.941h.438v-1.327l.691 1.327zm8.979 1.028h-13v1h13v-1zm0 2h-3v1h3v-1zm-17-9v17.199c0 .771-1 .771-1 0v-15.199h-2v15.98c0 1.115.905 2.02 2.02 2.02h19.958c1.117 0 2.022-.904 2.022-2.02v-17.98h-21zm19 16h-17v-14h17v14z"/></svg>

                    <h4>أخبار</h4>

                </div>

              </a>

            </div>


وتقوم بحذف كامل هذا الكود وللملاحظة ستجد سطرين فراغ أعلى كل قسم وأسفله لسهولة تحديده وحذفه بكل بساطة إن كنت لا تحتاج لهذا القسم أو هذه الأيقونة وحاولت تجميع أكثر الأيقونات إنتشاراً والتي يمكنها تغطية الكثير من أنواع الأقسام قدر المستطاع.


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


الخلاصة

يجب عليك أن تطور من موقعك بشكل دائم وتحسن من مستواه وتهتم بالأداء الخاص به لتحذف كل ما هو ثقيل وغير مهم وتضع مكانه كل ما يضيف شكل جمالي وإحترافي لموقعك ويرفع من الأداء لذلك أنصحك بإضافة أقسام الموقع هذه فهي خفيفة جداً وسريعة للغاية وبمؤثرات مميزة وحديثة ومتجاوبة مع الموبايل ومتفاعلة مع الزائر وهو كل ما تطمح إليه في أي إضافة لموقعك.


الأقسام

الأقسام

التعليقات

للأعلى