-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
180 lines (162 loc) · 10 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico" type="image/x-ico">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link href="css/styles.css" rel="stylesheet">
<title>Codo a Codo 4.0 - Proyecto Integrador</title>
</head>
<body>
<header class="carrusel" >
<nav class="navbar fixed-top navbar-expand-lg bg-dark navbar-dark bg-dark justify-content-evently">
<div class="container-fluid" >
<a class="navbar-brand flex-grow-1" href="#">
<img class="navbar-item" src="./assets/img/logo-CAC.webp" width="100px" alt="Casa de gobierno">
Conf. Bs.As.
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Cambiar navegacion">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav me-auto" >
<li class="nav-item active">
<a class="nav-link" href="#la-conferencia">La conferencia</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#los-oradores">Los oradores</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#lugar-y-fecha">Lugar y la fecha</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#conviertete-en-orador">Conviértete en orador</a>
</li>
<li class="nav-item">
<a class="nav-link text-success" href="./pages/comprar-tickes.html">Compartir Tickets</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="wrapper d-none d-lg-block">
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./assets/img/ba1.jpg" class="d-block w-100" alt="Casa de gobierno">
</div>
<div class="carousel-item">
<img src="./assets/img/ba2.jpg" class="d-block w-100" alt="Casa de gobierno">
</div>
<div class="carousel-item">
<img src="./assets/img/ba3.jpg" class="d-block w-100" alt="Casa de gobierno">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div class="portada">
<h2 class="portada-title">Conf. Bs.As.</h2>
<p class="portada-body">Bs As llega por primer vez a Argetnina. Un evento para compartir con nuestra comunidad el conocimiento y la experiencia de los expertos que están en creando el futuro de internet. Ven a conocer los miembros del evento, a otros estudiantes de Codo a Codo y oradores de primer nivel que tenemos para ti. Te esperamos! </p>
<div class="d-flex flex-sm-row flex-column justify-content-end">
<a href="#conviertete-en-orador" class="btn btn-lg btn-outline-light m-3">Quiero ser orador</a>
<a href="./pages/comprar-tickes.html" class="btn btn-lg btn-success m-3">Comprar tickets</a>
</div>
</div>
</header>
<main>
<section class="section-oradores" id="los-oradores">
<div class="section-title">
<h6>CONOCÉ A LOS ORADORES</h6>
<h3>ORADORES</h3>
</div>
<div class="row justify-content-evenly">
<div class="card card-container">
<img class="card-img-top" src="./assets/img/steve.jpg" alt="Steve Jobs">
<div class="card-body">
<h6 class="mt-3 d-flex"><span class="badge text-bg-warning me-2 p-2">Javascript</span> <span class="badge text-bg-success p-2">React</span></h6>
<h3>Steve Jobs</h3>
<p class="card-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam debitis ullam voluptates fugiat nemo, excepturi, distinctio hic quisquam voluptatem quidem sequi! Odio odit aliquam, non molestias repudiandae fugit repellat at!</p>
</div>
</div>
<div class="card card-container">
<img class="card-img-top" src="./assets/img/bill.jpg" alt="Bill Gates">
<div class="card-body">
<h6 class="mt-3 d-flex "><span class="badge text-bg-warning me-2 p-2">Javascript</span> <span class="badge text-bg-success p-2">React</span></h6>
<h3>Bill Gates</h3>
<p class="card-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam debitis ullam voluptates fugiat nemo, excepturi, distinctio hic quisquam voluptatem quidem sequi! Odio odit aliquam, non molestias repudiandae fugit repellat at!</p>
</div>
</div>
<div class="card card-container">
<img class="card-img-top" src="./assets/img/ada.jpeg" alt="Ada Lovelace">
<div class="card-body">
<h6 class="mt-3 d-flex"><span class="badge text-bg-danger me-2 p-2">Negocios</span> <span class="badge text-bg-dark p-2">Startups</span></h6>
<h3>Ada Lovelace</h3>
<p class="card-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam debitis ullam voluptates fugiat nemo, excepturi, distinctio hic quisquam voluptatem quidem sequi! Odio odit aliquam, non molestias repudiandae fugit repellat at!</p>
</div>
</div>
</div>
</section>
<section class="row" id="lugar-y-fecha">
<div class="col-sm-6 p-0">
<img class="img-fluid d-none d-sm-block" src="./assets/img/honolulu.jpg" alt="Honolulu">
</div>
<div class="col-sm-6 encuentro-color">
<div class="encuentro-body">
<h3 class="encuentro-title">Bs.As - Octubre</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam debitis ullam voluptates fugiat nemo, excepturi, distinctio hic quisquam voluptatem quidem sequi! Odio odit aliquam, non molestias repudiandae fugit repellat at!</p>
<a href="" class="btn btn-lg btn-outline-light" role="button">Conocé más</a>
</div>
</div>
</section>
<section class="row justify-content-center" id="conviertete-en-orador">
<div class="col col-md-9 col-xl-6">
<div class="section-title" >
<h6>CONVIÉTETE EN ORADOR</h6>
<h3>ORADOR</h3>
</div>
<p class="formulario-text">Anótate como orador para dar una <span class="underline-dotted">charla ignite</span>. Cuéntanos de que quieres hablar!</p>
<form action="" method="POST" enctype="multipart/form-data" class="formulario">
<div class="row g-1">
<div class="col col-md-6">
<input type="text" name="nombre" class="form-control" placeholder="Nombre">
</div>
<div class="col-12 col-md-6">
<input type="text" name="apellido" class="form-control" placeholder="Apellido">
</div>
<div class="col-12">
<textarea class="form-control" rows="5" name="tema" placeholder="Sobre qué quieres hablar?"></textarea>
</div>
</div>
<small class="help-text">Recuerda incluir un titulo para tu charla</small>
<input type="submit" value="Enviar" class="btn w-100 btn-lg btn-success ">
</form>
</div>
</section>
</main>
<a href="#" class="whatsapp">
<img src="./assets/img/whatsapp.png" width="48px" alt="Whatsapp">
</a>
<footer>
<div class="d-flex flex-sm-row flex-column justify-content-evenly" >
<a class="link " href="">Preguntas frecuentes</a>
<a class="link" href="">Contáctenos</a>
<a class="link" href="">Prensa</a>
<a class="link" href="">Conferencias</a>
<a class="link" href="">Términos y condiciones</a>
<a class="link" href="">Privacidad</a>
<a class="link" href="">Estudiantes</a>
</div>
<p class="copyright">2023 © Luchi</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>