Files
linktree-template/index.html
cauefaleiros 5493bcd242 feat: Setup Black Brasil Links project
Initializes the project with basic structure, including HTML, CSS, and static assets. Updates README with local development instructions and adds .gitignore for common build artifacts.
2026-03-31 12:01:44 -03:00

125 lines
3.9 KiB
HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Black Brasil</title>
<!-- Favicons -->
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
background-image: url('background.jpg'); /* Placeholder for background image */
background-size: cover;
background-position: center top;
background-attachment: fixed;
background-color: #111; /* Fallback color */
color: #FFFFFF;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
min-height: 100vh;
padding: 12vh 20px 40px 20px;
}
.container {
width: 100%;
max-width: 600px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.logo {
max-width: 200px;
width: 100%;
height: auto;
margin-bottom: 20px;
}
.description {
font-size: 15px;
line-height: 1.5;
margin-bottom: 30px;
padding: 0 10px;
}
.links-container {
width: 100%;
display: flex;
flex-direction: column;
gap: 15px;
}
.link-button {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
background-color: #FEDB2C;
color: #000000;
text-decoration: none;
padding: 15px 20px;
font-weight: 600;
font-size: 16px;
transition: all 0.3s ease;
}
.link-button:hover {
opacity: 0.85;
transform: translateY(-2px);
}
</style>
</head>
<body>
<div class="container">
<!-- Logo -->
<img src="logo.png" alt="Black Brasil Logo" class="logo">
<!-- Description -->
<p class="description">
A Black Brasil foi criada com o objetivo de superar expectativas e oferecer ao mercado nacional e internacional produtos químicos de qualidade incomparável.
</p>
<!-- Buttons -->
<div class="links-container">
<a href="https://wa.me/5516991519810" class="link-button" target="_blank" rel="noopener noreferrer">
Seja um Distribuidor Autorizado
</a>
<a href="https://blackbrasil.com.br/" class="link-button" target="_blank" rel="noopener noreferrer">
Loja Online
</a>
<a href="https://blog.blackbrasil.com.br/" class="link-button" target="_blank" rel="noopener noreferrer">
Blog Black Brasil
</a>
<a href="https://links.blackbrasil.com.br/wp-content/uploads/2024/12/Catalogo-Black-Brasil-Web.pdf" class="link-button" target="_blank" rel="noopener noreferrer">
Catálogo
</a>
<a href="https://wa.me/5516991519810" class="link-button" target="_blank" rel="noopener noreferrer">
Fale com um Consultor
</a>
</div>
</div>
</body>
</html>