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.
This commit is contained in:
cauefaleiros
2026-03-31 12:01:44 -03:00
parent e739b22499
commit 5493bcd242
12 changed files with 201 additions and 8 deletions

124
index.html Normal file
View File

@@ -0,0 +1,124 @@
<!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>