want to align a menu with an icon left, and "services, contact, about, store" right

Asked

Viewed 44 times

-3

I don’t know if the code is correct, if possible, I want a fix:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Página Inicial</title>
        <link rel="shortcut icon" href="data/logos/favicon.jpg">
        <link rel="stylesheet" href="style.css">

        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

        <link href="https://fonts.googleapis.com/css?family=Righteous|Share+Tech|Share+Tech+Mono|Staatliches|VT323&display=swap" rel="stylesheet">
    </head>

    <body>
        <header>
            <nav class="menu">
                <h1 class="home-icon"><a href="index.html"><i class="fas fa-home"></i></a></h1>

                <ul>
                    <li><a href="_html/store.html">Loja</a></li>
                    <li><a href="_html/about.html">Sobre</a></li>   
                    <li><a href="_html/contact.html">Contato</a></li>
                    <li><a href="_html/services.html">Serviços</a></li>
                </ul>
            </nav>          
        </header>
    </body>
</html>

CSS:

.menu ul{
    transition: 0.7s;
}
.menu{
    background: black;
    font-family: 'VT323', monospace;
    padding: 10px 0 10px 0;
    background-size: 100%;
    text-align: center;
    font-size: 1.6em;
    position: fixed;
    color: #FFFFFF;
    width: 100%;
    opacity: 0.9;
}
.home-icon{
    margin-left: 70px;
    float: left;
    transition: 0.7s;
    font-size: 1.4em;
}
.menu li{
    color: white;
    display: inline-block;
    list-style: none;
    float: right;
    margin-right: 65px;
}
.menu li a{
    text-decoration: none;
    color: white;
    transition: 0.7s;
    padding: 8px;
}
.menu li a:hover{
    background: white;
    color: black;
    text-decoration: underline;
    border-radius: 5px;
}
.home-icon a{ color: white; }
.home-icon i{ color: #e6e6e6; transition: 0.3s; }
.home-icon i:hover{ color: #a4a4a4; }
html5 css3

1 answer

0

You can use the flex-box concept to align in a very simple way

.menu{
  display: flex;
  align-items: center;
  justify-content:space-around;

}

Browser other questions tagged html5 css3

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