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:
124
index.html
Normal file
124
index.html
Normal 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>
|
||||
|
||||
Reference in New Issue
Block a user