-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
189 lines (182 loc) · 11.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html lang="es">
<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">
<link rel="icon" href="favicon.ico">
<title>Braintech Foundation</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="/css/site.min.css" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta name="description" content="Braintech es una fundacion sin fines de lucro, con el objetivo de becar el talento de las personas. Brindarles una salud mental y motivación en lo que le apasiona.">
<meta property="og:title" content="Braintech Foundation" />
<meta property="og:description" content="Braintech es una fundacion sin fines de lucro, con el objetivo de becar el talento de las personas. Brindarles una salud mental y motivación en lo que le apasiona.">
<meta property="og:url" content="https://braintechfoundation.com/" />
<meta property="og:image" content="https://braintechfoundation.com/img/ico-imagen-13.png" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<a class="navbar-brand" href="#">
<object data="/img/logo horizontal braintech.svg" class="hero"></object>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#inicio" onclick='scrollToId("inicio")'>Inicio</a>
<a class="nav-item nav-link" href="#como-lo-hacemos" onclick='scrollToId("como-lo-hacemos")'>¿Cómo lo hacemos?</a>
<a class="nav-item nav-link" href="#que-hacemos" onclick='scrollToId("que-hacemos")'>¿Qué hacemos?</a>
<a class="nav-item nav-link" href="#quienes-somos" onclick='scrollToId("quienes-somos")'>¿Quiénes somos?</a>
<a class="nav-item nav-link btn-donar py-1 px-4 align-self-center font-bold" href="#">Donar</a>
</div>
</div>
</nav>
</header>
<main class="container-fluid d-flex flex-column p-0">
<div id="inicio" class="home">
<div class="position-relative">
<img src="/img/ico-imagen-10.png" class="w-100" />
<div class="position-absolute h-100 d-flex flex-column justify-content-center">
<p class="font-light display-2">Nuestra</p>
<p class="font-bold display-2">Motivación,</p>
<p class="font-light display-2 mt-3">aumentar tu</p>
<p class="font-bold display-2">Talento</p>
</div>
</div>
</div>
<div id="como-lo-hacemos" class="py-5">
<div class="row-limit-width-900 w-100 mx-auto">
<p class="h1 font-light px-3">¿Cómo lo <strong>hacemos</strong>?</p>
<p class="font-regular mt-1 h4 px-3">
4 sencillos pasos para llegar a nuestro objetivo
</p>
<div class="d-flex align-items-center justify-content-between text-center flex-wrap py-5 my-md-5">
<div class="d-flex flex-column align-items-center como-lo-hacemos-item mx-auto">
<object data="/img/Ico BT 1.svg" class="d-block"></object>
<p class="font-bold h4">Captamos tu talento</p>
</div>
<div class="d-flex flex-column align-items-center como-lo-hacemos-item mx-auto">
<object data="/img/Ico BT 2.svg" class="d-block"></object>
<p class="font-bold h4">Te equipamos de materiales</p>
</div>
<div class="d-flex flex-column align-items-center como-lo-hacemos-item mx-auto">
<object data="/img/Ico BT 3.svg" class="d-block"></object>
<p class="font-bold h4">Trabajas en tu pasión</p>
</div>
<div class="d-flex flex-column align-items-center como-lo-hacemos-item mx-auto">
<object data="/img/Ico BT 4.svg" class="d-block"></object>
<p class="font-bold h4">Obtienes resultados</p>
</div>
</div>
</div>
</div>
<div id="que-hacemos" class="que-hacemos my-5 py-5">
<div class="position-relative d-flex justify-content-center">
<img src="/img/ico-imagen-11.png" class="w-100 h-100" />
<div class="position-absolute row-limit-width-900 mx-auto h-100 w-100 d-flex flex-column align-items-end justify-content-center px-3">
<p class="h1 font-light">¿Qué <strong>hacemos</strong>?</p>
<p class="font-regular mt-1 h4">
Nuestra labor es equipar y dar comodidad a la persona para que pueda tener las mayores oportunidades en su trabajo.
</p>
<p class="h1 font-regular mt-5">Te motivamos a <strong>Crecer</strong></p>
<p class="h1 font-regular mt-5">Te equipamos con <strong>Materiales</strong></p>
<p class="h1 font-regular mt-5">Te brindamos <strong>Comodidad</strong></p>
</div>
</div>
</div>
<div id="porque-braintech" class="porque-braintech bg-gris-claro py-5">
<div class="d-flex flex-column justify-content-center align-items-end position-relative">
<img class="w-100" src="/img/ico-imagen-13.png" />
<div class="porque-braintech-main row-limit-width position-absolute d-flex flex-column h-100 w-100 align-self-center justify-content-center px-3">
<p class="h1 font-light">¿Por qué <strong>Braintech?</strong></p>
<p class="font-regular h4 mt-3">
Cada ser un humano posee un potencial increíble en cualquier área de trabajo, sabemos que, con las circunstancias adecuadas y las herramientas necesarias, pueden lograrse grandes resultados, tanto de crecimiento personal como laboral. En Braintech te
apostamos a que sucedan y darte las herramientas adecuadas para que puedas encaminar tus objetivos y trabajes de lo que tanto te apasiona. Queremos que seas la mejor parte de tu talento.
</p>
</div>
</div>
</div>
<div id="quienes-somos" class="quienes-somos my-5">
<div class="quienes-somos-header row-limit-width-900 mx-auto mt-5 px-3">
<p class="h1 font-light">¿Quiénes <strong>somos</strong>?</p>
<p class="font-regular h4 mt-3">
Es una fundacion sin fines de lucro, con el objetivo de becar el talento de las personas. Brindarles una salud mental en lo que le apasiona, hacer sus sueños realidad, dar motivacion a aumentar su talento.
</p>
</div>
<img src="/img/ico-imagen-12.png" class="w-100" />
<div class="d-flex flex-column flex-sm-row quienes-somos-footer row-limit-width-900 justify-content-between mx-auto px-3">
<div>
<p class="h1 font-light">Nuestra <strong>Misión</strong></p>
<p class="font-regular h4 mt-3">
Nuestra misión es capacitar tanto mental como físicamente, con las herramientas necesarias a las personas que no poseen la economía necesaria para empezar a estudiar o trabajar en las áreas de programación y artes creativas.
</p>
</div>
<div class="mt-5 mt-sm-0">
<p class="h1 font-light">Nuestra <strong>Visión</strong></p>
<p class="font-regular h4 mt-3">
Nuestra visión que cada persona tenga las herramientas necesarias sin ninguna restricción que pueda enriquecer su talento y darle la oportunidad de que pueda encontrar o trabajar de ello, enriquecer su pasión, enriquecer su talento.
</p>
</div>
</div>
</div>
<div class="footer-waves">
<img class="w-100" src="/img/waves.png" />
</div>
<div id="contacto" class="contacto bg-azul py-5">
<div class="position-relative d-flex row-limit-width flex-column align-items-end justify-content-center mx-auto h-100">
<div class="bg-white d-flex flex-column align-items-center col-md-6 p-4">
<object data="/img/logo horizontal braintech.svg" class="hero"></object>
<a class="h4 text-black" href="mailto:braintechfoundation@gmail.com">braintechfoundation@gmail.com</a>
<p class="h4 text-black mt-2">+58 547 5687</p>
</div>
<div class="position-absolute d-flex flex-column align-items-center justify-content-center col-md-6 align-self-start bg-gris-claro p-4">
<p class="h1 text-black font-light">Haz un <strong>Donativo</strong></p>
<p class="h4 text-black font-regular mt-3">
Invierte en nuestra causa para ayudar a todas aquellas personas a repotenciar su talento y trabajo.
</p>
<a class="nav-item nav-link btn-donar py-1 px-4 mt-3 align-self-center font-bold" href="#">Donar</a>
</div>
</div>
</div>
</main>
<footer class="bg-azul w-100 py-5">
<div class="d-flex flex-column row-limit-width-900 mx-auto">
<div class="d-flex flex-column flex-lg-row align-items-center justify-content-between">
<p class="order-lg-0 order-2 mt-5 mt-lg-0 small">©<span></span> Braintech Foundation</p>
<div class="d-flex flex-column flex-lg-row align-items-center">
<a class="px-2" href="#">Transparencia</a>
<a class="px-2" href="#">Aviso legal y Política de privacidad</a>
<a class="px-2" href="#">Política de cookies</a>
<a class="px-2" href="#">Información a socios</a>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var ele = document.querySelector('footer span');
ele.innerText = new Date().getUTCFullYear();
});
const scrollToId = (id) => {
console.log(id);
var ele = document.getElementById(id);
console.log(ele);
window.scroll({
top: ele.offsetTop,
behavior: 'smooth'
});
}
</script>
</body>
</html>