brunovianarenega

Alguém sugere um tutorial que atenda as necessidades desse form que eu fiz? Eu quero apenas pegar as informações e enviar por e-mail. <link rel="stylesheet" href="orc.css"> <section class="orcbar"> <div class="orccontainer"> <div class="logo-orc"> <a href="index.php"> <img src="https://i.postimg.cc/zGzn4yDk/logotext.png" alt="Art X" class="artx-logo"> </a></div> <br> <h1>Solicite seu orçamento</h1><br> <h2>Olá! É um prazer ter você aqui! Se você chegou até aqui, é porque tem interesse em algum produto ou serviço oferecido por nós. Para melhor atende-lo, responda corretamente as perguntas a seguir, vai levar poucos minutos. Temos um prazo de 48h para responder, mas é provável que em breve já responderemos a sua solicitação.</h2><br> <h4>Você imagina, nós realizamos.</h4><br> <form action=""> <label for="fname">Qual é o seu nome?</label> <input type="text" id="fname" name="fname" placeholder=""> <label for="femail">Qual é o seu e-mail?</label> <input type="text" id="femail" name="femail" placeholder=""> <label for="fwhats">Qual é o seu número do whatswapp?</label> <input type="text" id="fwhats" name="fwhats" placeholder=""> <label for="flogo">Qual é o nome da sua marca?</label> <input type="text" id="flogo" name="flogo" placeholder=""> <label for="ftime">Há quanto tempo sua marca existe?</label> <select id="foption" name="foption"> <option value=""></option> <option value="agora">Está nascendo agora</option> <option value="tempo">Já existe há algum tempo</option> <option value="prefiro">Prefiro não dizer</option> </select> <label for="fproduct">Em quais produtos ou serviços você tem interesse?</label> <select id="foptpro" name="foptpro"> <option value=""></option> <option value="">Adesivos</option> <option value="">Brindes e acessórios</option> <option value="">Calendários e folhinhas</option> <option value="">Cardápios digitais e impressos</option> <option value="">Cartão de visitas</option> <option value="">Cartão fidelidade</option> <option value="">Banners</option> <option value="">Embalagens</option> <option value="">Logotipos</option> <option value="">Flyers</option> <option value="">Outros</option> </select> <label for="flocation">Por onde conheceu a gente?</label> <br><br> <input type="checkbox" id="vehicle1" name="vehicle1" value=""> <label for="vehicle1"> Redes Sociais</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value=""> <label for="vehicle2"> Google</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value=""> <label for="vehicle3"> Indicação Pessoal</label><br> <input type="checkbox" id="vehicle4" name="vehicle3" value=""> <label for="vehicle4"> Outros</label><br> <input type="submit" value="Submit"> </form> </div> </section>

<div id="navbar" class="navbar"> <a href="index.php"> <img src="https://i.ibb.co/Z2TKYRX/artx-logo-text.png" alt="Art X" class="artx-logo"> </a> <nav id="nav"> <button aria-label="Abrir Menu" id="btn-mobile" aria-haspopup="true" aria-controls="menu" aria-expanded="false"> <span id="hamburger"></span> </button> <ul id="menu" role="menu"> <li><a href="index.php">Inicio</a></li> <li><a href="">Portfólio</a></li> <li><a href="">Clientes</a></li> <li><a href="">Institucional</a></li> <li><a href="">Contato</a></li> </ul> </nav> <div class="btn-finance"> <button><a href="orc.php">Solicite um orçamento</a></button> </div> </div> js window.onscroll = function() {myFunction()}; var navbar = document.getElementById("navbar"); var sticky = navbar.offsetTop; function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("navbar") } else { navbar.classList.remove("navbar"); } } css #navbar { box-sizing: border-box; width: 100%; position: static; top: 0; height: 50px; padding: 1rem; display: flex; align-items: center; justify-content: space-around; background: rgba(255, 255, 255, 0.35); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .navbar { width: 100%; position: fixed; top: 0; background: rgba(255, 255, 255, 0.35); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } Mudei algumas coisas, mas ainda não funcionou, consegue ajudar?

<div id="navbar"> <a href="index.php"> <img src="https://i.ibb.co/Z2TKYRX/artx-logo-text.png" alt="Art X" class="artx-logo"> </a> <nav id="nav"> <button aria-label="Abrir Menu" id="btn-mobile" aria-haspopup="true" aria-controls="menu" aria-expanded="false"> <span id="hamburger"></span> </button> <ul id="menu" role="menu"> <li><a href="index.php">Inicio</a></li> <li><a href="">Portfólio</a></li> <li><a href="">Clientes</a></li> <li><a href="">Institucional</a></li> <li><a href="">Contato</a></li> </ul> </nav> <div class="btn-finance"> <button><a href="orc.php">Solicite um orçamento</a></button> </div> </div>

