Breaking News: Grepper is joining You.com. Read the official announcement!

html navabar

FlossyFish63943 answered on August 9, 2023 Popularity 6/10 Helpfulness 2/10

answer html navabar

html navabar

Comment

<!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>

Popularity 6/10 Helpfulness 2/10 Language html

Source: Grepper

Tags: html

Link to this answer
Share Copy Link

Contributed on Aug 09 2023

FlossyFish63943

0 Answers Avg Quality 2/10

html navabar

Contents

More Related Answers

html navabar

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.