في بعض الأحيان نحتاج لإضافة متطورة لعرض الأقسام بالموقع مما سيعود على الموقع بشكل جمالي مميز وزيادة نسب تصفح الأقسام والموقع خصوصاً في حالة عدم وجود إضافة جيدة بقالب بلوجر مثلاً أو الإضطرار للعمل بإضافة الأقسام الإفتراضية ببلوجر والتي أعتبرها قديمة وغير منسقة بشكل جيد أو حتى تلفت الإنتباه وتجذب الزائر لذلك وفي هذا المقال سوف نعرف بعض أكواد لإضافات أقسام الموقع.
بشكل ممتاز للغاية وتأثيرات رائعة جداً وكبيرة الحجم لمزيد من لفت الإنتباه وبتأثيرات وألوان مميزة للغاية وتتفاعل مع الزائر حتى تشجعه على مزيد من تصفح موقعك وقراءة المزيد من المقالات ويرجع ذلك وكسبب من أسبابه هو التنسيق الجيد والإستغلال المناسب للمساحات بالمدونة والقالب.
ويمكنك وضع إضافة أقسام الموقع بالحجم الكبير بالصفحة الرئيسية وتحت المقالة أما إضافة أقسام الموقع بالحجم الصغير فيمكنك وضعها بالقائمة الجانبية كذلك أي مكان أخر ليس بكامل عرض الشاشة أو كما تريد.
الإضافة تفاعلية وبمؤثرات رائعة ومميزة ويمكنها نقل شكل ومستوى موقعك لمستوى أخر من التميز والأناقة في الأداء وبأكثر من شكل وطريقة لتتطور بموقعك وبتنسيقه إضافة إلى الإهتمام بالطبع بالمحتوى الخاص بموقعك وهو الأهم.
ولعل البعض قد يتسائل
ما هي أفضل إضافة وكود لأقسام الموقع لقالب بلوجر؟
ما هو أفضل كود أقسام الموقع حديث بمؤثرات متميزة؟
أين أجد أفضل كود أقسام مواقع لبلوجر حديث ومتفاعل مع الزائر؟
وكل هذا وأكثر سيتم الإجابة عنه في كامل المقال
ولنبدأ بمعاينة الأكواد على الطبيعة وبعدها وأسفلها مباشرة كود الإضافة وبالأسفل تماماً سيكون هناك شرح التعديل على الكود بالشكل والألوان المناسبة لموقعك وكذلك الروابط وأسماء الأقسام حتى تصل لأفضل إضافة مناسبة جداً لموقعك ومخصصة له ومتجاوبة مع الموبايل كذلك وتلك نقطة لا يجب أن نتجاهلها إطلاقاً لأهميتها لكثرة وجود مستخدمين الموبايل حديثاً ونحن نريد دائماً الوصول لأفضل تجربة مستخدم ممكنة للموقع بكل تأكيد.
معاينة أقسام الموقع 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
<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
<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
<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
<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
<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>
وتقوم بحذف كامل هذا الكود وللملاحظة ستجد سطرين فراغ أعلى كل قسم وأسفله لسهولة تحديده وحذفه بكل بساطة إن كنت لا تحتاج لهذا القسم أو هذه الأيقونة وحاولت تجميع أكثر الأيقونات إنتشاراً والتي يمكنها تغطية الكثير من أنواع الأقسام قدر المستطاع.
وبهذا سيكون لديك بالفعل إضافة ممتازة جداً وحديثة متجاوبة مع الموبايل متفاعلة مع الزائر خفيفة للغاية تناسب موقعك وتستطيع بها الإرتقاء بمستوى وشكل موقعك والتنسيق الخاص به لمستوى أكثر تطوراً وجمالاً.
الخلاصة
يجب عليك أن تطور من موقعك بشكل دائم وتحسن من مستواه وتهتم بالأداء الخاص به لتحذف كل ما هو ثقيل وغير مهم وتضع مكانه كل ما يضيف شكل جمالي وإحترافي لموقعك ويرفع من الأداء لذلك أنصحك بإضافة أقسام الموقع هذه فهي خفيفة جداً وسريعة للغاية وبمؤثرات مميزة وحديثة ومتجاوبة مع الموبايل ومتفاعلة مع الزائر وهو كل ما تطمح إليه في أي إضافة لموقعك.