proyectoCSS/index.html at main · pladie/proyectoCSS · GitHub

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
<!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">
    <meta name="author" content="Diego Plaza">
    <title>Conf Bs As</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <header>
        <div class="header">
            <div class="headerleft">
                <img src="./assets/img/codoacodo.png" alt="logo de codo a codo">
                <h2> Conf Bs As</h2>
            </div>
            <div>
                <nav>
                    <a href="#conferencia">La Conferencia </a>
                    <a href="#oradores"> Los Oradores </a>
                    <a href="#lugar"> El Lugar y la Fecha </a>
                    <a href="#conviertete"> Conviértete en Orador </a>
                    <a class="comp" href="#">Comprar Tickets</a>
                </nav>
            </div>
        </div>
        <section id="Conferencia" class="conf">
            <div class="conf_hijo">
                <h1>Conf Bs. As.</h1>
                <p>Bs As llega por primera vez a Argentina. Un evento para compartir con nuestra
                    comunidad el conocimiento y experiencia de los expertos que están creando el futuro de Internet.
                    Ven a conocer a miembros del evento, a otros estudiantes de Codo a Codo y los oradores de primer
                    nivel
                    que tenemos para ti. Te esperamos!
                </p>
                <div>
                    <button class="btnOrador" type="button" >Quiero ser orador</button>
                    <button class="btnTicket" type="button" >Comprar tickets</button>
                </div>
            </div>
        </section>
    </header>
    <main>
        <section class="oradores" id="oradores">
            <h2><span class="conoce">CONOCE A LOS </span></h2>
            <div>
                <h2>ORADORES</h2>
            </div>
            <div class="padreCards">
                <div class="card">
                    <img src="./assets/img/steve.jpg" alt="Foto de Steve Jobs">
                    <div class="cardBody">
                        <h5 class="java">JavaScript</h5>
                        <h5 class="react">React</h5>
                        <h3>Steve Jobs</h3>
                        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta nulla consectetur illum
                            voluptatibus voluptatem illo alias dolorem voluptatum, non aliquid nisi fugiat vitae maxime
                            quas est maiores dolor pariatur et?</p>
                    </div>
                </div>
                <div class="card">
                    <img src="./assets/img/bill.jpg" alt="Foto de Bill Gates">
                    <div class="cardBody">
                        <h5 class="java">JavaScript</h5>
                        <h5 class="react">React</h5>
                        <h3>Bill Gates</h3>
                        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta nulla consectetur illum
                            voluptatibus voluptatem illo alias dolorem voluptatum, non aliquid nisi fugiat vitae maxime
                            quas est maiores dolor pariatur et?</p>
                    </div>
                </div>
                <div class="card">
                    <img src="./assets/img/ada.jpeg" alt="Toto de Ada Lovelace">
                    <div class="cardBody">
                        <h5 class="negocio">Negocios</h5>
                        <h5 class="start">Startups</h5>
                        <h3>Ada Lovelace</h3>
                        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta nulla consectetur illum
                            voluptatibus voluptatem illo alias dolorem voluptatum, non aliquid nisi fugiat vitae maxime
                            quas est maiores dolor pariatur et?</p>
                    </div>

                </div>
            </div>
        </section>
        <section id="lugar">
            <div class="padrefecha">
                <div class="fecha">
                    <img src="./assets/img/honolulu.jpg" alt="Foto desubicada de Honolulu">
                </div>
                <div class="fecha">
                    <div class="fechatext">
                        <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 600 km² de
                            Superficie).
                        </p>
                        <button>Conocé más</button>
                    </div>
                </div>
            </div>
        </section>
        <section id="conviertete">
            <div class="conviertete">
                <div class="convierte">CONVIÉRTE EN UN</div>
                <h2>ORADOR</h2>
                <h3>Anótate como orador para dar una charla.ignite. Cuéntanos de qué quieres hablar!</h3>
                <form class="formulario">
                    <div>
                        <input class="form" type="text" placeholder="Nombre">
                        <input class="form" type="text" placeholder="Apellido">
                    </div>
                    <div>
                        <textarea name="" id="" cols="56" rows="6" placeholder="Sobre qué quiere hablar" required></textarea>
                        <div class="recuerda">Recuerda incluir un título para tu charla</div>
                    </div>

                    <div>
                        <input class="enviar" type="submit" value="Enviar Formulario">
                        <input class="limpiar" type="reset" value="Limpiar formulario">
                    </div>
                </form>
            </div>
        </section>
    </main>
    <footer>
        <div class="pie">
            <a href="">Preguntas Frecuentes</a>
            <a href="">Contáctanos</a>
            <a href="">Prensa</a>
            <a href=""> Conferencias</a>
            <a href="">Términos y Condiciones</a>
            <a href="">Privacidad</a>
            <a href=""> Estudiantes</a>
        </div>
        <div class="pie">
            <img src="./assets/img/whatsapp-icon-original.svg" alt="Contacto de whatsapp para contactarnos">
        </div>
    </footer>
</body>
</html>