Jump to content

Erro ao centralizar com css no meu 1°Projeto de LANDING PAGE responsiva e animada | HTML, CSS e JavaScript

wslopes
 Compartilhar
Ir para a Solução Solucionado por Rogerio Santos,

Postagens Recomendadas

wslopes

wslopes

Postado
Postado

estou no meu 1°Projeto de LANDING PAGE responsiva e animada | HTML, CSS e JavaScript.

não to conseguindo alinhar mesmo dando os comandos a parte do botão.

queria arrastar pra a parte de cima do canto direito da pagina essa parte que ta com a seta na imagem do anexo.

QUEM PODER MIM AJUDAR FICO GRATO PRA EU PODER PROCEGUIR COM MEU ESTUDO. 

sou novo to começando agora na área

segue o código html:

<!DOCTYPE html>

<html lang="pt-br">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>projeto delta</title>

    <link rel="stylesheet"  href="styles/style.css"/>

    <link rel="stylesheet"  href="styles/header.css"/>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" /><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

 

</head>

<body>

<!-- começo do corpo-->

 

<header>

    <!-- logo -->

<nav class="navbar">

    <i class="fa-solid fa-burger" id="nav_logo">Food</i>

 

    <ul id="nav_list">

        <li class="nav-item active">

            <a href="#home">Inicio</a>

        <li class="nav-item">

            <a href="#home">Contato</a>

        <li class="nav-item">

            <a href="#home">Fale Conosco</a>

        </li>

    </ul>

 

<button class="btn-default">

    Peça Aqui

</button>

 

<button id="mobile_btn">

    <i class="fa-solid fa-bars"></i>

</button>

</nav>

 

<div id="mobile_menu">

    <ul id="mobile_nav_list">

        <li class="nav-item">

            <a href="#home">Inicio</a>

        <li class="nav-item">

            <a href="#home">Contato</a>

        <li class="nav-item">

            <a href="#home">Fale Conosco</a>

        </li>

    </ul>

    <button class="btn-default">

        Peça Aqui

    </button>

</div>

</header>

 <!--fim do corpo-->

</body>

</html>

 

COD STYLE.CSS:

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

 

:root {

    --color-primary-1: #fff9ea;

    --color-primary-2: #ffe8b4;

    --color-primary-3: #f8d477;

    --color-primary-4: #ffe100;

    --color-primary-5: #ffcb45;

    --color-primary-6: #e9a209;

 

    --color-neutral-0: #fff;

    --color-neutral-1: #1d1d1d;

}

 

* {

    font-family: 'Poppins', sans-serif;

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

 

html {

    scroll-behavior: smooth;

}

 

body {

    background-color:#ffe8b4

   

}

 

.btn-default{

    border: none;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color:#ffcb45;

    border-radius: 12px;

    padding: 10 14px;

    font-weight: 600;

    box-shadow: 0px 0px 10px 2px rgba(0,0,0, 0.1);

    cursor: pointer;

}


 

.btn-deafault:hover{

    background-color: #f8d477;

   

}

 

COD HEADER.CSS

header {

    width: 100%;

    padding: 28px 8%;

    position:sticky;

    top: 0;

    background-color: var(--color-primary-2);

    z-index: 3;

}

 

#navbar {

   

    width: 100%;

    display:flexbox;

    align-items: center;

   

}

 

#nav_logo{

    font-size: 24px;

    color: #e9a209;

 

}

 

#nav_list{

display: flex;

list-style: none;

gap:48px;

 

}

 

.nav-item a{

    text-decoration: none;

    color: #1d1d1dad;

    font-weight: 600;

 

}

 

.nav-item.active{

    color: #1d1d1d;

    border-bottom: 3px solid #ffe100;

}

 

 

 

 

 

Sem título.png

  • Curtir 1
  • Solução
Rogerio Santos

Rogerio Santos

Postado
  • Solução
Postado

Bom dia no seu código, tem alguns pontos que pode lhe ajudar 
Há um erro de digitação no seletor #navbar em seu arquivo header.css. Você deve alterá-lo para .navbar para corresponder à classe correta no HTML.
Você tem um erro de digitação no seletor .btn-deafault em seu arquivo style.css. Deve ser .btn-default para corresponder à classe correta.

caso o que queira levar para o canto direito seja o botão pelo que entendi do código deve adicionar no style.css o seguinte código.

#mobile_btn {

    position: absolute;

    top: 28px; /* Ajuste a distância do topo conforme necessário */

    right: calc(8% + 110px); /* Ajuste a distância da direita conforme necessário (considerando a largura do botão "Peça Aqui") */

    background: none;

    border: none;

    cursor: pointer;

}

 

caso seja o peça aqui seria 

.btn-default {

    position: absolute;

    top: 28px; /* Ajuste a distância do topo conforme necessário */

    right: 8%; /* Ajuste a distância da direita conforme necessário */

    border: none;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: #ffcb45;

    border-radius: 12px;

    padding: 10px 14px;

    font-weight: 600;

    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);

    cursor: pointer;

}

  • Ajudou! 1
  • Casa do Desenvolvedor mudou o título para Erro ao centralizar com css no meu 1°Projeto de LANDING PAGE responsiva e animada | HTML, CSS e JavaScript

Crie uma conta ou entre para comentar 😀

Você precisa ser um membro para deixar um comentário.

Crie a sua conta

Participe da nossa comunidade, crie sua conta.
É bem rápido!

Criar minha conta agora

Entrar

Você já tem uma conta?
Faça o login agora.

Entrar agora
 Compartilhar
Ir para a listagem de tópicos


×
×
  • Create New...