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;
}