-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
122 lines (121 loc) · 7.64 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TuringBox - El futuro es de quien lo construye</title>
<link rel="shortcut icon" href="assets/TB_Símbolo.png">
<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=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="assets/TB_Símbolo Blanco.png" alt="Logo TuringBox" class="header-logo" onclick="location.replace('https://turingbox.co')">
<img src="assets/TB_Identificador blanco.png" alt="Logo TuringBox" class="header-logo-desktop" onclick="location.replace('https://turingbox.co')">
<img src="assets/menu.png" alt="Menu" class="header-menu">
<div class="header-links">
<a href="/projects">Proyectos</a>
<a href="/eventos">Eventos</a>
<a href="/about">Nosotros</a>
</div>
</header>
<div id="menu" class="mobile none">
<div class="menu-header">
<div class="empty"></div>
<img src="assets/close.png" alt="close menu" class="close-menu">
</div>
<div class="menu-options">
<a href="/projects" class="top-separate">Proyectos</a>
<div class="menu-line"></div>
<a href="/eventos">Eventos</a>
<div class="menu-line"></div>
<a href="/about">Nosotros</a>
<div class="menu-line"></div>
<img src="assets/hero section bg 2.png" alt="Hexagonos" class="menu-bg">
</div>
</div>
<section id="hero-section">
<div class="main-content">
<h1 data-aos="fade-up" data-aos-duration="1000">TuringBox</h1>
<h2 data-aos="fade-up" data-aos-duration="1000">El futuro es de quien lo construye</h2>
<div class="mouse-scroll" data-aos="fade-up" data-aos-duration="1000">
<div class="mouse-wheel"></div>
</div>
</div>
<div class="bg-images" data-aos="fade-up" data-aos-duration="1000">
<img src="assets/hero section bg 1.png" alt="bg 1" class="bg-1">
<img src="assets/hero section bg 2.png" alt="bg 2" class="bg-2">
<img src="assets/hero section bg 3.png" alt="bg 2" class="bg-3 hidden">
<img src="assets/hero section bg 4.png" alt="bg 2" class="bg-4 hidden">
</div>
</section>
<section id="what-we-are">
<h2 class="section-title" data-aos="fade-up" data-aos-duration="1000">¿Quiénes somos?</h2>
<p class="section-content" data-aos="fade-up" data-aos-duration="1000">Somos una organización sin ánimo de lucro, creando un mejor <b class="purple">futuro</b> a partir de la <b class="purple">tecnología</b>.</p>
</section>
<figure class="first-separator" data-aos="fade-right" data-aos-duration="1000">
<div class="separator-line"></div>
<img src="assets/purple hexagon normal.png" alt="Hexágono" class="first-hexagon">
<img src="assets/purple hexagon.png" alt="Hexágono" class="first-hexagon-desktop">
<div class="separator-line second-line"></div>
</figure>
<section id="purpose">
<h2 class="section-title" data-aos="fade-up" data-aos-duration="1000">Nuestro propósito</h2>
<p class="section-content" data-aos="fade-up" data-aos-duration="1000">Buscamos motivar a <b class="purple">más personas</b> a incursionar en el mundo de la <b class="purple">tecnología.</b></p>
<p class="purple section-content separate" data-aos="fade-up" data-aos-duration="1000">Somos el lugar para <b>explorar</b> tus <b>intereses</b></p>
<div class="interests"></div>
</section>
<figure class="second-separator">
<img src="assets/div top desktop.png" alt="Separador 1" class="second-separator-top desktop">
<img src="assets/invisible separator.png" alt="Separador 1" class="second-separator-top desktop hidden">
<img src="assets/div bottom desktop.png" alt="Separador 1" class="second-separator-bottom desktop">
<img src="assets/div top.png" alt="Separador 1" class="second-separator-top mobile">
<img src="assets/invisible separator.png" alt="Separador 1" class="second-separator-bottom mobile hidden">
<img src="assets/div bottom.png" alt="Separador 1" class="second-separator-bottom mobile">
</figure>
<section id="how">
<h2 class="section-title" data-aos="fade-up" data-aos-duration="1000">¿Cómo lo hacemos?</h2>
<div class="complete-carousel" data-aos="fade-up" data-aos-duration="1000">
<div class="carousel">
<p class="section-content purple carousel-title">Eventos</p>
<p class="section-content carousel-content gray">Creamos experiencias que motiven a las personas a aprender, a través de conferencias, talleres y charlas.</p>
</div>
<div class="carousel-controls">
<img src="assets/arrow.png" alt="" class="left-arrow">
<img src="assets/filled purple hexagon.png" alt="Opcion 1" class="carousel-hexagon purple-pointer" data-color = "purple">
<img src="assets/empty blue hexagon.png" alt="Opcion 2" class="carousel-hexagon blue-pointer" data-color = "blue">
<img src="assets/empty pink hexagon.png" alt="Opcion 3" class="carousel-hexagon pink-pointer" data-color = "pink">
<img src="assets/arrow.png" alt="" class="right-arrow">
</div>
</div>
</section>
<figure class="second-separator mobile">
<img src="assets/div top desktop.png" alt="Separador 1" class="second-separator-top desktop">
<img src="assets/div bottom desktop.png" alt="Separador 1" class="second-separator-bottom desktop">
<img src="assets/div top.png" alt="Separador 1" class="second-separator-top mobile">
<img src="assets/invisible separator.png" alt="Separador 1" class="second-separator-top mobile hidden">
<img src="assets/div bottom.png" alt="Separador 1" class="second-separator-bottom mobile">
</figure>
<footer>
<h2 class="section-title" data-aos="fade-up" data-aos-duration="1000">¿Qué esperas para ser parte?</h2>
<a href="https://forms.gle/aTsjyo1CLjm6Kbao6" class="footer-cta">Únete ahora</a>
<div class="social-networks">
<img src="assets/linkedin.png" alt="linkedin" onclick="window.open('https://www.linkedin.com/company/turingbox/')">
<img src="assets/youtube.png" alt="youtube" onclick="window.open('https://www.youtube.com/@turingbox')">
<img src="assets/instagram.png" alt="Instagram" onclick="window.open('https://www.instagram.com/turingbox/')">
<img src="assets/whatsapp.png" alt="whatsapp" onclick="window.open('https://chat.whatsapp.com/D9wyiwh2jz2FDD6NkeopCS')">
<img src="assets/tik-tok.png" alt="tik-tok" onclick="window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ')">
<img src="assets/twitter.png" alt="twitter" onclick="window.open('https://twitter.com/turingbox_')">
<p class="uwunt">De Colombia con ❤ para el mundo</p>
</div>
</footer>
<script src="script.js" type="module"></script>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>