Untitled

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body	{
		font-family:Arial, aHelvetica, sans-serif;
		padding:20px 50px 50px;
		font-size:13px;
		text-align:center;
		background:#e3caa;
	}

	ul {
		text-align:left;
		display:inline;
		margin:0;
		padding:15px 4px 17px 0;
		list-style:none;
	}

	ul li	{
		font:bold 12px/18px Arial, Helvetica, sans-serif;
		display:inline-block;
		margin-right:10px;
		position:relative;
		padding:15px 20px;
		background:#fff;
		cursor:pointer;
	}

	ul li:hover	{
		background:cyan;
		color:#fff;
	}

	ul li ul 	{
		padding:0;
		position:absolute;
		top:48px;
		left:0;
		width:150px;
		display:none;
		opacity:0;
		visibility:hidden;
	}

	ul li ul li	{
		background:cyan;
		display:block;
		color:#000;
		text-shadow:0 -1px 0 #000;
	}

	ul li ul li:hover {
		background:#666;
	}

	ul li:hover ul {
		display:block;
		opacity:1;
		visibility:visible;
	}
	/*default button style*/
.btn{
	 background:#f5f5f5;
	 font-size:14px;
	 color:#000000;
	 border:none;
	 border-radius:4px;
	 padding:8px 16px;
	 outline:0;
	 cursor:pointer;
}
/*font color for button*/
.btn-primary,
.btn-success,
.btn-info,
.btn-danger{
	color:#ffffff;
}
.btn-block{
	       display:block;
		   width:100%;
}
.btn-sm{
	    padding:4px 8px;
		border-radius:4px;
		font-size:12px;
}
.btn-lg{
	    padding:16px 32px;
		border-radius:8px;
		font-size:18px;
}
/*dynamic background color for button*/
.btn-primary{background-color:#2E3129}
.btn-success{background-color:#00A651}
.btn-info{background-color:#00AEEF}
.btn-warn{background-color:#FFF200}
.btn-danger{background-color:#ED1C24}

.kanan {
	float:right
}
.kiri {
	float:left;
	clear:both;

}

.content {
	padding-top:100px;
}
.cari {
	width:500px;
	height:25px;
}
ul.kiri{margin-top:10px}

</style>

</head>

<body>
<ul class="kiri">


        	<li class="btn btn-primary">Redeem Voucher</li>
            <li class="btn btn-primary">Top Up Poin</li>
            <li class="btn btn-primary">Download App</li>

	</ul>


<ul class="kanan">
        	<li class="btn btn-primary">Login</li>
            <li class="btn btn-primary">Register</li>

	</ul>
    <p class="kiri btn btn-lg btn-primary btn btn-danger"> Ayo Berbelanja </p>

<div class="content">
<input class="cari" type="text" name="">
<br><br>
<a class="btn btn-primary">Cari</a>
</div>

<ul class="kiri">
        	<li class="btn btn-sm btn-primary">All Categories</li>
</ul>

<ul class="kiri">
  <li class="btn btn-sm btn-primary">All Categories</li>
</ul>


</body>
</html>