الاثنين، 29 يونيو 2015

أدوات مهمة ستساعدك على احتراف السيو والتسويق الإلكتروني

أدوات مهمة ستساعدك على احتراف السيو والتسويق الإلكتروني

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

1- Adbeat :
أداة ذكية تعطيك معلومات دقيقة عن المسوقين الذين يعتمدون على جلب الزوار بالإعلانات المدفوعة advertiser’s media buying strategy وكذلك أخذ فكرة عن النصوص الإعلانية التي يعتمدون عليها.
الموقع : www.adbeat.com
2- Adgooroo :
أداة متعددة الوظائف تتضمن ميزة رؤية العرض Display Insight, كما تمكن من مراقبة الإعلانات المصنفة عبر نسبة مشاهدات الصفحات, إضافة إلى أفكار ومعلومات عن الإعلانات المنافسة في محركات البحث Paid and Organic Search.
الموقع : www.adgooroo.com
3- MixRank :
أداة تسمح لك من معرفة مزيج من الحملات الإعلانية التي يستخذمها المسوقين, الإعلانات النصية ومعلومات عن التركيبة الجغرافية.
الموقع : mixrank.com
4- Moat :
تسمح لك هذه الأداة بإدخال بيانات المنتوجات أو العلامات التجارية لتعطيك أخر الإعلانات التي ظهرت في الأونة الأخيرة لفائدتها مما يتيح لك دليلا جيدا لمكان وضع إعلاناتك.
الموقع : www.moat.com
5- Socialadninja :
لها قائمة من 400.000 إعلان على المواقع الإجتماعية social PPC ads, وهي أداة جيدة لرصد الإعلانات التي تعرض على فيس بوك حيث تعطيك بالتدقيق عبر الكلمات المفتاحية الفئة العمرية والجنس والتركيبة الديموغرافية fine-grained search, ويجدر الذكر إلى أن الموقع ليس مجاني وثمن العضوية الشهرية هو 147 دولار.
الموقع : www.socialadninja.com
6- ispionage :
عبارة عن أداة جميلة لمعرفة كيفية عمل الإعلانات من طرف المنافسين في محركات البحث جوجل, ياهو, بينج, وأيضا تشمل منافسة السيو SEO, وأداة لرصد الفيس بوك والتويتر social monitoring tool.
الموقع : www.ispionage.com
7- KeywordSpy :
تساعدك على اكتشاف الكلمات المفتاحية التنافسية, كما يمكنك معرفة كم تكلفة المنافسين على الإعلانات على ادورد Adwords واكتشاف الكلمات المفتاحية والنصوص الإعلانية التي يستخدمونها في إعلاناتهم.
الموقع : www.keywordspy.com
8- keywordCompetitor :
تساعدك على التجسس على الكلمات المفتاحية التي تستخدم في الإعلانات المدفوعة والسيو وأيضا التجسس على صفحات الهبوط أو الوسيطة landing page التي يستخدمها المنافسون للترويج لعروضهم وتحتوي أيضا على أداة لرصد المنافسين.
9- SEMrush :
تساعد على رصد وضع الكلمات المفتاحية في محركات البحث ورؤية المنافسين عليها وأيضا تشمل أدوات سيو SEO, يمكنك أخذ معلومات مجانية من الصفحات الرئيسية ويمكنك ترقية عضويتك بمبلغ 69.65 دولار شهريا للحصول على معلومات أكثر.
الموقع : www.semrush.com
10- Spyfu :
أداة تساعدك على تحميل الكلمات المفتاحية التي يستخدمها المنافسين على محركات البحث والإعلانات المدفوعة.
الموقع : www.spyfu.com
11- The Search Monitor :
أداة تتبع العلامات التجارية والمعلنين والمنافسين على محركات البحث ومواقع الإعلانات المدفوعة عبر المنطقة والمدينة والبلد والإستهداف الجغرافي.
الموقع : www.thesearchmonitor.com
12- alexa :
يعطيك معطيات عن المواقع المنافسة, ترتيبها بين المواقع في العالم, الكلمات المفتاحية, مصادر الزوار والترافيك, ...
الموقع : www.alexa.com
13- Google Alerts :
أداة تساعدك في معرفة كل شئ عن منافسيك ومواقعهم وما ينشرونه في مواقع أخرى وانطباعات الناس عن منتجاتهم تصلك إلى بريدك الإلكتروني.
الموقع : www.google.com/alerts
14- Mention :
أداة تقوم برصد وسائل الإعلام والشبكات الإجتماعية, وتقوم بتتبع المحتوى المنشور في مواقع الويب ومواقع الأخبار والمنتديات ب 42 لغة إضافة إلى إعطائك تقرير في الوقت الحقيقي.
الموقع : en.mention.com
15- socialmention :
أداة تتبع العلامات التجارية, فيديوهات, صور, مقالات, أسئلة, استطلاعات الرأي وهي أداة جيدة جدا.
الموقع : socialmention.com
16- commun.it :
أداة تساعدك على جمع كل ما نشر في تويتر في لوحة تحكم واحدة, بحيث يتيح ذلك للمسوقين تحليل العلاقات وأخد رؤى واضحة عن مشاريعهم.
الموقع : commun.it
17- Fanpage Karma :
أخذ معطيات كبيرة عن أي صفحة في فيس بوك, تحليل دقيق عن منافسيك مع تقارير هامة تساعدك في تحسين مشاريعك على فيس بوك.
الموقع : www.fanpagekarma.com
18- Social Searcher :
يوفر كل الأبحاث والتغريدات في تويتر, فيس بوك, جوجل بلس, لينكدين, ما عليك سوى ادخال أسماء منافسيك لمعرفة حساباتهم.
الموقع : www.social-searcher.com

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

الأربعاء، 24 يونيو 2015

إضافة رائعة للمواقع لجلب وعرض المواضيع حسب التسميات

إضافة رائعة للمواقع لجلب وعرض المواضيع حسب التسميات

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

■ صورة للإضافة :
إضافة رائعة للمواقع لجلب وعرض المواضيع حسب التسميات
■ مميزاتها :
 -- شكل جميل.
 -- متجاوبة مع كل الشاشات.
 -- القدرة على جلب المواضيع من أي موقع.
 -- الإعتماد على التسميات في عرض المواضيع,
■ طريقة الإضافة :
1- ابحث عن </body> وأضف فوقه الكود التالي :
<script type='text/javascript'>
var multiFeed = {
feedsUri: [
{
name: &quot;
تطوير&quot;,
url: &quot;
http://www.mtawroon.com&quot;,
tag: &quot;
تطوير&quot;
},
{
name: &quot;
قوالب&quot;,
url: &quot;
http://www.mtawroon.com&quot;,
tag: &quot;
قوالب&quot;
},
{
name: &quot;
سيو&quot;,
url: &quot;
http://www.mtawroon.com&quot;,
tag: &quot;
سيو&quot;
}
],
numPost: 4,
showThumbnail: true,
showDate: true,
showSummary: true,
summaryLength: 80,
titleLength: &quot;auto&quot;,
thumbSize: 72,
containerId: &quot;feed-list-container&quot;,
readMore: {
text: &quot;مزيد من المواضيع&quot;,
endParam: &quot;?max-results=20&quot;
}
};
</script>
<script src='https://dl.dropboxusercontent.com/u/280199022/feed.js' type='text/javascript'/>
مع تغيير:
 الأحمر = رابط مدونتك أو الموقع الذي تريد جلب المواضيع منه.
 البرتقالي = التسميات.
 الأزرق = العنوان.
2- ابحث عن */]]></b:skin> وأضف فوقه الكود التالي :
 .post-body *,.post-body *:after,.post-body *:before{box-sizing:initial;-webkit-box-sizing:initial;-moz-box-sizing:initial;}
