ماهو سبب تقرحات الفم

اضافة ايقونات المتحركة مع SVG و CSS للبلوجر
مرحبا بكم متابعي ويب تيك درسنا اليوم وهو اضافة اداة مميزة وجميلة ويكنكم وضعها في الصفحة الرئيسية للمدونة تضهر للزائر مهاراتك.
ولكي لااطيل عليكم نبدء في الشرح وللعلم فهي سهلة التركيب

• افتح قالب مدونتك وابحث عن الكود التالي

 ]]></b:skin>

• وبعدها اضف الكود التالي فوقه

grid{max-width:960px;width:100%;margin:0 auto;text-align:center}
.grid--cell{width:24%;text-align:center;vertical-align:top;display:inline-block;padding:10px;padding-bottom:20px}
.animation-wrapper{position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);overflow:hidden;border-radius:5%;width:100%;padding-bottom:100%}
.animation-wrapper--software-bg{background:-webkit-linear-gradient(225deg,#ff3231,#b90100);background:linear-gradient(-135deg,#ff3231,#b90100)}
.animation-wrapper--website-bg{background:-webkit-linear-gradient(225deg,#bcd74c,#7f9d01);background:linear-gradient(-135deg,#bcd74c,#7f9d01)}
.animation-wrapper--webapp-bg{background:-webkit-linear-gradient(225deg,#f68e51,#eb5700);background:linear-gradient(-135deg,#f68e51,#eb5700)}
.animation-wrapper--win-app-bg{background:-webkit-linear-gradient(225deg,#fcc000,#da8e00);background:linear-gradient(-135deg,#fcc000,#da8e00)}
.animation-wrapper--win-mobile-app-bg{background:-webkit-linear-gradient(225deg,#01bcf3,#006e8e);background:linear-gradient(-135deg,#01bcf3,#006e8e)}
.title{display:inline-block;font-size:75%;font-weight:bold;color:#fff;padding:6px 9px;margin-top:15px;border-radius:5px}
.title--software{background-color:#ff3231}
.title--webdev{background-color:#7f9d01}
.title--webapp{background-color:#eb5700}
.title--win-app{background-color:#d8a500}
.title--win-mobile-app{background-color:#0195c0}
.screen-shine{position:relative;top:0;right:0;width:100%;height:100%;text-align:right;background-image:url("http://www.iamglynnsmith.com/codepen/css_animated_svg/animation_modular_screen_shine.svg");background-size:cover;background-position:top right;opacity:0.3}
.absolute{position:absolute;top:0;width:100%}
.software-monitor{left:0;top:6%;height:100%;z-index:6}
.software-screen--bg{left:0;height:100%}
@-webkit-keyframes software-screen--fg-mask{
  0%{height:0%}
  65%{height:35%}
  85%{height:35%}
  100%{height:0%}
}
@keyframes software-screen--fg-mask{
  0%{height:0%}
  65%{height:35%}
  85%{height:35%}
  100%{height:0%}
}
.software-screen--fg-mask{vertical-align:top;left:0%;margin-top:10%;height:30%;overflow:hidden;-webkit-animation:software-screen--fg-mask 3s linear infinite;animation:software-screen--fg-mask 3s linear infinite}
@-webkit-keyframes software-screen--fg{
  0%{-webkit-transform:translate(0,-10%);transform:translate(0,-10%)}
  69%{-webkit-transform:translate(0,-10%);transform:translate(0,-10%)}
  90%{-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}
  100%{-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}
}
@keyframes software-screen--fg{
  0%{-webkit-transform:translate(0,-10%);transform:translate(0,-10%)}
  69%{-webkit-transform:translate(0,-10%);transform:translate(0,-10%)}
  90%{-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}
  100%{-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}
}
.software-screen--fg{left:0;-webkit-animation:software-screen--fg 3s linear infinite;animation:software-screen--fg 3s linear infinite}
.software-screen--shine{right:0;height:100%;opacity:0.6;z-index:10}
.software-keyboard{left:0;top:7%;height:100%}
.software-hand{left:0;top:7%;height:100%;background:url("http://www.iamglynnsmith.com/codepen/css_animated_svg/animation_software_development_hand.svg");background-size:600% 100%;background-position:top left}
@-webkit-keyframes software-hand--left{
  0%{background-position:-300% 0}
  5%{background-position:-200% 0}
  10%{background-position:-100% 0;-webkit-transform:translate(0,0%) scale(-1,1);transform:translate(0,0%) scale(-1,1)}
  15%{background-position:0 0;-webkit-transform:translate(0,5%) scale(-1,1);transform:translate(0,5%) scale(-1,1)}
  20%{background-position:-100% 0}
  25%{background-position:-200% 0}
  30%{background-position:-400% 0;-webkit-transform:translate(0,5%) scale(-1,1);transform:translate(0,5%) scale(-1,1)}
  35%{background-position:-100% 0;-webkit-transform:translate(0,0) scale(-1,1);transform:translate(0,0) scale(-1,1)}
  40%{background-position:0% 0}
  45%{background-position:-200% 0;-webkit-transform:translate(0,0) scale(-1,1);transform:translate(0,0) scale(-1,1)}
  50%{background-position:0% 0;-webkit-transform:translate(0,5%) scale(-1,1);transform:translate(0,5%) scale(-1,1)}
  55%{background-position:-100% 0}
  60%{background-position:-200% 0;-webkit-transform:translate(0,5%) scale(-1,1);transform:translate(0,5%) scale(-1,1)}
  65%{background-position:0 0;-webkit-transform:translate(-2%,7%) scale(-1,1);transform:translate(-2%,7%) scale(-1,1)}
  95%{background-position:0 0;-webkit-transform:translate(0,2%) scale(-1,1);transform:translate(0,2%) scale(-1,1)}
}
@keyframes software-hand--left{
  0%{background-position:-300% 0}
  5%{background-position:-200% 0}
  10%{background-position:-100% 0;-webkit-transform:translate(0,0%) scale(-1,1);transform:translate(0,0%) scale(-1,1)}
  15%{background-position:0 0;-webkit-transform:translate(0,5%) scale(-1,1);transform:translate(0,5%) scale(-1,1)}
  20%{background-position:-100% 0}
  25%{background-position:-200% 0}
  30%{background-position:-400% 0;-webkit-transform:translate(0,5%) scale(-1,1);transform:translate(0,5%) scale(-1,1)}
  35%{background-position:-100% 0;-webkit-transform:translate(0,0) scale(-1,1);transform:translate(0,0) scale(-1,1)}
  40%{background-position:0% 0}
  45%{background-position:-200% 0;-webkit-transform:translate(0,0) scale(-1,1);transform:translate(0,0) scale(-1,1)}
  50%{background-position:0% 0;-webkit-transform:translate(0,5%) scale(-1,1);transform:translate(0,5%) scale(-1,1)}
  55%{background-position:-100% 0}
  60%{background-position:-200% 0;-webkit-transform:translate(0,5%) scale(-1,1);transform:translate(0,5%) scale(-1,1)}
  65%{background-position:0 0;-webkit-transform:translate(-2%,7%) scale(-1,1);transform:translate(-2%,7%) scale(-1,1)}
  95%{background-position:0 0;-webkit-transform:translate(0,2%) scale(-1,1);transform:translate(0,2%) scale(-1,1)}
}
.software-hand--left{-webkit-transform:scale(-1,1);transform:scale(-1,1);-webkit-animation:software-hand--left 3s steps(1,end) infinite;animation:software-hand--left 3s steps(1,end) infinite}
@-webkit-keyframes software-hand--right{
  0%{background-position:0 0}
  2%{background-position:-100% 0}
  4%{background-position:0 0}
  6%{background-position:-500% 0;-webkit-transform:translate(0,0);transform:translate(0,0)}
  8%{background-position:0 0;-webkit-transform:translate(0,5%);transform:translate(0,5%)}
  10%{background-position:-100% 0}
  12%{background-position:-0 0}
  14%{background-position:-200% 0}
  16%{background-position:0 0}
  18%{background-position:-200% 0}
  20%{background-position:-100% 0;-webkit-transform:translate(0,5%);transform:translate(0,5%)}
  22%{background-position:-200% 0;-webkit-transform:translate(0,0);transform:translate(0,0)}
  24%{background-position:0 0}
  26%{background-position:-500% 0}
  28%{background-position:0 0}
  30%{background-position:-200% 0}
  32.5%{background-position:-400% 0}
  50%{background-position:0 0}
  52%{background-position:-200% 0}
  54%{background-position:-500% 0;-webkit-transform:translate(0,0);transform:translate(0,0)}
  56%{background-position:-100% 0;-webkit-transform:translate(0,5%);transform:translate(0,5%)}
  58%{background-position:0 0}
  60%{background-position:-200% 0}
  62%{background-position:-100% 0}
  64%{background-position:0 0}
  66%{background-position:-500% 0}
  68%{background-position:-200% 0}
  70%{background-position:0% 0;-webkit-transform:translate(0,5%);transform:translate(0,5%)}
  72%{background-position:-200% 0;-webkit-transform:translate(0,0);transform:translate(0,0)}
  74%{background-position:-300% 0}
  76%{background-position:-500% 0}
  78%{background-position:0 0}
  80%{background-position:-500% 0}
  82.5%{background-position:-400% 0}
  100%{background-position:-400% 0}
}
@keyframes software-hand--right{
  0%{background-position:0 0}
  2%{background-position:-100% 0}
  4%{background-position:0 0}
  6%{background-position:-500% 0;-webkit-transform:translate(0,0);transform:translate(0,0)}
  8%{background-position:0 0;-webkit-transform:translate(0,5%);transform:translate(0,5%)}
  10%{background-position:-100% 0}
  12%{background-position:-0 0}
  14%{background-position:-200% 0}
  16%{background-position:0 0}
  18%{background-position:-200% 0}
  20%{background-position:-100% 0;-webkit-transform:translate(0,5%);transform:translate(0,5%)}
  22%{background-position:-200% 0;-webkit-transform:translate(0,0);transform:translate(0,0)}
  24%{background-position:0 0}
  26%{background-position:-500% 0}
  28%{background-position:0 0}
  30%{background-position:-200% 0}
  32.5%{background-position:-400% 0}
  50%{background-position:0 0}
  52%{background-position:-200% 0}
  54%{background-position:-500% 0;-webkit-transform:translate(0,0);transform:translate(0,0)}
  56%{background-position:-100% 0;-webkit-transform:translate(0,5%);transform:translate(0,5%)}
  58%{background-position:0 0}
  60%{background-position:-200% 0}
  62%{background-position:-100% 0}
  64%{background-position:0 0}
  66%{background-position:-500% 0}
  68%{background-position:-200% 0}
  70%{background-position:0% 0;-webkit-transform:translate(0,5%);transform:translate(0,5%)}
  72%{background-position:-200% 0;-webkit-transform:translate(0,0);transform:translate(0,0)}
  74%{background-position:-300% 0}
  76%{background-position:-500% 0}
  78%{background-position:0 0}
  80%{background-position:-500% 0}
  82.5%{background-position:-400% 0}
  100%{background-position:-400% 0}
}
.software-hand--right{right:0;-webkit-animation:software-hand--right 6s steps(1,end) infinite;animation:software-hand--right 6s steps(1,end) infinite}
.web-hardware{margin:0 auto;border-radius:6px}
.web-hardware--desktop{width:70%;height:55%;top:14%;left:8%;padding:6% 3%;background-color:#262626}
.web-hardware--mobile{width:25%;height:45%;top:30%;right:8%;padding:5% 2%;background-color:#444}
@-webkit-keyframes web-scroller-anim{
  0%{background-position:0 0}
  35%{background-position:0 99.5%}
  36%{background-position:0 100%}
  50%{background-position:0 100%}
  85%{background-position:0 0.5%}
  86%{background-position:0 0}
  100%{background-position:0 0}
}
@keyframes web-scroller-anim{
  0%{background-position:0 0}
  35%{background-position:0 99.5%}
  36%{background-position:0 100%}
  50%{background-position:0 100%}
  85%{background-position:0 0.5%}
  86%{background-position:0 0}
  100%{background-position:0 0}
}
.web-screen{width:100%;height:100%;background-color:#000;border-radius:2px;-webkit-animation:web-scroller-anim 9s infinite;animation:web-scroller-anim 9s infinite}
.web-screen--website-desktop{background:url("http://www.iamglynnsmith.com/codepen/css_animated_svg/animation_website_development_desktop.svg");background-size:100%}
.web-screen--website-mobile{background:url("http://www.iamglynnsmith.com/codepen/css_animated_svg/animation_website_development_mobile.svg");background-size:100%}
.web-screen--webapp-desktop{background:url("http://www.iamglynnsmith.com/codepen/css_animated_svg/animation_webapp_development_desktop.svg");background-size:100%}
.web-screen--webapp-mobile{background:url("http://www.iamglynnsmith.com/codepen/css_animated_svg/animation_webapp_development_mobile.svg");background-size:100%}
.win-desktop{top:-3%;left:0;height:100%}
@-webkit-keyframes shortcut-icon-01{
  10%{fill:#F4D387}
  11%{fill:white}
  12%{fill:white}
  13%{fill:#F4D387}
}
@keyframes shortcut-icon-01{
  10%{fill:#F4D387}
  11%{fill:white}
  12%{fill:white}
  13%{fill:#F4D387}
}
.win-desktop--shortcut-icon-01{-webkit-animation:shortcut-icon-01 10s linear infinite;animation:shortcut-icon-01 10s linear infinite;fill:#F4D387}
@-webkit-keyframes shortcut-icon-02{
  16%{fill:#ED9E48}
  18%{fill:white}
  86%{fill:white}
  87%{fill:#ED9E48}
}
@keyframes shortcut-icon-02{
  16%{fill:#ED9E48}
  18%{fill:white}
  86%{fill:white}
  87%{fill:#ED9E48}
}
.win-desktop--shortcut-icon-02{-webkit-animation:shortcut-icon-02 10s linear infinite;animation:shortcut-icon-02 10s linear infinite;fill:#ED9E48}
@-webkit-keyframes app-window{
  16%{opacity:0}
  18%{opacity:1}
  86%{opacity:1}
  87%{opacity:0}
}
@keyframes app-window{
  16%{opacity:0}
  18%{opacity:1}
  86%{opacity:1}
  87%{opacity:0}
}
.win-desktop--window{-webkit-animation:app-window 10s linear infinite;animation:app-window 10s linear infinite;opacity:0}
@-webkit-keyframes win-desktop--app-window--close-button{
  84%{fill:#aa0000}
  84.2%{fill:#ff0000}
  92%{fill:#aa0000}
}
@keyframes win-desktop--app-window--close-button{
  84%{fill:#aa0000}
  84.2%{fill:#ff0000}
  92%{fill:#aa0000}
}
.win-desktop--app-window--close-button{fill:#aa0000;-webkit-animation:win-desktop--app-window--close-button 10s linear infinite;animation:win-desktop--app-window--close-button 10s linear infinite}
@-webkit-keyframes win-desktop--app-link{
  24%{fill:#ccc}
  25%{fill:#888}
  73%{fill:#888}
  74%{fill:#ccc}
}
@keyframes win-desktop--app-link{
  24%{fill:#ccc}
  25%{fill:#888}
  73%{fill:#888}
  74%{fill:#ccc}
}
.win-desktop--app-link{fill:#ccc;-webkit-animation:win-desktop--app-link 10s linear infinite;animation:win-desktop--app-link 10s linear infinite}
@-webkit-keyframes app-chrome{
  28%{opacity:0}
  30%{opacity:1}
  74%{opacity:1}
  75%{opacity:0}
}
@keyframes app-chrome{
  28%{opacity:0}
  30%{opacity:1}
  74%{opacity:1}
  75%{opacity:0}
}
.win-desktop-chrome{-webkit-animation:app-chrome 10s linear infinite;animation:app-chrome 10s linear infinite;opacity:0}
.win-desktop--button{fill:#E5E5E5}
@-webkit-keyframes win-desktop--button-press{
  36%{fill:#E5E5E5}
  38%{fill:#91d329}
  86%{fill:#91d329}
}
@keyframes win-desktop--button-press{
  36%{fill:#E5E5E5}
  38%{fill:#91d329}
  86%{fill:#91d329}
}
.win-desktop--button-01{-webkit-animation:win-desktop--button-press 10s linear infinite;animation:win-desktop--button-press 10s linear infinite}
.win-desktop--button-02{-webkit-animation:win-desktop--button-press 10s 0.65s linear infinite;animation:win-desktop--button-press 10s 0.65s linear infinite}
.win-desktop--button-03{-webkit-animation:win-desktop--button-press 10s 1.35s linear infinite;animation:win-desktop--button-press 10s 1.35s linear infinite}
@-webkit-keyframes modal-reveal{
  52%{opacity:0}
  56%{opacity:1}
  62%{opacity:1}
  64%{opacity:0}
}
@keyframes modal-reveal{
  52%{opacity:0}
  56%{opacity:1}
  62%{opacity:1}
  64%{opacity:0}
}
.win-desktop-chrome--modal{-webkit-animation:modal-reveal 10s linear infinite;animation:modal-reveal 10s linear infinite;opacity:0}
.win-desktop--modal-button{-webkit-animation:button-press 10s 2.45s linear infinite;animation:button-press 10s 2.45s linear infinite}
@-webkit-keyframes win-desktop--tick{
  62%{opacity:0}
  64%{opacity:1}
  66%{opacity:1}
  68%{opacity:0}
}
@keyframes win-desktop--tick{
  62%{opacity:0}
  64%{opacity:1}
  66%{opacity:1}
  68%{opacity:0}
}
.win-desktop--tick{opacity:0;-webkit-animation:win-desktop--tick 10s linear infinite;animation:win-desktop--tick 10s linear infinite}
@-webkit-keyframes win-desktop--cursor{
  0%{-webkit-transform:translate(11%,4%);transform:translate(11%,4%)}
  8%{-webkit-transform:translate(-32%,-19%);transform:translate(-32%,-19%)}
  11%{-webkit-transform:translate(-32%,-19%);transform:translate(-32%,-19%)}
  24%{-webkit-transform:translate(-26%,-15%);transform:translate(-26%,-15%)}
  26%{-webkit-transform:translate(-26%,-15%);transform:translate(-26%,-15%)}
  34%{-webkit-transform:translate(24%,-12%);transform:translate(24%,-12%)}
  36%{-webkit-transform:translate(24%,-12%);transform:translate(24%,-12%)}
  42%{-webkit-transform:translate(-10%,1%);transform:translate(-10%,1%)}
  43%{-webkit-transform:translate(-10%,1%);transform:translate(-10%,1%)}
  49%{-webkit-transform:translate(25%,15%);transform:translate(25%,15%)}
  52%{-webkit-transform:translate(25%,15%);transform:translate(25%,15%)}
  60%{-webkit-transform:translate(8%,9%);transform:translate(8%,9%)}
  65%{-webkit-transform:translate(8%,9%);transform:translate(8%,9%)}
  72%{-webkit-transform:translate(-26%,-15%);transform:translate(-26%,-15%)}
  75%{-webkit-transform:translate(-26%,-15%);transform:translate(-26%,-15%)}
  83%{-webkit-transform:translate(33%,-22%);transform:translate(33%,-22%)}
  85%{-webkit-transform:translate(33%,-22%);transform:translate(33%,-22%)}
  92%{-webkit-transform:translate(11%,4%);transform:translate(11%,4%)}
}
@keyframes win-desktop--cursor{
  0%{-webkit-transform:translate(11%,4%);transform:translate(11%,4%)}
  8%{-webkit-transform:translate(-32%,-19%);transform:translate(-32%,-19%)}
  11%{-webkit-transform:translate(-32%,-19%);transform:translate(-32%,-19%)}
  24%{-webkit-transform:translate(-26%,-15%);transform:translate(-26%,-15%)}
  26%{-webkit-transform:translate(-26%,-15%);transform:translate(-26%,-15%)}
  34%{-webkit-transform:translate(24%,-12%);transform:translate(24%,-12%)}
  36%{-webkit-transform:translate(24%,-12%);transform:translate(24%,-12%)}
  42%{-webkit-transform:translate(-10%,1%);transform:translate(-10%,1%)}
  43%{-webkit-transform:translate(-10%,1%);transform:translate(-10%,1%)}
  49%{-webkit-transform:translate(25%,15%);transform:translate(25%,15%)}
  52%{-webkit-transform:translate(25%,15%);transform:translate(25%,15%)}
  60%{-webkit-transform:translate(8%,9%);transform:translate(8%,9%)}
  65%{-webkit-transform:translate(8%,9%);transform:translate(8%,9%)}
  72%{-webkit-transform:translate(-26%,-15%);transform:translate(-26%,-15%)}
  75%{-webkit-transform:translate(-26%,-15%);transform:translate(-26%,-15%)}
  83%{-webkit-transform:translate(33%,-22%);transform:translate(33%,-22%)}
  85%{-webkit-transform:translate(33%,-22%);transform:translate(33%,-22%)}
  92%{-webkit-transform:translate(11%,4%);transform:translate(11%,4%)}
}
.win-desktop--cursor{-webkit-transform:translate(11%,4%);transform:translate(11%,4%);-webkit-animation:win-desktop--cursor 10s cubic-bezier(0.77,0,0.175,1) infinite;animation:win-desktop--cursor 10s cubic-bezier(0.77,0,0.175,1) infinite}
.win-mobile{left:0;height:100%}
@-webkit-keyframes win-mobile--home-back{
  61%{fill:#333}
  61.2%{fill:#fff}
  63%{fill:#333}
  86%{fill:#333}
  86.2%{fill:#fff}
  88%{fill:#333}
  90%{fill:#333}
  90.2%{fill:#fff}
  91.9%{fill:#333}
  92%{fill:#333}
  92.2%{fill:#fff}
  94%{fill:#333}
}
@keyframes win-mobile--home-back{
  61%{fill:#333}
  61.2%{fill:#fff}
  63%{fill:#333}
  86%{fill:#333}
  86.2%{fill:#fff}
  88%{fill:#333}
  90%{fill:#333}
  90.2%{fill:#fff}
  91.9%{fill:#333}
  92%{fill:#333}
  92.2%{fill:#fff}
  94%{fill:#333}
}
.win-mobile--home-back{fill:#333;-webkit-animation:win-mobile--home-back 10s linear infinite;animation:win-mobile--home-back 10s linear infinite}
.win-mobile--home{opacity:1}
@-webkit-keyframes win-mobile--home-bg{
  8%{opacity:0}
  16%{opacity:1}
  95%{opacity:1}
  99%{opacity:0}
}
@keyframes win-mobile--home-bg{
  8%{opacity:0}
  16%{opacity:1}
  95%{opacity:1}
  99%{opacity:0}
}
.win-mobile--home-bg{opacity:0;-webkit-animation:win-mobile--home-bg 10s cubic-bezier(0.165,0.84,0.44,1) infinite;animation:win-mobile--home-bg 10s cubic-bezier(0.165,0.84,0.44,1) infinite}
@-webkit-keyframes win-mobile--home-row-01{
  9%{opacity:0;-webkit-transform:scale(0,1);transform:scale(0,1)}
  11%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  94%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  97%{opacity:0;-webkit-transform:scale(0,1);transform:scale(0,1)}
}
@keyframes win-mobile--home-row-01{
  9%{opacity:0;-webkit-transform:scale(0,1);transform:scale(0,1)}
  11%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  94%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  97%{opacity:0;-webkit-transform:scale(0,1);transform:scale(0,1)}
}
.win-mobile--home-row-01{-webkit-transform:scale(0,1);transform:scale(0,1);-webkit-transform-origin:33% 0;transform-origin:33% 0;opacity:0;-webkit-animation:win-mobile--home-row-01 10s cubic-bezier(0.165,0.84,0.44,1) infinite;animation:win-mobile--home-row-01 10s cubic-bezier(0.165,0.84,0.44,1) infinite}
@-webkit-keyframes win-mobile--home-row-02{
  10%{opacity:0;-webkit-transform:scale(0,1);transform:scale(0,1)}
  12%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  95%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  98%{opacity:0;-webkit-transform:scale(0,1);transform:scale(0,1)}
}
@keyframes win-mobile--home-row-02{
  10%{opacity:0;-webkit-transform:scale(0,1);transform:scale(0,1)}
  12%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  95%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  98%{opacity:0;-webkit-transform:scale(0,1);transform:scale(0,1)}
}
.win-mobile--home-row-02{-webkit-transform:scale(0,1);transform:scale(0,1);-webkit-transform-origin:48% 0;transform-origin:48% 0;opacity:0;-webkit-animation:win-mobile--home-row-02 10s cubic-bezier(0.165,0.84,0.44,1) infinite;animation:win-mobile--home-row-02 10s cubic-bezier(0.165,0.84,0.44,1) infinite}
@-webkit-keyframes win-mobile--home-row-03{
  11%{opacity:0;-webkit-transform:scale(0,1);transform:scale(0,1)}
  13%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  96%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  98%{opacity:0;-webkit-transform:scale(0,1);transform:scale(0,1)}
}
@keyframes win-mobile--home-row-03{
  11%{opacity:0;-webkit-transform:scale(0,1);transform:scale(0,1)}
  13%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  96%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  98%{opacity:0;-webkit-transform:scale(0,1);transform:scale(0,1)}
}
.win-mobile--home-row-03{-webkit-transform:scale(0,1);transform:scale(0,1);-webkit-transform-origin:60% 0;transform-origin:60% 0;opacity:0;-webkit-animation:win-mobile--home-row-03 10s cubic-bezier(0.165,0.84,0.44,1) infinite;animation:win-mobile--home-row-03 10s cubic-bezier(0.165,0.84,0.44,1) infinite}
@-webkit-keyframes win-mobile--home-shortcut{
  17%{fill:#D60000}
  17.2%{fill:#fff}
  25%{fill:#D60000}
}
@keyframes win-mobile--home-shortcut{
  17%{fill:#D60000}
  17.2%{fill:#fff}
  25%{fill:#D60000}
}
.win-mobile--home-shortcut{fill:#D60000;-webkit-animation:win-mobile--home-shortcut 10s linear infinite;animation:win-mobile--home-shortcut 10s linear infinite}
@-webkit-keyframes win-mobile--app-01{
  23%{opacity:0;-webkit-transform:scale(0.5,0.5);transform:scale(0.5,0.5)}
  26%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  90%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  94%{opacity:0;-webkit-transform:scale(0.5,0.5);transform:scale(0.5,0.5)}
}
@keyframes win-mobile--app-01{
  23%{opacity:0;-webkit-transform:scale(0.5,0.5);transform:scale(0.5,0.5)}
  26%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  90%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  94%{opacity:0;-webkit-transform:scale(0.5,0.5);transform:scale(0.5,0.5)}
}
.win-mobile--app-01{-webkit-transform:scale(0.5,0.5);transform:scale(0.5,0.5);opacity:0;-webkit-animation:win-mobile--app-01 10s cubic-bezier(0.77,0,0.175,1) infinite;animation:win-mobile--app-01 10s cubic-bezier(0.77,0,0.175,1) infinite}
@-webkit-keyframes win-mobile--app-01--bg{
  26%{fill:red}
  34%{fill:#330000}
  100%{fill:#330000}
}
@keyframes win-mobile--app-01--bg{
  26%{fill:red}
  34%{fill:#330000}
  100%{fill:#330000}
}
.win-mobile--app-01--bg{fill:red;-webkit-animation:win-mobile--app-01--bg 10s cubic-bezier(0.77,0,0.175,1) infinite;animation:win-mobile--app-01--bg 10s cubic-bezier(0.77,0,0.175,1) infinite}
@-webkit-keyframes win-mobile--app-01-icons{
  30%{opacity:0}
  32%{opacity:1}
  100%{opacity:1}
}
@keyframes win-mobile--app-01-icons{
  30%{opacity:0}
  32%{opacity:1}
  100%{opacity:1}
}
.win-mobile--app-01-icons{opacity:0;-webkit-animation:win-mobile--app-01-icons 10s linear infinite;animation:win-mobile--app-01-icons 10s linear infinite}
@-webkit-keyframes win-mobile--app-01--shortcut-01{
  36%{opacity:0.2}
  36.2%{opacity:1}
  44%{opacity:0.2}
}
@keyframes win-mobile--app-01--shortcut-01{
  36%{opacity:0.2}
  36.2%{opacity:1}
  44%{opacity:0.2}
}
.win-mobile--app-01--icons--shortcut-01{opacity:0.2;fill:#fff;-webkit-animation:win-mobile--app-01--shortcut-01 10s linear infinite;animation:win-mobile--app-01--shortcut-01 10s linear infinite}
.win-mobile--app-01--icons--shortcut-02{opacity:0.2;fill:#fff;-webkit-animation:win-mobile--app-01--shortcut-01 10s 3.25s linear infinite;animation:win-mobile--app-01--shortcut-01 10s 3.25s linear infinite}
@-webkit-keyframes win-mobile--app-02{
  42%{opacity:0;-webkit-transform:scale(0.9,0.9);transform:scale(0.9,0.9)}
  44%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  62%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  64%{opacity:0;-webkit-transform:scale(0.9,0.9);transform:scale(0.9,0.9)}
  72%{opacity:0;-webkit-transform:scale(0.9,0.9);transform:scale(0.9,0.9)}
  74%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  88%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  90%{opacity:0;-webkit-transform:scale(0.9,0.9);transform:scale(0.9,0.9)}
  100%{opacity:0;-webkit-transform:scale(0.9,0.9);transform:scale(0.9,0.9)}
}
@keyframes win-mobile--app-02{
  42%{opacity:0;-webkit-transform:scale(0.9,0.9);transform:scale(0.9,0.9)}
  44%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  62%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  64%{opacity:0;-webkit-transform:scale(0.9,0.9);transform:scale(0.9,0.9)}
  72%{opacity:0;-webkit-transform:scale(0.9,0.9);transform:scale(0.9,0.9)}
  74%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  88%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  90%{opacity:0;-webkit-transform:scale(0.9,0.9);transform:scale(0.9,0.9)}
  100%{opacity:0;-webkit-transform:scale(0.9,0.9);transform:scale(0.9,0.9)}
}
.win-mobile--app-02{opacity:0;-webkit-transform:scale(0.9,0.9);transform:scale(0.9,0.9);-webkit-animation:win-mobile--app-02 10s linear infinite;animation:win-mobile--app-02 10s linear infinite}
@-webkit-keyframes win-mobile--app-02--button{
  51%{fill:#4d4d4d}
  51.2%{fill:#bbb}
  65%{fill:#bbb}
  65.2%{fill:#4d4d4d}
}
@keyframes win-mobile--app-02--button{
  51%{fill:#4d4d4d}
  51.2%{fill:#bbb}
  65%{fill:#bbb}
  65.2%{fill:#4d4d4d}
}
.win-mobile--app-02--button_01{fill:#4d4d4d;-webkit-animation:win-mobile--app-02--button 10s linear infinite;animation:win-mobile--app-02--button 10s linear infinite}
.win-mobile--app-02--button_02{fill:#4d4d4d;-webkit-animation:win-mobile--app-02--button 10s 0.2s linear infinite;animation:win-mobile--app-02--button 10s 0.2s linear infinite}
.win-mobile--app-02--button_03{fill:#4d4d4d;-webkit-animation:win-mobile--app-02--button 10s 0.4s linear infinite;animation:win-mobile--app-02--button 10s 0.4s linear infinite}
.win-mobile--app-02--button_04{fill:#4d4d4d;-webkit-animation:win-mobile--app-02--button 10s 2.9s linear infinite;animation:win-mobile--app-02--button 10s 2.9s linear infinite}
.win-mobile--app-02--button_05{fill:#4d4d4d;-webkit-animation:win-mobile--app-02--button 10s 3.04s linear infinite;animation:win-mobile--app-02--button 10s 3.04s linear infinite}
.win-mobile--app-02--button_06{fill:#4d4d4d;-webkit-animation:win-mobile--app-02--button 10s 3.19s linear infinite;animation:win-mobile--app-02--button 10s 3.19s linear infinite} 

•  والان قم بحفظ القالب 
• وهذا هو الكود يمكنك وضعه في صفحة تابتة او اي مكان في القالب 

<div class="grid">
<!-- SOFTWARE DEVELOPMENT ========================================================================== -->
<div class="grid--cell">
<div class="animation-wrapper animation-wrapper--software-bg">
<div class="absolute software-monitor">
<!-- Monitor hardware + screen chrome/UI -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute software-screen software-screen--bg">
<!-- Monitor feet -->
<g fill="#333">
<circle cx="80" cy="152" r="4" />
<circle cx="220" cy="152" r="4" />
</g>
<!-- Browser chrome BG -->
<path fill="#A6A6A6" d="M60 149.5c-1.38 0-2.5-1.12-2.5-2.5V19c0-1.38 1.12-2.5 2.5-2.5h180c1.38 0 2.5 1.12 2.5 2.5v128c0 1.38-1.12 2.5-2.5 2.5H60z" />
<!-- Monitor Bezel -->
<path fill="#333" d="M240 19v128H60V19h180m0-5H60c-2.76 0-5 2.24-5 5v128c0 2.76 2.24 5 5 5h180c2.76 0 5-2.24 5-5V19c0-2.76-2.24-5-5-5z" />
<!-- Browser page BG -->
<path fill="#E5E5E5" d="M60 26h180v116H60z" />
<!-- Sidebar BG -->
<path fill="#D1D1D1" d="M80 26h30v116H80z" />
<!-- Browser buttons -->
<path fill="#191919" d="M218 20h5v5h-5zm7.5 0h5v5h-5z" />
<!-- Line numbers -->
<path fill="#D60000" d="M233 20h5v5h-5zM96.02 26.33h-1.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm0 7.4h-1.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm0 7.4h-1.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm0 7.4h-1.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm0 7.47h-1.85c-1.02 0-1.84.82-1.84 1.83 0 1.02.82 1.84 1.84 1.84h1.85c1.02 0 1.84-.82 1.84-1.84 0-1-.82-1.83-1.84-1.83zm0 7.33h-1.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm0 7.4h-1.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1-.82-1.84-1.84-1.84zm0 7.27h-1.85c-1.02 0-1.84.82-1.84 1.83 0 1.02.82 1.84 1.84 1.84h1.85c1.02 0 1.84-.82 1.84-1.84 0-1-.82-1.83-1.84-1.83zm0 7.53h-1.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm0 7.4h-1.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm0 7.4h-1.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm0 7.4h-1.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1-.82-1.84-1.84-1.84zm0 7.27h-1.85c-1.02 0-1.84.82-1.84 1.83 0 1.02.82 1.84 1.84 1.84h1.85c1.02 0 1.84-.82 1.84-1.84 0-1-.82-1.83-1.84-1.83zm0 7.53h-1.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm0 7.4h-1.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm0 7.4h-1.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84z"
/>
</svg>
<!-- Monitor screen mask - Height is animated for R "code reveal" -->
<div class="absolute software-screen software-screen--fg-mask">
<!-- Monitor screen R graphic - Translates upwards for R "code scroll" -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute software-screen software-screen--fg">
<path fill="#D60000" d="M130.02 33.73h-3.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h3.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm18 0h-10.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h10.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zM170.02 41.13h-21.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h21.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm-29 7.4h-14.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h14.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zM177.02 56h-6.85c-1.02 0-1.84.82-1.84 1.83 0 1.02.82 1.84 1.84 1.84h6.85c1.02 0 1.84-.82 1.84-1.84 0-1-.82-1.83-1.84-1.83zm1 7.33h-28.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h28.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm-24 7.4h-13.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h13.85c1.02 0 1.84-.82 1.84-1.83 0-1-.82-1.84-1.84-1.84zM176.02 78h-9.85c-1.02 0-1.84.82-1.84 1.83 0 1.02.82 1.84 1.84 1.84h9.85c1.02 0 1.84-.82 1.84-1.84 0-1-.82-1.83-1.84-1.83zm-32 7.53h-17.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h17.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zM169.02 92.93h-29.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h29.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zM157.02 100.33h-2.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h2.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm-16 7.4h-2.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h2.85c1.02 0 1.84-.82 1.84-1.83 0-1-.82-1.84-1.84-1.84zM168.02 115h-25.85c-1.02 0-1.84.82-1.84 1.83 0 1.02.82 1.84 1.84 1.84h25.85c1.02 0 1.84-.82 1.84-1.84 0-1-.82-1.83-1.84-1.83zM159.02 129.93h-6.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h6.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm19 0h-11.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h11.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84z"
/>
<path fill="#bbb" d="M161.02 33.73h-5.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h5.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm-20 7.4h-10.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h10.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zM159.02 48.53h-10.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h10.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zM159.02 78h-14.85c-1.02 0-1.84.82-1.84 1.83 0 1.02.82 1.84 1.84 1.84h14.85c1.02 0 1.84-.82 1.84-1.84 0-1-.82-1.83-1.84-1.83zM132.02 92.93h-5.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h5.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zM162.02 107.73h-13.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h13.85c1.02 0 1.84-.82 1.84-1.83 0-1-.82-1.84-1.84-1.84zM163.02 122.53h-15.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h15.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84z"
/>
<path fill="#888" d="M175.02 48.53h-8.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h8.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm-12 7.47h-22.85c-1.02 0-1.84.82-1.84 1.83 0 1.02.82 1.84 1.84 1.84h22.85c1.02 0 1.84-.82 1.84-1.84 0-1-.82-1.83-1.84-1.83zM178.02 70.73h-16.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h16.85c1.02 0 1.84-.82 1.84-1.83 0-1-.82-1.84-1.84-1.84zm-41 7.27h-10.85c-1.02 0-1.84.82-1.84 1.83 0 1.02.82 1.84 1.84 1.84h10.85c1.02 0 1.84-.82 1.84-1.84 0-1-.82-1.83-1.84-1.83zM175.02 85.53h-22.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h22.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zM146.02 100.33h-11.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h11.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zM173.02 122.53h-2.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h2.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84z"
/>
</svg>
</div>
<!-- Monitor screen shine overlay -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute software-screen software-screen--shine">
<linearGradient id="a" x1="195" x2="41" y1="-26" y2="128" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#FFF" stop-opacity=".75" />
<stop offset="1" stop-color="#FFF" stop-opacity="0" />
</linearGradient>
<linearGradient id="b" x1="244.5" x2="138.5" y1="45.5" y2="151.5" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#FFF" stop-opacity=".55" />
<stop offset="1" stop-color="#FFF" stop-opacity="0" />
</linearGradient>
<path fill="url(#a)" d="M240 19H60v128h52" />
<path fill="url(#b)" d="M240 59V41L134 147h18" />
</svg>
</div>
<!-- Keyboard -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute software-keyboard">
<path fill="#E0E0E0" d="M70 166h160v58H70z" />
<g fill="#FFF">
<path d="M73 169h11v7H73zm13 0h11v7H86zm26 0h11v7h-11zm-13 0h11v7H99zm26 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm-98 9h11v7H92zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h18v7h-18zm-123 9h11v7H86zm13 0h11v7H99zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm-96 9h11v7H94zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm-99 9h11v7H99zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h24v7h-24zm-13 9h16v7h-16zm18 0h19v7h-19zm-5-27h11v7h-11zm0-18h11v7h-11zm13 0h11v7h-11zm-143 9h17v7H73zm0 9h11v7H73zm0 9h19v7H73zm0 9h24v7H73zm0 9h19v7H73zm21 0h16v7H94zm18 0h76v7h-76zM216 187v9h-5v7h16v-16"
/>
</g>
</svg>
<!-- Left & right hands - Have to be done with DIV BG's as we need to animate the BG position for switching sprites -->
<div class="absolute software-hand software-hand--left"></div>
<div class="absolute software-hand software-hand--right"></div>
</div>
<h1 class="title title--software">تطوير البرمجيات
</h1>
</div>
<!-- WEBSITE DEVELOPMENT ========================================================================== -->
<div class="grid--cell">
<div class="animation-wrapper animation-wrapper--website-bg">
<!-- Desktop screen -->
<div class="absolute web-hardware web-hardware--desktop">
<!-- Animated DIV BG for simple scrolling through site GFX -->
<div class="web-screen web-screen--website-desktop">
<div class="screen-shine"></div>
</div>
</div>
<!-- Mobile screen -->
<div class="absolute web-hardware web-hardware--mobile">
<!-- Animated DIV BG for simple scrolling through site GFX -->
<div class="web-screen web-screen--website-mobile">
<div class="screen-shine"></div>
</div>
</div>
</div>
<h1 class="title title--webdev">تطوير المواقع
</h1>
</div>
<!-- WEBAPP DEVELOPMENT ========================================================================== -->
<div class="grid--cell">
<div class="animation-wrapper animation-wrapper--webapp-bg">
<!-- Desktop screen -->
<div class="absolute web-hardware web-hardware--desktop">
<!-- Animated DIV BG for simple scrolling through site GFX -->
<div class="web-screen web-screen--webapp-desktop">
<!-- Screen shine set to DIV BG because background-size: cover is magical -->
<div class="screen-shine"></div>
</div>
</div>
<!-- Mobile screen -->
<div class="absolute web-hardware web-hardware--mobile">
<!-- Animated DIV BG for simple scrolling through site GFX -->
<div class="web-screen web-screen--webapp-mobile">
<!-- Screen shine set to DIV BG because background-size: cover is magical -->
<div class="screen-shine"></div>
</div>
</div>
</div>
<h1 class="title title--webapp">تطوير تطبيق الويب
</h1>
</div>
<!-- WINDOWS DESKTOP APPLICATIONS ========================================================================== -->
<div class="grid--cell">
<div class="animation-wrapper animation-wrapper--win-app-bg">
<!-- Monitor and desktop chrome -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-desktop">
<!-- Desktop colour -->
<path fill="#FCC000" d="M30 240c-2.76 0-5-2.24-5-5V65c0-2.76 2.24-5 5-5h240c2.76 0 5 2.24 5 5v170c0 2.76-2.24 5-5 5H30z" />
<!-- Device -->
<g fill="#333">
<circle cx="60" cy="245" r="10" />
<circle cx="240" cy="245" r="10" />
<path d="M270 65v170H30V65h240m0-10H30c-5.52 0-10 4.48-10 10v170c0 5.52 4.48 10 10 10h240c5.52 0 10-4.48 10-10V65c0-5.52-4.48-10-10-10z" />
</g>
<!-- Taskbar -->
<path fill="#E48109" d="M30 224h240v11H30z" />
<!-- Taskbar inactive buttons and systray -->
<path fill="#ED9E48" d="M91 226h40v7H91zm45 0h40v7h-40zm112 1h20v5h-20z" />
<!-- Desktop inactive shortcuts -->
<path fill="#F4D387" d="M40 105h20v20H40zm0 30h20v20H40zm0 30h20v20H40z" />
<g fill="#FFF">
<!-- Windows button -->
<path d="M32 226h3v3h-3zm0 4h3v3h-3zm4-4h3v3h-3zM36 230h3v3h-3z" />
<!-- Desktop wallpaper graphic -->
<path d="M210 142V85l-62 8.9V142m0 6v48.08l62 8.92v-57m-72-6V94.94l-48 7.2V142m0 6v39.86l48 7.2V148" opacity=".15" />
</g>
</svg>
<!-- App shortcuts -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-desktop">
<!-- Desktop shortcut -->
<path fill="#F4D387" d="M40 75h20v20H40z" class="win-desktop--shortcut-icon-01" />
<!-- Taskbar shortcut button -->
<path fill="#ED9E48" d="M46 226h40v7H46z" class="win-desktop--shortcut-icon-02" />
</svg>
<!-- App window -->
<div class="win-desktop--window">
<!-- App chrome -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-desktop win-desktop--app-window">
<path fill="#E48109" d="M50 72h200v143H50z" />
<path fill="#FFF" d="M50 91h200v117H50z" />
<path fill="#E5E5E5" d="M50 91h40v117H50z" />
<path fill="#CCC" d="M55 106.5h30v4H55zm0 10h30v4H55zm0 10h30v4H55zm0 10h30v4H55zm0 10h30v4H55zm0 10h30v4H55zm0 10h30v4H55zM50 81h200v10H50z" />
<path fill="#7F4506" d="M52 75h86v4H52z" />
<path fill="#7F4506" d="M232 73h7v7h-7zm-10 0h7v7h-7z" />
<!-- Close X button -->
<path d="M242 73h7v7h-7z" class="win-desktop--app-window--close-button" />
<!-- Sidebar link -->
<path fill="#CCC" d="M55 96.5h30v4H55z" class="win-desktop--app-link" />
<!-- In-app screen -->
<g fill="#E5E5E5" class="win-desktop-chrome">
<rect width="40" height="20" x="100" y="100" />
<rect width="40" height="20" x="150" y="100" />
<!-- Button 01 -->
<rect width="40" height="20" x="200" y="100" class="win-desktop--button win-desktop--button-01" />
<!-- Button 02 -->
<rect width="40" height="20" x="100" y="130" class="win-desktop--button win-desktop--button-02" />
<rect width="40" height="20" x="150" y="130" />
<rect width="40" height="20" x="200" y="130" />
<rect width="40" height="10" x="100" y="160" />
<rect width="90" height="10" x="150" y="160" />
<!-- Ok button-->
<rect width="40" height="10" x="200" y="180" class="win-desktop--button win-desktop--button-03" />
</g>
</svg>
<!-- Modal window -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-desktop win-desktop-chrome--modal">
<!-- Modal BG -->
<path d="M50 81h200v127H50z" opacity=".7" />
<!-- Modal dialog -->
<path fill="#FFF" d="M100 114.5h100v70H100z" />
<path fill="#E5E5E5" d="M110 124h80v6h-80zm0 12h80v6h-80zm0 12h60v6h-60zm5 16h30v10h-30z" />
<!-- Modal button -->
<path d="M155 164h30v10h-30z" class="win-desktop--button win-desktop--modal-button" />
</svg>
<!-- Tick overlay -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-desktop win-desktop--tick">
<rect width="200" height="127" x="50" y="81" fill="#FFF" opacity=".75" />
<circle cx="150" cy="145" r="35" fill="#91D329" />
<g fill="#FFF">
<rect width="40" height="10" x="135.3" y="140" transform="rotate(-45 155.307 145.005)" />
<rect width="25" height="10" x="126.89" y="145.3" transform="rotate(45 139.396 150.303)" />
</g>
</svg>
</div>
<!-- Mouse cursor -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-desktop win-desktop--cursor">
<g stroke="#000" stroke-miterlimit="10">
<path d="M153.7 152.66l-7.2-7v10l2.45-.97 1.56 3.63 2.57-1-1.56-3.7z" opacity=".4" />
<path fill="#FFF" d="M153.7 149.66l-7.2-7v10l2.45-.97 1.56 3.63 2.57-1-1.56-3.7z" />
</g>
</svg>
<!-- Screen shine -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-desktop">
<linearGradient id="a" x1="210" x2="21" y1="5" y2="194" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#FFF" stop-opacity=".5" />
<stop offset="1" stop-color="#FFF" stop-opacity="0" />
</linearGradient>
<linearGradient id="b" x1="272.22" x2="139.69" y1="90.22" y2="222.74" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#FFF" stop-opacity=".3" />
<stop offset="1" stop-color="#FFF" stop-opacity="0" />
</linearGradient>
<path fill="url(#a)" d="M270 65H30v138h69.68" />
<path fill="url(#b)" d="M270 111.9V88L129.95 213h23.95" />
</svg>
</div>
<h1 class="title title--win-app">تطبيقات سطح المكتب ويندوز
</h1>
</div>
<!-- WINDOWS MOBILE APPLICATIONS ========================================================================== -->
<div class="grid--cell">
<div class="animation-wrapper animation-wrapper--win-mobile-app-bg">
<!-- Device BG -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-mobile">
<path stroke="#000" stroke-width="10" stroke-miterlimit="10" d="M100 50h100v200H100z" stroke-linejoin="round" />
<path d="M100 50h100v200H100z" />
<path fill="#333" d="M134.28 143.18l32.53 32.53-5.6 5.7-32.5-32.5zm-8.48 8.48l26.86 26.87-5.65 5.66-26.8-26.9zm11.3-11.3l36.78-36.78 2.83 2.83-36.7 36.8zm5.67 5.64l45.25-45.24 2.83 2.83-45.25 45.2zm5.65 5.67l13.43-13.43 2.83 2.83-13.44 13.43zm5.66 5.65l18.38-18.38 2.83 2.83-18.4 18.38z"
/>
<path fill="#7F807F" d="M122.13 146.9c.6.6.22.9-.23 1.35l-1.9 1.9-3.2 3.2c-.4.4-1.12-.44-1.22-.78-.1-.33.33-.6.53-.8l1.8-1.8-8.1-8.15-.8 3.3c-.3 1-1.4-.12-1.3-.78 0-.35.2-.76.3-1.1.2-1 .44-1.97.65-2.95.05-.4 1.07-1.6 1.44-1.2.26.2.5.4.7.7l3.3 3.3 5.4 5.4 1.96-2c.27-.3.68.1.88.3.1.1-.1-.1 0 0zm4.1-13.76c2.56 2.55 4.8 6.27 1.73 9.36-3.08 3.1-6.6.6-9.1-1.9-2.53-2.53-4.8-6.27-1.72-9.35 3.1-3.1 6.6-.6 9.1 1.9.82.8-.9-.9 0 0zm-1.35 1.56c-1.6-1.6-4.44-4.4-6.66-2.2-2.15 2.16.42 4.96 2 6.55 1.42 1.4 4 4.1 6.17 2.6 2.9-2 .2-5.2-1.6-6.95zm4-6.68c.62.62.72 1.16.07 1.8-.66.67-1.2.57-1.82-.06-.64-.64-.77-1.17-.1-1.84.67-.67 1.2-.54 1.84.1.18.18-.2-.2 0 0zm5.74 5.75c.63.63.74 1.17.1 1.82-.68.6-1.2.5-1.84-.1-.63-.7-.75-1.2-.1-1.9.67-.7 1.22-.6 1.84.1.2.1-.18-.2 0 0zm6.64-11c2.37 2.36 1.2 5.56-1.1 7.5-.66.55-2.4 1.9-3.33 1.4-.32-.18-.8-.57-.9-.93-.16-.47 1.06-.63 1.35-.74 2.23-.9 5.22-4.1 2.18-6.04-2.05-1.3-4 .88-5.35 2.22-.4.47-1.6-.64-1.1-1.1.2-.34.7-.7 1-.95.9-.88 1.5-2.13 1-3.36-.4-1.24-1.8-2.1-3.1-1.52-1.2.54-1.8 1.8-2.1 3-.05.25-.1 1.2-.53 1.04-.47-.2-.97-.8-.97-1.3-.05-2.3 2.6-5 4.8-5.1 1.46-.1 2.8 1 3.46 2.2.63 1.2.4 2.4-.2 3.5 1.5-1.2 3.64-1.4 5.05 0 .5.5-.32-.36 0 0zm6.72-11.37c2.55 2.55 4.8 6.27 1.72 9.36-3.08 3.08-6.6.6-9.1-1.9-2.53-2.54-4.8-6.28-1.72-9.35 3.1-3 6.6-.6 9.1 1.9zm-1.36 1.55c-1.6-1.6-4.44-4.4-6.65-2.2-2.16 2.16.42 4.97 2 6.56 1.4 1.4 4 4.1 6.16 2.7 2.93-2 .23-5.2-1.5-6.9-.54-.5.4.4 0 0z"
/>
</svg>
<!-- Home screen -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-mobile win-mobile--home">
<!-- BG -->
<path d="M100 50h100v200H100z" class="absolute win-mobile win-mobile--home-bg" />
<!-- 1st row -->
<g class="absolute win-mobile win-mobile--home-row-01">
<path fill="#0056A7" d="M100 61h32v32h-32zm0 34h66v32h-66z" />
<path fill="#7A3293" d="M100 129h32v32h-32z" />
<path fill="#399743" d="M100 163h15v15h-15zm17 0h15v15h-15zm-17 17h15v15h-15zm17 0h15v15h-15z" />
<path fill="#0056A7" d="M100 197h66v32h-66zm0 34h15v15h-15zm17 0h15v15h-15z" />
</g>
<!-- 2nd row -->
<g class="absolute win-mobile win-mobile--home-row-02">
<path fill="#7A3293" d="M134 61h32v32h-32z" />
<path d="M134 129h32v32h-32z" class="win-mobile--home-shortcut" />
<path fill="#0056A7" d="M134 163h32v32h-32zm0 68h15v15h-15zm17 0h15v15h-15z" />
</g>
<!-- 3rd row -->
<g class="absolute win-mobile win-mobile--home-row-03">
<path fill="#7A3293" d="M168 61h32v32h-32z" />
<path fill="#F57929" d="M168 95h32v32h-32z" />
<path fill="#0056A7" d="M168 163h32v32h-32zm0 34h32v32h-32zm0 34h32v15h-32z" />
<path fill="#399743" d="M168 129h15v15h-15zm17 0h15v15h-15zm-17 17h15v15h-15zm17 0h15v15h-15z" />
</g>
</svg>
<!-- Mobile app -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-mobile win-mobile--app-01">
<!-- BG -->
<path d="M100 50h100v200H100z" class="win-mobile--app-01--bg" />
<!-- App screen 01 icons -->
<g class="absolute win-mobile win-mobile--app-01-icons">
<path d="M108 94h22v22h-22z" class="win-mobile--app-01--icons--shortcut-01" />
<path d="M108 184h22v22h-22z" class="win-mobile--app-01--icons--shortcut-02" />
<g fill="#fff" opacity="0.2">
<path d="M108 64h22v22h-22z" />
<path d="M138 64h54v7h-54z" />
<path d="M138 75h54v4h-54zM138 82h54v4h-54z" />
<path d="M138 94h54v7h-54z" />
<path d="M138 105h54v4h-54zM138 112h54v4h-54z" />
<path d="M108 124h22v22h-22z" />
<path d="M138 124h54v7h-54z" />
<path d="M138 135h54v4h-54zM138 142h54v4h-54z" />
<path d="M108 154h22v22h-22z" />
<path d="M138 154h54v7h-54z" />
<path d="M138 165h54v4h-54zM138 172h54v4h-54z" />
<path d="M138 184h54v7h-54z" />
<path d="M138 195h54v4h-54zM138 202h54v4h-54z" />
<path d="M108 214h22v22h-22z" />
<path d="M138 214h54v7h-54z" />
<path d="M138 225h54v4h-54z" />
</g>
</g>
</svg>
<!-- App screen 02 icons -->
<div class="absolute win-mobile win-mobile--app-02">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<rect width="100" height="200" x="100" y="50" fill="#000000" />
<g fill="#4D4D4D">
<rect width="22" height="22" x="139" y="64" />
<rect width="22" height="22" x="170" y="64" class="win-mobile--app-02--button_03" />
<rect width="22" height="22" x="108" y="64" />
<rect width="22" height="22" x="139" y="94" class="win-mobile--app-02--button_04" />
<rect width="22" height="22" x="170" y="94" />
<rect width="22" height="22" x="108" y="94" class="win-mobile--app-02--button_01" />
<rect width="22" height="22" x="139" y="124" />
<rect width="22" height="22" x="170" y="124" />
<rect width="22" height="22" x="108" y="124" />
<rect width="22" height="22" x="139" y="154" />
<rect width="22" height="22" x="170" y="154" />
<rect width="22" height="22" x="108" y="154" class="win-mobile--app-02--button_05" />
<rect width="22" height="22" x="139" y="184" class="win-mobile--app-02--button_02" />
<rect width="22" height="22" x="170" y="184" class="win-mobile--app-02--button_06" />
<rect width="22" height="22" x="108" y="184" />
</g>
</svg>
</div>
<!-- Device decoration -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-mobile">
<path d="M100 50h100v11H100zm0 182h100v18H100z" />
<rect width="8" height="5" x="104" y="53" fill="#333" />
<rect width="8" height="5" x="188" y="53" fill="#333" />
<!-- Back button -->
<rect width="8" height="8" x="104" y="237" class="win-mobile--home-back" />
<rect width="8" height="8" x="188" y="237" fill="#333" />
<path fill="#FFF" d="M154 241v-4l-4 .74V241m0 1v3.26l4 .74v-4m-5-1v-3.17l-3 .6V241m0 1v2.57l3 .6V242" />
</svg>
<!-- Screen shine -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-mobile">
<linearGradient id="a" x1="203.29" x2="97.8" y1="76.29" y2="181.78" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#FFF" stop-opacity=".3" />
<stop offset="1" stop-color="#FFF" stop-opacity="0" />
</linearGradient>
<linearGradient id="b" x1="175" x2="84.49" y1="25" y2="115.51" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#FFF" stop-opacity=".5" />
<stop offset="1" stop-color="#FFF" stop-opacity="0" />
</linearGradient>
<path fill="url(#a)" d="M100 162.26v21.72L200 96.9V73" />
<path fill="url(#b)" d="M100 50v81.02L200 50" />
</svg>
</div>
<h1 class="title title--win-mobile-app">تطبيقات ويندوز موبايل
</h1>
</div>
</div>

 وهذا الكود كما ذكرت من قيل يمكن اضافته في اي مكان