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

نتیجه

امتحان کنید

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
		<style>
			body {
			font-family: Arial, Helvetica, sans-serif;
			direction: rtl;
			}
			
			.navbar {
			width: 100%;
			background-color: #555;
			overflow: auto;
			direction: rtl;
			}
			
			.navbar a {
			float: right;
			padding: 12px;
			color: white;
			text-decoration: none;
			font-size: 17px;
			}
			
			.navbar a:hover {
			background-color: #000;
			}
			
			.active {
			background-color: #4CAF50;
			}
			
			@media screen and (max-width: 500px) {
			.navbar a {
				float: none;
				display: block;
			}
			}
		</style>
	</head>
	<body>
	
		<h2>منو بار ریسپانسیو همراه با آیکون های نمایشی</h2>
		<p>اندازه پنجره مرورگر خود را تغییر دهید تا تاثیر ریسپانسیو را ببینید</p>
		
		<div class="navbar">
			<a class="active" href="#"><i class="fa fa-fw fa-home"></i>خانه</a> 
			<a href="#"><i class="fa fa-fw fa-search"></i>جستجو</a> 
			<a href="#"><i class="fa fa-fw fa-envelope"></i>تماس با ما</a> 
			<a href="#"><i class="fa fa-fw fa-user"></i>ورود</a>
		</div>
	
	</body>
</html>