Construindo um Card com HTML e CSS
- #HTML
- #CSS
Seja muito bem vindo(a), no artigo de hoje vamos construir um card utilizando HTML e CSS, que pode ser usado nos nossos projetos de programação de sites. O card que iremos construir vai ficar da seguinte forma:
Primeiro construiremos um arquivo index.html e um index.css, como estrutura inicial do HTML teremos:
<!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>Card de informações</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
</body>
</html>
Repare que também já linkamos o nosso CSS para deixar ele pronto, indo para o index.css podemos adicionar inicialmente o reset de estilização, no body adicionamos uma cor de fundo, um display flexível com justificação centralizada e uma fonte geral, depois disso poderemos começar a construir o nosso card.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: #13293d;
display: flex;
justify-content: center;
font-family: monospace;
}
No HTML, dentro da tag body iremos criar uma div com a classe c-card, dentro dessa div adicionamos uma tag img para a imagem, uma tag h2 para o título principal do card e uma tag p para uma frase pequena.
<div class="c-card">
<img src="image-card.jpg" alt="imagem do card">
<h2>Título</h2>
<p>Texto curto informativo, escrevendo algo interessante sobre o assunto do card.</p>
</div>
Abaixo dessa tag p, adicionamos outra div e dentro dessa div podemos colocar os links das mídias sociais dentro dele. Os ícones foram encontrados no site do iconify e tem um artigo aqui no blog com um tutorial sobre utilização dele. No final nosso HTML vai ficar assim:
<!DOCTYPE html>
<html lang="pb-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>Card de Informações</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="c-card">
<img src="image-card.jpg" alt="imagem do card">
<h2>Título</h2>
<p>Texto curto informativo, escrevendo algo interessante sobre o assunto do card.</p>
<div class="c-midias">
<a href="link-do-perfil.com" target="_Blank"><iconify-icon class="icone-midias" icon="akar-icons:whatsapp-fill"></iconify-icon></a>
<a href="link-do-perfil.com" target="_Blank"><iconify-icon class="icone-midias" icon="akar-icons:instagram-fill"></iconify-icon></a>
<a href="link-do-perfil.com" target="_Blank"><iconify-icon class="icone-midias" icon="ant-design:linkedin-outlined"></iconify-icon></a>
</div>
</div>
<script src="https://code.iconify.design/iconify-icon/1.0.0/iconify-icon.min.js"></script>
</body>
</html>
Agora, indo para o nosso CSS, na div com a classe c-card, adicionamos um espaçamento dentro da div de 1 rem e fora da div de 2rem. Colocaremos também uma cor branca nos textos e uma sombra branca na borda usando box-shadow. Por fim deixamos o conteúdo centralizado no card.
.c-card {
padding: 1rem;
margin: 2rem;
color: #fff;
box-shadow: 0 0 20px rgba(93, 93, 93, 0.2);
text-align: center;
}
Agora, vamos pegar a imagem do nosso card e colocar um raio na borda de 1rem para deixar elas arredondadas. Como nossa imagem tem um tamanho legal não mexemos nisso, mas se sua imagem for muito grande você vai precisar usar width e height.
No nosso título h2 colocamos um espaçamento interno de 0.5rem e um tamanho de fonte de 1.5rem e na nossa frase precisamos de uma largura de 20rem para que ele não acabe aumentando o card nos lados, colocamos o texto para o lado esquerdo e por fim, damos um espaçamento interno de 0.5rem.
.c-card img {
border-radius: 1rem;
}
.c-card h2 {
padding: 0.5rem;
font-size: 1.5rem;
}
.c-card p {
width: 20rem;
text-align: left;
padding: 0.5rem;
}
Para concluir, pegamos a classe icone-midias para estilizar os nossos ícones. Eles terão uma tamanho de fonte de 1.5rem, um espaçamento interno de 0.5rem e uma cor branca, porém quando o usuário passar o mouse por cima dos ícones eles mudam de cor.
.icone-midias {
font-size: 1.5rem;
padding: 0.5rem;
color: #fff;
}
.icone-midias:hover {
color: rgb(253, 226, 15);
}
Com isso temos o nosso card simples, feito apenas com HTML e CSS. Espero que você tenha gostado, um abraço e até a próxima.
Artigo Original: https://francileudo-frontend.blogspot.com/2022/10/construindo-um-card-com-html-e-css.html
