HTML Como posicionar um elemento

_Pedro_1002_ · 8 de agosto de 2020

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Fit Forma</title>

    <link rel="stylesheet" href="/styles/main.css">
    <link rel="stylesheet" href="/styles/partials/page-landing.css">

    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
    
</head>
<body id="page-landing">
    <div class="container">
        <img src="/images/academia.svg" alt="logo-academia">
        <div class="nav-bar">
            <a href="/"><strong>Inicio</strong></a>
            <a class="sobre">Sobre</a>
            <a class="treinos">Treinos</a>
            <a class="receitas">Receitas</a>
        </div>
        
    
        <div class="join-page">
            <div class="button-login">
                <a href="">Log in</a>
                <img src="/images/login.svg" alt="log-in">
            </div>
            <div class="button-cadastro">
                <a href="">Cadastrar-se</a>
            </div>
        </div>
    </div>
    
</body>
</html>

#page-landing {
    background: var(--color-background);
}

.container {
    background: var(--color-header-background);
    display: flex;
    align-items: center;
    border-bottom: dashed rgb(56, 141, 167);
}

.container .nav-bar a {
    padding: 4rem;
    font-size: 25px;
    margin-top: 3rem;
}

.container img {
    width: 100px;
    height: 100px;
    padding: 1.6rem;
}

.nav-bar {
    margin-top: 3rem;
}

.nav-bar a {
    text-decoration: none;
    color: white;
}

.button-cadastro {
    width: 7rem;
    height: 2rem;
    background: var(--color-button-cadastro);
    border-radius: 8rem;
    cursor: pointer;
}

.button-cadastro a {
    text-decoration: none;
    color: black;
    font-size: 16px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.5rem;
}

.container .nav-bar .button-cadastro {
    display: flex;
    justify-content: space-between;
   

}

.button-login {
    display: flex;
    align-items: center;
}

.button-login a {
    color: white;
    text-decoration: none;
}

.button-login img {
    width: 30px;
    height: 30px;
    padding: 0;
    margin-left: 15px;
}

.join-page {
    display: flex;
    align-items: center;
    padding: 0rem;
}