Untitled

<!doctype html>
<html>
<head>
	<link rel = "stylesheet" href="navbar.css">
	<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Amaranth" />
<meta charset="utf-8">
<title>Navbar</title>
</head>
<body>
	<div class = "top">
	<ul class = "basket">
		<li><a href="#">Marketplace</a></li>
		<li><a href="#">Help & FAQs</a></li>
	</ul>

	</div>

	<div class="container">
		<div class = "navbar">
			<div class = "logo">
				<img src = "asoslogo.jpg" alt = "" class = "logo">
		</div>
		<ul class = "menu">
			<b><li><a href="#">WOMEN</a></li>
			<li><a href="#">MEN</a></li></b>

		</ul>
	</div>
	</div>
	<div class = "sale">
    	<div class ="women">
        <ul class = "salewomen">
			<li><a href="#">WOMEN</a></li>
		</ul>
	</div>
    <ul class = "salecenter">
			<li><a href="#">GET UP TO 40% OFF BIG BRANDS</a></li>

		</ul>
    <ul class = "men">
			<li><a href="#">MEN</a></li>

		</ul>
	</div>
	<div class = "content"><img class = "asoshome" alt = "" src = "asoshome.jpg"></div>

	<div class = "bottom">
	<ul class = "info">
		<li>Premier Delivery</li>

		</ul>
	<ul class = "info1">
		<li>Unlimited free Next-day Delivery for a whole year. T5&c5 apply</li>
		</ul>
	</div>

</body>
</html>


@charset "utf-8";
*{
	margin: 0;
	padding: 0;
}

.basket{
	float: right;
	margin-right: 380px;
	margin-bottom: 10px;
}

.basket li{
	float: left;
	width: 120px;
	height: 20px;
	line-height: 50px;
	text-align: center;
	list-style: none;
	font-size: 15px;


}
.basket li a{
	color:#AEAEAE;
	text-decoration: none;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	text-transform: uppercase;
	display:block;
	margin-top: -10px;
}


.basket li a:hover{
	color:deepskyblue;

}
.container{
	width: 100%;
	margin:0 auto;
}
.navbar{
	width: 100%;
	overflow: hidden;
	height: 60px;
	line-height: 70px;
	background: #333333;

}

.logo{
	width: 105px;
	height: 33px;
	float: left;
	margin-top: 7px;
	margin-left: 150px;
}

.menu{
	float: left;
	margin-left: 165px;
	margin-top: -5px;
}


.menu li{
	float: left;
	width: 110px;
	height: 70px;
	line-height: 70px;
	text-align: center;
	list-style: none;
	font-family: amaranth;
	border-style: solid;
    border-width: 0px 2px 0px 2px;
	border-color:#414141;

}


.menu li a{
	color: white;
	text-decoration: none;
	font-family: amaranth;
	text-transform: uppercase;
	display:block;


}

.menu li:hover{
	background:#444444;

}
.menu li a:hover{
	color:white;


}

.sale{
	width: 100%;
	overflow: hidden;
	height:50px;
	background: #FF5097;

}

.women{
	float: left;
	margin-top: -10px;
	list-style-type:none;

}
.salecenter{
	float: left;
	width: 90px;
	height: 70px;
	line-height: 70px;
	text-align: center;
	list-style: none;
	font-family: amaranth;
	margin-left:200px;

}


.men{
	float: right;
	margin-top: -10px;
	list-style-type:none;
}


.women li{
	float: left;
	width: 90px;
	height: 70px;
	line-height: 70px;
	text-align: center;
	list-style: none;
	font-family: amaranth;
	margin-left: 310px;
	margin-right: 560px;

}
.men li{
	float: right;
	width: 90px;
	height: 70px;
	line-height: 70px;
	text-align: center;
	list-style: none;
	font-family: amaranth;
	margin-right: 300px;


}

.women li a{
	color: black;
	text-decoration: none;
	font-family: amaranth;
	text-transform: uppercase;
	display:block;


}
.men li a{
	color: black;
	text-decoration: none;
	font-family: amaranth;
	text-transform: uppercase;
	display:block;


}
.women li:hover{
	background:#FF5070;

}
.men li:hover{
	background:#FF5070;

}
.women li a:hover{
	color:black;


}
.men li a:hover{
	color:black;


}
.asoshome{
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.bottom{
	width: 72.9%;
	overflow: hidden;
	height: 70px;
	line-height: 70px;
	background: #333333;
	margin-left: 260px;

}

.info li{
	font-size: 20px;
	margin-left: 50px;
	list-style-type: none;
	display:inline-block;
	color:white;
}

.info1 li{
	margin-top: 30;
	font-size: 13px;
	margin-left: 50px;
	list-style-type: none;
	display:inline-block;
	color:white;
}