Este é um projeto simples de LinkTree desenvolvido apenas com HTML e CSS. O LinkTree é uma página única que agrupa links para suas redes sociais, projetos e outros sites relevantes. É uma maneira elegante e fácil de compartilhar várias informações em um único local.
-
Clone o repositório:
git clone https://github.com/seu-usuario/linktree-html-css.git
-
Abra o arquivo
index.html
em um editor de texto. -
Personalize as Informações:
- Encontre a seção marcada como
<!-- Seu Nome e Informações -->
. - Substitua os exemplos de links pelos seus próprios links.
<!-- Seus Links Aqui --> <a href="https://github.com/seu-usuario" target="_blank">GitHub</a> <a href="https://linkedin.com/in/seu-usuario" target="_blank">LinkedIn</a> <!-- Adicione mais links conforme necessário -->
- Encontre a seção marcada como
<!-- Suas Redes -->
. - Substitua os exemplos de links pelos seus próprios links.
<!-- Suas Redes --> <ul class="social"> <li> <a href="https://www.instagram.com" target="_blank"> <img src="assets/img/insta.svg" target="_blank" alt="Instagram"> </a> </li> <li> <a href="https://www.linkedin.com" target="_blank"> <img src="assets/img/linkedin.svg" target="_blank" alt="Linkedin"> </a> </li> <li> <a href="https://wa.me" target="_blank"> <img src="assets/img/whatsapp.png" target="_blank" alt="Whatsapp"> </a> </li> <li> <a href="https://github.com" target="_blank"> <img src="assets/img/github.svg" target="_blank" alt="Github"> </a> </li> </ul>
- Encontre a seção marcada como
<!-- Seus Links -->
. - Substitua os exemplos de links pelos seus próprios links.
<!-- Seus Links --> <ul class="link-list"> <li> <a href=""> <h2>Portifólio</h2> <p>Aqui você encontrará meus projetos mais significativos.</p> </a> </li> <li> <a href=""> <h2>Mentoria</h2> <p>Mentoria especializada para iniciantes na programação.</p> </a> </li> <li> <a href=""> <h2>YouTube</h2> <p>Assista agora nossas aulas totalmente gratuitas.</p> </a> </li>
- Encontre a seção marcada como
-
Personalize o estilo (opcional):
- Abra o arquivo
style.css
em um editor de texto. - Faça ajustes de estilo conforme suas preferências.
/* Exemplo de ajuste de cor de fundo */ body { background-color: #f5f5f5; }
- Abra o arquivo
- HTML
- CSS
Eduardo da Silva Soares