الأحد، 28 أكتوبر 2018

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

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



السلام عليكم ورحمة
الله وبركاته


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





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

    1. توجه الى التخطيط ثم اضف اداة html/javascript (بالسايد بار)
    2. ضع كود التالي داخل الاداة


      <style>
      h201.skill-card__title {
          display: block;
      }
      .skill-card {
        position: relative;
        totrp: 50%;
        letrft: 50%;
        -webkit-trtransform: translateY(-50%) translateX(-50%);
                transftrorm: translateY(-50%) translateX(-50%);
        padding: 20px;
      width: 100%;
          height: 320px;  background-color: #FFF;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        cursor: pointer;
      }
      .skill-card:hover {
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
      }
      .skill-card:hover .skill-card__header {
        height: 40px;
      }
      .skill-card:hover .skill-card__header .skill-card__icon {
        -webkit-transform: translateX(-50%) translateY(-50%) scale(3);
                transform: translateX(-50%) translateY(-50%) scale(3);
      }
      .skill-card:hover .skill-card__body {
        height: 210px;
      }
      .skill-card:hover .skill-card__body .skill-card__knowledge li {
        -webkit-transform: translateX(0);
                transform: translateX(0);
        transition-timing-function: cubic-bezier(0, 1.5, 1, 1);
        transition-duration: 0.5s;
      }
      .skill-card:hover .skill-card__body .skill-card__knowledge li:nth-child(1) {
        transition-delay: 0.25s;
      }
      .skill-card:hover .skill-card__body .skill-card__knowledge li:nth-child(2) {
        transition-delay: 0.5s;
      }
      .skill-card:hover .skill-card__body .skill-card__knowledge li:nth-child(3) {
        transition-delay: 0.75s;
      }
      .skill-card:hover .skill-card__body .skill-card__knowledge li:nth-child(4) {
        transition-delay: 1s;
      }
      .skill-card:hover .skill-card__body .skill-card__knowledge li:nth-child(5) {
        transition-delay: 1.25s;
      }
      .skill-card:hover .skill-card__body .skill-card__knowledge li:nth-child(6) {
        transition-delay: 1.5s;
      }
      .skill-card .skill-card__header {
        position: relative;
        background: url(https://bestwebgallery.com/wp-content/uploads/2015/09/anduin.png);
          height: 240px;
        margin: -20px -20px 20px -20px;
        transition: height 0.5s;
        overflow: hidden;
        background-size: 100%;
      }
      .skill-card .skill-card__header .skill-card__icon {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translateY(-50%) translateX(-50%);
                transform: translateY(-50%) translateX(-50%);
        display: block;
        width: 100px;
        height: 100px;
        transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
        transition: transform 0.5s, -webkit-transform 0.5s;
        border-radius: 100%;
        background: #ffffffad;
      }
      .skill-card .skill-card__body {
        height: 45px;
        transition: height 0.5s;
        overflow: hidden;
            text-align: center;
      }
      .skill-card .skill-card__body .skill-card__title {
        font-size: 1.4em;
        font-weight: 600;
        text-transform: uppercase;
      }
      .skill-card .skill-card__body .skill-card__duration {
        color: #9E9E9E;
        font-style: italic;
      }
      .skill-card .skill-card__body .skill-card__knowledge {
        margin-top: 10px;
        color: #424242;
      }
      .skill-card .skill-card__body .skill-card__knowledge li {
        margin-top: 5px;
        transition-duration: 0;
        transition-delay: 0.5s;
        -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
      }
      
      
      .skills,
      .skills .skill,
      .skills .skill .skill-title,
      .skills .skill .skill-bar {
         width: 100%;
         float: left;
      }
      
      .skills {
         padding:0;
      }
      
      .skills .skill {
         margin-bottom: 14px;
      }
      
      .skills .skill .skill-title {
         color: #808080;
         margin-bottom: 10px;
         font-weight: 400;
         font-size: 13px;
            text-align: left;
      }
      
      .skills .skill .skill-bar {
         width: 0;
         height: 6px;
         background: #f0f0f0;
         transition: 1s cubic-bezier(1, 0, .5, 1);
         -webkit-transition: 1s cubic-bezier(1, 0, .5, 1);
         -ms-transition: 1s cubic-bezier(1, 0, .5, 1);
      }
      
      .skills.active .skill .skill-bar {
         width: 100%;
      }
      
      .skills .skill .skill-bar span {
         float: left;
         width: 0%;
         background: #1D91F2;
         height: 6px;
         position: relative;
         transition: 1s cubic-bezier(1, 0, .5, 1);
         -webkit-transition: 1s cubic-bezier(1, 0, .5, 1);
         -ms-transition: 1s cubic-bezier(1, 0, .5, 1);
      }
      
      .skills .skill .skill-bar span b {
         float: left;
         width: 100%;
         position: relative;
         text-align: right;
         opacity: 0;
         font-size: 14px;
         color: #1D91F2;
         font-weight: 400;
         top: -24px;
      }
      </style>
      <div class="skill-card">
        <header class="skill-card__header"><img class="skill-card__icon" src="https://cdn4.iconfinder.com/data/icons/reaction/32/angry-512.png" alt="HTML5 Logo"/></header>
        <section class="skill-card__body">
          <h201 class="skill-card__title">عصام</h201><span class="skill-card__duration">خبرة 5 سنوات</span>
          <ul class="skill-card__knowledge">
            <li>   <div class="skills">
         <!-- skill -->
         <div class="skill">
            <!-- title -->
            <div class="skill-title">
               HTML
            </div>
            <!-- bar -->
            <div class="skill-bar" data-bar="90"><span></span></div>
         </div>
         <!-- #skill -->
      
      </div></li>
            <li> <div class="skills">
         <!-- skill -->
         <div class="skill">
            <!-- title -->
            <div class="skill-title">
               CSS
            </div>
            <!-- bar -->
            <div class="skill-bar" data-bar="70"><span></span></div>
         </div>
         <!-- #skill -->
      
      </div></li>
            <li><div class="skills">
         <!-- skill -->
         <div class="skill">
            <!-- title -->
            <div class="skill-title">
               PHOTOSHOP
            </div>
            <!-- bar -->
            <div class="skill-bar" data-bar="60"><span></span></div>
         </div>
         <!-- #skill -->
      
      </div></li>
      
          </ul>
        </section>
      </div>
      <script type="text/javascript">
      $(".skills").addClass("active")
      $(".skills .skill .skill-bar span").each(function() {
         $(this).animate({
            "width": $(this).parent().attr("data-bar") + "%"
         }, 1000);
         $(this).append('<b>' + $(this).parent().attr("data-bar") + '%</b>');
      });
      setTimeout(function() {
         $(".skills .skill .skill-bar span b").animate({"opacity":"1"},1000);
      }, 2000);
      </script>


        1. ثم قم بتغيير ما يلي                                                 
        2. xx/angry-512.png الايموجي
        3. xxxxx/anduin.png صورة الغلاف


        1. اذا واجهت اي مشكلة ضعها بتعليق




      EmoticonEmoticon