منتديات الغروب
مرحبا بكم في منتديات الغروب المرجو منك التسجيل بالمنتدى

انضم إلى المنتدى ، فالأمر سريع وسهل

منتديات الغروب
مرحبا بكم في منتديات الغروب المرجو منك التسجيل بالمنتدى
منتديات الغروب
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

مستعرض الكودات

منتديات الغروب :: قسم تطوير المواقع والمنتديات :: 
كودات HTML
اذهب الى الأسفل
Saad
Saad
مدير عام ومنشئ المنتدى
مدير عام ومنشئ المنتدى
الجنس : ذكر
عدد الرسائل : 1642
تاريخ التسجيل : 02/10/2008

بطاقة الشخصية
المهنة:
https://sundown.ahlamontada.net

مستعرض الكودات Empty مستعرض الكودات

الخميس يوليو 23, 2020 1:33 pm
**********
********

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ


CODE
الكود:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>مستعرض الكودات</title>
<style type="text/css">
.style1 {
 text-align: center;
}
.style2 {
 font-size: xx-large;
 color: #FF0000;
}
</style>
</head>

<body><div class="style1">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />     <br />
 <div class="style1">
 <br />
 <span lang="ar-iq" class="style2">مستعرض كودات منتديات الغروب</span><br />
 </div>
<p align="center">
 <meta content="text/html; charset=windows-1256" http-equiv="Content-Type" /><title>مستعرض الأكواد</title><script type="text/javascript" language="Javascript"><!--
function preview(){
if(document.pad.text.value.length>0){
pr=window.open("","Preview","scrollbars=1,menubar=1,status=1,width=700,height=500,left=50,top=50");
pr.document.write(document.pad.text.value);
pr.document.close();}
else alert('You have nothing to be previewed')}
//
--></script>
</p>
<table style="width: 50%;" cellspacing="1" cellpadding="0" border="0" bgcolor="#e4e7ef" align="center">
 <tbody>
 </tbody>
 <tr style="">
 <td>
 <div style="text-align: center;">
 </div>
 <table style="width: 100%;" cellspacing="1" cellpadding="1" border="0" bgcolor="#ffffff">
 <tbody>
 </tbody>
 <tr style="">
 <td>
 <div style="text-align: center;">
 
 </div>
 <table style="width: 100%;" cellspacing="0" cellpadding="0" border="0">
 <tbody>
 </tbody>
 <tr style="">
 <td>
 <table style="width: 100%;" cellspacing="0" cellpadding="0" border="0">
 <tbody>
 </tbody>
 <tr style="" align="center">
 <td>
 <center>
 <center>
 <img src="https://i.servimg.com/u/f25/19/86/40/14/htm2l10.png" /><br />
 <form method="post" name="pad">
 <textarea cols="68" rows="15" name="text">ضع الكود هنا</textarea><br /><input type="button" name="view" value="عرض" onclick="preview()" /> <input type="reset" name="clear" الأكواد="" value="مسح" /> <input type="button" للنسخ="" الأكواد="" value="تحديد" onclick="document.pad.text.select();" />
 </form>
 </center>
 </center>
 </td>
 </tr><tbody></tbody>
 <tbody></tbody>
 </table>
 </td>
 </tr><tbody></tbody>
 </table>
 </td>
 </tr><tbody></tbody>
 </table>
 </td>
 </tr><tbody></tbody>
</table>
</div>
</body>

</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("https://i.servimg.com/u/f83/14/68/71/20/star_110.gif");
}
</style>
</head>
<body>