Quando rola-se o mouse, ativaria a class navbar, o problema é que não está acontecendo. #navbar { box-sizing: border-box; width: 100%; position: static; top: 0; height: 50px; padding: 1rem; display: flex; align-items: center; justify-content: space-around; background: rgba(255, 255, 255, 0.35); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .navbar { width: 100%; position: fixed; top: 0; background: rgba(255, 255, 255, 0.35); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } js window.onscroll = function() {myFunction()}; var navbar = document.getElementById("navbar"); var sticky = navbar.offsetTop; function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("navbar") } else { navbar.classList.remove("navbar"); } }

Alguém manja como é feito esse tipo de efeito do site: www.weebly.com.br

Então, mas como eu coloco na HOST do Github, também preciso por todos os arquivos em .html?

Estou tentando fazer upload no github, vi que o index precisa ser .html, mas não puxa as outras página com o php dentro, como resolver? <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Projeto</title> <link rel="stylesheet" href="global.css"> <link rel="stylesheet" href="nav.css"> <link rel="stylesheet" href="product1.css"> </head> <body> <?php require_once('nav.php'); require_once('home.php'); require_once('footer.php'); ?> <script src="nav.js"></script> </body> </html>

Desculpa a falta de informações, mas era isso mesmo, ao rolar o mouse, o menu fica fixo na tela. E quando voltar o scroll para cima novamente, ele fica statico. So que não ta funcionando bem esse script, ele não volta pra posição.

Ao rollar o scroll para folhear o site, desativa essa classe: #header { box-sizing: border-box; width: 100%; position: static; top: 0; height: 50px; padding: 1rem; display: flex; align-items: center; justify-content: space-between; background: rgba(255, 255, 255, 0.35); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid #ddd; } E ativa essa: .header { position: fixed; background: rgba(255, 255, 255, 0.35); backdrop-filter: blur(7px); }

