الجمعة، 9 فبراير 2018

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

سلايدر لعرض التدوينات بتقنية svg



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


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






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

    1. توجه الى القالب ثم تحرير html
    2. ضع الكود التالي اسفل الناف بار NAVBAR
<div class="cd-radial-slider-wrapper">
  <ul class="cd-radial-slider" data-radius1="60" data-radius2="1364" data-centerx1="110" data-centerx2="1290">
   <li class="visible">
    <div class="svg-wrapper">
     <svg viewBox="0 0 1400 800">
      <title>Animated SVG</title>
      <defs>
       <clipPath id="cd-image-1">
        <circle id="cd-circle-1" cx="110" cy="400" r="1364"/>
       </clipPath>
      </defs>

      <image height='800px' width="1400px" clip-path="url(#cd-image-1)" xlink:href="https://codyhouse.co/demo/radial-svg-slider/img/img-1.jpg"></image>
     </svg>
    </div> <!-- .svg-wrapper -->

    <div class="cd-radial-slider-content">
     <div class="wrapper">
      <div>
       <h2>هذا النص مثال 1</h2>
       <p>هناك حقيقة مثبتة منذ زمن تتيح للقارئ استبدال</p>
       <a href="#0" class="cd-btn">اقرأ المزيد</a>
      </div>
     </div>
    </div> <!-- .cd-radial-slider-content -->
   </li>

   <li class="next-slide">
    <div class="svg-wrapper">
     <svg viewBox="0 0 1400 800">
      <title>Animated SVG</title>
      <defs>
       <clipPath id="cd-image-2">
        <circle id="cd-circle-2" cx="1290" cy="400" r="60"/>
       </clipPath>
      </defs>

      <image height='800px' width="1400px" clip-path="url(#cd-image-2)" xlink:href="https://codyhouse.co/demo/radial-svg-slider/img/img-2.jpg"></image>
     </svg>
    </div> <!-- .svg-wrapper -->

    <div class="cd-radial-slider-content">
     <div class="wrapper">
      <div>
       <h2>هذا النص مثال 2</h2>
       <p>هناك حقيقة مثبتة منذ زمن تتيح للقارئ استبدال</p>
       <a href="#0" class="cd-btn">اقرأ المزيد</a>
      </div>
     </div>
    </div> <!-- .cd-radial-slider-content -->
   </li>

   <li>
    <div class="svg-wrapper">
     <svg viewBox="0 0 1400 800">
      <title>Animated SVG</title>
      <defs>
       <clipPath id="cd-image-3">
        <circle id="cd-circle-3" cx="110" cy="400" r="60"/>
       </clipPath>
      </defs>

      <image height='800px' width="1400px" clip-path="url(#cd-image-3)" xlink:href="https://codyhouse.co/demo/radial-svg-slider/img/img-3.jpg"></image>
     </svg>
    </div> <!-- .svg-wrapper -->

    <div class="cd-radial-slider-content">
     <div class="wrapper">
      <div>
       <h2>هذا النص مثال 3</h2>
       <p>هناك حقيقة مثبتة منذ زمن تتيح للقارئ استبدال</p>
       <a href="#0" class="cd-btn">اقرأ المزيد</a>
      </div>
     </div>
    </div> <!-- .cd-radial-slider-content -->
   </li>

   <li class="prev-slide">
    <div class="svg-wrapper">
     <svg viewBox="0 0 1400 800">
      <title>Animated SVG</title>
      <defs>
       <clipPath id="cd-image-4">
        <circle id="cd-circle-4" cx="110" cy="400" r="60"/>
       </clipPath>
      </defs>
      
      <image height='800px' width="1400px" clip-path="url(#cd-image-4)" xlink:href="https://codyhouse.co/demo/radial-svg-slider/img/img-4.jpg"></image>
     </svg>
    </div> <!-- .svg-wrapper -->

    <div class="cd-radial-slider-content">
     <div class="wrapper">
      <div>
       <h2>هذا النص مثال 4</h2>
       <p>هناك حقيقة مثبتة منذ زمن تتيح للقارئ استبدال</p>
       <a href="#0" class="cd-btn">اقرأ المزيد</a>
      </div>
     </div>
    </div> <!-- .cd-radial-slider-content -->
   </li>
  </ul> <!-- .cd-radial-slider -->

  <ul class="cd-radial-slider-navigation">
   <li><a href="#0" class="next">Next</a></li>
   <li><a href="#0" class="prev">Prev</a></li>
  </ul> <!-- .cd-radial-slider-navigation -->
  
  <div class="cd-round-mask">
   <svg viewBox="0 0 1400 800">
    <defs>
     <mask id="cd-left-mask" height='800px' width="1400px" x="0" y="0" maskUnits="userSpaceOnUse">
      <path fill="white" d="M0,0v800h1400V0H0z M110,460c-33.137,0-60-26.863-60-60s26.863-60,60-60s60,26.863,60,60S143.137,460,110,460z"/>
        </mask>

        <mask id="cd-right-mask" height='800px' width="1400px" x="0" y="0" maskUnits="userSpaceOnUse">
      <path fill="white" d="M0,0v800h1400V0H0z M1290,460c-33.137,0-60-26.863-60-60s26.863-60,60-60s60,26.863,60,60S1323.137,460,1290,460z"/>
        </mask>
    </defs>
   </svg>
  </div>
 </div> <!-- .cd-radial-slider-wrapper -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
 if( !window.jQuery ) document.write('<script src="js/jquery-2.2.1.min.js"><\/script>');