</body>
</html>
<section class="container">
  
  <!-- HTML Chart -->
  <figure class="chart" data-percent="75">
    <figcaption>HTML</figcaption>
     <img class="html" src="https://dl.dropboxusercontent.com/s/68gv23q4y5qyq52/html5.svg">
    <svg width="200" height="200">
      <circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
    </svg>
  </figure>
  
  <!-- CSS Chart -->
  <figure class="chart" data-percent="75">
    <figcaption>CSS</figcaption>
    <img class="css" src="https://dl.dropboxusercontent.com/s/gftbpqje9h2jvlv/css3.svg">
    <svg width="200" height="200">
      <circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
    </svg>
  </figure>
  
  
  <!-- Javascript Chart -->
  <figure class="chart" data-percent="50">
    <figcaption>Javascript</figcaption>
    <img class="javascript" src="https://dl.dropboxusercontent.com/s/jsp3rsberc4q650/javascript.svg">
    <svg width="200" height="200">
      <circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
    </svg>
  </figure>
  
  <!-- Node.js Chart -->
  <figure class="chart" data-percent="25">
    <figcaption>Node</figcaption>
    <img class="node" src="https://dl.dropboxusercontent.com/s/v28zws1p38tjph2/node.png">
    <svg width="200" height="200">
      <circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
    </svg>
  </figure>
  <p>&nbsp;</p>
</section>
  <style>
   /* Import the Google Font 'Lato' */
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);

/* Container styles */
body {
  background-color: #fff;
  color: #333;
  font-family: 'Lato';
}

.container {
  padding: 50px 0;
  text-align: center;
}

.chart {
  position: relative;
  display: inline-block;
  color: #999;
  font-size: 20px;
  text-align: center;
}

.chart figcaption {
  padding: 50px 25px;
  width: 100px;
  height: 50px;
  border: 20px solid #f0f0f0;
  border-radius: 100px;
  line-height: 50px;
}

.chart img {
  position: absolute;
  max-width: 100px;
  max-height: 100px;
  background: white;
}
/* END Container styles */

/* Colors for the circles and positions for the graphics */
.html {
  top: 50px;
  left: 45px;
}

.html + svg .outer {
  stroke: #e34f26;
}

.css {
  top: 55px;
  left: 48px;
}

.css + svg .outer {
  stroke: #0d84ce;
}

.javascript {
  max-width: 90px;
  max-height: 90px;
  top: 45px;
  left: 45px;
}

.javascript + svg .outer {
  stroke: #f0e040;
}

.node {
  width: 200px;
  height: 200px;
  top: 45px;
  left: 45px;
}

.node + svg .outer {
  stroke: #83cd29;
}

.chart svg {
  position: absolute;
  top: 0;
  left: 0;
}

.outer {
  fill: transparent;
  stroke: #333;
  stroke-width: 20;
  stroke-dasharray: 534;
  transition: stroke-dashoffset 1s;
  -webkit-animation-play-state: running;
  
  /* firefox bug fix - won't rotate at 90deg angles */
  -moz-transform: rotate(-89deg) translateX(-190px);
}

.chart:hover .outer {
  stroke-dashoffset: 534 !important;
  -webkit-animation-play-state: paused;
}
/* END Circle colors and graphic positions */


/* Set the initial values for the animation */
.chart[data-percent='100'] .outer {
  stroke-dashoffset: 0;
  -webkit-animation: show100 2s;
  animation: show100 2s;
}

.chart[data-percent='75'] .outer {
  stroke-dashoffset: 133;
  -webkit-animation: show75 2s;
  animation: show75 2s;
}

.chart[data-percent='50'] .outer {
  stroke-dashoffset: 267;
  -webkit-animation: show50 2s;
  animation: show50 2s;
}

.chart[data-percent='25'] .outer {
  stroke-dashoffset: 401;
  -webkit-animation: show25 2s;
  animation: show25 2s;
}
/* END set initial animation values */

/* Keyframes for the initial animation */
@-webkit-keyframes show100 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes show100 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes show75 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 134;
  }
}

@keyframes show75 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 124;
  }
}

@-webkit-keyframes show50 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 267;
  }
}

@keyframes show50 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 267;
  }
}

@-webkit-keyframes show25 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 401;
  }
}

@keyframes show25 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 401;
  }
}
/* END Keyframes for the initial animation */
    <style/>




تمنياتيي لكم بالتوفيق


.....
الرجوع الى أعلى الصفحة
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى