Você já se perguntou como aqueles layouts lindos e dinâmicos do Pinterest são criados? Bem, você não precisa mais se perguntar! Acabei de lançar um novo tutorial no meu canal onde ensino passo a passo como criar um layout no estilo Pinterest, usando apenas CSS. 🎉
Neste tutorial, vou te guiar desde a estrutura HTML inicial até CSS para alcançar aquele visual elegante que você adora no Pinterest. Você aprenderá a posicionar elementos, adicionar efeitos de hover suaves, tornar o layout responsivo para dispositivos móveis e muito mais.
Se você é um entusiasta de design ou deseja aprimorar suas habilidades de desenvolvimento front-end, este tutorial é perfeito para você! Não perca a chance de criar layouts incríveis e surpreender a todos com suas habilidades.
Se gostar do tutorial, não se esqueça de deixar seu like, se inscrever no canal e ativar o sininho para receber notificações sobre conteúdo semelhante no futuro. Compartilhe com seus amigos que também adoram design e desenvolvimento web. Vamos elevar juntos nossas habilidades para o próximo nível! 🚀🎉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout Estilo Pinterest</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<section>
<div class="card">
<img src="https://images.pexels.com/photos/18072337/pexels-photo-18072337/free-photo-of-lindo-bonito-atraente-elegante.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum.</p>
</div>
<div class="card">
<img src="https://images.pexels.com/photos/15114086/pexels-photo-15114086/free-photo-of-fotografia-aerea-aerofotografia-tiro-com-drone-pessoas.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum.</p>
</div>
<div class="card">
<img src="https://images.pexels.com/photos/17486592/pexels-photo-17486592/free-photo-of-cone-casquinha-fotografia-de-alimentos-fotografia-de-comida.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum.</p>
</div>
<div class="card">
<img src="https://images.pexels.com/photos/18032313/pexels-photo-18032313/free-photo-of-camaleao.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum.</p>
</div>
<div class="card">
<img src="https://images.pexels.com/photos/17538207/pexels-photo-17538207/free-photo-of-istambul-acao-atividade-movimento.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum.</p>
</div>
<div class="card">
<img src="https://images.pexels.com/photos/17364174/pexels-photo-17364174/free-photo-of-borrao-mancha-nevoa-brilhante.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum.</p>
</div>
<div class="card">
<img src="https://images.pexels.com/photos/17729737/pexels-photo-17729737/free-photo-of-adulto-arte-sangue-sombrio.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum.</p>
</div>
<div class="card">
<img src="https://images.pexels.com/photos/17745124/pexels-photo-17745124/free-photo-of-praia-litoral-crianca-filho.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum.</p>
</div>
<div class="card">
<img src="https://images.pexels.com/photos/15153666/pexels-photo-15153666/free-photo-of-fotografia-aerea-aerofotografia-igreja-capela.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum.</p>
</div>
<div class="card">
<img src="https://images.pexels.com/photos/17025108/pexels-photo-17025108/free-photo-of-modelo-sentado-vestindo-parede-branca.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum.</p>
</div>
</section>
</body>
</html>@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
html,
body {
margin: 0;
padding: 0;
font-family: 'Manrope', sans-serif;
background-color: #f1f2f6;
}
section {
max-width: 700px;
column-count: 3;
padding: 28px;
margin: 0 auto;
}
img {
width: 100%;
border-radius: 17px 17px 0 0;
transition: all linear 200ms;
}
p {
font-size: 12px;
color: #444;
padding: 5px 20px 20px 20px;
}
.card {
margin-bottom: 20px;
transition: all linear 200ms;
break-inside: avoid-column;
background-color: #fff;
border-radius: 17px;
}
.card:hover img {
transform: scale(1.04);
}
