خودتان امتحان کنید

<!DOCTYPE html>
<html lang="fa">
    <head>
		<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <title>پروژه محور- بیاموز</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<style>				
		nav
		{
			margin-top:40px;
			padding:24px;
			text-align:center;
			box-shadow:2px 2px 8px rgba(0,0,0,0.5);
		}

#nav-1
		{
			background-color:red;
		}

.link-1
		{
			background-color:red;
			color:#fff;
			font-size:20px;
			text-decoration:none;
			border-top:4px solid red;
			border-bottom:4px solid red;
			padding:20px 0;
			margin:0 20px;
			transition:all 0.3s ease;
		}

.link-1:hover
		{
			border-top:4px solid #fff;
			border-bottom:4px solid #fff;
			padding:6px 0;
		}

#nav-2
		{
			background-color:blue;
		}

.link-2
		{
			color:#fff;
			font-size:20px;
			text-decoration:none;
			padding:0 10px;
			margin:0 10px;
			transition:all 0.5s ease-in-out;
			-webkit-transition:all 0.5s ease-in-out;
			-ms-transition:all 0.5s ease-in-out;
			-moz-transition:all 0.3s ease-in-out;
			-o-transition:all 0.3s ease-in-out;	
		}

.link-2:hover
		{
			background-color:#fff;
			color:#000;
			padding:24px 10px;
		}
		</style>
    </head>
    <body>       
       <nav id="nav-1">
           <a href="#" class="link-1">home</a>
           <a href="#" class="link-1">contact</a>
           <a href="#" class="link-1">gallery</a>
           <a href="#" class="link-1">about us</a>       
       </nav>
       
       <nav id="nav-2">
           <a href="#" class="link-2">home</a>
           <a href="#" class="link-2">contact</a>
           <a href="#" class="link-2">gallery</a>
           <a href="#" class="link-2">about us</a>       
       </nav>
    </body>
</html>

Report a Problem: