 <doctype html>
<html>
     <head>   
	 <style>
	 * {
	    margin:0px;
		border:0px;
		padding:0px;
		}
		
		body a {
		       text-decoration:none;
		       color:black;
		}
		
	   #header{
	          height:140px;
			  background-color:green;
			  width:1000px;
			  margin-left:5px;
			  border-radius:7px;
			  box-shadow:5px 5px 5px 3px black;
			  margin-bottom:15px;
			  }
	   #nav{
	       height:40px;
		   background-color:red;
		   width:1000px;
		   position:relative;
		   margin:0 auto;
		   border-radius:2px;
		   box-shadow:5px 5px 10px 3px black;
		   margin-bottom:10px;
		   background:linear-gradient(rgb(55,100,20),rgb(200,200,200));
		   
		   }
	   #container{
				 height:1285px;
				 background:linear-gradient(white,gray);
				 width:1010px;
				 margin:0 auto;
				 border-radius:7px;
				 box-shadow:
				 0 0 7px 7px gray;
				}  
	           #mainmenu{
			            background-color:red;
						width:975px;
						margin:0 auto;
					    }
			#nav ul {
                    list-style:none;
                    }
#nav ul li{
          float:right;
		  width:195px;
		  position:relative;
		  height:30px;
           background:linear-gradient(rgb(55,100,20),rgb(200,200,200));		  
		   text-align:center;
		  /*justify-content:center;*/
		  /*align-items:center;*/
		  /*display:flex;*/
		  padding-top:10px;
          }	
#nav ul li:hover
           {background:linear-gradient(rgb(150,160,20),rgb(200,200,200))		  
	       }
#nav ul ul{	 
           display:none;
		   padding-top:10px;
	      }
#nav ul li:hover>ul	 
	        {
	         display:block;
			 }
#content{
width:1010px;
background-color:blue;
height:1000px;
float:left;
        }
#leftpannel{
background-color:green;
width:248px;
float:left;
margin-right:3px;
margin-left:4px;
height:200px;
border-radius:3px;
}
#middlepannel{
background-color:pink;
width:490px;
float:left;
margin-right:3px;
direction:rtl;
}
#rightpannel{
width:248px;
float:left;
}
#footer{
height:80px;
border-radius:2px;
background:linear-gradient(rgb(124,159,41),green);
clear:both;
text-align:center;

}
.lefttitle{
           height:30px;
           text-align:center;
		   font-size:16px;
		   font-weight:600;
		   background:linear-gradient(rgb(124,159,41),green);
		   padding-top:4px;
		   border-radius:10px 10px 0 0;
		   }
.leftbody{
         text-align:right;
         font-size:14px;
         border-radius:0 0 2px 2px;
         background-color:rgb(160,159,41);
		 line-height:123%;
		 padding:5px;	 
         }
.leftbody hr{
             height:1px;
             background-color:gray;
             margin:5px 5px 10px 10px;
            }
.leftbody a:hover{
                 color:blue;
                 }
*{
font-family:tahoma;
}
#news{
      margin-bottom:10px;
     }
#views{
      margin-bottom:10px;
      }	 
#visualnews a img{
                 width:28px;
                 height:30px;
				 padding-left:5px;
				 float:right;
                 }
