الاثنين، 6 نوفمبر 2017

احصل على هذة الاداة من هنا

صندوق طاقم العمل بتاثيرات احترافية



السلام عليكم ورحمة
الله وبركاته
--
في تدوينة اليوم سوف نتعرف على اداة ربما تكون جديدة بالنسبة لكم
اذا كنت تستعمل احد المواقع لبيع خدماتك او منتجاتك بات الان  بات بامكانك بيعها على موقعك








طريقة التركيب:

    1. توجه الى القالب ثم تحرير html
    2. ضع الكود التالي في المكان الذي يناسبك
 <div class="frame">
 
<div class="plan basic" onclick="void(0);">
  <div class="title">انضم</div>
  <div class="price" style="
    background: url(https://lh3.googleusercontent.com/proxy/7KujMOGEYXeqKFbeg7dHK8fliVWApW72VvJWcw3ct4PS9VyblK2Hl4j6eLRttxIAbLg=s0-d);
    background-size: 100% 100%;
"></div>
  <div class="lines">
   <a class="howiya">قريبا</a></div>
  </div>
 
 <div class="plan pro" onclick="void(0);">
  <div class="title">انضم</div>
  <div class="price" style="
    background: url(https://lh3.googleusercontent.com/proxy/7KujMOGEYXeqKFbeg7dHK8fliVWApW72VvJWcw3ct4PS9VyblK2Hl4j6eLRttxIAbLg=s0-d);
    background-size: 100% 100%;
"></div>
  <div class="lines">
   <a class="howiya">قريبا</a></div>
  </div>
 
 <div class="plan premium" onclick="void(0);">
  <div class="title">عصام</div>
  <div class="price" style="
    background: url(https://yt3.ggpht.com/-YrzXxqSue9g/AAAAAAAAAAI/AAAAAAAAAAA/Zg5S4Ymhg0U/s900-c-k-no-mo-rj-c0xffffff/photo.jpg);
    background-size: 100% 100%;
"></div>
  <div class="lines">
   <a class="howiya">المشرف</a></div>
  </div>
 
 <div class="datas">
  
  <div class="data users">
   <div class="text">
    <span class="leftiss">Photoshop</span>
    <span class="right"></span>
   </div>
   <div class="line">
    <div class="fill"></div>
   </div>
  </div>
  
  <div class="data gb">
   <div class="text">
    <span class="leftiss">Html5</span>
    <span class="right"></span>
   </div>
   <div class="line">
    <div class="fill"></div>
   </div>
  </div>
  
  <div class="data projects">
   <div class="text">
    <span class="leftiss">Css3</span>
    <span class="right"></span>
   </div>
   <div class="line">
    <div class="fill"></div>
   </div>
  </div>
  
 </div>
 
</div>
  

      1. ابحث عن ]]></b:skin> وضع فوقه الكود التالي
    @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700); .frame { position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; margin-top: -200px; margin-left: -200px; border-radius: 2px; box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.05); overflow: hidden; background: #E9EDEF; color: #5E5E5E; font-family: droidkufi-bold; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .plan { position: absolute; width: 110px; height: 160px; top: 30px; left: 25px; background: #fff; box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.1); border-radius: 3px; overflow: hidden; cursor: pointer; transition: all 0.3s ease-in-out; } .plan.basic:hover ~ .datas .users .fill, .plan.basic:hover ~ .datas .gb .fill, .plan.basic:hover ~ .datas .projects .fill { transform: scaleX(0.05) translate3d(0, 0, 0); } .plan.pro { left: 145px; } .plan.pro:hover ~ .datas .users .fill { transform: scaleX(0.3) translate3d(0, 0, 0); } .plan.pro:hover ~ .datas .gb .fill { transform: scaleX(0.7) translate3d(0, 0, 0); } .plan.pro:hover ~ .datas .projects .fill { transform: scaleX(0.5) translate3d(0, 0, 0); } .plan.premium { left: 265px; } .plan.premium:hover ~ .datas .users .fill, .plan.premium:hover ~ .datas .gb .fill, .plan.premium:hover ~ .datas .projects .fill { transform: scaleX(1) translate3d(0, 0, 0); } .plan:hover { transform: scale(1.1) translate3d(0, 0, 0); box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.1); } .plan:hover .title { background: #27A6D2; } .plan:hover .price { color: #27A6D2; } .plan .title { height: 36px; text-align: center; background: #7DD0ED; color: #fff; font-weight: 600; line-height: 36px; font-size: 14px; transition: all 0.3s ease-in-out; } .plan .price { text-align: center; font-size: 30px; line-height: 30px; font-weight: 700; padding: 16px 0 17px 0; transition: all 0.3s ease-in-out; } .plan .price span { display: block; font-size: 12px; line-height: 12px; font-weight: 400; } .plan .line { height: 3px; background: #E4E4E4; margin: 0 auto 7px auto; } .datas { position: absolute; height: 160px; width: 380px; top: 220px; left: 10px; background: #fff; box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.1); } .datas .data { margin: 17px 15px 0 15px; } .datas .data .text { font-size: 12px; height: 20px; } .datas .data .text .left { float: left; } .datas .data .text .right { float: right; } .datas .data .line { position: relative; z-index: 5; width: 100%; height: 10px; background: #E9EDEF; border-radius: 5px; overflow: hidden; } .datas .data .line .fill { position: relative; z-index: 1; height: 10px; width: 100%; background: #7DD0ED; transform: scaleX(0); transform-origin: 0 50%; transition: all 0.3s ease-in-out; border-radius: 3px; } .plan .price { text-align: center; font-size: 30px; line-height: 30px; font-weight: 700; padding: 16px 0 17px 0; transition: all 0.3s ease-in-out; height: 58px; } a.howiya { border-radius: 0 0 8px 8px; text-align: center; display: block; background: #2c3e54; color: white; border: 5px solid white; font-size: 12px; } @font-face { font-family: "DroidKufi-Bold"; font-style: normal; font-weight: 700; src: url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.eot?#iefix") format("embedded-opentype"), url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.woff2") format("x-woff2"), url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.woff") format("woff"), url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.ttf") format("truetype"); } span.leftiss { font-family: monospace; font-weight: bold; } 
    
    

      1. ان واجهت اي مشكلة بامكانك طرحها في تعليق


      EmoticonEmoticon