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>