diff --git a/assets/img/ada.jpeg b/assets/img/ada.jpeg new file mode 100644 index 0000000..aa18a55 Binary files /dev/null and b/assets/img/ada.jpeg differ diff --git a/assets/img/ba1.jpg b/assets/img/ba1.jpg new file mode 100644 index 0000000..1742d28 Binary files /dev/null and b/assets/img/ba1.jpg differ diff --git a/assets/img/ba2.jpg b/assets/img/ba2.jpg new file mode 100644 index 0000000..04fa6e0 Binary files /dev/null and b/assets/img/ba2.jpg differ diff --git a/assets/img/ba3.jpg b/assets/img/ba3.jpg new file mode 100644 index 0000000..6162d24 Binary files /dev/null and b/assets/img/ba3.jpg differ diff --git a/assets/img/bill.jpg b/assets/img/bill.jpg new file mode 100644 index 0000000..2455e45 Binary files /dev/null and b/assets/img/bill.jpg differ diff --git a/assets/img/codoacodo.png b/assets/img/codoacodo.png new file mode 100644 index 0000000..b6f027b Binary files /dev/null and b/assets/img/codoacodo.png differ diff --git a/assets/img/favicon.ico b/assets/img/favicon.ico new file mode 100644 index 0000000..43cbc55 Binary files /dev/null and b/assets/img/favicon.ico differ diff --git a/assets/img/hawaii.jpg b/assets/img/hawaii.jpg new file mode 100644 index 0000000..1742d28 Binary files /dev/null and b/assets/img/hawaii.jpg differ diff --git a/assets/img/hawaii2.jpg b/assets/img/hawaii2.jpg new file mode 100644 index 0000000..04fa6e0 Binary files /dev/null and b/assets/img/hawaii2.jpg differ diff --git a/assets/img/hawaii3.jpg b/assets/img/hawaii3.jpg new file mode 100644 index 0000000..6162d24 Binary files /dev/null and b/assets/img/hawaii3.jpg differ diff --git a/assets/img/honolulu.jpg b/assets/img/honolulu.jpg new file mode 100644 index 0000000..f581863 Binary files /dev/null and b/assets/img/honolulu.jpg differ diff --git a/assets/img/steve.jpg b/assets/img/steve.jpg new file mode 100644 index 0000000..c5843cf Binary files /dev/null and b/assets/img/steve.jpg differ diff --git a/css/estilos.css b/css/estilos.css new file mode 100644 index 0000000..045ef38 --- /dev/null +++ b/css/estilos.css @@ -0,0 +1,480 @@ + + +/* Generales */ +* { + margin: 0; + padding: 0; + font-family: Lato, sans-serif; + scroll-behavior: smooth; +} +html { + display: block; +} +a { + text-decoration: none; +} +p { + line-height: 1.5em; +} +h2 { + text-align: center; + text-transform: uppercase; +} + +/* Header */ +header { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + background-color: #353a40; + color: #ffffff; + padding: 25px 100px 10px 50px; +} +.logo { + display: flex; + align-items: center; +} +.menu-principal { + display: flex; +} +.menu { + display: flex; + flex-direction: row; + list-style: none; +} +.menu li { + padding: 0 0 0 20px; +} +.menu li > a { + color: #bababa; + text-decoration: none; +} +.menu li a:hover { + color: #ffffff; +} +.menu li:last-child > a { + color: #29a744; +} + +/* Main */ +.conferencia { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-end; + background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), + url(../assets/img/ba1.jpg); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + padding: 50px 10px; + color: #ffffff; +} +.descripcion { + width: 30%; + margin-right: 100px; + text-align: right; +} +.botones { + display: flex; + align-items: center; + justify-content: flex-end; +} +.botones a { + padding: 10px 25px; + border-radius: 5px; + font-size: 1rem; + transition-duration: 0.5s; +} +.botones a:first-child { + color: #ffffff; + margin: 5px 5px; + border: 1px solid #ffffff; +} +.botones a:first-child:hover { + background-color: #ffffff; + color: #6c757c; + transform: scale(1.1, 1.1); +} +.botones a:last-child { + color: #ffffff; + background-color: #96c93e; + border: 1px solid #96c93e; +} +.botones a:last-child:hover { + color: #ffffff; + transform: scale(1.1, 1.1); +} +.oradores { + display: flex; + flex-direction: column; + align-items: center; + margin: 25px; +} +.texto-superior-titulo { + font-size: 0.85rem; + font-weight: 400; + text-transform: uppercase; +} +.caja-oradores { + display: flex; + flex-direction: row; + justify-content: center; + width: 100%; +} +.caja { + width: 25%; + margin: 15px; + border: 1px solid #e1e1e1; + border-radius: 5px; +} +.caja img { + max-width: 100%; + object-fit: cover; +} +.caja-interno { + padding: 25px; +} +.caja-interno p { + margin-top: 20px; +} +.navegador-oradores { + visibility: hidden; +} +.recuadro { + display: inline-block; + padding: 1px 5px 3px 5px; + margin: 5px 5px 5px 0; + font-size: 0.9rem; + font-weight: 600; + border-radius: 5px; +} +.js { + color: #000000; + background-color: #fec107; +} +.react { + color: #ffffff; + background-color: #17a2b9; +} +.negocios { + color: #ffffff; + background-color: #6c757c; +} +.startup { + color: #ffffff; + background-color: #dc3546; +} + +.lugarfecha { + display: flex; +} +.columna { + width: 50%; + max-width: 50%; + padding: 1%; + background-color: #353a40; + color: #ffffff; +} +.imagen-fondo { + background-image: url(../assets/img/ba3.jpg); + background-repeat: no-repeat; + background-size: cover; +} +.columna h2 { + text-align: left; + text-transform: none; + margin-bottom: 10px; +} +.columna a { + display: inline-block; + color: #ffffff; + text-decoration: none; + margin: 15px 0; + border: 1px solid #ffffff; + padding: 2px 10px 5px 10px; + border-radius: 5px; + transition-duration: 0.5s; + cursor: pointer; +} +.columna a:hover { + background-color: #ffffff; + color: #6c757c; + transform: scale(1.1, 1.1); +} +.formulario { + display: flex; + flex-direction: column; + align-items: center; + margin: 25px; +} +.orador { + margin-bottom: 15px; +} +form { + display: flex; + flex-direction: column; + width: 35%; +} +form button { + background-color: #96c93e; + padding: 10px 25px; + border: none; + color: #ffffff; + font-size: 1.1rem; + margin: 15px 5px; + border-radius: 5px; + transition-duration: 0.5s; + cursor: pointer; +} +form button:hover { + background-color: #96c93e; + color: #ffffff; + transform: scale(1.1, 1.1); +} +.contenedor-inputs { + display: flex; + justify-content: space-around; + width: 100%; +} +form input[type='text'] { + padding: 10px; + margin: 5px 5px; + border: 1px solid #e1e1e1; + border-radius: 5px; + font-size: 1rem; + width: 50%; + color: #6b757e; +} +form textarea { + width: 100%; + margin: 5px; + padding: 10px; + font-size: 1.5rem; + border: 1px solid #e1e1e1; + border-radius: 5px; + color: #6b757e; +} +.punteado { + text-decoration: underline dotted; +} +.aviso { + font-size: 0.85rem; + padding: 0 5px 15px 5px; + color: #6b757e; +} +.publicidad { + margin: 2.5%; + text-align: center; +} +.publicidad h2 { + margin-bottom: 25px; +} +.videos-publicitarios { + display: flex; + justify-content: center; +} +.videos-publicitarios iframe { + margin: 0 5px; +} +footer { + display: flex; + justify-content: center; + align-items: center; + background-color: #1e516e; + padding: 25px; +} +.menu-secundario { + display: block; + color: #ffffff; + font-size: 0.85em; +} + +/* Media Queries */ +/* Mobile */ +@media screen and (max-width: 425px) { + /* Header y menu de navegación principal */ + header { + display: block; + padding: 5px 10px 15px 5px; + } + .logo h2 { + font-size: 1.25rem; + } + .menu { + display: flex; + flex-direction: row; + justify-content: center; + list-style: none; + flex-wrap: wrap; + padding: 0 10px 0 5px; + } + .menu li { + padding: 5px 0; + } + .menu li a { + padding: 0 5px; + } + + /* Sección 01: Conferencia Bs. As. */ + .conferencia { + padding: 50px 10px; + } + + .descripcion { + width: 90%; + margin-right: 20px; + text-align: right; + } + .botones a { + font-size: 0.9rem; + padding: 10px 5px; + } + .botones a:first-child { + margin: 10px 10px; + } + + /* Sección 02: Oradores */ + .caja-oradores { + overflow-x: auto; + scroll-snap-type: x mandatory; + scroll-snap-align: start; + } + .caja { + width: 100%; + border: 1px solid #e1e1e1; + border-radius: 5px; + } + .caja img { + max-width: 100%; + object-fit: cover; + } + .caja-interno { + padding: 15px 10px; + } + .navegador-oradores { + visibility: visible; + } + + /* Sección 3: Fecha y Hora */ + .lugarfecha { + display: block; + } + .columna { + box-sizing: border-box; + width: 100%; + max-width: 100%; + padding: 25px; + } + .imagen-fondo { + height: 300px; + } + /* Sección 4: Formulario */ + form { + width: 100%; + } + + /* Publicidad */ + .videos-publicitarios { + display: flex; + justify-content: center; + flex-wrap: wrap; + } + .videos-publicitarios iframe { + margin: 5px 0; + width: 100%; + } +} +/* Tablet */ +@media screen and (min-width: 426px) and (max-width: 1024px) { + + /* Header y menu de navegación principal */ + header { + display: block; + padding: 5px 10px 15px 5px; + } + .menu-principal { + display: flex; + flex-direction: column; + } + .menu { + display: flex; + flex-direction: row; + justify-content: space-between; + list-style: none; + flex-wrap: wrap; + padding: 0 5px 0 5px; + } + .menu li { + padding: 0 5px; + } + + /* Sección 01: Conferencia Bs. As. */ + .descripcion { + width: 60%; + margin-right: 20px; + text-align: right; + } + .botones a { + font-size: 0.9rem; + padding: 10px 5px; + } + .botones a:first-child { + margin: 10px 10px; + } + + /* Seccion 02: Oradores */ + .oradores { + margin: 25px 0; + } + .caja-oradores { + text-wrap: none; + } + .caja { + width: 100%; + border: 1px solid #e1e1e1; + border-radius: 5px; + } + .caja img { + max-width: 100%; + height: 250px; + object-fit: cover; + } + .caja-interno { + padding: 15px 15px 20px 15px; + } + + /* Sección 3: Fecha y Hora */ + .columna { + box-sizing: border-box; + width: 100%; + max-width: 100%; + padding: 25px; + } + + /* Sección 4: Formulario */ + form { + width: 70%; + } + + /* Publicidad */ + .videos-publicitarios { + display: flex; + justify-content: center; + flex-wrap: wrap; + } + .videos-publicitarios iframe { + margin: 5px 15px; + width: 210px; + } + + /* Footer */ + footer { + + padding: 25px 0; + } + + + +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..e342f0b --- /dev/null +++ b/index.html @@ -0,0 +1,157 @@ + + + + + + + + + + Conferencia Buenos Aires + + + + + + +
+ + +
+
+
+
+

Conferencia Bs. As.

+

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!

+
+ Quiero ser Orador + Comprar Tickets +
+
+
+
+

+
Conoce a los
Oradores +

+
+
Steve Jobs +
+

javascript

+

react

+

Steve Jobs

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum officiis error recusandae cum + alias + omnis a, earum officia sunt ut magnam nemo. Nulla aliquam tempora blanditiis iure, fugiat + consequuntur aperiam?

+
+
+
Bill Gates +
+

javascript

+

react

+

Bill Gates

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum officiis error recusandae cum + alias + omnis a, earum officia sunt ut magnam nemo. Nulla aliquam tempora blanditiis iure, fugiat + consequuntur aperiam?

+
+
+
Ada Lovelace +
+

negocios

+

startups

+

Ada Lovelace

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum officiis error recusandae cum + alias + omnis a, earum officia sunt ut magnam nemo. Nulla aliquam tempora blanditiis iure, fugiat + consequuntur aperiam?

+
+
+
+
+ 1 + 2 + 3 +
+
+
+
+
+

Bs. As. - Octubre

+

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 ha formado una ciudad-condado consolidada que cobre toda la ciudad (aproximadamente 600 km2 + de + superficie).

+ Conocé más +
+
+
+

+
Conviértete en un
Orador +

+

Anótate como orador para dar una charla ignite. Cuéntanos de que quieres hablar.

+
+
+ + +
+
+ +
+

Recuerda incluir un título para tu charla

+ +
+
+
+ + + + + + + \ No newline at end of file