Só uma ultima dúvida, da uma olhada no meu código, como eu faço para que quando eu colocar a sexta opção de card, ele quebra e vai pra baixo e não pro lado? Eu utilizei o vw no card, só que nessa situação a responsividade ficou ruim, ou eu que fiz errado kk <section class="product2"> <div class="product2-container"> <div class="card"> <img src="https://cdn-icons-png.flaticon.com/512/2639/2639669.png" alt="Avatar"> <div class="container"> <h4>+ de 1000 clientes</h4> <p>em todo o Brasil.</p> </div> </div> <div class="card"> <img src="https://cdn-icons-png.flaticon.com/512/2639/2639669.png" alt="Avatar"> <div class="container"> <h4>+ de 1000 clientes</h4> <p>em todo o Brasil.</p> </div> </div> <div class="card"> <img src="https://cdn-icons-png.flaticon.com/512/2639/2639669.png" alt="Avatar"> <div class="container"> <h4>+ de 1000 clientes</h4> <p>em todo o Brasil.</p> </div> </div> <div class="card"> <img src="https://cdn-icons-png.flaticon.com/512/2639/2639669.png" alt="Avatar"> <div class="container"> <h4>+ de 1000 clientes</h4> <p>em todo o Brasil.</p> </div> </div> <div class="card"> <img src="https://cdn-icons-png.flaticon.com/512/2639/2639669.png" alt="Avatar"> <div class="container"> <h4>+ de 1000 clientes</h4> <p>em todo o Brasil.</p> </div> </div> </div> </section> css .product2 { width: 100%; padding-top: 0px; margin: 0px 0px; } .product2-container { margin: 0px auto; display: flex; padding: 50px 50px; gap: 10rem; justify-content: center; flex: wrap; flex-direction: row; } .container { margin: 10px 10px; } .card { text-align: center; width: 10vw; height: 10vw;; } .card:hover { } .card img { width: 10vw; height: 10vw;; object-fit: cover; object-position: center; } .container h4 { background: -webkit-linear-gradient(-70deg, #be79b2 30%, #884593 50%, #3f2c52 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; font-size: 2vw; text-align: center; letter-spacing: -2px; } .container p { color: #131313; font-size: 1vw; text-align: center; font-weight: normal; letter-spacing: -1px; }

Só pra fechar a questão, como se reduz a imagem responsivamente? A imagem do card

Tentei aqui fazer um sistema de card usando esse link: http://www-db.deis.unibo.it/courses/TW/DOCS/w3schools/w3css/w3css_cards.asp.html Só que não consegui muito bem, a minha ideia é fazer um card para cada escudo (apenas a imagem vai ser inserida) de tamanho 250x250px, e se a imagem por acaso for maior que isso, ela se ajusta nessa dimensão e fica centralizada. Outra dúvida, eu quero mostrar apenas 10 escudos na pagina, só que existe mais escudos de time, que jeito eu faço para cada vez que a pagina atualizar, os logos ficam mudando? Um total de 21 escudos.

Então, como eu faço para aparecer um sub menu onde as opções ficam na horizontal quando passo o mouse nas opções de Text +? <nav class="navbar"> <div class="logoinc"> <a href=""> <h1>Logo</h1> </a> </div> <div class="nav-desktop"> <ul class="list-desktop"> <li><a href="">Text</a> <li><a href="">Text</a> <li><a href="">Text +</a> <ul class="sub-list-desktop"> <li>SubText</li> <li>SubText</li> <li>SubText</li> <li>SubText</li> </ul> <li><a href="">Text +</a> <li><a href="">Text +</a> <li><a href="">Text</a> </ul> </div> <div class="nav-icon-notification"> <span><a href=""><img src="https://i.ibb.co/4SSLj2L/editar-perfil.png" alt="editar-perfil" border="0"></a></span> </div> </nav> segue imagem em anexo css @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } body { font-family: "Inter", sans-serif; overflow-y: scroll; width: 100%; height: 100vh; background-color: rgba(50, 50, 50, 0.1); } a { display: block; text-decoration: none; } .logoinc a h1 { color: #000; font-size: 24px; text-align: center; letter-spacing: -2px; } .navbar { display: flex; align-items: center; justify-content: space-between; background-color: #fff; max-height: 35px; padding: 10px 10px; border-radius: 1px; border-bottom: 1px solid rgba(50, 50, 50, 0.22); } .nav-desktop .list-desktop { display: flex; align-items: center; list-style: none; gap: 1rem; } .list-desktop li a{ color: black; padding: 20px; } .nav-icon-notification { display: flex; gap: 1rem; } .sub-list-desktop { display: none; }

Não deu muito certo, pesquisei e achei um para modificar, como eu coloco o botão de pesquisar mais perto da caixa principal? E o placeholder da caixa, mais para direita >? <form id="expanding-form"> <input type="text" id="expanding-input" placeholder="Buscar"> <button type="submit">Buscar</button> </form> #expanding-form input{ width: 100vh; height: 30px; box-shadow:inset 0px 0px 0px 0px #ffffff; background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%); background-color:#ffffff; border:1px solid #dcdcdc; display:inline-block; } #expanding-form button { box-shadow:inset 0px 0px 0px 0px #ffffff; background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%); background-color:#ffffff; border:1px solid #dcdcdc; display:inline-block; cursor:pointer; color:#131313; font-family:Arial; font-size:12px; padding:7px 25px; text-decoration:none; -webkit-transition: 0.5s ease; transition: 0.5s ease; }

Tem alguma forma de eu bloquear do boostrap mexer com os estilos que eu tenho na minha pagina? Queria muito usar um modelo assim de search bar, o problema é que quando uso isso, já danifica... Se não existir, vou tentar construir <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-xs-8 col-xs-offset-2"> <div class="input-group"> <div class="input-group-btn search-panel"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span id="search_concept">All</span> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#contains">test1</a></li> <li><a href="#its_equal">test2</a></li> <li><a href="#greather_than">test3</a></li> <li><a href="#less_than">test4</a></li> <li class="divider"></li> <li><a href="#all">test5</a></li> </ul> </div> <input type="hidden" name="search_param" value="all" id="search_param"> <input type="text" class="form-control" name="x" placeholder="Search term..."> <span class="input-group-btn"> <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button> </span> </div> </div> </div> </div>

Fui pesquisar uma encomenda e fiquei curioso no desenvolvimento disso, visto que sou iniciante, alguém consegue esclarecer? O sistema de cadastro deles disponibilizam 2 tipos. O primeiro já vem marcado como pessoa fisica, o segundo, você seleciona o button e o formulário troca o campo. Segue o link Tex encomendas Cadastrar

Estou com problemas no alinhamento, o correto é usar baseline de qual forma? Ou não se usa, e faz diferente? Alinhar o texto perfeitamente com a logo. E quando reduz para versão mobile, alinha o logo com o icone de hamburguer. html <header id="header"> <div class="svg-logo"><a href="" class="logo-svg"></a></div> <nav id="nav"> <ul id="menu" role="menu"> <li class="hiddenlogo"><a href="" class="logo-svg"></a></li> <li><a href="/">Text</a></li> <li><a href="/">Text</a></li> <li><a href="/">Text</a></li> <li><a href="/">Text</a></li> <li><a href="/">Text</a></li> <li><a href="/">Text</a></li> <li><a href="/">Text</a></li> </ul> </nav> <button aria-label="Abrir Menu" id="btn-mobile" aria-haspopup="true" aria-controls="menu" aria-expanded="false"> <span id="hamburger"></span> </button> </header> css @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); body { font-family: "Inter", sans-serif; overflow-y: scroll; } * { box-sizing: border-box; margin: 0; padding: 0; outline: 0; } a { color: black; text-decoration: none; font-family: sans-serif; font-size: 14px; } .logo-svg { background: url('https://svgshare.com/i/dTe.svg'); display: block; background-position: center; background-size: 125px; height: 34px; width: 125px; background-repeat: no-repeat; } .svg-logo {display: none;} #header { height: 50px; padding: 1rem; display: flex; align-items: center; justify-content: center; box-shadow: 15px 1px 15px RGB(0 0 0 / 0.2); } #menu { display: flex; list-style: none; gap: 0.5rem; } #menu a { display: block; padding: 0.5rem; } #btn-mobile { display: none; } @media (max-width: 600px) { .svg-logo {display: block;} .hiddenlogo {visibility: hidden;} #menu { display: block; position: absolute; width: 100%; top: 50px; right: 0px; background: white; transition: 0.6s; z-index: 1000; height: 0px; visibility: hidden; overflow-y: hidden; } #nav.active #menu { height: calc(100vh - 50px); visibility: visible; overflow-y: auto; } #menu a { padding: 1rem 0; margin: 0 1rem; border-bottom: 1px solid rgba(0, 0, 0, 0.274); } #btn-mobile { display: flex; padding: 0.5rem 1rem; font-size: 1rem; border: none; background: none; cursor: pointer; gap: 0.5rem; } #hamburger { border-top: 2px solid; width: 20px; } #hamburger::after, #hamburger::before { content: ''; display: block; width: 20px; height: 2px; background: currentColor; margin-top: 5px; transition: 0.3s; position: relative; } #nav.active #hamburger { border-top-color: transparent; } #nav.active #hamburger::before { transform: rotate(135deg); } #nav.active #hamburger::after { transform: rotate(-135deg); top: -7px; } } javascript const btnMobile = document.getElementById('btn-mobile'); function toggleMenu(event) { if (event.type === 'touchstart') event.preventDefault(); const nav = document.getElementById('nav'); nav.classList.toggle('active'); const active = nav.classList.contains('active'); event.currentTarget.setAttribute('aria-expanded', active); if (active) { event.currentTarget.setAttribute('aria-label', 'Fechar Menu'); } else { event.currentTarget.setAttribute('aria-label', 'Abrir Menu'); } } btnMobile.addEventListener('click', toggleMenu); btnMobile.addEventListener('touchstart', toggleMenu);

Quando reduzo a tela para 800px, a ação de sumir e aparecer o hamburger acontece, o problema é que quando clica no hamburguer, o menu nessa versão não abre. html <div id="nav1" class="nav1"> <div class="nav2"> <div class="nav3"> <button aria-label="Abrir Menu" class="btn-mobile" aria-haspopup="true" aria-controls="menu" aria-expanded="false">Menu <span id="hamburger"></span> </button> <ul class="navmenu"> <li><a href="" class="logo-svg"></a></li> <li><a href="">Produto</a></li> <li><a href="">Produto</a></li> <li><a href="">Produto</a></li> <li><a href="" class="">Produto</a></li> <li><a href="" class="">Produto</a></li> <li><a href="" class="">Produto</a></li> <li><a href="" class="">Produto</a></li> </ul> </div> </div> </div> <div class="content1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non turpis consequat, hendrerit justo ac, elementum ex. Nulla viverra nec nibh et interdum. Cras malesuada dignissim justo, non egestas risus viverra in. Phasellus placerat consectetur ipsum. Donec at egestas eros. Nam auctor nulla nisl, ac lobortis purus dignissim quis. Nam finibus eget dolor in consectetur. Curabitur iaculis urna in pulvinar euismod. Donec dignissim, justo at eleifend lobortis, purus risus eleifend odio, eu eleifend ante risus quis neque. Curabitur id lacus ut est mollis egestas sit amet in quam. Integer nec libero id libero pellentesque varius ut at enim. Morbi nec laoreet dui, non eleifend arcu. Maecenas eget risus in sapien mattis dignissim. </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non turpis consequat, hendrerit justo ac, elementum ex. Nulla viverra nec nibh et interdum. Cras malesuada dignissim justo, non egestas risus viverra in. Phasellus placerat consectetur ipsum. Donec at egestas eros. Nam auctor nulla nisl, ac lobortis purus dignissim quis. Nam finibus eget dolor in consectetur. Curabitur iaculis urna in pulvinar euismod. Donec dignissim, justo at eleifend lobortis, purus risus eleifend odio, eu eleifend ante risus quis neque. Curabitur id lacus ut est mollis egestas sit amet in quam. Integer nec libero id libero pellentesque varius ut at enim. Morbi nec laoreet dui, non eleifend arcu. Maecenas eget risus in sapien mattis dignissim. </p> </div> css @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); body { font-family: "Inter", sans-serif; overflow-y: scroll; } * { box-sizing: border-box; margin: 0; padding: 0; outline: 0; } .nav1 { display: flex; background-color: gold; width: 100%; height: 45px; } .menu_fixo { position: fixed; background: rgba(255, 255, 255, 0.35); backdrop-filter: blur(7px); } .nav2 { display: flex; align-items: center; justify-content: center; width: 90%; max-width: 1000px; margin: auto; } .nav3 ul { display: flex; justify-content: baseline; align-items: center; } .nav3 ul li { list-style: none; } .nav3 ul li a { text-decoration: none; color: black; font-size: 14px; padding: 1rem; transition: all 250ms linear 0s; } .nav3 ul li a:hover { color: red; } .logo-svg { background: url('https://seeklogo.com/images/S/svg-logo-A7D0801A11-seeklogo.com.png'); display: block; background-position: center; background-size: 24px; background-repeat: no-repeat; } .content1 { background-color: blue; height: 200vh; width: 90%; max-width: 1000px; margin: auto; } .btn-mobile {display: none;} @media (max-width: 800px) { .navmenu { display: block; position: absolute; width: 100%; top: 50px; right: 0px; background-color: gold; transition: 0.6s; z-index: 1000; height: 0px; visibility: hidden; overflow-y: hidden; } .nav3.active .navmenu { height: calc(100vh - 50px); visibility: visible; overflow-y: auto; } .navmenu a { padding: 1rem 0; margin: 0 1rem; border-bottom: 2px solid rgba(0, 0, 0, 0.05); } .btn-mobile { display: flex; padding: 0.5rem 1rem; font-size: 1rem; border: none; background: none; cursor: pointer; gap: 0.5rem; } #hamburger { border-top: 2px solid; width: 20px; } #hamburger::after, #hamburger::before { content: ''; display: block; width: 20px; height: 2px; background: currentColor; margin-top: 5px; transition: 0.3s; position: relative; } .nav3.active #hamburger { border-top-color: transparent; } .nav3.active #hamburger::before { transform: rotate(135deg); } .nav3.active #hamburger::after { transform: rotate(-135deg); top: -7px; } } javascript window.addEventListener('scroll', function () { const nav1 = document.getElementById('nav1'); nav1.classList.toggle('menu_fixo', window.scrollY > 0); }); /* mobile */ const btnmobile = document.getElementsByClassName('btn-mobile') function toggleMenu() { const nav3 = document.getElementsByClassName('nav3') nav3.classList.toggle('active') } btnmobile.addEventListener('click', toggleMenu)

Estou com 2 problemas, o primeiro é que, quando uso o menu fixado, ele sobrepoe a div do conteudo antes de rolar a pagina. Segundo, o menu esta ficando transparente antes de rolar, e não quando rolo a pagina apenas. <div class="nav1"> <div class="nav2"> <div class="nav3"> <ul class="navmenu"> <li><a href="" class="logo-svg"></a></li> <li><a href="">Produto</a></li> <li><a href="">Produto</a></li> <li><a href="">Produto</a></li> <li><a href="" class="">Produto</a></li> <li><a href="" class="">Produto</a></li> </ul> </div> </div> </div> <div class="content1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non turpis consequat, hendrerit justo ac, elementum ex. Nulla viverra nec nibh et interdum. Cras malesuada dignissim justo, non egestas risus viverra in. Phasellus placerat consectetur ipsum. Donec at egestas eros. Nam auctor nulla nisl, ac lobortis purus dignissim quis. Nam finibus eget dolor in consectetur. Curabitur iaculis urna in pulvinar euismod. Donec dignissim, justo at eleifend lobortis, purus risus eleifend odio, eu eleifend ante risus quis neque. Curabitur id lacus ut est mollis egestas sit amet in quam. Integer nec libero id libero pellentesque varius ut at enim. Morbi nec laoreet dui, non eleifend arcu. Maecenas eget risus in sapien mattis dignissim. Fusce at nulla sapien. Ut pharetra magna eu tempus consectetur. Nunc efficitur eu elit id molestie. Cras at laoreet orci, id ornare justo. Nullam in faucibus sem. Nunc tristique feugiat congue. In iaculis laoreet efficitur. Quisque quam mi, elementum in velit eget, faucibus viverra magna. Cras tincidunt, massa ut aliquet vulputate, sapien ipsum semper augue, et rutrum enim nunc ut lectus. Aenean posuere quam elit, eu tempor dui tincidunt quis. Integer arcu ante, tristique eget porta nec, pulvinar in augue. Nunc lacinia, justo nec interdum sodales, magna enim condimentum turpis, sed aliquam mauris augue at libero. Donec placerat interdum sem, ac congue magna auctor eu. Sed a turpis ante. Aliquam erat volutpat. Integer volutpat, tortor id condimentum porta, quam nisi accumsan sapien, ac consequat turpis orci ullamcorper velit. Praesent id lobortis ligula. Duis auctor purus vitae tortor faucibus, id laoreet lectus scelerisque. Aenean a metus ex. Aliquam purus lorem, laoreet vel porttitor vitae, scelerisque at quam. Nam et faucibus purus. Integer velit tellus, aliquam vel ultrices vestibulum, facilisis pharetra nisi. Pellentesque ullamcorper lectus non porta malesuada. Aliquam erat volutpat. Praesent maximus, nisl et posuere molestie, dui massa ultricies arcu, non aliquam magna sem volutpat quam. Nunc enim urna, venenatis id cursus quis, interdum eget arcu. Fusce lacinia lectus risus. Maecenas auctor, leo in commodo finibus, eros leo laoreet neque, vel tristique augue nisi ut enim. Nunc cursus sapien sit amet nulla porttitor tempus id eu odio. Aenean quis pulvinar tellus, vitae molestie ligula. Fusce eu diam ipsum. Vivamus viverra tempus nulla, nec posuere magna consequat ac. Cras posuere urna eu blandit vestibulum. Ut lobortis lorem sed nunc feugiat maximus. Aenean in hendrerit elit, eu dictum nunc. Quisque varius congue congue. Sed id lorem ipsum. Cras congue dolor augue, ut blandit erat porta a. Suspendisse ac massa eget enim tincidunt ullamcorper. Maecenas augue ex, imperdiet sed ipsum a, tristique vulputate sapien. Phasellus ut elit ut est dapibus elementum ac pharetra tellus. In in lacus at ante semper ultrices. Maecenas dapibus sem at orci pretium porta. Aenean non est at orci efficitur facilisis. Donec scelerisque ante eu libero condimentum vehicula. Maecenas dignissim erat vestibulum dui vestibulum malesuada. Aliquam id eros et urna sodales ultricies vel et eros. Donec interdum nisi eget sem pellentesque, sed imperdiet eros tincidunt. Phasellus sollicitudin imperdiet nisl et convallis. Vivamus pulvinar tristique odio, sit amet tristique nulla lacinia eget. Nam pretium enim venenatis, luctus risus porttitor, ultricies mi. Quisque molestie quam viverra mi pellentesque iaculis. Cras semper sagittis neque, nec tempor enim congue nec. Maecenas risus lectus, commodo sit amet arcu vel, ullamcorper luctus tellus. Phasellus a finibus odio. Morbi aliquam dignissim urna, vel blandit lorem scelerisque ac. Proin quam metus, maximus aliquet sagittis ac, fringilla vel sem. Donec id augue ipsum. Suspendisse tortor tellus, feugiat vel urna vel, ullamcorper viverra est. Aliquam at risus ex. Vivamus nec pulvinar nunc. Cras pulvinar ipsum et mauris elementum, sit amet consequat nunc sagittis. Donec ac cursus lectus, in suscipit dolor. Phasellus et sapien non libero auctor malesuada eget vel feliz. Donec tristique ut nulla quis condimentum. Quisque vel auctor tortor. Quisque lobortis porta ligula, nec rutrum nulla mattis in. Aliquam faucibus faucibus feliz, id mollis mauris bibendum vitae. Aliquam pharetra, dolor eget vehicula scelerisque, leo metus suscipit ipsum, vel egestas est ligula ut eros. Suspendisse maximus ante mi, eget ullamcorper turpis consequat et. Sed efficitur pharetra velit laoreet rutrum. Phasellus pharetra est nec rhoncus fermentum. Proin sed turpis in nibh rhoncus euismod. Curabitur orci nulla, posuere sed vestibulum vitae, elementum ac purus. Curabitur ullamcorper, quam nec accumsan imperdiet, metus dui pellentesque libero, et fermentum erat turpis sit amet ligula. Vivamus non convallis lectus. Etiam consequat turpis vitae magna sagittis, semper commodo lectus porta. Morbi nulla ante, ornare id ligula vitae, efficitur aliquam velit. Ut cursus leo a iaculis consequat. Curabitur malesuada justo vitae nulla mollis, quis rhoncus eros interdum. Integer vulputate, diam quis blandit mollis, neque magna condimentum mauris, et semper leo lacus sit amet metus. Suspendisse eu semper massa, auctor ultrices neque. Donec tincidunt dolor feliz, id tempor lorem mollis vel. Proin viverra mi dui, nec rhoncus elit dictum quis. Maecenas sed risus tincidunt, tristique ante ornare, tempor sem. Donec ut metus lorem. Nam egestas pretium nunc, vitae eleifend risus placerat vel. Maecenas finibus iaculis turpis id pellentesque. Donec velit eros, viverra sit amet vestibulum eget, interdum a lectus. Cras quis imperdiet nulla, vel venenatis odio. Nulla in suscipit elit. Vivamus eu porta nunc, eget egestas nunc. Sed eget ex purus. Curabitur consequat, nunc nec facilisis auctor, tortor arcu dignissim dui, ac vehicula nunc neque vel mauris. Ut est nunc, facilisis et ornare nec, tincidunt placerat augue. Ut pharetra pellentesque mi. Phasellus tristique venenatis risus sed ultricies. Curabitur porttitor blandit erat, eu aliquet risus mollis non. Curabitur in malesuada nisl. Phasellus tellus enim, sagittis vel semper ut, malesuada quis lectus. Duis quis feliz in neque condimentum congue at at eros. Sed dapibus dapibus velit in tristique. Etiam aliquet eleifend nibh, ac suscipit elit faucibus at. Donec pulvinar, tortor et feugiat feugiat, metus nisl dapibus orci, non lacinia arcu feliz in magna. Sed feliz urna, luctus sed consectetur eu, semper quis elit. Maecenas mauris erat, varius vel tempor non, porttitor ut magna. Nulla volutpat augue et neque consequat, vel sollicitudin metus porta. In elementum sit amet dui ac varius. Maecenas vitae tortor vitae purus luctus sagittis molestie in turpis. Nullam ut neque eget urna elementum lobortis ut vehicula velit. In placerat nunc elit, quis venenatis magna cursus in. Suspendisse varius id feliz in maximus. Nullam at congue leo. Praesent porttitor turpis sit amet scelerisque volutpat. Etiam sagittis et orci vitae vehicula. Vestibulum dapibus erat eu bibendum feugiat. Proin sed metus at nisl luctus elementum non ac diam. Praesent semper tincidunt nisi eu varius. Vestibulum ut mi consectetur, interdum metus vitae, accumsan nisi. Nunc rhoncus et lorem ut gravida. Mauris nec eros maximus dolor vestibulum mollis. Aenean interdum ipsum arcu, et maximus neque imperdiet ut. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum elementum ligula eget magna condimentum ornare. Etiam dapibus lorem risus, vitae varius ipsum facilisis ac. Nulla finibus urna id elit tincidunt eleifend eu in velit. Mauris consequat diam lorem, sit amet pellentesque nisi ultrices at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra dolor a lectus mollis, id interdum neque aliquam. Quisque egestas pellentesque sapien, nec iaculis turpis vulputate sed. Integer ut lectus et dui gravida fermentum vitae nec odio. Proin neque purus, malesuada id libero ut, euismod tempor feliz. Morbi at molestie mauris. Aenean semper pellentesque erat, in posuere mi imperdiet quis. Cras et nunc sit amet leo luctus commodo id et libero. Praesent quis pellentesque erat, vestibulum ornare urna. Morbi nisl ipsum, viverra sit amet eros eu, porttitor varius ligula. Aenean lobortis diam ut mattis imperdiet. Donec sollicitudin suscipit efficitur. Pellentesque ut dictum dui, sed tristique nisl. Curabitur pulvinar lacinia ligula a sodales. Quisque nibh tortor, ultrices non nulla eget, pulvinar sagittis ipsum. Maecenas pulvinar pretium ex vel tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce quis rhoncus sapien. Cras malesuada dapibus augue vel feugiat. Quisque id porta dui. In hac habitasse platea dictumst. Pellentesque bibendum dictum lectus at ullamcorper. Etiam diam leo, blandit ac viverra ac, porta a nisi. Aenean vel orci quis nibh venenatis aliquet. Fusce gravida placerat augue, ac porta orci vestibulum ac. Phasellus interdum dolor a iaculis faucibus. Proin ultrices justo id posuere facilisis.</p> </div> css @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro"); * { box-sizing: border-box; margin: 0; padding: 0; outline: 0; } .nav1 { display: flex; position: fixed; background: rgba(255, 255, 255, 0.35); backdrop-filter: blur(7px); width: 100%; height: 5vh; } .nav2 { display: flex; align-items: center; justify-content: center; width: 90%; max-width: 1000px; margin: auto; } .logo-svg { background: url('https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg'); display: block; background-position: center; background-size: 90px; background-repeat: no-repeat; } .nav3 ul { display: flex; justify-content: baseline; align-items: center; } .nav3 ul li { list-style: none; } .nav3 ul li a { text-decoration: none; color: black; font-size: 14px; padding: 1rem; transition: all 250ms linear 0s; } .nav3 ul li a:hover { color: red; } .content1 { background-color: blue; height: 1100vh; width: 90%; max-width: 1000px; margin: auto; }