</script>


      1. ابحث عن ]]></b:skin> وضع فوقه الكود التالي
    .cd-intro h1 {
      font-size: 2.4rem;
      font-family: "droid arabic kufi", serif;
      text-align: center;
      width: 90%;
      margin: 2.6em auto 1.8em;
    }
    @media only screen and (min-width: 1100px) {
      .cd-intro h1 {
        font-size: 4rem;
      }
    }
    
    .cd-nugget-info {
      text-align: center;
      position: absolute;
      width: 100%;
      height: 50px;
      line-height: 50px;
      top: 0;
      left: 0;
    }
    .cd-nugget-info a {
      position: relative;
      font-size: 14px;
      color: #9d9da1;
      -webkit-transition: all .2s;
      transition: all .2s;
    }
    .cd-nugget-info a:hover {
      opacity: .8;
    }
    .cd-nugget-info span {
      vertical-align: middle;
      display: inline-block;
    }
    .cd-nugget-info span svg {
      display: block;
    }
    .cd-nugget-info .cd-nugget-info-arrow {
      fill: #9d9da1;
    }
    
    /* -------------------------------- 
    
    xcarbonads 
    
    -------------------------------- */
    #carbonads-container,
    #ui8ads-container {
      position: fixed;
      top: 40px;
      right: 5%;
      width: 180px;
      display: none;
      z-index: 100;
    }
    #carbonads-container .close-carbon-adv,
    #carbonads-container .close-ui8-adv,
    #ui8ads-container .close-carbon-adv,
    #ui8ads-container .close-ui8-adv {
      display: inline-block;
      position: absolute;
      top: 0;
      right: 100%;
      background: rgba(56, 56, 56, 0.8);
      text-indent: 100%;
      overflow: hidden;
      width: 32px;
      height: 32px;
    }
    #carbonads-container .close-carbon-adv:hover,
    #carbonads-container .close-ui8-adv:hover,
    #ui8ads-container .close-carbon-adv:hover,
    #ui8ads-container .close-ui8-adv:hover {
      background: #383838;
    }
    #carbonads-container .close-carbon-adv::after, #carbonads-container .close-carbon-adv::before,
    #carbonads-container .close-ui8-adv::after,
    #carbonads-container .close-ui8-adv::before,
    #ui8ads-container .close-carbon-adv::after,
    #ui8ads-container .close-carbon-adv::before,
    #ui8ads-container .close-ui8-adv::after,
    #ui8ads-container .close-ui8-adv::before {
      content: '';
      background-color: #fff;
      height: 2px;
      width: 14px;
      position: absolute;
      top: 14px;
      left: 9px;
    }
    #carbonads-container .close-carbon-adv::after,
    #carbonads-container .close-ui8-adv::after,
    #ui8ads-container .close-carbon-adv::after,
    #ui8ads-container .close-ui8-adv::after {
      -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
              transform: rotate(45deg);
    }
    #carbonads-container .close-carbon-adv::before,
    #carbonads-container .close-ui8-adv::before,
    #ui8ads-container .close-carbon-adv::before,
    #ui8ads-container .close-ui8-adv::before {
      -webkit-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
              transform: rotate(-45deg);
    }
    #carbonads-container .carbonad,
    #carbonads-container .ui8ad,
    #ui8ads-container .carbonad,
    #ui8ads-container .ui8ad {
      background: rgba(255, 255, 255, 0.9);
      border: none;
      width: 100%;
      height: auto;
      padding: 14px;
      text-align: center;
      border-radius: 0 3px 3px 3px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }
    #carbonads-container .carbonad .carbon-img img,
    #carbonads-container .ui8ad .carbon-img img,
    #ui8ads-container .carbonad .carbon-img img,
    #ui8ads-container .ui8ad .carbon-img img {
      margin: 0 10px 10px;
      width: 130px;
    }
    #carbonads-container .carbonad .carbon-text, #carbonads-container .carbonad .carbonad-tag,
    #carbonads-container .carbonad .carbon-poweredby,
    #carbonads-container .ui8ad .carbon-text,
    #carbonads-container .ui8ad .carbonad-tag,
    #carbonads-container .ui8ad .carbon-poweredby,
    #ui8ads-container .carbonad .carbon-text,
    #ui8ads-container .carbonad .carbonad-tag,
    #ui8ads-container .carbonad .carbon-poweredby,
    #ui8ads-container .ui8ad .carbon-text,
    #ui8ads-container .ui8ad .carbonad-tag,
    #ui8ads-container .ui8ad .carbon-poweredby {
      font-family: 'Helvetica Neue', Arial, sans-serif;
    }
    #carbonads-container .carbonad .carbon-wrap,
    #carbonads-container .ui8ad .carbon-wrap,
    #ui8ads-container .carbonad .carbon-wrap,
    #ui8ads-container .ui8ad .carbon-wrap {
      display: block;
      width: 100%;
      padding: 0;
    }
    #carbonads-container .carbonad .carbon-wrap a,
    #carbonads-container .ui8ad .carbon-wrap a,
    #ui8ads-container .carbonad .carbon-wrap a,
    #ui8ads-container .ui8ad .carbon-wrap a {
      color: #6156a8;
      font-size: 13px;
      font-weight: bold;
    }
    #carbonads-container .carbonad .carbon-wrap a:hover,
    #carbonads-container .ui8ad .carbon-wrap a:hover,
    #ui8ads-container .carbonad .carbon-wrap a:hover,
    #ui8ads-container .ui8ad .carbon-wrap a:hover {
      text-decoration: underline;
    }
    #carbonads-container .carbonad .carbonad-tag,
    #carbonads-container .carbonad .carbon-poweredby,
    #carbonads-container .ui8ad .carbonad-tag,
    #carbonads-container .ui8ad .carbon-poweredby,
    #ui8ads-container .carbonad .carbonad-tag,
    #ui8ads-container .carbonad .carbon-poweredby,
    #ui8ads-container .ui8ad .carbonad-tag,
    #ui8ads-container .ui8ad .carbon-poweredby {
      margin-top: 5px;
      color: #0a0b15;
    }
    #carbonads-container .carbonad .carbonad-tag a,
    #carbonads-container .carbonad .carbon-poweredby a,
    #carbonads-container .ui8ad .carbonad-tag a,
    #carbonads-container .ui8ad .carbon-poweredby a,
    #ui8ads-container .carbonad .carbonad-tag a,
    #ui8ads-container .carbonad .carbon-poweredby a,
    #ui8ads-container .ui8ad .carbonad-tag a,
    #ui8ads-container .ui8ad .carbon-poweredby a {
      color: #0a0b15;
    }
    #carbonads-container .carbonad .carbonad-tag a:hover,
    #carbonads-container .carbonad .carbon-poweredby a:hover,
    #carbonads-container .ui8ad .carbonad-tag a:hover,
    #carbonads-container .ui8ad .carbon-poweredby a:hover,
    #ui8ads-container .carbonad .carbonad-tag a:hover,
    #ui8ads-container .carbonad .carbon-poweredby a:hover,
    #ui8ads-container .ui8ad .carbonad-tag a:hover,
    #ui8ads-container .ui8ad .carbon-poweredby a:hover {
      color: #6156a8;
    }
    #carbonads-container .carbonad .carbon-poweredby,
    #carbonads-container .ui8ad .carbon-poweredby,
    #ui8ads-container .carbonad .carbon-poweredby,
    #ui8ads-container .ui8ad .carbon-poweredby {
      display: inline-block;
      font-size: 11px;
      line-height: 15px;
    }
    @media only screen and (min-width: 1100px) {
      #carbonads-container,
      #ui8ads-container {
        display: block;
      }
    }
    
    /* -------------------------------- 
    
    Slider
    
    -------------------------------- */
    .cd-radial-slider-wrapper {
      position: relative;
      width: 100%;
      max-width: 1100px;
      margin: 2em auto;
      /* hide horizontal scrollbar on IE11 */
      overflow: hidden;
    }
    
    .cd-radial-slider > li {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      opacity: 0;
      -webkit-transition: -webkit-transform .2s;
      transition: -webkit-transform .2s;
      transition: transform .2s;
      transition: transform .2s, -webkit-transform .2s;
      /* hide vertical scrollbar on IE11 */
      overflow: hidden;
    }
    .cd-radial-slider > li.visible {
      position: relative;
      opacity: 1;
    }
    .cd-radial-slider > li.is-animating, .cd-radial-slider > li.prev-slide, .cd-radial-slider > li.next-slide {
      opacity: 1;
    }
    .cd-radial-slider > li.is-animating {
      z-index: 2;
    }
    .cd-radial-slider > li.scale-down, .cd-radial-slider > li.move-up {
      z-index: 3;
    }
    .cd-radial-slider > li.move-up {
      /* class added to the navigation round element when clicked - used to create the click effect */
      -webkit-animation: cd-clicked .2s;
              animation: cd-clicked .2s;
    }
    .cd-radial-slider > li.scale-down {
      /* class added to the navigation round element to create the scale down effect  */
      -webkit-transform: scale(0);
          -ms-transform: scale(0);
              transform: scale(0);
    }
    .cd-radial-slider > li.prev-slide image, .cd-radial-slider > li.next-slide image {
      /* make sure the prev/next round elements are visible */
      z-index: 3;
    }
    .cd-radial-slider > li.next-slide {
      /* for the scale-down/click effect - change the transform origin so that it is the center of the navigation round element */
      -webkit-transform-origin: 92.14% 50%;
          -ms-transform-origin: 92.14% 50%;
              transform-origin: 92.14% 50%;
    }
    .cd-radial-slider > li.prev-slide {
      -webkit-transform-origin: 7.86% 50%;
          -ms-transform-origin: 7.86% 50%;
              transform-origin: 7.86% 50%;
    }
    
    .cd-radial-slider .svg-wrapper {
      position: relative;
      z-index: 1;
      /* using padding Hack to fix bug on IE - svg height not properly calculated */
      height: 0;
      padding-bottom: 57.15%;
    }
    
    .cd-radial-slider li.prev-slide .svg-wrapper,
    .cd-radial-slider li.next-slide .svg-wrapper {
      /* change its z-index so that it's always below the .cd-radial-slider-content */
      z-index: 2;
    }
    
    .cd-radial-slider-wrapper svg {
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    
    .cd-radial-slider-content {
      position: absolute;
      z-index: 3;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      visibility: hidden;
      -webkit-transform: translateZ(0);
              transform: translateZ(0);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    .cd-radial-slider-content .wrapper {
      /* vertically center its content */
      display: table;
      height: 100%;
      width: 100%;
    }
    .cd-radial-slider-content .wrapper > div {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      padding: 0 17%;
      color: #ffffff;
    }
    .cd-radial-slider-content h2 {
      font-size: 2rem;
      font-family: "droid arabic kufi", serif;
    }
    .cd-radial-slider-content p {
      font-size: 1.4rem;
      margin: .6em auto .8em;
    }
    .cd-radial-slider-content .cd-btn {
      display: inline-block;
      padding: 1em;
      border: 2px solid #ffffff;
      color: #ffffff;
      text-transform: uppercase;
      letter-spacing: .1em;
      font-size: 1.2rem;
      font-weight: bold;
    }
    .visible .cd-radial-slider-content {
      visibility: visible;
      opacity: 1;
    }
    .prev-slide .cd-radial-slider-content {
      -webkit-transform: translateX(50px);
          -ms-transform: translateX(50px);
              transform: translateX(50px);
    }
    .next-slide .cd-radial-slider-content {
      -webkit-transform: translateX(-50px);
          -ms-transform: translateX(-50px);
              transform: translateX(-50px);
    }
    .content-reveal-left .cd-radial-slider-content, .content-reveal-right .cd-radial-slider-content {
      /* animate slide content when entering the viewport */
      -webkit-animation-delay: .1s;
              animation-delay: .1s;
      -webkit-animation-fill-mode: both;
              animation-fill-mode: both;
      opacity: 1;
      visibility: visible;
    }
    .content-hide-left .cd-radial-slider-content, .content-hide-right .cd-radial-slider-content {
      /* animate slide content when leaving the viewport */
      opacity: 0;
      visibility: hidden;
    }
    .content-reveal-left .cd-radial-slider-content, .content-reveal-right .cd-radial-slider-content, .content-hide-left .cd-radial-slider-content, .content-hide-right .cd-radial-slider-content {
      -webkit-animation-duration: .4s;
              animation-duration: .4s;
    }
    .content-reveal-left .cd-radial-slider-content {
      -webkit-animation-name: cd-reveal-left;
              animation-name: cd-reveal-left;
    }
    .content-reveal-right .cd-radial-slider-content {
      -webkit-animation-name: cd-reveal-right;
              animation-name: cd-reveal-right;
    }
    .content-hide-left .cd-radial-slider-content {
      -webkit-animation-name: cd-hide-left;
              animation-name: cd-hide-left;
    }
    .content-hide-right .cd-radial-slider-content {
      -webkit-animation-name: cd-hide-right;
              animation-name: cd-hide-right;
    }
    @media only screen and (min-width: 1100px) {
      .cd-radial-slider-content h2 {
        font-size: 4.4rem;
      }
      .cd-radial-slider-content p {
        font-size: 2rem;
        margin: 1.2em auto 1.6em;
      }
      .cd-radial-slider-content .cd-btn {
        font-size: 1.6rem;
        -webkit-transition: background .2s, color .2s;
        transition: background .2s, color .2s;
      }
      .cd-radial-slider-content .cd-btn:hover {
        background: #ffffff;
        color: #0a0b15;
      }
    }
    
    .cd-round-mask {
      /* wrapper for the svg mask elements */
      top: 0;
      left: 0;
      pointer-events: none;
      z-index: 0;
    }
    
    /* -------------------------------- 
    
    Slider navigation
    
    -------------------------------- */
    .cd-radial-slider-navigation li {
      position: absolute;
      z-index: 6;
      right: 3.58%;
      top: 42.5%;
      height: 15%;
      width: 8.57%;
    }
    .cd-radial-slider-navigation li a {
      display: block;
      height: 100%;
      /* replace text with image */
      overflow: hidden;
      text-indent: 100%;
      white-space: nowrap;
      color: transparent;
      -webkit-transition: -webkit-transform .2s;
      transition: -webkit-transform .2s;
      transition: transform .2s;
      transition: transform .2s, -webkit-transform .2s;
    }
    .cd-radial-slider-navigation li a::after {
      /* arrow icon */
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      bottom: auto;
      right: auto;
      -webkit-transform: translateX(-50%) translateY(-50%);
          -ms-transform: translateX(-50%) translateY(-50%);
              transform: translateX(-50%) translateY(-50%);
      height: 16px;
      width: 16px;
      background: url(https://codyhouse.co/demo/radial-svg-slider/img/cd-icon-arrows-mini.svg) no-repeat 0 0;
    }
    .cd-radial-slider-navigation li a:hover {
      -webkit-transform: scale(1.1);
          -ms-transform: scale(1.1);
              transform: scale(1.1);
    }
    .cd-radial-slider-navigation li:last-of-type {
      left: 3.58%;
      right: auto;
    }
    .cd-radial-slider-navigation li:last-of-type a::after {
      background-position: -16px 0;
    }
    @media only screen and (min-width: 900px) {
      .cd-radial-slider-navigation li a::after {
        height: 48px;
        width: 48px;
        background-image: url(https://codyhouse.co/demo/radial-svg-slider/img/cd-icon-arrows.svg);
      }
      .cd-radial-slider-navigation li:last-of-type a::after {
        background-position: -48px 0;
      }
    }
    
    /* -------------------------------- 
    
    Keyframes
    
    -------------------------------- */
    @-webkit-keyframes cd-reveal-left {
      0% {
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translateX(50px);
                transform: translateX(50px);
      }
      100% {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateX(0px);
                transform: translateX(0px);
      }
    }
    @keyframes cd-reveal-left {
      0% {
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translateX(50px);
                transform: translateX(50px);
      }
      100% {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateX(0px);
                transform: translateX(0px);
      }
    }
    @-webkit-keyframes cd-reveal-right {
      0% {
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translateX(-50px);
                transform: translateX(-50px);
      }
      100% {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateX(0px);
                transform: translateX(0px);
      }
    }
    @keyframes cd-reveal-right {
      0% {
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translateX(-50px);
                transform: translateX(-50px);
      }
      100% {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateX(0px);
                transform: translateX(0px);
      }
    }
    @-webkit-keyframes cd-hide-left {
      0% {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateX(0px);
                transform: translateX(0px);
      }
      100% {
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translateX(-50px);
                transform: translateX(-50px);
      }
    }
    @keyframes cd-hide-left {
      0% {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateX(0px);
                transform: translateX(0px);
      }
      100% {
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translateX(-50px);
                transform: translateX(-50px);
      }
    }
    @-webkit-keyframes cd-hide-right {
      0% {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateX(0px);
                transform: translateX(0px);
      }
      100% {
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translateX(50px);
                transform: translateX(50px);
      }
    }
    @keyframes cd-hide-right {
      0% {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateX(0px);
                transform: translateX(0px);
      }
      100% {
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translateX(50px);
                transform: translateX(50px);
      }
    }
    @-webkit-keyframes cd-clicked {
      0%, 100% {
        -webkit-transform: scale(1);
                transform: scale(1);
      }
      50% {
        -webkit-transform: scale(0.9);
                transform: scale(0.9);
      }
    }
    @keyframes cd-clicked {
      0%, 100% {
        -webkit-transform: scale(1);
                transform: scale(1);
      }
      50% {
        -webkit-transform: scale(0.9);
                transform: scale(0.9);
      }
    }




      1. ثم ابحث عن </head> وضع الاكواد التالية فوقه
    <script src='https://codyhouse.co/demo/radial-svg-slider/js/snap.svg-min.js'></script>
    <script src='https://codyhouse.co/demo/radial-svg-slider/js/main.js'></script>


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



    EmoticonEmoticon