<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Livelihood | Home</title>
<link rel="stylesheet" href="home.css">
</head>
<body>
<style>
body{
font-family: sans-serif;
font-size: 1.4rem;
line-height: 1.5;
color: hsl(76deg 82% 93%);
min-block-size: 100vb;
background-image:linear-gradient(to right top,
hsl(144deg 59% 24%),
hsl(162deg 93% 24%),
hsl(76deg 82% 33%));
}
.header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem;
padding-inline: 1.8rem;
margin: 2rem;
border-radius: 0.5rem;
background-color: hsl(144deg 59% 5% / 50%);
}
.navbarlogoimg{
opacity: 100%;
display: block;
width: 100px;
height: 100px;
}
.navbarlogoimg:hover{
opacity: 70%;
display: block;
width: 100px;
height: 100px;
}
.headerul{
gap: 1rem;
display: flex;
list-style: none;
}
.headerlink{
padding-inline: 1.5rem;
padding-block: 0.8rem;
background: hsl(144deg 59% 10% / 70%);
color: hsl(76deg 82% 93% / 100%);
text-decoration: none;
transition: color 0.2s ease-in-out;
border-radius: 0.5rem;
}
.headerlink:hover{
color: hsl(76deg 82% 93% / 70%);
text-decoration: none;
}
.headerlogo{
margin: 0;
}
</style>
<header class="header">
<h1 class="headerlogo">
<a href="https://google.com">
<img src="navbarlogo.png" alt="Life India Logo" class="navbarlogoimg">
</a>
</h1>
<nav class="headernav">
<ul class="headerul">
<li class="headerli">
<a href="https://m.youtube.com/" class="headerlink">Youtube</a>
</li>
<li class="headerli">
<a href="https://google.com/" class="headerlink">Google</a>
</li>
<li class="headerli">
<a href="https://mail.google.com/mail/u/0/#inbox" class="headerlink">Gmail</a>
</li>
<li class="headerli">
<a href="https://chat.openai.com/" class="headerlink">ChatGPT</a>
</li>
</ul>
</nav>
</header>
<h1>Test Text</h1>
</body>
</html>