<!DOCTYPE html>
<html>
<head>
</head>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: rgb(102, 194, 255);
font-family: sans-serif;
}
a {
color: inherit;
text-decoration: none;
}
nav ul {
width: 100%;
color: white;
text-align: center;
vertical-align: middle;
}
nav ul li {
display: inline-block;
margin: 0;
padding: 0;
width: 15%;
height: 50px;
border-top: 10px solid white;
trasition: all .4s;
-webkit-transitio: all .4s;
-moz-transition: all .4s;
}
nav ul li:hover {
background-color: white;
color: rgb(102, 194, 255);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
section {
width: 90%;
height: 1000px;
background-color: white;
border-radius: 10px;
}
footer {
height: 100px;
}
</style>
<body>
<br><br><br>
<nav>
<ul>
<a href="#"><li>HOME</li></a>
<a href="#"><li>CATALOGE</li></a>
<a href="#"><li>CONTACT</li></a>
<a href="#"><li>ABOUT</li></a>
</ul>
</nav>
<center>
<section>
</section>
<footer>
</footer>
</center>
</body>
</html>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.