- آموزشگاه تحلیل داده

نتیجه

امتحان کنید

<!DOCTYPE html>
<html>
	<head>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
		<style>
			* {box-sizing: border-box;}

body {
			  margin: 0;
			  font-family: Arial, Helvetica, sans-serif;
			}

.topnav {
			  overflow: hidden;
			  background-color: #e9e9e9;
			}

.topnav a {
			  float: right;
			  display: block;
			  color: black;
			  text-align: center;
			  padding: 14px 16px;
			  text-decoration: none;
			  font-size: 17px;
			}

.topnav a:hover {
			  background-color: #ddd;
			  color: black;
			}

.topnav a.active {
			  background-color: #2196F3;
			  color: white;
			}

.topnav input[type=text] {
			  float: right;
			  padding: 6px;
			  margin-top: 8px;
			  margin-left: 16px;
			  border: none;
			  font-size: 17px;
			}
			
			.Content {
				padding-right:16px;
				direction:rtl;
				text-align:right;
			}

@media screen and (max-width: 600px) {
			  .topnav a, .topnav input[type=text] {
				float: none;
				display: block;
				text-align: right;
				width: 100%;
				margin: 0;
				padding: 14px;
			  }
			  
			  .topnav input[type=text] {
				border: 1px solid #ccc;  
			  }
			}
		</style>
	</head>
	<body>
	
		<div class="topnav">
		  <a class="active" href="#home">خانه</a>
		  <a href="#about">درباره ما</a>
		  <a href="#contact">تماس با ما</a>
		  <input type="text" placeholder="جستجو.." style="direction:rtl">
		</div>

<div class="Content">
		  <h2>نوار جستجو ریسپانسیو</h2>
		  <p>باکس جستجو در نوار منو بالا صفحه قرار دارد.</p>
		  <p>اندازه پنجره مرورگر را تغییر دهید تا تاثیر ریسپانسیو را ببینید.</p>
		  <p>دیگر محتوا متنی خود را وارد کنید.</p>
		</div>
	
	</body>
</html>