Muito bom meu querido, e um solinho de guitarra no fundo para animar ainda a escrita haha, sempre coloco tambem quando estou "brincando" de escrever código! like mais do que merecido!
@@FernandoLeonid Meu querido, se puder me responder uma coisa eu agradeço, porque as vezes as imagens não obedecem a formatação ? Tipo quando eu coloco o (flex-wrap: wrap), as imagens voltam a ter o tamanho real delas e e perdem o display flex, ja tentei de tudo e nada se puder me ajudar agradeço, abraços.
Que bom que gostou. Sim a página fica "responsiva", na verdade ela fica flexivel, quando usamos display: flex ou display: grid, o layout se adapta, logico dependendo dos elementos da página, como neste exemplo.
Teria como fazer um blogg ou site com botão de upload ondeo usuário sobe várias imagens de uma vez, tipo 10, depois é montado um grid tipo o seu, depois aparece um botão de salvar, aí cria um post ou sobe "fixo" pro site a armazenagem do grid com as 10 fotos?
Olá, respondi em outro comentária, porem pensei em outra solução para sua questão, poderia fazer utilizando um storage na nuvem, como o s3 da AWS ou firebase do google. Não tenho material no meu canal sobre ainda. Valeuuuu
Muito bom seu vídeo, me ajudou bastante. Mas ainda estou com um problema: as imagens aparecem umas em cima das outras e eu quero como no seu exemplo. Já tentei de várias formas mas nada. Será o tamanho das fotos que está impedindo de aparecer uma ao lado da outra? Tenho 12 fotos que quero que fiquem 3 colunas e 4 linhas.
Olá! O problema com as fotos deve ser devido o container, ou seja, a tag que está segurando as fotos, uma maneira seria deixando ela como flex, assim temos controle das tags filhas (imagens). Se vc subiu no github posso tentar dar uma olhada.!
Muito massa! Gostei demais do vídeo. Pergunta: dá pra pegar as imagens de um banco de dados local ou na nuvem, usando JS? Essa é a ideia do site da minha imobiliária. Quero fazer um array pra página ler as imagens do BD. Será que funciona? Parabéns pelo vídeo.
Se na aplicação de voces no :hover a imagem ficar por trás das outras é só inserir um z-index: 1 na classe gallery-tems:hover{}. Muito bom video, parabens.
fiz um projeto igual o seu, mas minhas imagens não mudaram nada, continuam 1 em cima da outra. Tem alguma coisa a ver com as imagens? Será que depende do tipo das fotos? Eu só consigo chamar as imagens com 1 ./, não sei se tem diferença
Como eu faria para criar um blog ou site onde existe o botão de upload de várias imagens, aí o usuário sobe umas 10 e depois é montado um grid de imagens igual o seu. E depois aparece um botão de salvar para armazenar esse grid em uma postagem ou ficar "fixo" no site? Seria mto complexo de fazer?
Olá! primeiramente obrigado por acompanhar o canal. Sobre sua questão, não é complicado, tem que montar um servidor API e com o front-end que consome as imagens do servidor. Vou te passar um link onde mostro como consumir uma API, que seria 50% do trabalho, a outra metade seria criar o servidor que proverá as imagens. th-cam.com/video/pRic1B2Qdgk/w-d-xo.html Espero que ajude!!!
@@FernandoLeonid ahhhh desculpa kkkk a mensagem era para outro vídeo kk é q tava em modo playlist aí só consegui mandar / acabei de escrever começou o seu vídeo
Tem sim, basta adicionar dentro da div da imagem! Olha esse exemplo de consumo da API do pixabay, eu crio uma galeria de fotos com vários links e botões.
kkkk, na verdade a ideia é ajudar, mas como também estava no inicio do canal cometi muitos erros, inclusive na velocidade de vários vídeos. Se realmente interessar, o conteúdo, uma alternativa seria diminiur a velocidade, mas isso só se tiver interesse mesmo. Valeuuu
Olha não consegui ver exatamente o erro, na verdade falta alguns itens. Faz assim compara com meu código que já está pronto. Olha o link para o código: github.com/fernandoleonid/speed-code-css-html/tree/main/09-gallery-photos-flex
Percorri esse TH-cam inteiro vendo video de galeria e nenhum foi tão bom quanto esse teu! Obrigado!
Obrigado pelo feedback e valeu pelo valeu demais!!!
Simplesmente lindo, era exatamente isso que eu procurava! Parabéns irmão
Fico feliz em saber, valeu pelo feedback!
Muito bom meu querido, e um solinho de guitarra no fundo para animar ainda a escrita haha, sempre coloco tambem quando estou "brincando" de escrever código! like mais do que merecido!
Muito bom, valeeuuuuuuu
Muito bom, prático sem enrolação e deu pra entender tranquilo. Continua assim mano!
Valeu pelo feedback!!!
Merece like, e olha que eu trampo na area já mas esqueci como faz as coisas em html e css puro, e voce ajudou mano!!! parabens pelo conteudo
Que bom que ajudou, valeuuuuuu
@@FernandoLeonid daria por exemplo usar um input e um label em um index e chamar ele clicado por outro index(outra page)?
@@allanfelipe1219 sim, para passar informações de uma página para outra utilizamos o localstorage.
show de bola, ja posso fazer minha listinha aqui kk, mais um link e um novo incrito, sucesso ai.
Show de bola, valeuuuuu
@@FernandoLeonid Meu querido, se puder me responder uma coisa eu agradeço, porque as vezes as imagens não obedecem a formatação ? Tipo quando eu coloco o (flex-wrap: wrap), as imagens voltam a ter o tamanho real delas e e perdem o display flex, ja tentei de tudo e nada se puder me ajudar agradeço, abraços.
Nossa só vi agora sua mensagem, provavelmente você já resolveu, mas pode ser que você está alterando o container e não a imagem.
Eu estava com muita dificuldades em alinhar as imagens, ajudou muito!! Obrigado!
Show de bola!!!
Fácil, prático e sem enrolação, já te dei um like mas vou te dar outro 👍🏻
Kkkk valeuuuuuu
Fantástico ! Era isso que eu estava procurando pra tirar umas dúvidas. Muito obrigado. O like já está registrado.
Que bom que ajudou!
Top, e o que eu precisava amigo! Parabéns pelo vídeo.
Que bom que ajudou, valeuuuuuu
Top Video! Obrigado!
Eu que agradeço!
Excelente vídeo, direto e sucinto, me tirou uma grande dúvida valeu!
Obrigado pelo feedback!!!
Muito obrigada! Me ajudou bastante no projetinho que estou fazendo
Sucessono projeto!
perfeitoo, parabéns!!
Valeuuuuuu
Ótima qualidade de vídeo, parabéns
Muito obrigado 😁
Top demais, Fernando! Vou testar
Obrigado Debora pelo feedback!
@@FernandoLeonid Você salvou minha vidaaaaa... +1 inscrito! :)
@@deboralopes6475 Fico feliz em saber que ajudei!!!
Muito top 👏👏👏 vou tentar fazer
Que legal, quanto terminar envia o link para ver o resultado!!!
Showwwwwww. Para-béns.
Obrigadoooooooo
Sensacional, ótimo vídeo.
Obrigado pelo elogio!!!
Muito obrigada, salvou aqui no trabalho!!
Disponha e valeu por acompanhar o canal!!!
Muitíssimo obrigado , sucesso pra ti!
Obrigadoooooooo
Obg amigo pela ajuda!
Não por isso, e valeu por acompanhar o canal!!!
Eita , muito obrigado 👍🏿
Disponha!
👏👏👏
Valeuuu
Adorei!!
Valeuuuuuu!
Consegui colocar as fotos lado a lado upeeee valeu mesmo 😊😊😊❤❤❤❤❤
Que bom fico feliz, show de bola....parabéns!!!!
Muito bom e simples!
Valeuuu!!!
que isso, top demais. Sou iniciante e tipo, a página fica responsiva mesmo sem usar o media query? Se sim por quê?
Que bom que gostou. Sim a página fica "responsiva", na verdade ela fica flexivel, quando usamos display: flex ou display: grid, o layout se adapta, logico dependendo dos elementos da página, como neste exemplo.
Teria como fazer um blogg ou site com botão de upload ondeo usuário sobe várias imagens de uma vez, tipo 10, depois é montado um grid tipo o seu, depois aparece um botão de salvar, aí cria um post ou sobe "fixo" pro site a armazenagem do grid com as 10 fotos?
Olá, respondi em outro comentária, porem pensei em outra solução para sua questão, poderia fazer utilizando um storage na nuvem, como o s3 da AWS ou firebase do google. Não tenho material no meu canal sobre ainda. Valeuuuu
Muito obrigado! Seguindo.
Show de bola!
Valeuuuuu
Muito bom seu vídeo, me ajudou bastante. Mas ainda estou com um problema: as imagens aparecem umas em cima das outras e eu quero como no seu exemplo. Já tentei de várias formas mas nada. Será o tamanho das fotos que está impedindo de aparecer uma ao lado da outra?
Tenho 12 fotos que quero que fiquem 3 colunas e 4 linhas.
Olá! O problema com as fotos deve ser devido o container, ou seja, a tag que está segurando as fotos, uma maneira seria deixando ela como flex, assim temos controle das tags filhas (imagens).
Se vc subiu no github posso tentar dar uma olhada.!
Video MARAVILHOSO!!!! Nossa como me ajudou!!! Mas poderia ser um pouquinho mais devagar :P parabens!!!!
Obrigado pela dica e pelo feedback!
Valeuuuuuuu
Muito massa! Gostei demais do vídeo.
Pergunta: dá pra pegar as imagens de um banco de dados local ou na nuvem, usando JS? Essa é a ideia do site da minha imobiliária. Quero fazer um array pra página ler as imagens do BD. Será que funciona?
Parabéns pelo vídeo.
Dá sim, você pode enviar para um storage da AWS, AZURE ou Google Cloud Platform, ou para testar usa a API da imgur.
Espero que ajude....valeuuuuu
Flex wrap meio wue deixa os cards responsivo ! minha dúvida no caso de querer fazer 3 cads em cada linha só é possível com grid ?
Sim, porem usando FLEX vc pode forçar colocando a largura dos card em 33% e fixando o flex-grow:1;
Espero que ajude!!!!
@@FernandoLeonid tô aprendendo flex ainda sei o básico que me ajuda a fazer algumas coisas vou pesquisar sobre pra entender melhor tô !! Vkw
show
Se na aplicação de voces no :hover a imagem ficar por trás das outras é só inserir um z-index: 1 na classe gallery-tems:hover{}. Muito bom video, parabens.
Ótima dica, valeuuuuu
sensacional, parabéns! muito didático sem falar uma só palavra!
Muito obrigado!!!
muito rapido fica dificil . bacana gostei
Opa...no próximo vou diminuir a velocidade...valeuuu
obrigado mesmo
Que bom que ajudou!!!
olá consegui fazer, mas o meu as fotos ficam um de baixo do outro como que coloco lado a lado como seu??
Olá, as fotos precisam estar no mesmo container e usar no container flex ou grid assim temos um melhor controle.
Obrigado por acompanhar o canal
fiz um projeto igual o seu, mas minhas imagens não mudaram nada, continuam 1 em cima da outra. Tem alguma coisa a ver com as imagens? Será que depende do tipo das fotos? Eu só consigo chamar as imagens com 1 ./, não sei se tem diferença
Olá, para te ajudar precisaria ver seu código. Tenta colocar no github.
Obrigado por acompanhar o canal.
Como eu faria para criar um blog ou site onde existe o botão de upload de várias imagens, aí o usuário sobe umas 10 e depois é montado um grid de imagens igual o seu. E depois aparece um botão de salvar para armazenar esse grid em uma postagem ou ficar "fixo" no site? Seria mto complexo de fazer?
Olá! primeiramente obrigado por acompanhar o canal.
Sobre sua questão, não é complicado, tem que montar um servidor API e com o front-end que consome as imagens do servidor. Vou te passar um link onde mostro como consumir uma API, que seria 50% do trabalho, a outra metade seria criar o servidor que proverá as imagens.
th-cam.com/video/pRic1B2Qdgk/w-d-xo.html
Espero que ajude!!!
quero ver gameplay deste palworld deve ser interessante e render várias risadas kkk
blz
@@FernandoLeonid ahhhh desculpa kkkk a mensagem era para outro vídeo kk é q tava em modo playlist aí só consegui mandar / acabei de escrever começou o seu vídeo
@@tigredosgames3219 tranquilo!!! kkkkkk
caramba aprendi muita coisa nova so nesse video kkkkkk
Que bom que está ajudando!
Valeu por acompanhar o canal!!!
Sensacional!
é muito difícil colocar botão de próxima e anterior?
Não, tenho um vídeo mostrando isso. Olha o link:
th-cam.com/video/2qA8tlJ24uQ/w-d-xo.html
Tem como adicionar algum nome em baixo de cada foto?
Tem sim, basta adicionar dentro da div da imagem!
Olha esse exemplo de consumo da API do pixabay, eu crio uma galeria de fotos com vários links e botões.
Nessa velocidade é complicado de acompanhar meu camarada. É para mostrar que você sabe ou para ensinar? Ainda não entendi o conserto do vídeo.
kkkk, na verdade a ideia é ajudar, mas como também estava no inicio do canal cometi muitos erros, inclusive na velocidade de vários vídeos. Se realmente interessar, o conteúdo, uma alternativa seria diminiur a velocidade, mas isso só se tiver interesse mesmo.
Valeuuu
Amigo me dê uma dica
Queria colocar tipo uma legenda nas imagens só que dentro da imagem no topo,
Tipo carro A
Carro B
Carro C
Você pode colocar as imagens dentro de um DIV e colocar essa informação em um span!
@@FernandoLeonid valeu mano
show de bola!!
posso usar para um projeto meu?
Sim, fique a vontade.
Despois compartilha, assim vemos o resultado!
Link não abre
Valeu, arrumado!!!
o meu n pegou. me ajuda pfv
Envia o erro ou parte do código onde pode conter o erro.
Assim podemos ajudar!!!
@@FernandoLeonid sim sr
@@FernandoLeonid
Cars Gallery
Cars Gallery
*{
padding: 0;
margin: 0;
box-sizing: border-box;
{
body{
background-color: #eee;
}
header{
height: 150px;
display: flex;
justify-content: center;
align-items: center;
}
header h1{
font-family: Arial, Helvetica, sans-serif;
font-size: 3rem;
font-weight: 900;
color: #000;
}
.gallery-container{
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
gap: 2vw;
padding: 0 2vw;
}
.gallery-items{
width: 340px;
height: 300px;
border: 10px solid #fff;
box-shadow: 5p 5px 5px #0009;
flex-grow: 1;
}
.gallery-items img {
width: 100%;
height: 100%;
object-fit: cover;
}
footer{
height: 100px;
display: flex;
justify-content: center;
align-items: center;
color: #000;
font-style: italic;
}
o segundo paragrafo e css
Olha não consegui ver exatamente o erro, na verdade falta alguns itens. Faz assim compara com meu código que já está pronto.
Olha o link para o código:
github.com/fernandoleonid/speed-code-css-html/tree/main/09-gallery-photos-flex
Galeria de vídeo?
É só trocar a tag img pela tag video.
Perfeito como sempre
Muito obrigado 😊