Моя первая верстка

HTML+CSS

by Tolibjon Tolibov

HTML

<div class='container'>
		<!-- -------- HEADER ---------- -->
		<div class='header'>
			<div class='nav'>
				<img src='images/duhoot.jpg' alt='duhoot'>
				
				<ul class='topMenu'>
					<li><a href='#'>Reality</a></li><li>
					<a href='#'>Living</a></li><li>
					<a href='#'>Education</a></li><li>
					<a href='#'>Entertainment</a></li><li>
					<a href='#'>Mobility</a></li>
				</ul>
				
				<ul class='login'>
					<li><a href='#'>Search</a></li><li>
					<a href='#'>@ Login</a></li>
				</ul>
			</div>
			
			<div class='form-img'>
				<div class='mask'>
					<div class='form'>
						<h1>What are you looking for?</h1>
						
						<form action='#' method="POST">
						<select id='city' name='city'>
							<option value='Dubai'>Dubai</option>
							<option value='New York'>New York</option>
							<option value='Tokio'>Tokio</option>
						</select>
						
						<select id='edu' name='edu'>
							<option value='education'>Education</option>
							<option value='entertainmnet'>Entertainmnet</option>
							<option value='job'>Job</option>
						</select>
						<br>
						<input type='text' size="" maxlength='30' placeholder='keyword, name, date ...'>
						<a href='#'>SEARCH</a>
						</form>
					</div>
				</div>
			</div>
			
			<div class='misc'>
				<div class='misc-wrap'>
				<ul class='rec'>
					<li><a href='#'>RECOMMENDED</a></li><li>
					<a href='#'>LATEST</a></li><li>
					<a href='#'>HIGHLIGHTS</a></li>
				</ul>
				
				<ul class='map'>
					<li><select class='bottom-city' name='city'>
							<option value='Dubai'>DUBAI</option>
							<option value='New York'>NEW YORK</option>
							<option value='Tokio'>TOKIO</option>
						</select></li><li><a href='#'> @ HIDE MAP</a></li>
				</ul>
				
				<ul class='filter'>
					<li>FILTER:</li><li>
					<a href='#'>@</a></li><li>
					<a href='#'>#</a></li><li>
					<a href='#'>$</a></li><li>
					<a href='#'>%</a></li>
				</ul>
				</div>
			</div>
		</div>
		<div class='clear'></div>
		<!--...

CSS

html, body{
	margin:0;
	padding:0;
	font-family:Arial;
	box-sizing:border-box;
	min-width:1200px;
}
*{
	margin:0;
	padding:0;
}
h1,h2, h3, h4, h5, h6{
	padding:0;
	margin:0;
}

.container{
	width:100%;
	border:none;
	min-width:100%;
}

/* ///////////////// HEADER //////////////////// */

.header{
	width:100%;
	border:none;
	background-color:white;
	min-width:100%;
	font-size:14px;
}

.nav{
	width:100%;
	height:50px;
}

.nav img{
	margin-left:180px;
	margin-top:10px;
	float:left;
	margin-right:100px;
}
.topMenu{
	margin-left:200px;
}

.nav ul{
	display:inline-block;
	list-style:none;
	margin:0;
	padding:0;
	line-height:50px;
	
}

.nav li{
	display:inline-block;
}

.topMenu a{
	text-transform:uppercase;
	text-decoration:none;
	color:#ccc;
	padding:0 10px;
	margin:0;
	display:block;
	
}

.topMenu a:hover{
	background-color:red;
	color:white;
}

.login{
	float:right;
}

.login ul{
	display:inline-block;
	list-style:none;
	margin:0;
	padding:0;
	line-height:50px;
	
}

.login li{
	display:inline-block;
}


.login a{
	text-transform:uppercase;
	text-decoration:none;
	color:white;
	padding:0 15px;
	margin:0;
	display:block;
	background:#ccc;
}

.login li:last-child a{
	background:rgba(255,0,0,0.6);
	width:250px;
	
	padding-left:30px;
}
.login li:last-child a:hover{
	background:rgba(255,0,0, 1);
}

.login a:hover{
	background:black;
	color:white;
}

.form-img{
	width:100%;
	height:350px;
	background-image:url('images/ocean.jpg');
	background-position:center center;
}

.mask{
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,.7);
	position:relative;
}

.form{
	position:absolute;
	
	color:white;
	width:40%;
	margin:50px 33%;
	text-align:center;
	
}

form a{
	color:white;
	display:inline-block;
	padding:15px 12px;
	background:rgba(255,0,0, 0.7);
	border-radius:35px;
	width:33%;
	margin:15px auto;
	text-decoration:none;
	font-size:20px;
}

.form h1{
	font-size:29px;
	margin:15px 0;
}

form input, form select{
	background:rgba(255,255,255,...