navigation dar and menus with search box </titel>
<style>
body{
background:skyblue;
margin:0;
}
.menu{
width:100%;
background:#142b47;
overflow:outo;
}
.menu ul {
margin:0;
padding:0;
list-style:none;
line-height:60px;
}
.menu li {
float:left;
}
.menu ul li a{
background:#142 b 57;
text-decoration:none;
width:130px;
display:block;
text-align:cente;
color:#f2f2f2;
font-size:18px;
font-family:sans-serif;
letter-spacing:0.5px;
}
.menu li a:hover{
color:#fff;
opacity:0.5;
font-size:19px;
}
.search-form{
margine-top:15px;
float:right;
margin-right:100px;
}
input[type=text]{
padding:7px;
border:none;
font-size:16px;
font-family:sans-serif;
}
button {
float:right;
background:orange;
color:white;
border-radius:0 5px 5px 0;
cursor:pointer;
position:relative;
padding:7px;
font-family:sans-serif
border:none;
font-size:16px;
}
</style>
</head>
<body>
<nav class ="menu">
<ul>
<li><a href ="#">home</a></li>
<li><a href ="#">gallery</a></li>
<li><a href ="#">event</a></li>
<li><a href ="#">feedback</a></li>
<li><a href ="#">about</a></li>
<li><a href ="#">contact</a></li>
</ul>
<form class ="search-form">
<input type ="text"placeholder="search">
<button>search </button>
</form>
</nav>
</body>
</html>
No comments:
Post a Comment