-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
162 lines (156 loc) · 8.37 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
<!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>proyecto html</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/estilos.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bgColorGris">
<div class="container-fluid">
<a class="navbar-brand text-white" href="#">
<img src="./assets/images/codoacodo.png" alt="logo codo a codo" width="100">
Conf. Bs As
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 pe-5 justificadoFinal">
<li class="nav-item">
<a class="nav-link active text-white" aria-current="page" href="#">La Conferencia</a>
</li>
<li class="nav-item"><a class="nav-link text-muted" href="#oradores">Los oradores</a></li>
<li class="nav-item"><a class="nav-link text-muted" href="#lugarYFecha">El lugar y la Fecha</a>
</li>
<li class="nav-item"><a class="nav-link text-muted" href="#formulario">Conviértete en Orador</a>
</li>
<li class="nav-item"><a class="nav-link text-muted" href="./pages/comprartickets.html">Comprar
Tickets</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<section class="sectionPrincipal">
<div class="contenidoPrincipal pe-5">
<h1>Conferencia Bs.As.</h1>
<p class="parrafoPrincipal">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque facilis
eaque provident sed id, deserunt quos ab autem blanditiis numquam quia laborum culpa expedita! Sed,
molestiae vitae? Sed, veritatis doloremque.</p>
<a href="#formulario" class="btn btn-outline active" aria-current="page">Quiero ser orador</a>
<a href="./pages/comprartickets.html" class="btn btn-success">Comprar Tickets</a>
</div>
</section>
</main>
<section class="sectionTarjetas" id="oradores">
<p>Conoce a los</p>
<h3>ORADORES</h3>
<div class="padreTarjetas">
<div class="tarjetas__flex">
<div class="tarjeta">
<img class="tarjetaImagen" src="./assets/images/steve.jpg" alt="imagen card" loading="lazy"
width="300">
<div class="tarjetaContenido">
<h3>Steve Jobs</h3>
<div class="tarjetaParrafo">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <br> Ut dicta adipisci
reiciendis at. Molestiae nobis eveniet provident qui, eligendi voluptatibus <br> alias
voluptatum dolores, excepturi ipsum mollitia aspernatur consequatur maiores placeat.</p>
</div>
<a href="">leer Más</a>
</div>
</div>
<div class="tarjeta">
<img class="tarjetaImagen" src="./assets/images/bill.jpg" alt="imagen card" loading="lazy"
width="300">
<div class="tarjetaContenido">
<h3>Bill Gates</h3>
<div class="tarjetaParrafo">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <br> Ut dicta adipisci
reiciendis at. Molestiae nobis eveniet provident qui, eligendi voluptatibus <br> alias
voluptatum dolores, excepturi ipsum mollitia aspernatur consequatur maiores placeat.</p>
</div>
<a href="">leer Más</a>
</div>
</div>
<div class="tarjeta">
<img class="tarjetaImagen" src="./assets/images/ada.jpeg" alt="imagen card" loading="lazy"
width="300">
<div class="tarjetaContenido">
<h3>Ada Lovelace</h3>
<div class="tarjetaParrafo">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <br> Ut dicta adipisci
reiciendis at. Molestiae nobis eveniet provident qui, eligendi voluptatibus <br> alias
voluptatum dolores, excepturi ipsum mollitia aspernatur consequatur maiores placeat.</p>
</div>
<a href="">leer Más</a>
</div>
</div>
</div>
</div>
</section>
<section class="sectionDividida" id="lugarYFecha">
<div class="imagenIzq">
</div>
<div class="contenidoDer">
<h3>Bs.As. Octubre</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea facere quos quia porro enim obcaecati dolore
amet debitis, nihil possimus iusto alias! Nisi quasi, unde aspernatur debitis natus inventore
blanditiis.</p>
</div>
<br>
<br>
</section>
<section id="formulario" class="container">
<div class="row ancho">
<div class="textoForm">
<p>Conviértete en un</p>
<h3>ORADOR</h3>
<p>Inscríbete como orador para dar una charla ignite. Cuéntanos de qué quieres hablar.</p>
</div>
<div class="mb-3 d-flex">
<input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Nombre">
<input type="text" class="form-control" id="exampleFormControlInput2" placeholder="Apellido">
</div>
</div>
<div class="mb-3 row ancho">
<div class="col mb-3">
<textarea name="" class="form-control" id="exampleFormControlTextarea1" cols="50" rows=10"
placeholder="Sobre qué quieres hablar"></textarea>
</div>
<p>Recuerda incluir un título para tu charla.</p>
<div class="d-grid gap-2">
<button class="btn btn-success" type="button">Enviar</button>
</div>
</div>
</section>
<br>
<footer class="colorFooter">
<div class="container">
<div class="row">
<div class="col pt-4 pb-4"><a class="text-white text-decoration-none" href="./pages/error.html">Preguntas
Frecuentes</a>
</div>
<div class="col pt-4 pb-4"><a class="text-white text-decoration-none" href="./pages/error.html">Contactanos</a></div>
<div class="col pt-4 pb-4"><a class="text-white text-decoration-none" href="./pages/error.html">Prensa</a></div>
<div class="col pt-4 pb-4"><a class="text-white text-decoration-none" href="./pages/error.html">Conferencias</a></div>
<div class="col pt-4 pb-4"><a class="text-white text-decoration-none" href="./pages/error.html">Terminos y
Condiciones</a> </div>
<div class="col pt-4 pb-4"><a class="text-white text-decoration-none" href="./pages/error.html">Privacidad</a></div>
<div class="col pt-4 pb-4"><a class="text-white text-decoration-none" href="./pages/error.html">Estudiantes</a></div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>