#visualnews a{
text-align:justify;
direction:rtl;
display:inline-block;
}
.leftbody td{
text-align:center;
padding-left:30px;
}
#sidebar{
direction:rtl;
list-style:none;
display:content;
}
#rightpannel{
background-color:rgb(124,159,41);
border-radius:2px;
margin-right:4px;
padding-bottom:10px;
float:right;
}
#sidebar>li>a{
height:30px;
font-size:15px;
font-weight:bold;
border-radius:2px;
background:linear-gradient(rgb(124,159,41),green);
display:flex;
align-items:center;
justify-content:center;
}
#sidebar>li>a:hover{
color:rgb(0,20,0);
background:linear-gradient(rgb(124,159,41),darkgreen);
}
#sidebar ul{
font-size:15px;
padding-right:25px;
list-style-type:square;
}
#sidebar ul li{
padding-right:5px;
}
#sidebar ul ul{
font-size:13px;
}
#sidebar ul a:hover{
background-color:lightgreen;
}
#sidebar ul a{
height:25px;
border-radius:2px;
padding-right:8px;
display:block;
}
#Register{
background-color:yellow;
margin-bottom:10px;
}
#description{
background-color:green;
border-radius:2px;
}
#desctitle{
height:34px;
font-size:16px;
border-radius:2px 2px 0 0;
background:linear-gradient(darkgreen,rgb(200,180,41));
align-items:center;
}
.texttitle{
padding-right:5px;
}
#desccontent{
width:470px;
margin:0 auto;
padding:10px;
font-size:14px;
background:linear-gradient(rgb(200,180,41),darkgreen);
}
#descfooter{
width:470px;
margin:0 auto;
padding:10px;
border-radius:0 0 2px 2px;
background:linear-gradient(darkgreen,rgb(200,180,41));
}
#descfooter a{
display:block;
width:160px;
font-size:14px;
padding:5px;
background:linear-gradient(darkgreen,lightgreen);
border:1px solid whitesmoke;
border-radius:50px 15px;
text-align:center;
transition-duration:1s;
}
#descfooter a:hover{
border-radius:15px 50px;
transition-duration:0.5s;
}
#copyright{
font-size:10px;
}
#spnaddres{
font-size:11px;
padding-right:20px;
padding-left:20px;
}
#registercontent{
width:470px;
margin:0 auto;
padding:10px;
border-radius:0 0 2px 2px;
background:linear-gradient(rgb(200,180,41),darkgreen);
}
input[type=text],input[type=password]{
width:180px;
height:22px;
border-radius:4px;
border:1px solid black;
}
input[type=radio]{
width:30px;
}
select{
width:120px;
border:1px solid black;
}
textarea{
width:300px;
height:200px;
border-radius:4px;
border:1px solid black;
resize:none;
}
td[colspan='2']{
text-align:center;
}
input[type=reset],input[type=submit]{
width:60px;
height:28px;
border-radius:4px;
border:1px solid black;
background-color:lightgray;
}
.errorclass{
color:red;
}



	 </style>
	 
	 
	 
	 
	 </head>
	 <body>
	 <div id="container">
	 <div id="header">
	      
		  <img src="img/header.jpg">
	 
	 
	 </div>
	 <div id="nav">
	       <ul id="mainmenu">
		   <li>  <a href="#">خانه</a>  </li>
		   <li>   <a href="#">مقالات</a> </li>
		   <li>  <a href="#">اخبار</a>
		          <ul>
		            <li> <a href="#">ورزشی</a></li>
		            <li> <a href="#">سیاسی</a></li>
		            <li> <a href="#">آموزشی</a></li>
		          </ul>
		   
		   </li>
		   <li>  <a href="#">ارتباط با ما</a> </li>
		   <li>  <a href="#">درباره ی ما </a></li>
	 
	 
	 
	 </div>
	 <div id="content">
	      <div id='leftpannel'>
		        <div id='news' >
				     <div class='lefttitle'>آخرین اخبار</div>
				     <div class='leftbody'>
						<a href='#'>	تنگه هرمز باز شد </a><hr/>				
						<a href='#'>	دلار ریزش کرد </a><hr/>				
						<a href='#'>	طلا مفت شد </a><hr/>				
						<a href='#'>	خودرو گرون شد </a><hr/>				
						<a href='#'>	خانه گرون شد</a><hr/>				
					</div>
					 
				</div>
		        <div id='views'>
				  <div class='lefttitle'>آمار های سایت</div>
				  <div class='leftbody'>
				      <table>
					     <tr>
						   <td>250</td>
						   <td>بازدید امروز</td>
					     </tr>
						 <tr>
						   <td>363</td>
						   <td>بازدید دیروز</td>
					     </tr> 
						 <tr>
						   <td>560</td>
						   <td>بازدید هفتگی</td>
					     </tr>
						 <tr>
						   <td>7523</td>
						   <td>بازدید ماهانه</td>
					     </tr>     
						 <tr>
						   <td>724</td>
						   <td>تعداد اخبار</td>
					     </tr>
						 <tr>
						   <td>7251</td>
						   <td>تعداد کاربران</td>
					     </tr>
					  </table>
				  </div>
				</div>
		        <div id='visualnews'>
				    <div class='lefttitle'>اخبار تصویری</div>
				    <div class='leftbody'>
					    <a href='#'>
						    <img src='img/pic1.jpg'>
				        روزانه چند ساعت درس می خوانید؟
				        </a>
				        <hr/>
				        <a href='#'>
						    <img src='img/pic2.jpg'>
				       برگزاری نمایشگاه بین المللی نقاشی
				       </a>
				       <hr/>
				       <a href='#'>
						    <img src='img/pic3.jpg'>
				        از بارش های بهار چه می دانید؟
				       </a>
				       <hr/>    
					   <a href='#'>
						    <img src='img/pic4.jpg'>
				 تاثیر ورزش صبحگاهی در سلامت جسم و روان
				       </a>
				       <hr/>			    
		            </div>
				</div>
            </div>				
	      <div id='middlepannel'>
		     <div id='Register'>
			  <div id='desctitle'><span class='texttitle'>فرم ثبت نام کاربر</span></div>
			 
			  <div id='registercontent'>
			    <form action='#' method='get' onsubmit='return validform();'>
				  <table>
				    <tr>
					 <td>نام کاربر</td>
					 <td><input type='text' id='txtname' name='txtname'/>
					     <span id='errorname' class='errorclass'></span>
					     
					 </td>
					</tr>
					<tr>
					 <td>رمز عبور</td>
					 <td><input type='password' id='txtpass' name='txtpass'/>
					     <span id='errorpass' class='errorclass'></span>
					 </td>
					</tr>
					<tr>
					 <td>جنسیت</td>
					 <td><input type='radio' id='rdbgender' name='rdbgender' value=1/>آقا
					 <input type='radio' id='rdbgender' name='rdbgender' checked value=2/>خانم</td>
					</tr>
					<tr>
					 <td>انتخاب استان</td>
					 <td><select id='provience' name='provience'>
					      <option value=''>انتخاب استان</option>
					      <option value='bushehr'>بوشهر</option>
					      <option value='fars'>فارس</option>
					      <option value='khuzestan'>خوزستان</option>
						</select>
					 </td>
					</tr>
					<tr>
					 <td>انتخاب شهر</td>
					 <td><select id='city'>
					       <option value=''>انتخاب شهر</option>
					       <option value='1' data-p='bushehr'>بوشهر</option>
					       <option value='2' data-p='bushehr'>برازجان</option>
					       <option value='3' data-p='bushehr'>گناوه</option>
					       <option value='4' data-p='fars'>شیراز</option>
					       <option value='5' data-p='fars'>کازرون</option>
					       <option value='6' data-p='fars'>دشت ارژن</option>
					       <option value='7' data-p='khuzestan'>ماهشهر</option>
					       <option value='8' data-p='khuzestan'>هندیجان</option>
					       <option value='9' data-p='khuzestan'>آبادان</option>
					  </select>		      
					 </td>
					</tr>
					<tr>
					 <td>ساعت مطالعه</td>
					 <td><input type='checkbox' id='chkmorning' name='chkmorning' value=1/>صبح
					  <input type='checkbox' id='chkafternoon' name='chkafternoon' value=2/>ظهر
					  <input type='checkbox' id='chknight' name='chknight' value=3/>شب
					  <span id='errorcheck' class='errorclass'></span>
					 </td>
					</tr>
					<tr>
					 <td>درباره خودتان</td>
					 <td><textarea id='txtabout' name='txtabout' maxlength=20></textarea>
					  <br/>
					  <span id='errorabout' class='errorclass'></span>
					 </td>
					</tr>
					<tr>
					 <td colspan=2>
					 <input type='submit' value='ثبت'/>
					 <input type='reset' value='پاکسازی'/>
					 
					 </td>
					</tr>
				  </table>
				</form>
			  </div>
			 </div>
		     <div id='description'>
			   <div id='desctitle'><span class='texttitle'>آموزش ثبت نام در سایت</span></div>
			   <div id='desccontent'>
			   <br/>
			   <b> مدارک مورد نیاز جهت ثبت نام</b>
			   <br/>
			   <br/>
			   <p>نکته : کاربران گرامی دقت فرمایید جهت ثبت نام در سایت ابتدا مدارک خود شامل شناسنامه، کارت ملی و یک قطعه عکس 3 در 4 با پس زمینه سفید را آماده نمایید. سپس با در دست داشتن ددپستی و آدرس دقیق نشانی منزل خود به آمرس زیر مراجعه نمایید.</p>
			   <p>لطفا جهت ارتباط با مدیر سایت متن پیام خود را در کادر زیر نوشته و دکمه ارسال پیام را بزنید. همچنین می توانید جهت ارتباط مستقیم با مدیر سایت از طریق پیام رسان ها واتس اپ، ایتا یا تلگرام به شماره 09127240850 در ارتباط باشید.</p>
			   </div>
			   <div id='descfooter'>
			     <a href='#'>کلیک کنید...</a>
			   </div>
			 
			 
			 </div>
		  
		  </div>
	      <div id='rightpannel'>
		    <ul id='sidebar'>
			 <li><a href='#'>زبان های برنامه نویسی</a>
			  <ul>
			     <li><a href='#'>زبان های تحت وب</a>
				  <ul>
				    <li><a href='#'>design Html and Css</a></li>
				    <li><a href='#'>Php and MySql</a></li>
				    <li><a href='#'>asp.net Mvc</a></li>
				    <li><a href='#'>asp.net core</a></li>
				  </ul>
				  </li>
				 <li><a href='#'>شبکه</a>
				  <ul>
				    <li><a href='#'>+ Network</a></li>
				    <li><a href='#'>microsoft Network</a></li>
				    <li><a href='#'>Security and Hack</a></li>
				    <li><a href='#'>Cissco Assistant</a></li>
				  </ul>
				 </li>
				 <li><a href='#'>برق و قدرت</a>
				  <ul>
				    <li><a href='#'>برق کشی ساختمان</a></li>
				    <li><a href='#'>برق کشی خودرو</a></li>
				    <li><a href='#'>برق کشی صنعتی</a></li>
				  </ul>
				 </li>
			  </ul> 
			 </li>
			 <li><a href='#'>فیلم های آموزشی</a>
			  <ul>
			     <li><a href='#'>آشپزی</a>
				  <ul>
				    <li><a href='#'>تهیه غذای خانگی</a></li>
				    <li><a href='#'>غذاهای سنتی</a></li>
				    <li><a href='#'>گیاه خواری</a></li>
				  </ul>
				 </li>
			     <li><a href='#'>پزشکی</a>
				  <ul>
				    <li><a href='#'>قلب و عروق</a></li>
				    <li><a href='#'>دستگاه گوارشی</a></li>
				    <li><a href='#'>استخوان و مفاصل</a></li>
				  </ul>
				 </li>
			  </ul>
			 </li>
			 <li><a href='#'>نرم افزار ها</a>
			  <ul>
			   <li><a href='#'>آفیس</a>
			    <ul>
				  <li><a href='#'>اکسل</a></li>
				  <li><a href='#'>پاورپوینت</a></li>
				  <li><a href='#'>اکسس</a></li>
				</ul>
			   </li>
			   <li><a href='#'>طراحی</a>
			    <ul>
				  <li><a href='#'>فتوشاپ</a></li>
				  <li><a href='#'>دریم ویوور</a></li>
				</ul>
			   </li>
			   <li><a href='#'>برنامه نویسی</a>
			    <ul>
				  <li><a href='#'>php storm</a></li>
				  <li><a href='#'>visual studio</a></li>
				  <li><a href='#'>visual studio code</a></li>
				  <li><a href='#'>oracle</a></li>
				  <li><a href='#'>sql server</a></li>
				</ul>
			   </li>
			  </ul>
			 </li>
			 
			
			  
			</ul>  
		  </div>
	 </div>  
	 <div id="footer">
	  <span id='spnaddres'>
	    آدرس شرکت : تهران، میدان آرژانتین، خیابان وزرا، کوچه شهید اسماعیل قادری، مجتمع لئو مال، طبقه چهارم، مرکز انیستیتو ایزایران، شرکت تولید و نصب فرآورده های الکترونیکی
	  </span>
	  <br/>
	  <br/>
	 <span id='copyright'><b>کپی رایت </b>تمامی حقوق مادی و معنوی این سایت محفوظ است</span>
	 </div>
    </div>







      <script>
	   function validform()
       {
	    var namevar=document.getElementById('txtname');
		var passwordvar=document.getElementById('txtpass');
		var textareavar=document.getElementById('txtabout');	
		var errornamespan=document.getElementById('errorname');
        var errorpassspan=document.getElementById('errorpass');
		var errorcheckspan=document.getElementById('errorcheck');
		var erroraboutspan=document.getElementById('errorabout');
		
		
		
		if(namevar.value==null||namevar.value=='')
		   {
		    //alert('لطفانام کاربری را وارد کنید')
			errornamespan.innerText='لطفانام کاربری را وارد کنید';
			namevar.style.backgroundColor="yellow";
			return false;
		   }
		   else if(namevar.value.length<5)
			{
			 errornamespan.innerText='حروف نام کاربری باید حداقل 5 تا باشد';
		     namevar.style.backgroundColor="yellow";
			return false;
			}
		   else
		   {
		    errornamespan.innerText='';
			namevar.style.backgroundColor="white";
		   }
	
		 if(passwordvar.value==null||passwordvar.value=='')
		   {
		   // alert('لطفا رمز عبور را وارد کنید')
		   errorpassspan.innerText='لطفا رمز عبور را وارد کنید';
		   passwordvar.style.backgroundColor="yellow";
			return false;
	        
	       }
		    else if(passwordvar.value.length < 8)
			{
			 errorpassspan.innerText='رمز عبور باید حداقل 8 عدد باشد';
		     passwordvar.style.backgroundColor="yellow";
			return false;
			}
		     else
		   {
		    errorpassspan.innerText='';
			passwordvar.style.backgroundColor="white";
		   }
		   if(chkmorning.checked==false & chkafternoon.checked==false & chknight.checked==false)
		    {
			 errorcheckspan.innerText='لطفا زمان مطالعه را انتخاب کنید';
			 return false;
			}
	       else
		   {
		    errorcheckspan.innerText='';
		   }
		   if(textareavar.value==null||textareavar.value=='')
		   {
		    erroraboutspan.innerText='لطفا چیزی درباره خودتان بنویسید';
			return false;
		   }
		    else
		   {
		    erroraboutspan.innerText='';
			textareavar.style.backgroundColor="white";
		   }
	     
        
		
		
		}	   
	  </script>
	  <script>
	   const provience=document.getElementById('provience');
	   const cityvar=document.getElementById('city');
	   const allcity=cityvar.querySelectorAll('option');
	   console.log(cityvar);
	   console.log(allcity);
	   provience.addEventListener('change',function()
	   {  
	    allcity.forEach(opt=>{
		   if(opt.value=='')return;
		      opt.style.display='none';
			 });
			   const proviencevalue=this.value;
			   allcity.forEach(opt=>{
			    if(opt.dataset.p==proviencevalue)
				{ 
			     opt.style.display='block';
			    }
			      });
			});  
	  </script>
     </body>
</html>