مكتبة بأرقى الإضافات الجزء الثاني
المصدر عرب ويب
<style> .ar1web_today_img:hover { opacity: .9; } .ar1web_today_img img{width:100%;height:180px;align:justify;margin-bottom:13px}.ar1web_today_img a{font-size: 14px; font-family: Droid Arabic Kufi,Open Sans; line-height: 24px; font-weight: bold; text-align: center; color: #E73C5C!important;}.ar1web_today_img{background: #fafafa; text-align: center; border-bottom: 1px dashed #DCDADA; padding-bottom: 10px;} .hithere{text-align: center; font-size: 13px; line-height: 24px; background-color: #FAFAFA; padding: 10px; color: #524F50;} </style> <div class="ar1web_today_img"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr_35tstEB-_YoQijN2NSyzDa5nR6fi2EBld-XhdUFJbHNPO6ck-eRXFMfoz4kcbZuyk9f5aH-sTIM9iVQKW-zjmleVHZ8Ydreh07Dfzkb_V9GAWMRilMK_i4daia9TAAT_qE5hcaP8Vc/s1600/ar1web.png" /> <a href="#" target="_blank">أروع الخلفيات المخصصة للمواقع!</a> </div> <div class="hithere">أزيد من 100 خلفية مخصصة للمواقع تضم أجمل وأرقى الأشكال مع طريقة التركيب والاختيار حسب الذوق لا داعي لأن تبحث بعد الآن </div>
<style> .doar1web.join:hover,.doar1web.gplus:hover,.doar1web.facebook:hover,.doar1web.instagram:hover,.doar1web.twitter:hover { background: #696868; } .doar1web{float:none;margin-top:15px;margin-right:5px;width:32px;height:32px;line-height:32px} .doar1web a{padding:0;margin:0;width:32px;height:32px;line-height:32px;text-align:center} .doar1web a i{text-align:center;color:#fff;} .doar1web a:hover i{color:#fff;} .doar1web.join{background:#CC181E;} .doar1web.instagram{background:#406f94;} .doar1web.gplus{background:#f20000;} .doar1web.twitter{background:#00baff;} .doar1web.facebook{background:#516ca4;} .doar1web a i,.doar1web a:hover i{color:#fff;} .user-profile { background-color: #fff; text-align: center; } .user-profile>img { width: 100%; } .user-profile .user-img { text-align: center; display: block; margin: 0 auto; margin-top: -70px; height: 130px; width: 130px; position: relative; } .user-profile .user-img img { width: 100%; border: 3px solid #fff; } .user-profile .user-img .user-img-hover { background: none repeat scroll 0px 0px rgba(51, 51, 51, 0.8); color: #F4F4F4; font-size: 25px; text-align: center; line-height: 3.5; height: 124px; width: 124px; z-index: 999; display: inline-block; padding-top: 20px; position: relative; bottom: 127px; transition: all 800ms ease 0s; opacity: 0; visibility: hidden; transform: scale(0); } .user-profile .user-img:hover .user-img-hover { opacity: 1; visibility: visible; transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); } .user-profile .details { display: inline-block; } .user-profile .details ul { padding: 0; margin-bottom: 20px; margin-top: 10px; } .user-profile .details ul li { display: inline-block; color: #797979; font-size: 16px; font-weight: 600; } .user-profile .details ul li:last-child { margin-left: 0; } .user-profile .details ul li span { display: block; font-size: 28px; } </style> <div class="user-profile"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRStLVeSIQNtepdDq9LQuqkrTOYenPiMfPbUtn3kGL1kYc2guh8S5w2db-GsYtG5bJkMUBFIxjhsosvRjEbWcGC411aKRZfPnwPsJYlQ08XaR8BOKPWqiRBGreOPO1St11Ui7d4bFOhhE/s1600/yamiar1web.png" class="img-responsive" /> <div class="user-img"> <a href="#" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJurisB_tT80Kdq3XgqWTohAlCxewu4lnyAq4hHotCUERFcvjtoF2LQs-AEE0N5wYASRddvb4BIx8N0b-cmWQ7NA7RAB5ivH9Waa5dwzYexDj53irR65jYub1VX8NEpzBumvy0om8WiOs/s1600/adminar1web.jpg" /> <div class="user-img-hover"> <i class="fa fa-link"></i> </div></a> </div> <div class="details"> <ul> <li class='doar1web join'><a href='#' rel='nofollow' target='_blank' title='اشترك بالقناة'><i class='fa fa-youtube'></i><span class='inv'></span></a></li> <li class='doar1web gplus'><a href='#' rel='nofollow' target='_blank' title='تابعنا على جوجل+'><i class='fa fa-google-plus'></i><span class='inv'></span></a></li> <li class='doar1web facebook'><a href='#' rel='nofollow' target='_blank' title='تابعنا على فيسبوك'><i class='fa fa-facebook'></i><span class='inv'></span></a></li> <li class='doar1web instagram'><a href='#' rel='nofollow' target='_blank' title='تابعنا على أنستجرام'><i class='fa fa-instagram'></i><span class='inv'></span></a></li> <li class='doar1web twitter'><a href='#' rel='nofollow' target='_blank' title='تابعنا على تويتر'><i class='fa fa-twitter'></i><span class='inv'></span></a></li> </ul> </div></div>
<style> .bikher { overflow: hidden; } .big-section { color:#FFF; } .rowme { background-color: #425F9C; text-align:center; font-family: droid arabic kufi;} .flip-bikher { -webkit-perspective: 1000; -webkit-transform-style: preserve-3d; } .flip-bikher, .front, .back { margin:0 auto; width: 285px; height: 160px; } .flipper { -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; position: relative; } .front, .back { -webkit-backface-visibility: hidden; -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; padding-top:20px; padding-bottom:10px; position: absolute; top: 0; left: 0; } .front { background:#35528f; z-index: 2; -webkit-transform: rotateY(0deg); } .front span { font-size:80px; margin-top:10px; } .back { background:#021f5c;; -webkit-transform: rotateY(-180deg); } .flip-bikher:hover .back { -webkit-transform: rotateY(0deg); } .flip-bikher:hover .front { -webkit-transform: rotateY(180deg); } </style> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ar_AR/all.js#xfbml=1&appId=1389892087910588"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div id="facebook" class="big-section"> <div class="bikher"> <div class="rowme"> <div class="flip-bikher"> <div class="flipper"> <div class="front"> <div>صفحتنا على الفيسبوك</div><br/> <span class="fa fa-facebook-square"></span> </div> <div class="back"> <br/> تابعنا أول بأول<br/><br/> <div class="fb-like" data-href="#" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div> </div> </div> </div> </div> </div></div>
<script type='text/javascript'> jQuery(document).ready(function(){ jQuery('.skillbar').each(function(){ jQuery(this).find('.skillbar-bar').animate({ width:jQuery(this).attr('data-percent') },6000); }); }); </script> <style> #skills-ar1web{height: 210px;} .skillbar { position:relative; display:block; margin-bottom:5px; width:100%; background:#eee; height:30px; -webkit-transition:0.4s linear; -moz-transition:0.4s linear; -ms-transition:0.4s linear; -o-transition:0.4s linear; transition:0.4s linear; -webkit-transition-property:width, background-color; -moz-transition-property:width, background-color; -ms-transition-property:width, background-color; -o-transition-property:width, background-color; transition-property:width, background-color; } .skillbar-title { position:absolute; top:0; right:0; font-weight:normal; font-size:13px; color:#fff; background:#6adcfa; } .skillbar-title span { display:block; padding:0 20px; height:30px; line-height:30px; } .skillbar-bar { height:30px; width:0px; background:#6adcfa; } .skill-bar-percent { position:absolute; left:10px; top:0; font-size:11px; height:30px; line-height:30px; color:#fff; color:rgba(0, 0, 0, 0.4); } </style> <div id='skills-ar1web'> <div class='skillbar clearfix ' data-percent='100%'> <div class='skillbar-title' style='background: #33B5E5;'> <span> Photoshop </span> </div> <div class='skillbar-bar' style='background: #33B5E5;'/> <div class='skill-bar-percent'> 100% </div> </div> <div class='skillbar clearfix ' data-percent='90%'> <div class='skillbar-title' style='background: #f7a53b;'> <span> Blogger </span> </div> <div class='skillbar-bar' style='background:#f7a53b;'/> <div class='skill-bar-percent'> 90% </div> </div> <div class='skillbar clearfix ' data-percent='68%'> <div class='skillbar-title' style='background: #88cd2a;'> <span> HTML5/CSS3 </span> </div> <div class='skillbar-bar' style='background: #88cd2a;'/> <div class='skill-bar-percent'> 68% </div> </div> <div class='skillbar clearfix ' data-percent='75%'> <div class='skillbar-title' style='background: #3D8ACE;'> <span> WordPress</span> </div> <div class='skillbar-bar' style='background: #3D8ACE;'/> <div class='skill-bar-percent'> 75% </div> </div> <div class='skillbar clearfix ' data-percent='65%'> <div class='skillbar-title' style='background: #64B083;'> <span> JavaScript/Jquery </span> </div> <div class='skillbar-bar' style='background: #64B083;'/> <div class='skill-bar-percent'> 65% </div> </div> <div class='skillbar clearfix ' data-percent='35%'> <div class='skillbar-title' style='background: #fa6e6e;'> <span> illustrator </span> </div> <div class='skillbar-bar' style='background: #fa6e6e;'/> <div class='skill-bar-percent'> 35% </div> </div> <div class='skillbar clearfix ' data-percent='45%'> <div class='skillbar-title' style='background: #9F5DC1;'> <span> After Effects</span> </div> <div class='skillbar-bar' style='background: #9F5DC1;'/> <div class='skill-bar-percent'> 45% </div> </div> </div>
هل تعجبك المدونة ؟ المرجو إلغاء تطبيق ادبلوك مانع إعلانات لتصفح في الموقع بكل حرية .
يمكنك تعطيل و السماح للموقع بالعرض اعلانات عن طريق هذا الشرح هنا الرابط
شكرا لك !