Porque a imagem não respeita o tamanho da div e se ajusta? No caso, subcontent-2 Esta excedendo os 1250px do content .content { box-sizing: border-box; display: flex; align-items: center; justify-content:center; width: 1250px; } .subcontent-1 { width: 625px; text-align: justify; } .subcontent-2 { width: 625px; } html <div class="main-content"> <div class="content"> <div class="subcontent-1"> <p><h1>Torne-o seu</h1></p> <p><h2>Configure e tema exatamente como você esperava de qualquer ferramenta de desenvolvimento moderna. Se você escolher um dos temas padrão já instalados ou explorar novos temas do Visual Studio Marketplace, você terá a liberdade de tornar seu editor ou IDE realmente seu.</h2></p> <p><a href="">Saiba mais</a> </div> <div class="subcontent-2"> <img src="https://visualstudio.microsoft.com/wp-content/uploads/2021/10/MakeItYourOwn_Illustration.svg"> </div> </div> </div>

Estou com dificuldade para alinhar essas duas opções (Entrar, Inscreva-se no final do container em vermelho. Estou fazendo um header com base numa aula de menu mobile, e modificando algumas coisas, para criar uma "estrutura" de leitura padrão, então criei um container vermelho com 1250px dentro de outro maior, mas não consigo alinhar e colocar um espaço de 0.5rem entre as duas opções. Se existir um jeito mais fácil de fazer isso, fico grato em saber, ainda sou iniciante. <header id="header"> <div class="desktop-nav"> <a href="" class="logo">Logotipo</a> <nav id="nav"> <ul id="menu" role="menu"> <li><a href="/">Sobre</a></li> <li><a href="/">Produtos</a></li> <li><a href="/">Portfólio</a></li> <li><a href="/">Contato</a></li> </ul> </nav> <div class="sign-login-box"> <a href="" class="">Entrar</a> <a href="" class="">Inscreva-se</a> </div> </div> <button aria-label="Abrir Menu" id="btn-mobile" aria-haspopup="true" aria-controls="menu" aria-expanded="false">Menu <span id="hamburger"></span> </button> </header> css body, ul { margin: 0px; padding: 0px; } a { color: black; text-decoration: none; font-family: sans-serif; } a:hover { background: rgba(0, 0, 0, 0.05); } .logo { font-size: 1.5rem; font-weight: bold; } #header { box-sizing: border-box; height: 50px; display: flex; align-items: center; justify-content: center; background: #e7e7e7; } .desktop-nav { box-sizing: border-box; height: 50px; display: flex; align-items: center; justify-content: start; background: red; width: 1250px; } #menu { display: flex; list-style: none; gap: 0.5rem; } #menu a { display: block; padding: 0.5rem; } #btn-mobile { display: none; } @media (max-width: 600px) { #menu { display: block; position: absolute; width: 100%; top: 50px; right: 0px; background: #e7e7e7; transition: 0.6s; z-index: 1000; height: 0px; visibility: hidden; overflow-y: hidden; } #nav.active #menu { height: calc(100vh - 50px); visibility: visible; overflow-y: auto; } #menu a { padding: 1rem 0; margin: 0 1rem; border-bottom: 2px solid rgba(0, 0, 0, 0.05); } #btn-mobile { display: flex; padding: 0.5rem 1rem; font-size: 1rem; border: none; background: none; cursor: pointer; gap: 0.5rem; } #hamburger { border-top: 2px solid; width: 20px; } #hamburger::after, #hamburger::before { content: ''; display: block; width: 20px; height: 2px; background: currentColor; margin-top: 5px; transition: 0.3s; position: relative; } #nav.active #hamburger { border-top-color: transparent; } #nav.active #hamburger::before { transform: rotate(135deg); } #nav.active #hamburger::after { transform: rotate(-135deg); top: -7px; } }