Ajuda com projeto Web CSS

4 de junho de 2020 16 respostas Resolvido

av120 4 de junho de 2020

Boa Tarde pessoal, gostaria de uma ajuda de vcs em relação ao meu projeto da loja virtual de web, estou encontrando dificuldades com esse menu, já fui na w3c , youtube e etc mas não estou conseguindo deixar esse menu legal ele está em cima da logomarca, envio os arquivos em anexo, me ajudem.
index.html (3,3,KB) menu.css (827,Bytes)

16 Respostas

rodriguesabner 4 de jun. de 2020

Dá uma olhada no AntDesign, vc vai encontrar bastante material q pode te ajudar

https://ant.design/components/overview/

av120 10 de jun. de 2020

Não foi muito útil teu link, infelizmente, já mexi muito esse menu e não consigo segue o código css para vc ver

*, *:after, *:before{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
.menu{
  background: #000;
}
.menu .menu-list, .menu .sub-menu{
  list-style: none;
}
.menu a{
  color: #fff;
  text-decoration: none;
  display: block;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing:0.2em;
}
.menu > .menu-list > li{
  float: left;
  position: relative;
}
.menu > .menu-list > li > a {
  padding: 20px;
  margin: 0 5px;
  background: #000;
}
.menu > .menu-list > li:hover a {
  background: #444;
}
.menu > .menu-list > li:hover > .sub-menu {
  display: block;
}
.menu > .menu-list > li > .sub-menu {
  position: absolute;
  top: 50px;
  left: 5px;
  background: blue;
  min-width: 200px;
  z-index: 1000;
  display: none;
}
.menu > .menu-list > li > .sub-menu > li > a {
padding: 10px 20px;
}
.menu:after {
  content: '.';
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.site-content{
  padding: 20px;
}
h1{
  font-size: 22px;
  margin: 0 0 0.6em 0;
  letter-spacing:0.2em;
  color: #444;
}
p{
  margin: 0 0 1.6em 0;
}

HTML:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="author" content="Jefferson Jamess - falafera.com" />

  

  <link rel="stylesheet" href="css/grid.css">

  <link rel="stylesheet" href="css/cabecalho.css">

  <link rel="stylesheet" href="css/menu.css">

  <link rel="stylesheet" href="css/produtos.css">

  <link rel="stylesheet" href="css/img.css">

    

  <title>Home - Minhas Vendas Online Roupas</title>

</head>

<body>

  <div class="container">

    <header class="conteiner-cabecalho">

      <div class="cabecalho">

       <a href="index.html"><img src="img/logomarca.JPG" alt="logomarca" id="logo"></a>

      </div>

      <div class="cabecalho">

        <form action="" id="formulario">

          <input type="text" name="pesquisa" id="pesquisa">

          <button type="submit" id="botao-p"><i class="fas fa-search fa-10px" id="lupa"></i></button>

        </form>

      </div>

      <div class="cabecalho">

        <h3 id="titulo">Olá Visitante</h3>

        <ul>

          <i class="far fa-user-circle fa-12px" id="avatar"></i>

          <li class="login-cadastro">

            <a href="login.html">Entrar |</a>

          </li>

          <li class="login-cadastro">

            <a href="cadastrar.html"> Cadastrar</a>

          </li>

          <i class="fas fa-shopping-cart fa-12px" id="carrinho"></i>

        </ul>

      </div>

    </header>

    <div class="menu">

      <ul class="menu-list">

        <li><a href="#">Home</a></li>

        <li>

          <a href="#">Departamentos</a>

           <ul class="sub-menu">

            <li><a href="#">Roupas Femininas</a></li>

            <li><a href="#">Roupas Masculinas</a></li>

            <li><a href="#">Acessórios</a></li>

            <li><a href="#">Sapatos</a></li>

          </ul>

        </li>

        <li><a href="#">Destaque 1</a></li>

        <li><a href="#">Destaque 2</a></li>

        <li><a href="#">Destaque 3</a></li>

        <li><a href="#">Destaque 4</a></li>

      </ul>

    </div>

    

    <aside class="produtos">

      <div id="item1"><a href="destaque1.html"><img src="img/camisafeminina3.jpg" alt="" class="tamanho"></a>

        <p>Camisa Feminina Hering</p> 

        <br><br><br><br><br>

        <p>R$: 29,99</p>

        

      </div>

      <div id="item2"><a href="destaque2.html"></a><img src="img/camisafeminina2.jpg" alt="produto2" class="tamanho">

        <p>Blusa Feminina Cinza Manga Curta</p>

        <br><br><br><br><br>

        <p>R$: 44,99</p>

      </div>

      <div id="item3"><a href="destaque3.html"></a><img src="img/bolsa2.jpg" alt="produto3" class="tamanho">

        <p>Mochila Bolsa Feminina Escolar Barbie Dourada Notebook</p>

        <br><br><br><br><br><br>

        <p>R$: 149,99</p>

      </div>

      <div id="item4"><img src="img/bolsa1.jpg" alt="produto4" class="tamanho">

        <p>Bolsa Mochila Feminina Costas Mickey</p>

        <br><br><br><br><br><br><br>

        <p>R$: 119,99</p>

      </div>

      <div id="item5"><img src="img/camisamasculina1.jpg" alt="produto5" class="tamanho">

        <p>Camisa Masculina Safari</p>

        <br><br><br><br><br><br>

        <p>R$: 24,99</p>

      </div>

      <div id="item6"><img src="img/camisafeminina1.jpg" alt="produto5" class="tamanho">

        <p>Camisa feminina de Algodão</p>

        <br><br><br><br><br><br>

        <p>R$: 21,99</p>

      </div>

    </aside>

  </div>

</body>

<script src="https://kit.fontawesome.com/[telefone removido].js" crossorigin="anonymous"></script>

</html>

rodriguesabner 10 de jun. de 2020

Cara, vc tem 5 css no projeto e manda só o do menu?

av120 10 de jun. de 2020

Creio que o problema esteja somente no css do menu, os outros são para outras coisas, imagens, grid…

rodriguesabner 10 de jun. de 2020

E qual é o problema?

av120 10 de jun. de 2020

Se vc quiser ver os outros códigos eu te mando só pra vc tudo completo como vai ficar

rodriguesabner 10 de jun. de 2020

tira print e mostra aqui

av120 10 de jun. de 2020

rodriguesabner 10 de jun. de 2020

É, vai precisar mandar o restante do código mesmo

av120 10 de jun. de 2020

produtos.css (521,Bytes) cabecalho.css (1,1,KB) cadastro.css (4,9,KB) form.css (1,6,KB) grid.css (502,Bytes) img.css (192,Bytes) login.css (2,5,KB)

rodriguesabner 10 de jun. de 2020

Cara, é muita coisinha que tem arrumar, o tamanho de rows do cabeçalho ta grande, o redimensionamento tá um pouco ruim, por exemplo:

Na minha tela normal:

Em uma tela menor:

Dá uma olhada nesse template pra ecommerce, vai facilitar muito sua vida

Testei aqui no pc e é bonitão:

av120 10 de jun. de 2020

Já baixei ele, qual é o arquivo para eu abrir esse template?

rodriguesabner 10 de jun. de 2020

Vc tem o node no seu pc? Se não tiver, precisa baixar:

https://nodejs.org/en/download/.

Com o npm instalado, abre o CMD ou PowerShell na pasta que vc extraiu o projeto e digita npm install, aguarda baixar tudo…

depois que finalizar o processo, vc digita npm start e aguarda o site abrir sozinho

av120 10 de jun. de 2020

Então, eu não tenho o node, o meu professor não deu esse assunto tbm, gostaria de poder ter um layout basiquinho mesmo só html e css, porque mais trabalhoso vai ser o back end com Servlet e Jsp é um projeto que preciso entregar até 12/06, estou individual no projeto desse preciso correr, não é meu forte programação e muito menos web. Agradeço sua boa intenção de ter me dado esse arquivo mais eu sei que meu prof é bastante esperto e vai querer que eu explique, já que eu não sei node e nem ele deu prefiro não enganar o prof.

Solucao aceita

rodriguesabner 10 de jun. de 2020

Olha, se vc quer algo básico pode procurar aqui, é html e css

inclusive tem uns templates de ecommerce
https://startbootstrap.com/templates/ecommerce/

é bem simples, mas é um começo.

Quando quiser algo mais complexo, tem esse template tbm, que não precisa de NPM:

av120 10 de jun. de 2020

Obrigado, tenho essas opções e uma base que encontrei a parte, agora me diz por favor como seria meu back end com Servlet e Jsp, o meu prof mandou uma documentação e ele pede muita coisa nem sei por onde eu começo, não mando bem em programação. E o tempo é meu inimigo e tbm sou individual nesse projeto. Muita sobrecarga! Projeto P2.docx (399,2,KB)

Criado 4 de junho de 2020

Ultima resposta 10 de jun. de 2020

Respostas 16

Participantes 2

16 Respostas

Topicos relacionados