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

السلام عليكم ورحمة

الله وبركاته

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

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

ما ستجده في موقع اخر

• معاينة

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

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. اذا واجهت اي مشكلة ضعها بتعليق