.list-entries{display:table;background:#fdfdfd;margin:1.5% 1%;width:31.3%;float:left;font-size:80%;}
.list-entries ul,.list-entries li{margin:0;list-style:none;padding: 0;}
#feed-list-container ul li{background:#fdfdfd;padding:15px;line-height:normal;border:1px solid #eee;border-top:0;transition:all .3s;text-align: right;}
#feed-list-container ul li:hover{background:#fff;}
#feed-list-container ul li:last-child{border-bottom:0;}
.list-entries .main-title{padding:0;overflow:hidden;}
.list-entries .main-title h4{position:relative;display:block;font:inherit;padding:1em 3.5em;background-color:#444;color:#fff;margin:0;line-height:normal;font-size:16px;margin-top:0!important}
.list-entries .main-title h4:after{display:inline-block;content:"\f016";font-family:fontAwesome;font-size:17.4px;font-style:normal;background-color:#333;color:#fff;top:0;right:0;padding:1.1em 1em;position:absolute;font-weight:400}
.list-entries .title a{font-size:14px;text-decoration:none;color:#333;transition:all .3s;}
.list-entries .title a:hover{color:#4f93c5}
.summary span {font-size: 11px;}
.list-entries img,.list-entries .fake-img{border:none;background-color:#333;margin:0 0 0 1em;padding:0;float:right}
.list-entries .summary{overflow:hidden;color:#999}
.list-entries .more-link{border-bottom:none;}
.list-entries .more-link a{display:block;line-height:2em;height:3.5em;overflow:hidden;text-decoration:none;background-color:#444;padding:0.8em 1.5em;position:relative;font-weight:400;color:#fff;transition:all .3s;font-size: 14px;}
.list-entries .more-link a:hover{background-color:#0099CC;color:#fff;}
.list-entries .more-link a:after{display:inline-block;content:"\f053";font-family:fontAwesome;font-size:16.4px;font-style:normal;background-color:#333;color:#ccc;top:0;left:0;padding:0.8em 1.25em;position:absolute;font-weight:400;transition:all .3s;}
.list-entries .more-link a:hover:after{background-color:#008CBE;color:#fff;}
.widget .post-body ul, .widget .post-body ol {position:relative;}

@media (max-width:640px){
.list-entries {width:100%;}
.list-entries{margin:2.5% 1%;}}
3- ابحث عن <div class='outer-wrapper' وأضف أسفله الكود التالي واحفظ القالب :
 <b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='feed-list-container'/>
</b:if>
إلى هنا انتهى درسنا الذي كان حول إضافة رائعة للمواقع لجلب وعرض المواضيع حسب التسميات أتمنى أن أكون قد أفذتكم لا تنسو مشاركة الموضوع لكي أقدم لكم الجديد.

الثلاثاء، 23 يونيو 2015

قالب برو أيوب نسخة 2015 الإحترافية جاهزة للتحميل

قالب برو أيوب  نسخة 2015 الإحترافية جاهزة للتحميل

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

◆ الواجهة كاملة :
مميزات القالب :
 -- ألوان متناسقة.
 -- شكل التدوينات احترافي.
 -- قائمة أفقية احترافية.
 -- مربع بحث احترافي.
 -- إضافات رائعة.
 -- متجاوب 100%.
 -- سيو 100%.
 -- تنظيم مميز.
الأن نأتي للتحميل والمعاينة.




  • معاينة التحميل على mediafire


  • ملحوظة لتشغيل المواضيع في الرئيسية اتبع الشرح الموجود هنا
    كنتم مع تدوينة قدمت لكم فيه قالب برو ايوب أخر نسخة احترافي للمواقع التقنية والإخبارية 2015.
    أتمنى أن تتفاعلوا مع التدوينة إن أردتم المزيد.

    الأحد، 21 يونيو 2015

    إضافة أزرار النشر في المواقع الإجتماعية منبثقة


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

    ● طريقة الإضافة :
    1- ابحث عن */]]></b:skin> واضف فوقه الكود التالي :
     .socialPlugin {
    text-align: center;
    width: 40px;
    margin: 20px auto 0;
    height: 30px;
    display: block;
    }

    .socialPlugin .showSocialButtons {
    font-size:15px;
    cursor:pointer;
    padding:0.333em 0.667em;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.3);
    color: rgba(0,0,0,0.7);
    }

    .socialPlugin .socials {
    width: 260px;
    color: white;
    line-height: 10px;
    text-align: center;
    margin-top: -64px;
    margin-left: -35px;
    display:block;
    transform-origin:50% 0%;

    -webkit-transform: scale(0) translateY(-150px);
    -moz-transform:scale(0) translateY(-150px);
    -o-transform:scale(0) translateY(-150px);
    transform:scale(0) translateY(-150px);
    -webkit-transition:.5s;
    -moz-transition:.5s;
    -o-transition:.5s;
    transition:.5s;
    opacity:0;
    float:left;
    }

    .socialPlugin .socials:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    margin: 4px auto;
    height: 0;
    width: 0;
    border-left: 15px solid rgba(0, 0, 0, 0);
    border-right: 15px solid rgba(0, 0, 0, 0);
    border-top: 15px solid #becade;
    }

    @media all and (max-width: 992px) {
    .socialPlugin .socials {
    margin-top: -90px;
    }
    }


    /* Toggled State */

    .socialPlugin .socials.opened {
    opacity:1;
    -webkit-transform: scale(1) translateY(-60px);
    -moz-transform:scale(1) translateY(-60px);
    -o-transform:scale(1) translateY(-60px);
    transform:scale(1) translateY(-60px);
    -webkit-transition:.5s;
    -moz-transition:.5s;
    -o-transition:.5s;
    transition:.5s;
    }


    /* Share buttons */

    .socialPlugin .socials .fa {
    height: 2.5em;
    font-size: 2em;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    width: 2.5em;
    -webkit-backface-visibility: hidden;
    }

    .socialPlugin .socials .fa:before, .socialPlugin .socials .fa:after {
    left: 0;
    position: absolute;
    text-align: center;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    top: 50%;
    width: 100%;
    }

    .socialPlugin .socials .fa:before {
    color: white;
    -webkit-transform: translate3D(0, -50%, 0);
    -ms-transform: translate3D(0, -50%, 0);
    transform: translate3D(0, -50%, 0);
    z-index: 2;
    }

    .socialPlugin .socials .fa:after {
    padding-bottom: 25%;
    padding-top: 300%;
    top: 0;
    }

    .socialPlugin .socials .fa:hover:after {
    -webkit-transform: translate3D(0, -73%, 0);
    -ms-transform: translate3D(0, -73%, 0);
    transform: translate3D(0, -73%, 0);
    }

    .socialPlugin .socials .fa:hover:before {
    -webkit-transform: translate3D(0, -250%, 0);
    -ms-transform: translate3D(0, -250%, 0);
    transform: translate3D(0, -250%, 0);
    }

    /* The social icons */

    .socialPlugin .socials .fa-twitter:after {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(25%, #00acee), color-stop(75%, #ffffff));
    background-image: -webkit-linear-gradient(#00acee 25%, #ffffff 75%);
    background-image: linear-gradient(#00acee 25%, #ffffff 75%);
    content: "\f099";
    color: #00acee;
    }

    .socialPlugin .socials .fa-facebook:after {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(25%, #3b5998), color-stop(75%, #ffffff));
    background-image: -webkit-linear-gradient(#3b5998 25%, #ffffff 75%);
    background-image: linear-gradient(#3b5998 25%, #ffffff 75%);
    content: "\f09a";
    color: #3b5998;
    }

    .socialPlugin .socials .fa-google-plus:after {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(25%, #bb0000), color-stop(75%, #ffffff));
    background-image: -webkit-linear-gradient(#bb0000 25%, #ffffff 75%);
    background-image: linear-gradient(#bb0000 25%, #ffffff 75%);
    content: "\f0d5";
    color: #bb0000;
    }

    .socialPlugin .socials .fa-pinterest:after {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(25%, #cb2027), color-stop(75%, #ffffff));
    background-image: -webkit-linear-gradient(#cb2027 25%, #ffffff 75%);
    background-image: linear-gradient(#cb2027 25%, #ffffff 75%);
    content: "\f0d2";
    color: #cb2027;
    }

    .socialPlugin .socials .fa-tumblr:after {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(25%, #2C4762), color-stop(75%, #ffffff));
    background-image: -webkit-linear-gradient(#2C4762 25%, #ffffff 75%);
    background-image: linear-gradient(#2C4762 25%, #ffffff 75%);
    content: "\f173";
    color: #2C4762;
    }
    2- ابحث عن </body> وأضف فوقه الكود التالي :
    <script type='text/javascript'>
    /*<![CDATA[*/
    $(function (){

    var url = '';

    var options = {

    twitter: {
    text: ' ',
    via: ''
    },

    facebook : true,
    googlePlus : true
    };

    $('.socialShare').shareButtons(url, options);

    });
    /*]]>*/
    </script>
    3- أضف هذا الكود فوق </body> أيضا :
    <script src='https://dl.dropboxusercontent.com/u/280199022/sov/plugin.js'/>
    4- وهي الخطوة الأخيرة:
      -- ابحث عن <data:post.body/>
      -- أضف بعدها كود HTML التالي :
      -- قم بحفظ القالب
    <span class='socialShare socialPlugin'></span>

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

    الجمعة، 19 يونيو 2015

    أفضل المواقع للحصول على jquery plugins

    أفضل المواقع للحصول على jquery plugins

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


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

    جدول أسعار احترافي متجاوب مع جميع الشاشات

    جدول أسعار احترافي متجاوب مع جميع الشاشات

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


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

    ● طريقة التركيب :
    1- ضع هذا الكود مع ملفات CSS في موقعك.
    .wrap{
    margin: 0 auto;
    width: 80%;
    }
    body a{
    transition:0.5s all ease;
    -webkit-transition:0.5s all ease;
    -moz-transition:0.5s all ease;
    -o-transition:0.5s all ease;
    -ms-transition:0.5s all ease;
    }
    .pop_up{
    border: 9px solid#485460;
    border-radius: 1em;
    -o-border-radius: 1em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    }
    /* Styles for dialog window */
    #small-dialog,#small-dialog1,#small-dialog2,#small-dialog3,#small-dialog4,#small-dialog5{
    background: white;
    padding:20px;
    text-align: left;
    max-width: 650px;
    margin: 40px auto;
    position: relative;
    text-align:center;
    border: 9px solid#eee;
    border-radius: 1em;
    -o-border-radius: 1em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    }
    /*Pricing table and price blocks*/

    .price-head {
    margin-bottom: 2em;
    }
    .price-head h1 {
    text-align: center;
    margin-top: 1em;
    font-size: 3em;
    color: #05AEA7;
    }
    .price-head h3 {
    color: #404042;
    font-size: 3em;
    text-decoration: none;
    font-weight: 700;
    }
    .pricing-grids {
    margin-bottom: 4em;
    }
    /*----*/
    .pricing-grid1,.pricing-grid2,.pricing-grid3 {
    width: 31.5%;
    float: left;
    text-align: center;
    margin-right: 2%;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    padding: 0;
    border: none;
    border-radius: 0.7em;
    -webkit-border-radius: 0.7em;
    -o-border-radius: 0.7em;
    -moz-border-radius: 0.7em;
    }
    .pricing-grid3{
    margin-right: 0;
    }
    .pricing-grid1:hover,.pricing-grid2:hover,.pricing-grid3:hover {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    z-index: 1;
    border: none;
    }
    .pricing-grid1:nth-child(3){
    margin-right:0;
    }
    .price-value h2 a,.price-value.two h3 a,.price-value.three h4 a{
    font-size: 1.8em;
    color:#fff;
    }
    .price-value,.price-value.two,.price-value.three {
    background: #512884;
    padding: 2.8em 1.8em 2em;
    border-bottom:2px solid#ffd500;
    border-top-left-radius:0.7em;
    -webkit-border-top-left-radius:0.7em;
    -o-border-top-left-radius: 0.7em;
    -moz-border-top-left-radius:0.7em;
    border-top-right-radius:0.7em;
    -webkit-border-top-right-radius:0.7em;
    -o-border-top-right-radius:0.7em;
    -moz-border-top-left-radius: 0.7em;
    position: relative;
    }
    .price-value.two{
    background:#2b2b33;
    border-bottom:2px solid#fd6e70;
    }
    .price-value.three {
    background: #04dbdd;
    border-bottom:2px solid#028f87;
    }
    .price-value ul,.pricing-grid1 ul,.pricing-grid2 ul,.pricing-grid3 ul{
    padding: 0;
    }
    .price-value ul li,.pricing-grid1,.pricing-grid2 ul li,.pricing-grid3 ul li {
    list-style: none;
    }
    .price-value ul li{
    list-style: none;
    }
    .price-value h5 span{
    color: #fbd707;
    font-size: 19px;
    }
    .price-value lable{
    color: #817d94;
    font-size: 17px;
    }
    .price-value.two h5 span{
    color:#fe6d72;
    }
    .price-value.two h5 lable{
    color:#8c8c94;
    }
    .price-value.three h5 span{
    color: #018f90;
    }
    .price-value.three h5 lable{
    color:#9CF7F8;
    }
    .price-value h5 {
    padding: 11px 0;
    }
    .sale-box,.sale-box.two,.sale-box.three{
    position: absolute;
    top: 0;
    overflow: hidden;
    height: 130px;
    width: 143px;
    text-align: center;
    z-index: 0;
    right:0;
    border-top-right-radius: 0.7em;
    -o-border-top-right-radius: 0.7em;
    -moz-border-top-right-radius: 0.7em;
    -webkit-border-top-right-radius: 0.7em;
    }
    .sale-box span.on_sale{
    font-size: 14px;
    color: #444;
    background: #ffd400;
    text-transform: uppercase;
    padding: 58px 35px 17px 40px;
    width: 281px;
    text-align: center;
    display: block;
    position: absolute;
    left: -47px;
    top: -41px;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-transform: rotate(-44deg);
    -ms-transform: rotate(-44deg);
    transform: rotate(40deg);
    box-shadow: 3px -4px 13px 3px rgba(0,0,0,0.75);
    }
    .sale-box.two.sale-box span.on_sale{
    background: #fa6e6f;
    }
    .sale-box.three.sale-box span.on_sale{
    background:#05AEA7;
    }
    .pricing-grid1 ul li a,.pricing-grid2 ul li a,.pricing-grid3 ul li a{
    color: #C7C4C4;
    font-size: 15px;
    text-align: center;
    display: block;
    padding: 16px 0;
    text-decoration: none;
    font-weight: 400;
    }
    .pricing-grid1 ul li.whyt a,.pricing-grid2 ul li.whyt a,.pricing-grid3 ul li.whyt a{
    background:#f4f4f4;
    }
    .pricing-grid1:hover div.price-bg ul li a,.pricing-grid1:hover div.price-value h3 a{
    color:#512884;
    }
    .pricing-grid2:hover div.price-bg ul li a,.pricing-grid2:hover div.price-value h3 a{
    color:#fa6e6f;
    }
    .pricing-grid3:hover div.price-bg ul li a,.pricing-grid3:hover div.price-value h3 a{
    color:#04dbdd;
    }
    .price-bg {
    background: #fff;
    }
    .price-bg ul {
    padding: 0;
    }
    .price-bg ul li{
    list-style: none;
    }
    .cart1,.cart2,.cart3{
    padding: 2.7em 0em 2.7em;
    display: block;
    border-bottom: 2px solid#ffd500;
    }
    .cart2{
    border-bottom: 2px solid#f96d70;
    }
    .cart3{
    border-bottom: 2px solid#04dbdd;
    }
    .cart1 a,.cart2 a,.cart3 a{
    color: #FFF;
    font-size: 0.9em;
    font-weight: 500;
    padding: 0.8em 2em;
    text-decoration: none;
    background: #f7d30b;
    text-transform:uppercase;
    -webkit-appearance:none;
    border-radius:1em;
    -webkit-border-radius:1em;
    -o-border-radius:1em;
    -moz-border-radius:1em;
    outline: none;
    }
    .cart2 a{
    background:#fa6e6f;
    }
    .cart3 a{
    background: #04dbdd;
    }
    .cart1 a:hover,.cart2 a:hover,.cart3 a:hover{
    color: #2b2b33;
    }
    /*----*/
    /*---start-pricing-tabels-----*/
    .payment-online-form-left{
    }
    form li {
    list-style: none;
    }
    form ul {
    padding:0;
    }
    .payment-online-form-left h4{
    font-size: 1.8em;
    color: #222222;
    padding: 0.5em 0;
    text-align: left;
    }
    .payment-online-form-left span{
    vertical-align:sub;
    margin-right: 5px;
    }
    .payment-online-form-left form{
    padding:0 3%;
    }
    .payment-online-form-left input[type="text"]{
    padding: 1em 1em;
    color: #485460;
    width: 42%;
    margin: 0.5em 0;
    border: 1px solid;
    outline: none;
    transition: border-color 0.3s;
    -o-transition: border-color 0.3s;
    -ms-transition: border-color 0.3s;
    -moz-transition: border-color 0.3s;
    -webkit-transition: border-color 0.3s;
    float: left;
    font-size: 0.9em;
    border-color: #EEE;
    -webkit-appearance:none;
    }
    .payment-online-form-left input[type="text"]:hover{
    border-color:#fa6e6f;
    }
    .text-box-dark{
    }
    .text-box-light{
    background: url(http://preview.w3layouts.com/demos/flat_pricing_tables_design/web/images/calender.png) no-repeat 95% 50%;
    cursor:pointer;
    position: relative;
    }
    .payment-online-form-left ul li:first-child input[type="text"]{
    margin-right: 5%;
    }
    .payment-online-form-left input[type="text"]:active, .payment-online-form-left input[type="text"]:hover {
    border-color:#fa6e6f ;
    color:#fa6e6f;
    }
    .shipping{
    width: 32px;
    height: 32px;
    display: inline-block;
    background: url(http://preview.w3layouts.com/demos/flat_pricing_tables_design/web/images/icon.png) no-repeat -111px -26px;
    }
    .payment{
    width: 32px;
    height: 32px;
    display: inline-block;
    background: url(http://preview.w3layouts.com/demos/flat_pricing_tables_design/web/images/icon.png) no-repeat -152px -30px;

    }
    .payment-date-section{
    background: url(http://preview.w3layouts.com/demos/flat_pricing_tables_design/web/images/calender.png) no-repeat #fff 50%;
    }
    .payment-sendbtns{
    float:right;
    margin: 2em 0 1.5em;
    }
    .payment-sendbtns input[type="reset"]{
    background:#fa6e6f;
    padding: 0.7em 1em;
    border: none;
    color: #FFF;
    cursor: pointer;
    font-size: 1.2em;
    display: block;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    outline:none;
    }
    .payment-sendbtns input[type="reset"]:hover{
    color:#FFF;
    background:#464C54;
    }
    .payment-sendbtns input[type="submit"]{
    background:#464C54;
    padding: 0.7em 1em;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 1.2em;
    display: block;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-appearance:none;
    outline:none;
    }
    .payment-sendbtns input[type="submit"]:hover{
    color:#fff;
    background:#fa6e6f;
    }
    .payment-sendbtns li{
    display:inline-block;
    }
    .payment-type li{
    display:inline-block;
    }
    .payment-online-form-right{
    background: #2B2937;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    border-bottom: 4px solid #1A1822;
    }
    /*---start-checkbox----*/
    input[type=checkbox].css-checkbox1,input[type=checkbox].css-checkbox2{
    display: none;
    }
    input[type=checkbox].css-checkbox1 + label.css-label1 {
    height:30px;
    width:30px;
    display: inline-block;
    line-height: 18px;
    background-repeat: no-repeat;
    background-position: 0 0;
    vertical-align: super;
    cursor: pointer;
    background: url(http://preview.w3layouts.com/demos/flat_pricing_tables_design/web/images/icon.png) no-repeat -188px -25px;
    }
    input[type=checkbox].css-checkbox1:checked + label.css-label1 {
    background: url(http://preview.w3layouts.com/demos/flat_pricing_tables_design/web/images/icon.png) no-repeat -215px -25px;
    }
    input[type=checkbox].css-checkbox2 + label.css-label2 {
    height: 30px;
    width: 30px;
    display: inline-block;
    line-height: 18px;
    background-repeat: no-repeat;
    background-position: -20px 0px;
    vertical-align: super;
    cursor: pointer;
    background:url(http://preview.w3layouts.com/demos/flat_pricing_tables_design/web/images/icon.png) no-repeat -218px -24px;
    }
    input[type=checkbox].css-checkbox2:checked + label.css-label2 {
    background: url(http://preview.w3layouts.com/demos/flat_pricing_tables_design/web/images/icon.png) no-repeat -190px -24px;

    }
    .visa{
    display: inline-block;
    width: 32px;
    height: 32px;
    background:url(http://preview.w3layouts.com/demos/flat_pricing_tables_design/web/images/icon.png) no-repeat -32px -28px;
    }
    .paypal{
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url(http://preview.w3layouts.com/demos/flat_pricing_tables_design/web/images/icon.png) no-repeat -71px -26px;

    }
    .payment-online-form-right{
    float: right;
    width: 30%;
    background: #2B2937;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    border-bottom: 4px solid #1A1822;
    padding-bottom: 2em;
    }
    .payment-online-form-right a:hover{
    color:#1ABC9C;
    }
    .payment-online-form-right ul li{
    display:block;
    padding: 0.5em;
    }
    .payment-online-form-right ul li a{
    color:#9095AA;
    }
    .payment-online-form-right h4{
    color: #FFF;
    font-size: 1em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(144, 149, 170, 0.22);
    padding: 0.8em;
    }
    .payment-online-form-right ul {
    padding: 0px 1em;
    }
    .payment-online-form-right h5{
    color: #FFF;
    padding: 0.5em 0.8em 0.4em;
    font-size: 1em;
    }
    .payment-type {
    border-top: 1px solid rgba(144, 149, 170, 0.22);
    margin-top: 3%;
    text-align: left;
    }
    input[type=checkbox].css-checkbox3,input[type=checkbox].css-checkbox4,input[type=checkbox].css-checkbox5,input[type=checkbox].css-checkbox6{
    display: none;
    }
    input[type=checkbox].css-checkbox3 + label.css-label3 {
    height: 22px;
    width: 21px;
    display: inline-block;
    line-height: 18px;
    background-repeat: no-repeat;
    background-position: 0 -38px;
    vertical-align: middle;
    cursor: pointer;
    background-image: url(http://preview.w3layouts.com/demos/flat_pricing_tables_design/web/images/filter-bg.png);
    }
    input[type=checkbox].css-checkbox3:checked + label.css-label3 {
    background-position: 0px 0px;
    }
    input[type=checkbox].css-checkbox4 + label.css-label4 {
    height: 22px;
    width: 21px;
    display: inline-block;
    line-height: 18px;
    background-repeat: no-repeat;
    background-position: 0 0px;
    vertical-align: middle;
    cursor: pointer;
    background-image: url(http://preview.w3layouts.com/demos/flat_pricing_tables_design/web/images/filter-bg.png);
    }
    input[type=checkbox].css-checkbox4:checked + label.css-label4 {
    background-position: 0px -38px;
    }
    input[type=checkbox].css-checkbox5 + label.css-label5 {
    height: 22px;
    width: 21px;
    display: inline-block;
    line-height: 18px;
    background-repeat: no-repeat;
    background-position: 0 -38px;
    vertical-align: middle;
    cursor: pointer;
    background-image: url(http://preview.w3layouts.com/demos/flat_pricing_tables_design/web/images/filter-bg.png);
    }
    input[type=checkbox].css-checkbox5:checked + label.css-label5 {
    background-position: 0px 0px;
    }
    input[type=checkbox].css-checkbox6 + label.css-label6 {
    height: 22px;
    width: 21px;
    display: inline-block;
    line-height: 18px;
    background-repeat: no-repeat;
    background-position: 0 0px;
    vertical-align: middle;
    cursor: pointer;
    background-image: url(http://preview.w3layouts.com/demos/flat_pricing_tables_design/web/images/filter-bg.png);
    }
    input[type=checkbox].css-checkbox6:checked + label.css-label6 {
    background-position: 0px -38px;
    }
    /*-----*/
    /**

    /**
    * Fade-zoom animation for first dialog
    */

    /* start state */
    .my-mfp-zoom-in #small-dialog {
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
    }
    /* animate in */
    .my-mfp-zoom-in.mfp-ready #small-dialog {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    }
    /* animate out */
    .my-mfp-zoom-in.mfp-removing #small-dialog {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0;
    }
    /* Dark overlay, start state */
    .my-mfp-zoom-in.mfp-bg {
    opacity: 0;
    -webkit-transition: opacity 0.3s ease-out;
    -moz-transition: opacity 0.3s ease-out;
    -o-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
    }
    /* animate in */
    .my-mfp-zoom-in.mfp-ready.mfp-bg {
    opacity: 0.8;
    }
    /* animate out */
    .my-mfp-zoom-in.mfp-removing.mfp-bg {
    opacity: 0;
    }
    /**
    /* Magnific Popup CSS */
    .mfp-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1042;
    overflow: hidden;
    position: fixed;
    background: #0b0b0b;
    opacity: 0.8;
    filter: alpha(opacity=80); }

    .mfp-wrap {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1043;
    position: fixed;
    outline: none !important;
    -webkit-backface-visibility: hidden; }

    .mfp-container {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0 8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }

    .mfp-container:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle; }

    .mfp-align-top .mfp-container:before {
    display: none; }

    .mfp-content {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    text-align: left;
    z-index: 1045; }

    .mfp-inline-holder .mfp-content,
    .mfp-ajax-holder .mfp-content {
    width: 100%;
    cursor: auto; }

    .mfp-ajax-cur {
    cursor: progress; }

    .mfp-zoom-out-cur,
    .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: -moz-zoom-out;
    cursor: -webkit-zoom-out;
    cursor: zoom-out; }
    .mfp-zoom {
    cursor: pointer;
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in; }

    .mfp-auto-cursor .mfp-content {
    cursor: auto; }

    .mfp-close,
    .mfp-arrow,
    .mfp-preloader,
    .mfp-counter {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none; }

    .mfp-loading.mfp-figure {
    display: none; }

    .mfp-hide {
    display: none !important; }
    .mfp-content iframe{
    width:100%;
    min-height:500px;
    }
    .mfp-preloader {
    color: #cccccc;
    position: absolute;
    top: 50%;
    width: auto;
    text-align: center;
    margin-top: -0.8em;
    left: 8px;
    right: 8px;
    z-index: 1044; }

    .mfp-preloader a {
    color: #cccccc; }

    .mfp-preloader a:hover {
    color: white; }

    .mfp-s-ready .mfp-preloader {
    display: none; }

    .mfp-s-error .mfp-content {
    display: none; }

    button.mfp-close,
    button.mfp-arrow {
    overflow: visible;
    cursor: pointer;
    border: 0;
    background:#EEEEEE;
    -webkit-appearance: none;
    display: block;
    padding: 0;
    z-index: 1046; }
    button::-moz-focus-inner {
    padding: 0;
    border: 0; }

    .mfp-close {
    width: 44px;
    height: 44px;
    line-height: 44px;
    position: absolute;
    right: 0px;
    top:0px;
    text-decoration: none;
    text-align: center;
    padding: 0 0 18px 10px;
    color: white;
    font-style: normal;
    font-size: 28px;
    outline:none;
    border-radius: 4px;
    -o-border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    }
    .mfp-close:hover, .mfp-close:focus {
    opacity: 1; }

    .mfp-close-btn-in .mfp-close {
    color: #333333; }

    .mfp-image-holder .mfp-close,
    .mfp-iframe-holder .mfp-close {
    color: white;
    right: -6px;
    text-align: right;
    padding-right: 6px;
    width: 100%;
    }
    .image-top img{
    width:100%;
    }
    .image-top p{
    text-align: justify;
    padding:2% 0;
    font-size:15px;
    }
    .image-top h3 {
    font-size: 1.5em;
    font-weight: 500;
    margin: 16px 0px 0px 0px;
    color:#3F4244;
    }

    .footer {
    padding: 1em 0;
    text-align: center;
    }
    .footer p {
    font-size:0.9em;
    color:#fa6e6f;
    font-weight: 400;
    text-transform: uppercase;
    }
    .footer p a{
    color:#0fc7c9;
    }
    .footer p a:hover{
    color: #fa6e6f;
    }
    /*--------------*/
    @media(max-width:1366px){
    .pricing-grid1 ul li a, .pricing-grid2 ul li a, .pricing-grid3 ul li a {
    font-size: 17px;
    }
    }
    @media(max-width:1024px){
    .pricing-grid1 ul li a, .pricing-grid2 ul li a, .pricing-grid3 ul li a {
    font-size: 15px;
    }
    .price-value, .price-value.two, .price-value.three {
    padding: 2em 0 1em 0;
    }
    .price-value h2 a, .price-value.two h3 a, .price-value.three h4 a {
    font-size: 1.6em;
    }
    .price-head h1 {
    margin-top: 1em;
    font-size: 2.6em;
    }
    .pricing-grids {
    margin: 8% 0;
    }
    }
    @media(max-width:768px){
    .pricing-grid1 h3 a, .pricing-grid2 h3 a, .pricing-grid3 h3 a {
    padding: 0.4em 1em;
    font-size: 0.7em;
    }
    .pricing-grid1, .pricing-grid2, .pricing-grid3 {
    width: 55%;
    float: none;
    text-align: center;
    margin: 1em auto;
    }
    .price-head h1 {
    margin-top: 1em;
    font-size: 2.4em;
    }
    .cart1, .cart2, .cart3 {
    padding: 2em 0em 2em;
    }
    }
    @media(max-width:640px){
    .pricing-grid1 ul li a, .pricing-grid2 ul li a, .pricing-grid3 ul li a {
    font-size: 15px;
    }
    .pricing-grid1, .pricing-grid2, .pricing-grid3 {
    width: 65%;
    float: none;
    text-align: center;
    margin: 1em auto;
    }
    .pricing-grid1 ul li a, .pricing-grid2 ul li a, .pricing-grid3 ul li a {
    font-size: 15px;
    padding: 13px 0;
    }
    .payment-online-form-left input[type="text"] {
    padding: 1em 1em;
    width: 93%;
    }
    .payment-sendbtns {
    float: none;
    margin: 2em 0 1.5em;
    }
    }
    @media(max-width:480px){
    .pricing-grid1, .pricing-grid2, .pricing-grid3 {
    width: 81%;
    }
    .price-head h1 {
    margin-top: 1em;
    font-size: 2.1em;
    }
    .payment-online-form-left input[type="text"] {
    padding: 1em 1em;
    width: 91%;
    }
    .pop_up {
    border: 7px solid#485460;
    }
    }
    @media(max-width:320px){
    .pricing-grid1, .pricing-grid2, .pricing-grid3 {
    width: 100%;
    margin-right: 0;
    }
    .price-value h2 a, .price-value.two h3 a, .price-value.three h4 a {
    font-size: 1.2em;
    }
    .price-value h5 span,.price-value lable {
    font-size: 16px;
    }
    .price-head h1 {
    margin-top: 1em;
    font-size: 1.5em;
    }
    .payment-online-form-left input[type="text"] {
    padding: 0.8em 0.8em;
    width: 86%;
    font-size: 13px;
    margin: 3px;
    }
    .pop_up {
    border: 4px solid#485460;
    }
    .payment-online-form-left h4 {
    font-size: 1.4em;
    }
    .payment {
    background: url(http://preview.w3layouts.com/demos/flat_pricing_tables_design/web/images/icon.png) no-repeat -152px -21px;
    }
    .footer p {
    font-size: 0.9em;
    line-height: 1.5em;
    }
    ul.payment-sendbtns li {
    margin-top: 1em;
    }

    }

    2- ضع هذا الكود مع ملفات HTML في موقعك.
    <!--start-pricing-tablel-->
    <script type="text/javascript" src="https://tinyfeet.googlecode.com/svn-history/r220/trunk/trunk/src/static/js/modernizr.custom.53451.js"></script>

    <script>
    $(document).ready(function() {
    $('.popup-with-zoom-anim').magnificPopup({
    type: 'inline',
    fixedContentPos: false,
    fixedBgPos: true,
    overflowY: 'auto',
    closeBtnInside: true,
    preloader: false,
    midClick: true,
    removalDelay: 300,
    mainClass: 'my-mfp-zoom-in'
    });

    });
    </script>
    <div class="pricing-plans">
    <div class="wrap">
    <div class="price-head">
    <h1>جدول أسعار بتصميم الفلات</h1>
    </div>


    <div class="pricing-grids">
    <div class="pricing-grid1">
    <div class="price-value">
    <h2><a href="#"> أساسي</a></h2>
    <h5><span>$ 19.99</span><lable> / للشهر</lable></h5>
    <div class="sale-box">
    <span class="on_sale title_shop">جديد</span>
    </div>

    </div>
    <div class="price-bg">
    <ul>
    <li class="whyt"><a href="#">5GB مساحة القرص </a></li>
    <li><a href="#">10 أسماء نطاقات</a></li>
    <li class="whyt"><a href="#">5 بريد إلكتروني </a></li>
    <li><a href="#">50GB عرض النطاق الترددي الشهري </a></li>
    <li class="whyt"><a href="#">دعم كامل</a></li>
    </ul>
    <div class="cart1">
    <a class="popup-with-zoom-anim" href="#small-dialog">شراء</a>
    </div>
    </div>
    </div>
    <div class="pricing-grid2">
    <div class="price-value two">
    <h3><a href="#">قياسي</a></h3>
    <h5><span>$ 29.99</span><lable> / للشهر</lable></h5>
    <div class="sale-box two">
    <span class="on_sale title_shop">جديد</span>
    </div>

    </div>
    <div class="price-bg">
    <ul>
    <li class="whyt"><a href="#">10GB مساحة القرص </a></li>
    <li><a href="#">20 أسماء نطاقات</a></li>
    <li class="whyt"><a href="#">10 بريد إلكتروني </a></li>
    <li><a href="#">100GB عرض النطاق الترددي الشهري </a></li>
    <li class="whyt"><a href="#">دعم كامل</a></li>
    </ul>
    <div class="cart2">
    <a class="popup-with-zoom-anim" href="#small-dialog">شراء</a>
    </div>
    </div>
    </div>
    <div class="pricing-grid3">
    <div class="price-value three">
    <h4><a href="#">المفضل</a></h4>
    <h5><span>$ 49.99</span><lable> / للشهر</lable></h5>
    <div class="sale-box three">
    <span class="on_sale title_shop">جديد</span>
    </div>

    </div>
    <div class="price-bg">
    <ul>
    <li class="whyt"><a href="#">50GB مساحة القرص </a></li>
    <li><a href="#">50 أسماء نطاقات</a></li>
    <li class="whyt"><a href="#">20 بريد إلكتروني </a></li>
    <li><a href="#">300GB عرض النطاق الترددي الشهري </a></li>
    <li class="whyt"><a href="#">دعم كامل</a></li>
    </ul>
    <div class="cart3">
    <a class="popup-with-zoom-anim" href="#small-dialog">شراء</a>
    </div>
    </div>
    </div>
    <div class="clear"> </div>
    <!--pop-up-grid-->
    <div id="small-dialog" class="mfp-hide">
    <div class="pop_up">
    <div class="payment-online-form-left">
    <form>
    <h4><span class="shipping"> </span>شراء</h4>
    <ul>
    <li><input class="text-box-dark" type="text" value="Frist Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Frist Name';}"/></li>
    <li><input class="text-box-dark" type="text" value="Last Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Last Name';}"/></li>
    </ul>
    <ul>
    <li><input class="text-box-dark" type="text" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}"/></li>
    <li><input class="text-box-dark" type="text" value="Company Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Company Name';}"/></li>
    </ul>
    <ul>
    <li><input class="text-box-dark" type="text" value="Phone" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Phone';}"/></li>
    <li><input class="text-box-dark" type="text" value="Address" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Address';}"/></li>
    <div class="clear"> </div>
    </ul>
    <div class="clear"> </div>
    <ul class="payment-type">
    <h4><span class="payment"> </span> Payments</h4>
    <li><span class="col_checkbox">
    <input id="3" class="css-checkbox1" type="checkbox"/>
    <label for="3" name="demo_lbl_1" class="css-label1"> </label>
    <a class="visa" href="#"> </a>
    </span>

    </li>
    <li>
    <span class="col_checkbox">
    <input id="4" class="css-checkbox2" type="checkbox"/>
    <label for="4" name="demo_lbl_2" class="css-label2"> </label>
    <a class="paypal" href="#"> </a>
    </span>
    </li>
    <div class="clear"> </div>
    </ul>
    <ul>
    <li><input class="text-box-dark" type="text" value="Card Number" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Card Number';}"/></li>
    <li><input class="text-box-dark" type="text" value="Name on card" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name on card';}"/></li>
    <div class="clear"> </div>
    </ul>
    <ul>
    <li><input class="text-box-light hasDatepicker" type="text" id="datepicker" value="Expiration Date" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Expiration Date';}"/><em class="pay-date"/></li>
    <li><input class="text-box-dark" type="text" value="Security Code" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Security Code';}"/></li>
    <div class="clear"> </div>
    </ul>
    <ul class="payment-sendbtns">
    <li><input type="reset" value="Cancel"/></li>
    <li><input type="submit" value="Process order"/></li>
    </ul>
    <div class="clear"> </div>
    </form>
    </div>
    </div>
    </div>
    <!--pop-up-grid-->
    </div>
    <div class="clear"> </div>

    </div>

    </div>
    <!--//End-pricingplans-->
    هكذا تكون قد أضفت جدول الأسعار لموقعك يكفيك التعديل على العضويات ومميزاتها.

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

    الأربعاء، 17 يونيو 2015

    أفضل تأثيرات هوبر 2015 لمحبي الحركة


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


    الأن بعد الإضافة نأتي لطريقة التركيب والتي ستكون عبر خطوات بسيطة.

    طريقة إضافتها لمدونتكم :
    1- ابحث عن <head> أضف بعده الكود التالي :
    <link href='https://dl.dropboxusercontent.com/u/280199022/ab/normalize.css' rel='stylesheet' type='text/css'/>
    2- ابحث عن ]]></b:skin> أضف فوقه الكود التالي :
     @font-face {
    font-weight: normal;
    font-style: normal;
    font-family: 'feathericons';
    src:url('../fonts/feathericons/feathericons.eot?-8is7zf');
    src:url('../fonts/feathericons/feathericons.eot?#iefix-8is7zf') format('embedded-opentype'),
    url('../fonts/feathericons/feathericons.woff?-8is7zf') format('woff'),
    url('../fonts/feathericons/feathericons.ttf?-8is7zf') format('truetype'),
    url('../fonts/feathericons/feathericons.svg?-8is7zf#feathericons') format('svg');
    }

    .grid {
    position: relative;
    margin: 0 auto;
    padding: 1em 0 4em;
    max-width: 1000px;
    list-style: none;
    text-align: center;
    }

    /* Common style */
    .grid figure {
    position: relative;
    float: left;
    overflow: hidden;
    margin: 10px 1%;
    min-width: 320px;
    max-width: 480px;
    max-height: 360px;
    width: 48%;
    background: #3085a3;
    text-align: center;
    cursor: pointer;
    }

    .grid figure img {
    position: relative;
    display: block;
    min-height: 100%;
    max-width: 100%;
    opacity: 0.8;
    }

    .grid figure figcaption {
    padding: 2em;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    }

    .grid figure figcaption::before,
    .grid figure figcaption::after {
    pointer-events: none;
    }

    .grid figure figcaption,
    .grid figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    /* Anchor will cover the whole item by default */
    /* For some effects it will show as a button */
    .grid figure figcaption > a {
    z-index: 1000;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0;
    opacity: 0;
    }

    .grid figure h2 {
    word-spacing: -0.15em;
    font-weight: 300;
    }

    .grid figure h2 span {
    font-weight: 800;
    }

    .grid figure h2,
    .grid figure p {
    margin: 0;
    }

    .grid figure p {
    letter-spacing: 1px;
    font-size: 68.5%;
    }

    /* Individual effects */

    /*---------------*/
    /***** Lily *****/
    /*---------------*/

    figure.effect-lily img {
    max-width: none;
    width: -webkit-calc(100% + 50px);
    width: calc(100% + 50px);
    opacity: 0.7;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-40px,0, 0);
    transform: translate3d(-40px,0,0);
    }

    figure.effect-lily figcaption {
    text-align: left;
    }

    figure.effect-lily figcaption > div {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2em;
    width: 100%;
    height: 50%;
    }

    figure.effect-lily h2,
    figure.effect-lily p {
    -webkit-transform: translate3d(0,40px,0);
    transform: translate3d(0,40px,0);
    }

    figure.effect-lily h2 {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    }

    figure.effect-lily p {
    color: rgba(255,255,255,0.8);
    opacity: 0;
    -webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
    transition: opacity 0.2s, transform 0.35s;
    }

    figure.effect-lily:hover img,
    figure.effect-lily:hover p {
    opacity: 1;
    }

    figure.effect-lily:hover img,
    figure.effect-lily:hover h2,
    figure.effect-lily:hover p {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    }

    figure.effect-lily:hover p {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
    }

    /*---------------*/
    /***** Sadie *****/
    /*---------------*/

    figure.effect-sadie figcaption::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
    background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
    content: '';
    opacity: 0;
    -webkit-transform: translate3d(0,50%,0);
    transform: translate3d(0,50%,0);
    }

    figure.effect-sadie h2 {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    color: #484c61;
    -webkit-transition: -webkit-transform 0.35s, color 0.35s;
    transition: transform 0.35s, color 0.35s;
    -webkit-transform: translate3d(0,-50%,0);
    transform: translate3d(0,-50%,0);
    }

    figure.effect-sadie figcaption::before,
    figure.effect-sadie p {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    }

    figure.effect-sadie p {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2em;
    width: 100%;
    opacity: 0;
    -webkit-transform: translate3d(0,10px,0);
    transform: translate3d(0,10px,0);
    }

    figure.effect-sadie:hover h2 {
    color: #fff;
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
    transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
    }

    figure.effect-sadie:hover figcaption::before ,
    figure.effect-sadie:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    }

    /*---------------*/
    /***** Roxy *****/
    /*---------------*/

    figure.effect-roxy {
    background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
    background: linear-gradient(45deg, #ff89e9 0%,#05abe0 100%);
    }

    figure.effect-roxy img {
    max-width: none;
    width: -webkit-calc(100% + 60px);
    width: calc(100% + 60px);
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-50px,0,0);
    transform: translate3d(-50px,0,0);
    }

    figure.effect-roxy figcaption::before {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    border: 1px solid #fff;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-20px,0,0);
    transform: translate3d(-20px,0,0);
    }

    figure.effect-roxy figcaption {
    padding: 3em;
    text-align: left;
    }

    figure.effect-roxy h2 {
    padding: 30% 0 10px 0;
    }

    figure.effect-roxy p {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-10px,0,0);
    transform: translate3d(-10px,0,0);
    }

    figure.effect-roxy:hover img {
    opacity: 0.7;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    }

    figure.effect-roxy:hover figcaption::before,
    figure.effect-roxy:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    }

    /*---------------*/
    /***** Bubba *****/
    /*---------------*/

    figure.effect-bubba {
    background: #9e5406;
    }

    figure.effect-bubba img {
    opacity: 0.7;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
    }

    figure.effect-bubba:hover img {
    opacity: 0.4;
    }

    figure.effect-bubba figcaption::before,
    figure.effect-bubba figcaption::after {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    }

    figure.effect-bubba figcaption::before {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0,1);
    transform: scale(0,1);
    }

    figure.effect-bubba figcaption::after {
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1,0);
    transform: scale(1,0);
    }

    figure.effect-bubba h2 {
    padding-top: 30%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,-20px,0);
    transform: translate3d(0,-20px,0);
    }

    figure.effect-bubba p {
    padding: 20px 2.5em;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);
    }

    figure.effect-bubba:hover figcaption::before,
    figure.effect-bubba:hover figcaption::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    }

    figure.effect-bubba:hover h2,
    figure.effect-bubba:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    }

    /*---------------*/
    /***** Romeo *****/
    /*---------------*/

    figure.effect-romeo {
    -webkit-perspective: 1000px;
    perspective: 1000px;
    }

    figure.effect-romeo img {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,0,300px);
    transform: translate3d(0,0,300px);
    }

    figure.effect-romeo:hover img {
    opacity: 0.6;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    }

    figure.effect-romeo figcaption::before,
    figure.effect-romeo figcaption::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 1px;
    background: #fff;
    content: '';
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
    }

    figure.effect-romeo:hover figcaption::before {
    opacity: 0.5;
    -webkit-transform: translate3d(-50%,-50%,0) rotate(45deg);
    transform: translate3d(-50%,-50%,0) rotate(45deg);
    }

    figure.effect-romeo:hover figcaption::after {
    opacity: 0.5;
    -webkit-transform: translate3d(-50%,-50%,0) rotate(-45deg);
    transform: translate3d(-50%,-50%,0) rotate(-45deg);
    }

    figure.effect-romeo h2,
    figure.effect-romeo p {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    }

    figure.effect-romeo h2 {
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
    transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
    }

    figure.effect-romeo p {
    padding: 0.25em 2em;
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,150%,0);
    transform: translate3d(0,-50%,0) translate3d(0,150%,0);
    }

    figure.effect-romeo:hover h2 {
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
    transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
    }

    figure.effect-romeo:hover p {
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,100%,0);
    transform: translate3d(0,-50%,0) translate3d(0,100%,0);
    }

    /*---------------*/
    /***** Layla *****/
    /*---------------*/

    figure.effect-layla {
    background: #18a367;
    }

    figure.effect-layla img {
    height: 390px;
    }

    figure.effect-layla figcaption {
    padding: 3em;
    }

    figure.effect-layla figcaption::before,
    figure.effect-layla figcaption::after {
    position: absolute;
    content: '';
    opacity: 0;
    }

    figure.effect-layla figcaption::before {
    top: 50px;
    right: 30px;
    bottom: 50px;
    left: 30px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0,1);
    transform: scale(0,1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    }

    figure.effect-layla figcaption::after {
    top: 30px;
    right: 50px;
    bottom: 30px;
    left: 50px;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1,0);
    transform: scale(1,0);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    }

    figure.effect-layla h2 {
    padding-top: 26%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    }

    figure.effect-layla p {
    padding: 0.5em 2em;
    text-transform: none;
    opacity: 0;
    -webkit-transform: translate3d(0,-10px,0);
    transform: translate3d(0,-10px,0);
    }

    figure.effect-layla img,
    figure.effect-layla h2 {
    -webkit-transform: translate3d(0,-30px,0);
    transform: translate3d(0,-30px,0);
    }

    figure.effect-layla img,
    figure.effect-layla figcaption::before,
    figure.effect-layla figcaption::after,
    figure.effect-layla p {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    }

    figure.effect-layla:hover img {
    opacity: 0.7;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    }

    figure.effect-layla:hover figcaption::before,
    figure.effect-layla:hover figcaption::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    }

    figure.effect-layla:hover h2,
    figure.effect-layla:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    }

    figure.effect-layla:hover figcaption::after,
    figure.effect-layla:hover h2,
    figure.effect-layla:hover p,
    figure.effect-layla:hover img {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
    }

    /*---------------*/
    /***** Honey *****/
    /*---------------*/

    figure.effect-honey {
    background: #4a3753;
    }

    figure.effect-honey img {
    opacity: 0.9;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
    }

    figure.effect-honey:hover img {
    opacity: 0.5;
    }

    figure.effect-honey figcaption::before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background: #fff;
    content: '';
    -webkit-transform: translate3d(0,10px,0);
    transform: translate3d(0,10px,0);
    }

    figure.effect-honey h2 {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1em 1.5em;
    width: 100%;
    text-align: left;
    -webkit-transform: translate3d(0,-30px,0);
    transform: translate3d(0,-30px,0);
    }

    figure.effect-honey h2 i {
    font-style: normal;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,-30px,0);
    transform: translate3d(0,-30px,0);
    }

    figure.effect-honey figcaption::before,
    figure.effect-honey h2 {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    }

    figure.effect-honey:hover figcaption::before,
    figure.effect-honey:hover h2,
    figure.effect-honey:hover h2 i {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    }

    /*---------------*/
    /***** Oscar *****/
    /*---------------*/

    figure.effect-oscar {
    background: -webkit-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
    background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);
    }

    figure.effect-oscar img {
    opacity: 0.9;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
    }

    figure.effect-oscar figcaption {
    padding: 3em;
    background-color: rgba(58,52,42,0.7);
    -webkit-transition: background-color 0.35s;
    transition: background-color 0.35s;
    }

    figure.effect-oscar figcaption::before {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    border: 1px solid #fff;
    content: '';
    }

    figure.effect-oscar h2 {
    margin: 20% 0 10px 0;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
    }

    figure.effect-oscar figcaption::before,
    figure.effect-oscar p {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(0);
    transform: scale(0);
    }

    figure.effect-oscar:hover h2 {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    }

    figure.effect-oscar:hover figcaption::before,
    figure.effect-oscar:hover p {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    }

    figure.effect-oscar:hover figcaption {
    background-color: rgba(58,52,42,0);
    }

    figure.effect-oscar:hover img {
    opacity: 0.4;
    }

    /*---------------*/
    /***** Marley *****/
    /*---------------*/

    figure.effect-marley figcaption {
    text-align: right;
    }

    figure.effect-marley h2,
    figure.effect-marley p {
    position: absolute;
    right: 30px;
    left: 30px;
    padding: 10px 0;
    }


    figure.effect-marley p {
    bottom: 30px;
    line-height: 1.5;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
    }

    figure.effect-marley h2 {
    top: 30px;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);
    }

    figure.effect-marley:hover h2 {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    }

    figure.effect-marley h2::after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 4px;
    background: #fff;
    content: '';
    -webkit-transform: translate3d(0,40px,0);
    transform: translate3d(0,40px,0);
    }

    figure.effect-marley h2::after,
    figure.effect-marley p {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    }

    figure.effect-marley:hover h2::after,
    figure.effect-marley:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    }

    /*---------------*/
    /***** Ruby *****/
    /*---------------*/

    figure.effect-ruby {
    background-color: #17819c;
    }

    figure.effect-ruby img {
    opacity: 0.7;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
    }

    figure.effect-ruby:hover img {
    opacity: 0.5;
    -webkit-transform: scale(1);
    transform: scale(1);
    }

    figure.effect-ruby h2 {
    margin-top: 20%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);
    }

    figure.effect-ruby p {
    margin: 1em 0 0;
    padding: 3em;
    border: 1px solid #fff;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,20px,0) scale(1.1);
    transform: translate3d(0,20px,0) scale(1.1);
    }

    figure.effect-ruby:hover h2 {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    }

    figure.effect-ruby:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0) scale(1);
    transform: translate3d(0,0,0) scale(1);
    }

    /*---------------*/
    /***** Milo *****/
    /*---------------*/

    figure.effect-milo {
    background: #2e5d5a;
    }

    figure.effect-milo img {
    max-width: none;
    width: -webkit-calc(100% + 60px);
    width: calc(100% + 60px);
    opacity: 1;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-30px,0,0) scale(1.12);
    transform: translate3d(-30px,0,0) scale(1.12);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    }

    figure.effect-milo:hover img {
    opacity: 0.5;
    -webkit-transform: translate3d(0,0,0) scale(1);
    transform: translate3d(0,0,0) scale(1);
    }

    figure.effect-milo h2 {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 1em 1.2em;
    }

    figure.effect-milo p {
    padding: 0 10px 0 0;
    width: 50%;
    border-right: 1px solid #fff;
    text-align: right;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-40px,0,0);
    transform: translate3d(-40px,0,0);
    }

    figure.effect-milo:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    }

    /*---------------*/
    /***** Dexter *****/
    /*---------------*/

    figure.effect-dexter {
    background: -webkit-linear-gradient(top, rgba(37,141,200,1) 0%, rgba(104,60,19,1) 100%);
    background: linear-gradient(to bottom, rgba(37,141,200,1) 0%,rgba(104,60,19,1) 100%);
    }

    figure.effect-dexter img {
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
    }

    figure.effect-dexter:hover img {
    opacity: 0.4;
    }

    figure.effect-dexter figcaption::after {
    position: absolute;
    right: 30px;
    bottom: 30px;
    left: 30px;
    height: -webkit-calc(50% - 30px);
    height: calc(50% - 30px);
    border: 7px solid #fff;
    content: '';
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,-100%,0);
    transform: translate3d(0,-100%,0);
    }

    figure.effect-dexter:hover figcaption::after {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    }

    figure.effect-dexter figcaption {
    padding: 3em;
    text-align: left;
    }

    figure.effect-dexter p {
    position: absolute;
    right: 60px;
    bottom: 60px;
    left: 60px;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,-100px,0);
    transform: translate3d(0,-100px,0);
    }

    figure.effect-dexter:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    }

    /*---------------*/
    /***** Sarah *****/
    /*---------------*/

    figure.effect-sarah {
    background: #42b078;
    }

    figure.effect-sarah img {
    max-width: none;
    width: -webkit-calc(100% + 20px);
    width: calc(100% + 20px);
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-10px,0,0);
    transform: translate3d(-10px,0,0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    }

    figure.effect-sarah:hover img {
    opacity: 0.4;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    }

    figure.effect-sarah figcaption {
    text-align: left;
    }

    figure.effect-sarah h2 {
    position: relative;
    overflow: hidden;
    padding: 0.5em 0;
    }

    figure.effect-sarah h2::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #fff;
    content: '';
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
    }

    figure.effect-sarah:hover h2::after {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    }

    figure.effect-sarah p {
    padding: 1em 0;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
    }

    figure.effect-sarah:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    }

    /*---------------*/
    /***** Zoe *****/
    /*---------------*/

    figure.effect-zoe figcaption {
    top: auto;
    bottom: 0;
    padding: 1em;
    height: 3.75em;
    background: #fff;
    color: #3c4a50;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
    }

    figure.effect-zoe h2 {
    float: left;
    }

    figure.effect-zoe p.icon-links a {
    float: right;
    color: #3c4a50;
    font-size: 1.4em;
    }

    figure.effect-zoe:hover p.icon-links a:hover,
    figure.effect-zoe:hover p.icon-links a:focus {
    color: #252d31;
    }

    figure.effect-zoe p.description {
    position: absolute;
    bottom: 8em;
    padding: 2em;
    color: #fff;
    text-transform: none;
    font-size: 90%;
    opacity: 0;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
    -webkit-backface-visibility: hidden; /* Fix for Chrome 37.0.2062.120 (Mac) */
    }

    figure.effect-zoe h2,
    figure.effect-zoe p.icon-links a {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,200%,0);
    transform: translate3d(0,200%,0);
    }

    figure.effect-zoe p.icon-links a span::before {
    display: inline-block;
    padding: 8px 10px;
    font-family: 'feathericons';
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }

    .icon-eye::before {
    content: '\e000';
    }

    .icon-paper-clip::before {
    content: '\e001';
    }

    .icon-heart::before {
    content: '\e024';
    }

    figure.effect-zoe h2 {
    display: inline-block;
    }

    figure.effect-zoe:hover p.description {
    opacity: 1;
    }

    figure.effect-zoe:hover figcaption,
    figure.effect-zoe:hover h2,
    figure.effect-zoe:hover p.icon-links a {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    }

    figure.effect-zoe:hover h2 {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
    }

    figure.effect-zoe:hover p.icon-links a:nth-child(3) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
    }

    figure.effect-zoe:hover p.icon-links a:nth-child(2) {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
    }

    figure.effect-zoe:hover p.icon-links a:first-child {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
    }

    /*---------------*/
    /***** Chico *****/
    /*---------------*/

    figure.effect-chico img {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(1.12);
    transform: scale(1.12);
    }

    figure.effect-chico:hover img {
    opacity: 0.5;
    -webkit-transform: scale(1);
    transform: scale(1);
    }

    figure.effect-chico figcaption {
    padding: 3em;
    }

    figure.effect-chico figcaption::before {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    border: 1px solid #fff;
    content: '';
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    }

    figure.effect-chico figcaption::before,
    figure.effect-chico p {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    }

    figure.effect-chico h2 {
    padding: 20% 0 20px 0;
    }

    figure.effect-chico p {
    margin: 0 auto;
    max-width: 200px;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    }

    figure.effect-chico:hover figcaption::before,
    figure.effect-chico:hover p {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    }

    @media screen and (max-width: 50em) {
    .content {
    padding: 0 10px;
    text-align: center;
    }
    .grid figure {
    display: inline-block;
    float: none;
    margin: 10px auto;
    width: 100%;
    }
    }
    3- في صفحة المعاينة ستجد لكل تأثير اسم كما في الصورة
    قم باختيار اسم التأثير الذي تريد وابحث عنه هنا :
    <h2>Lily</h2>
    <div class="grid">
    <figure class="effect-lily">
    <img src="img/12.jpg" alt="img12"/>
    <figcaption>
    <div>
    <h2>Nice <span>Lily</span></h2>
    <p>Lily likes to play with crayons and pencils</p>
    </div>
    <a href="#">View more</a>
    </figcaption>
    </figure>
    <figure class="effect-lily">
    <img src="img/1.jpg" alt="img1"/>
    <figcaption>
    <div>
    <h2>Nice <span>Lily</span></h2>
    <p>Lily likes to play with crayons and pencils</p>
    </div>
    <a href="#">View more</a>
    </figcaption>
    </figure>
    </div>
    <h2>Sadie</h2>
    <div class="grid">
    <figure class="effect-sadie">
    <img src="img/2.jpg" alt="img02"/>
    <figcaption>
    <h2>Holy <span>Sadie</span></h2>
    <p>Sadie never took her eyes off me. <br>She had a dark soul.</p>
    <a href="#">View more</a>
    </figcaption>
    </figure>
    <figure class="effect-sadie">
    <img src="img/14.jpg" alt="img14"/>
    <figcaption>
    <h2>Holy <span>Sadie</span></h2>
    <p>Sadie never took her eyes off me. <br>She had a dark soul.</p>
    <a href="#">View more</a>
    </figcaption>
    </figure>
    </div>
    <h2>Honey</h2>
    <div class="grid">
    <figure class="effect-honey">
    <img src="img/4.jpg" alt="img04"/>
    <figcaption>
    <h2>Dreamy <span>Honey</span> <i>Now</i></h2>
    <a href="#">View more</a>
    </figcaption>
    </figure>
    <figure class="effect-honey">
    <img src="img/5.jpg" alt="img05"/>
    <figcaption>
    <h2>Dreamy <span>Honey</span> <i>Now</i></h2>
    <a href="#">View more</a>
    </figcaption>
    </figure>
    </div>
    <h2>Layla</h2>
    <div class="grid">
    <figure class="effect-layla">
    <img src="img/6.jpg" alt="img06"/>
    <figcaption>
    <h2>Crazy <span>Layla</span></h2>
    <p>When Layla appears, she brings an eternal summer along.</p>
    <a href="#">View more</a>
    </figcaption>
    </figure>
    <figure class="effect-layla">
    <img src="img/3.jpg" alt="img03"/>
    <figcaption>
    <h2>Crazy <span>Layla</span></h2>
    <p>When Layla appears, she brings an eternal summer along.</p>
    <a href="#">View more</a>
    </figcaption>
    </figure>
    </div>
    <h2>Zoe</h2>
    <div class="grid">
    <figure class="effect-zoe">
    <img src="img/25.jpg" alt="img25"/>
    <figcaption>
    <h2>Creative <span>Zoe</span></h2>
    <p class="icon-links">
    <a href="#"><span class="icon-heart"></span></a>
    <a href="#"><span class="icon-eye"></span></a>
    <a href="#"><span class="icon-paper-clip"></span></a>
    </p>
    <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
    </figcaption>
    </figure>
    <figure class="effect-zoe">
    <img src="img/26.jpg" alt="img26"/>
    <figcaption>
    <h2>Creative <span>Zoe</span></h2>
    <p class="icon-links">
    <a href="#"><span class="icon-heart"></span></a>
    <a href="#"><span class="icon-eye"></span></a>
    <a href="#"><span class="icon-paper-clip"></span></a>
    </p>
    <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
    </figcaption>
    </figure>
    </div>
    <h2>Oscar</h2>
    <div class="grid">
    <figure class="effect-oscar">
    <img src="img/9.jpg" alt="img09"/>
    <figcaption>
    <h2>Warm <span>Oscar</span></h2>
    <p>Oscar is a decent man. He used to clean porches with pleasure.</p>
    <a href="#">View more</a>
    </figcaption>
    </figure>
    <figure class="effect-oscar">
    <img src="img/10.jpg" alt="img10"/>
    <figcaption>
    <h2>Warm <span>Oscar</span></h2>
    <p>Oscar is a decent man. He used to clean porches with pleasure.</p>
    <a href="#">View more</a>
    </figcaption>
    </figure>
    </div>
    <h2>Marley</h2>
    <div class="grid">
    <figure class="effect-marley">
    <img src="img/11.jpg" alt="img11"/>
    <figcaption>
    <h2>Sweet <span>Marley</span></h2>
    <p>Marley tried to convince her but she was not interested.</p>
    <a href="#">View more</a>
    </figcaption>
    </figure>
    <figure class="effect-marley">
    <img src="img/12.jpg" alt="img12"/>
    <figcaption>
    <h2>Sweet <span>Marley</span></h2>
    <p>Marley tried to convince her but she was not interested.</p>
    <a href="#">View more</a>
    </figcaption>
    </figure>
    </div>
    <h2>Ruby</h2>
    <div class="grid">
    <figure class="effect-ruby">
    <img src="img/13.jpg" alt="img13"/>
    <figcaption>
    <h2>Glowing <span>Ruby</span></h2>
    <p>Ruby did not need any help. Everybody knew that.</p>
    <a href="#">View more</a>
    </figcaption>
    </figure>
    <figure class="effect-ruby">
    <img src="img/14.jpg" alt="img14"/>
    <figcaption>
    <h2>Glowing <span>Ruby</span></h2>
    <p>Ruby did not need any help. Everybody knew that.</p>
    <a href="#">View more</a>
    </figcaption>
    </figure>
    </div>
    <h2>Roxy</h2>
    <div class="grid">
    <figure class="effect-roxy">
    <img src="img/15.jpg" alt="img15"/>
    <figcaption>
    <h2>Charming <span>Roxy</span></h2>
    <p>Roxy was my best friend. She'd cross any border for me.</p>
    <a href="#">View more</a>
    </figcaption>
    </figure>
    <figure class="effect-roxy">
    <img src="img/1.jpg" alt="img01"/>
    <figcaption>
    <h2>Charming <span>Roxy</span></h2>
    <p>Roxy was my best friend. She'd cross any border for me.</p>
    <a href="#">View more</a>
    </figcaption>
    </figure>
    </div>
    <h2>Bubba</h2>
    <div class="grid">
    <figure class="effect-bubba">
    <img src="img/2.jpg" alt="img02"/>
    <figcaption>
    <h2>Fresh <span>Bubba</span></h2>
    <p>Bubba likes to appear out of thin air.</p>
    <a href="#">View more</a>
    </figcaption>
    </figure>
    <figure class="effect-bubba">
    <img src="img/16.jpg" alt="img16"/>
    <figcaption>
    <h2>Fresh <span>Bubba</span></h2>
    <p>Bubba likes to appear out of thin air.</p>
    <a href="#">View more</a>
    </figcaption>
    </figure>
    </div>
    <h2>Romeo</h2>
    <div class="grid">
    <figure class="effect-romeo">
    <img src="img/17.jpg" alt="img17"/>
    <figcaption>
    <h2>Wild <span>Romeo</span></h2>
    <p>Romeo never knows what he wants. He seemed to be very cross about something.</p>
    <a href="#">View more</a>
    </figcaption>
    </figure>
    <figure class="effect-romeo">
    <img src="img/18.jpg" alt="img18"/>
    <figcaption>
    <h2>Wild <span>Romeo</span></h2>
    <p>Romeo never knows what he wants. He seemed to be very cross about something.</p>
    <a href="#">View more</a>
    </figcaption>
    </figure>
    </div>
    <h2>Dexter</h2>
    <div class="grid">
    <figure class="effect-dexter">
    <img src="img/19.jpg" alt="img19"/>
    <figcaption>
    <h2>Strange <span>Dexter</span></h2>
    <p>Dexter had his own strange way. You could watch him training ants.</p>
    <a href="#">View more</a>
    </figcaption>
    </figure>
    <figure class="effect-dexter">
    <img src="img/12.jpg" alt="img12"/>
    <figcaption>
    <h2>Strange <span>Dexter</span></h2>
    <p>Dexter had his own strange way. You could watch him training ants.</p>
    <a href="#">View more</a>
    </figcaption>
    </figure>
    </div>
    <h2>Sarah</h2>
    <div class="grid">
    <figure class="effect-sarah">
    <img src="img/13.jpg" alt="img13"/>
    <figcaption>
    <h2>Free <span>Sarah</span></h2>
    <p>Sarah likes to watch clouds. She's quite depressed.</p>
    <a href="#">View more</a>
    </figcaption>
    </figure>
    <figure class="effect-sarah">
    <img src="img/20.jpg" alt="img20"/>
    <figcaption>
    <h2>Free <span>Sarah</span></h2>
    <p>Sarah likes to watch clouds. She's quite depressed.</p>
    <a href="#">View more</a>
    </figcaption>
    </figure>
    </div>
    <h2>Chico</h2>
    <div class="grid">
    <figure class="effect-chico">
    <img src="img/15.jpg" alt="img15"/>
    <figcaption>
    <h2>Silly <span>Chico</span></h2>
    <p>Chico's main fear was missing the morning bus.</p>
    <a href="#">View more</a>
    </figcaption>
    </figure>
    <figure class="effect-chico">
    <img src="img/4.jpg" alt="img04"/>
    <figcaption>
    <h2>Silly <span>Chico</span></h2>
    <p>Chico's main fear was missing the morning bus.</p>
    <a href="#">View more</a>
    </figcaption>
    </figure>
    </div>
    <h2>Milo</h2>
    <div class="grid">
    <figure class="effect-milo">
    <img src="img/11.jpg" alt="img11"/>
    <figcaption>
    <h2>Faithful <span>Milo</span></h2>
    <p>Milo went to the woods. He took a fun ride and never came back.</p>
    <a href="#">View more</a>
    </figcaption>
    </figure>
    <figure class="effect-milo">
    <img src="img/3.jpg" alt="img03"/>
    <figcaption>
    <h2>Faithful <span>Milo</span></h2>
    <p>Milo went to the woods. He took a fun ride and never came back.</p>
    <a href="#">View more</a>
    </figcaption>
    </figure>
    </div>
    </div>
    4-بعد اختيار التأثير قم بنسخ كوده وضع في موقعك في اي مكان تريد داخل <body>
    إلى هنا انتهى الدرس أي سؤال ضعوه في التعليقات ولا تنسو المساهمة في نشر الموضوع