LucasRochaPL
Members-
Total de itens
2 -
Registro em
-
Última visita
Tudo que LucasRochaPL postou
-
css [Resolvido] Como colocar uma div de mesma classe lado a lado ?
LucasRochaPL respondeu ao tópico de LucasRochaPL em Desenvolvimento frontend
Opa valeu, deu certo, eu estava colocando o inline-block de maneira incorreta no código kkk, mas agora está tudo ok, obrigado pela ajuda de vocês -
css [Resolvido] Como colocar uma div de mesma classe lado a lado ?
LucasRochaPL postou um tópico no fórum Desenvolvimento frontend
Olá a todos, estou construindo um pequeno site para a empresa que eu trabalho atualmente, porém como ainda sou iniciante estou tendo algumas dificuldades, e uma delas é que eu não consigo colocar as divs lado a lado, tentei varias coisas como usar o inline e float, mas fica tudo bem bagunçado, se vocês puderem por favor dar alguma dica ou me dizer oque estou fazendo de errado. <style> * {box-sizing: border-box;} .container { position: relative; width: 50%; max-width: 300px; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; bottom: 0; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.5); /* Black see-through */ color: #f1f1f1; width: 100%; transition: .5s ease; opacity:0; color: white; font-size: 20px; padding: 20px; text-align: center; } .container:hover .overlay { opacity: 1; } .container::after { content: ""; clear: both; display: table; } </style> <div class="titulo">Produtos</div> <p>A Gap conta com uma grande variedade de rádios e equipamentos, para atender melhor a necessidade de nossos clientes, trabalhamos com rádios moveis, portáteis e equipamentos para videomonitoramento. </p> <div class="titulo">Portáteis</div> <div class="container"> <img src="products/images/dep450.jpg" alt="rádio motorola DEP450" class="image"> <div class="overlay">Motorola DEP450</div> </div> <div class="container"> <img src="products/images/ep450.jpg" alt="rádio motorola EP450" class="image"> <div class="overlay">Motorola EP450</div> </div> <div class="container"> <img src="products/images/dgp8050.jpg" alt="rádio motorola DGP8050" class="image"> <div class="overlay">Motorola DGP8050</div> </div> <div class="titulo">Móveis</div> <div class="container"> <img src="products/images/dem300.jpg" alt="rádio motorola DGM5000" class="image"> <div class="overlay">Motorola DEM300</div> </div> <div class="titulo">Videomonitoramento</div> <div class="container"> <img src="products/images/intelbrass3330.jpg" alt="camera " class="image"> <div class="overlay">Câmera Intelbras S3330</div> </div>