Help with HTML and CSS site menu

Asked

Viewed 72 times

-3

I want to put a logo in place of the red rectangle,inserir a descrição da imagem aqui.

body {
border: 0px;
margin: 0px;
padding: 0px;
font-family: 'Roboto', sans-serif;
}

#menu {
background-color: #483D8B;
padding: 5px;
}

#menu ul {
display: flex;
justify-content: end;

}
#menu ul li{
list-style: none;
}

#menu ul li a {
text-decoration: none;
padding: 0 10px 0;
float: right;
}

.btn {
color: #fff;
padding: 10px;
border: 0;
cursor: pointer;
}

.btn-purpple {
background: #6959CD;
color: #fff;
box-shadow: 0 3px 0 #836FFF;
}

.btn-purpple:hover {
background: #836FFF;
color: #fff;
box-shadow: 0 3px 0 #836FFF;
}

.btn-purpple:hover {
position: relative;
top: 5px;
box-shadow: none;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Modelo</title>
<meta charseth="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> 
</head>
<body>
<div id="menu">
<ul>
<li><a href="#"><button class="btn btn-purpple">INÍCIO</button></a></li>
<li><a href="#"><button class="btn btn-purpple">PROJETOS</button></a></li>
<li><a href="#"><button class="btn btn-purpple">SOBRE</button></a></li>
<li><a href="#"><button class="btn btn-purpple">DOAR</button></a></li>
</ul>
</div>
</body>
</html>

html css menu website

  • puts a <li><a href="#"><button class=""><img border="0" src="url_da_imagem"></button></a></li> as the first li

1 answer

0

Puts a <li><a href="#"><button class=""><img border="0" src="url_da_imagem"></button></a></li> as the first <li> from the list. The rest just get your CSS right

  
  body {
    border: 0px;
    margin: 0px;
    padding: 0px;
    font-family: 'Roboto', sans-serif;
    }

    #menu {
    background-color: #483D8B;
    padding: 5px;
    }

    #menu ul {
    display: flex;
    justify-content: end;

    }
    #menu ul li{
    list-style: none;
    }

    #menu ul li a {
    text-decoration: none;
    padding: 0 10px 0;
    float: right;
    }

    .btn {
    color: #fff;
    padding: 10px;
    border: 0;
    cursor: pointer;
    }

    .btn-purpple {
    background: #6959CD;
    color: #fff;
    box-shadow: 0 3px 0 #836FFF;
    }

    .btn-purpple:hover {
    background: #836FFF;
    color: #fff;
    box-shadow: 0 3px 0 #836FFF;
    }

    .btn-purpple:hover {
    position: relative;
    top: 5px;
    box-shadow: none;
    }

   
    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <title>Modelo</title>
    <meta charseth="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> 
    </head>
    <body>
    <div id="menu">
    <ul>
    <li><a href="#"><button class="logo"><img border="0" src="https://i.stack.imgur.com/FJRZA.png" width="100" height="30"></button></a></li>
    <li><a href="#"><button class="btn btn-purpple">INÍCIO</button></a></li>
    <li><a href="#"><button class="btn btn-purpple">PROJETOS</button></a></li>
    <li><a href="#"><button class="btn btn-purpple">SOBRE</button></a></li>
    <li><a href="#"><button class="btn btn-purpple">DOAR</button></a></li>
    </ul>


    </div>

    </body>
    </html>

Browser other questions tagged html css menu website

You are not signed in. Login or sign up in order to post.