Nav Bar Template
EXERCISE ON CSS
EXERCISE IV
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Multicolor Website</title>
</head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Open+Sans:wght@300&family=Poppins:wght@300&display=swap');
* {
padding: 0;
margin: 0;
}
:root{
--bodyback:#cbccd5;
--navback:#040468;
--spncol:white;
--undercol:red;
}
body {
background-color:var(--bodyback) ;
}
nav {
padding: 88px;
background-color: var(--navback);
}
nav>span {
padding: 58px;
font-size: x-large;
font-weight: bold;
font-family: 'Merriweather', serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Poppins', sans-serif;
color:var(--spncol) ;
}
nav>span:hover{
text-decoration: underline 3px;
text-decoration-color: var(--undercol);
text-underline-offset: 10px;
cursor: pointer;
/* font-size: xx-large;
font-weight: bolder; */
}
</style>
<body>
<nav>
<span>Home</span>
<span>About</span>
<span>Cources</span>
<span>Contacts</span>
</nav>
</body>
</html>
Comments
Post a Comment