-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
197 lines (177 loc) · 10.3 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
190
191
192
193
194
195
196
197
<!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">
<title>Codo a Codo PHP</title>
<!--kit de fontawesome-->
<script src="https://kit.fontawesome.com/c538ed8188.js" crossorigin="anonymous"></script>
<!--bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!--cargar estilos propios de manera externa-->
<link rel="stylesheet" href="./css/estilos.css">
<!--favicon-->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body class="body">
<header class="header container-fluid">
<nav class="navbar navbar-expand-lg navbar-light colorFondo">
<div class="container">
<a class="navbar-brand text-white" href="#">
<img src="./assets/img/codoacodo.png" alt="Logo de codo a codo" width="100px">
Conf Bs.As.
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav w-100 justify-content-end">
<li class="nav-item">
<a class="nav-link active text-white" aria-current="page" href="#conferencia">La
conferencia</a>
</li>
<li class="nav-item">
<a class="nav-link gris" href="#oradores">Los oradores</a>
</li>
<li class="nav-item">
<a class="nav-link gris" href="#lugarFecha">El Lugar y la Fecha</a>
</li>
<li class="nav-item">
<a class="nav-link gris" href="#formulario">Conviertete en Orador</a>
</li>
<li class="nav-item">
<a class="nav-link verde" href="./pages/comprar_tickets.html">Comprar Tickets</a>
</li>
</ul>
</div>
</div>
</nav>
<!--contenedor de la imagen de ex aguas argentinas(que la vamos a poner de fondo desde css)-->
<section id="conferencia" class="contenedorConferencia">
<div class="hijoConferencia">
<h1>Conf Bs As</h1>
<p class="textoConferencia" style="overflow-wrap: break-word;">Bs As llega por primera vez a Argentina. Un evento para compartir con<br>
nuestra comunidad el conocimiento y experiencia de los expertos que están creando el futuro de<br>
internet. Ven a conocer a miembros del evento, a otros estudiantes de Codo a Codo y los oradores de<br>
primer nivel que tenemos para ti. Te esperamos!
</p>
<div class="button">
<button type="button" class="btnConferencia" href="">Quiero ser orador</button>
<button type="button" class="btnConferencia green" href=""><a href="./pages/comprar_tickets.html">Comprar Tickets</a></button>
</div>
</div>
</section>
</header>
<!--esta es la etiqueta semantica del contenido principal de mi pagina-->
<main>
<section id="oradores" class="sectionOradores container">
<!--ETIQUETA CONTENEDORA EN LINEA, HERMANA DEL DIV QUE ES SPAN-->
<h2 class="text-center"><span class="fs-6">CONOCE A LOS</span><br> ORADORES</h2>
<div class="container mb-3">
<div class="row">
<div class="col">
<div class="card">
<img src="assets/img/steve.jpg" class="card-img-top" alt="foto de steve jobs">
<div class="mt-3">
<button class="btn btn-warning fw-bold btn-sm" type="submit">JavaScript</button>
<button class="btn btn-info fw-bold text-white btn-sm" type="submit">React</button>
</div>
<div class="card-body">
<h2>Steve Jobs</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, tenetur sit soluta magni adipisci cupiditate tempora, fugit rem ratione obcaecati laboriosam ducimus sint enim consequuntur a odio blanditiis maxime quaerat.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="assets/img/bill.jpg" class="card-img-top" alt="foto de bill gates">
<div class="mt-3">
<button class="btn btn-warning fw-bold btn-sm" type="submit">JavaScript</button>
<button class="btn btn-info fw-bold text-white btn-sm" type="submit">React</button>
</div>
<div class="card-body">
<h2>Bill Gates</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, ex veniam eligendi aut itaque numquam incidunt asperiores consequatur dolor quae odio molestias culpa, repellendus explicabo laborum laudantium accusantium magnam error.
</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="assets/img/ada.jpeg" class="card-img-top" alt="foto de ada lovelace">
<div class="mt-3">
<button class="btn btn-secondary btn-sm fw-bold" type="submit">Negocios</button>
<button class="btn btn-danger btn-sm fw-bold" type="submit">Startups</button>
</div>
<div class="card-body">
<h2>Ada Lovelace</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates perspiciatis quae delectus expedita aperiam sequi adipisci soluta, dolores iusto dolorum? Sequi porro enim eius optio commodi voluptatibus labore vel nihil?
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="lugarFecha" class="container-fluid">
<div class="row honolulu">
<div class="col-sm-12 col-md-6 izquierda">
</div>
<div class="col-sm-12 col-md-6 derecha text-white">
<h2>Bs As - Octubre</h2>
<p>Buenos Aires es la provincia y localidad más grande del estado de Argentina, en los Estados Unidos. Honolulu es la más sureña de entre las principales ciudades estadounidenses. Aunque el nombre de Honolulu se refiere al área urbana en la costa sureste de la isla de Oahu, la ciudad y el condado de Honolulu han formado una ciudad-condado consolidada que cubre toda la ciudad (aproximadamente 600km2 de superficie).</p>
<!--<button>Conoce Más</button>-->
<a href="">Conocé Más</a>
</div>
</div>
</section>
<section id="formulario">
<h2 class="text-center"><span class="fs-6">CONVIERTETE EN UN </span><br> ORADOR</h2>
<p class="speaker-description text-center fw-semibold">
Anótate como orador para dar una <span class="ignite-talk">charla
ignite</span>. Cuentanos de que quieres Hablar!
</p>
<form class="text-center">
<div>
<input type="text" placeholder="Nombre" required>
<input type="text" placeholder="Apellido" required>
</div>
<div class="mt-3">
<textarea name="" id="" cols="42" rows="6" placeholder="Sobre que quieres hablar?"
required></textarea>
</div>
<p class="fs-6">Recuerda incluir un titulo para tu charla.</pc>
<div class="d-grid gap-2 col-3 mx-auto">
<button type="button" class="btn btn-success" value="Enviar Formulario">Enviar</button>
<!-- <input type="reset" value="Limpiar Formulario"> -->
</div>
</form>
</section>
</main>
<!--esta es la etiqueta semantica del pie de pagina-->
<footer class="container-fluid footer pt-5 mt-3 pb-3">
<div class="container">
<div class="row">
<ul class="list-inline">
<li class="list-inline-item"><a href="">Preguntas frecuentes</a></li>
<li class="list-inline-item"><a href="">Contáctanos</a></li>
<li class="list-inline-item"><a href="">Prensa</a></li>
<li class="list-inline-item"><a href="">Conferencias</a></li>
<li class="list-inline-item"><a href="">Terminos y condiciones</a></li>
<li class="list-inline-item"><a href="">Privacidad</a></li>
<li class="list-inline-item"><a href="">Estudiantes</a></li>
<!-- <li class="list-inline-item"><a href=""><i class="fab fa-instagram icon"></i></a></li> -->
</ul>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>