Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Centering views, description and transitions #3

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Centering views, description and transitions #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
20300aa
Horizontally center for Instructors
hpneo Jun 18, 2014
659f0fe
Horizontally center for Instructors
hpneo Jun 18, 2014
9cfe5ad
Vertically center for Home slides
hpneo Jun 18, 2014
fd9f3d9
Initialize WOW for mobile browsers
hpneo Jun 23, 2014
b5c15e9
Tabs in one row
hpneo Jun 23, 2014
2f8f447
Add description to courses
hpneo Jun 23, 2014
7152dcf
Add description to courses
hpneo Jun 23, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
.DS_Store
*/.DS_Store
node_modules
/node_modules
224 changes: 113 additions & 111 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,32 +143,32 @@ <h2>Nuestros cursos</h2>
<div id="cursos-web" class="tab-content active">
<div class="wrap-courses-logo">
<div class="item-logo animated fadeIn active">
<figure data-title="HTML5 + CSS3 + jQuery"> <img alt="" src="images/logo_course_1.jpg" />
<figure data-title="HTML5 + CSS3 + jQuery" data-description="HTML5 + CSS3 + jQuery"> <img alt="" src="images/logo_course_1.jpg" />
<figcaption>HTML5 + CSS3 + jQuery</figcaption>
</figure>
</div>
<div class="item-logo animated fadeIn">
<figure data-title="JavaScript"> <img alt="" src="images/logo_course_2.jpg" />
<figure data-title="JavaScript" data-description="JavaScript"> <img alt="" src="images/logo_course_2.jpg" />
<figcaption>JavaScript</figcaption>
</figure>
</div>
<div class="item-logo animated fadeIn">
<figure data-title="Python"> <img alt="" src="images/logo_course_3.jpg" />
<figure data-title="Python" data-description="Python"> <img alt="" src="images/logo_course_3.jpg" />
<figcaption>Python</figcaption>
</figure>
</div>
<div class="item-logo animated fadeIn">
<figure data-title="Ruby & Rails"> <img alt="" src="images/logo_course_4.jpg" />
<figure data-title="Ruby & Rails" data-description="Ruby & Rails"> <img alt="" src="images/logo_course_4.jpg" />
<figcaption>Ruby & Rails</figcaption>
</figure>
</div>
<div class="item-logo animated fadeIn">
<figure data-title="Experiencia del Usuario"> <img alt="" src="images/logo_course_5.jpg" />
<figure data-title="Experiencia del Usuario" data-description="Experiencia del Usuario"> <img alt="" src="images/logo_course_5.jpg" />
<figcaption>Experiencia del Usuario</figcaption>
</figure>
</div>
<div class="item-logo animated fadeIn">
<figure data-title="Adobe Certified Expert: Photoshop CC"> <img alt="" src="images/logo_course_6.jpg" />
<figure data-title="Adobe Certified Expert: Photoshop CC" data-description="Adobe Certified Expert: Photoshop CC"> <img alt="" src="images/logo_course_6.jpg" />
<figcaption>Adobe Certified Expert: Photoshop CC</figcaption>
</figure>
</div>
Expand Down Expand Up @@ -387,112 +387,114 @@ <h3>Capacitación Corporativa</h3>
</svg>
</section>
<section id="sec-instructores" class="section w-fluid cf">
<div class="cf w-inner">
<div class="head animated slideInLeft">
<h2>INSTRUCTORES</h2>
<p style="display:none;">Area51 Training Center, es un centro de entrenamiento OFICIAL de Adobe y Autodesk que reúne a los principales profesionales e instructores del país.</p>
</div>
<div class="wrap-instructors">
<div class="slide">
<article class="item instructor animated fadeInDown">
<figure>
<img alt="" src="images/img_instructor.jpg" />
<p class="detail">
Es Google AdWords Certified, publicista egresada del IPP y Chief Communications Officer en Studio INI4.
</p>
</figure>
<h4> MARU TAMAYO </h4>
</article>
<article class="item instructor animated fadeInDown">
<figure> <img alt="" src="images/img_instructor_gayoso.jpg" />
<p class="detail">
Es Autodesk Certified Instructor, fundador de PeruWorkShop y Chief Executive Officer en CollisionArt.
</p>
</figure>
<h4>DANIEL GAYOSO</h4>
</article>
<article class="item instructor animated fadeInDown">
<figure> <img alt="" src="images/img_instructor_vasquez.jpg" />
<p class="detail">
Es Adobe Certified Instructor, Adobe Regional Coordinator y Adobe Community Champions.
</p>
</figure>
<h4>ELDER VÁSQUEZ</h4>
</article>
<article class="item instructor animated fadeInDown">
<figure> <img alt="" src="images/img_instructor_acuna.jpg" />
<p class="detail">
Es Adobe Certified Expert, pertenece al equipo de desarrollo en la agencia Bell&Whistle New York-EEUU.
</p>
</figure>
<h4>GUISELLA ACUÑA</h4>
</article>
<article class="item instructor animated fadeInUp">
<figure> <img alt="" src="images/img_instructor_soto.jpg" />
<p class="detail">
Es el primer Authorized Rhino Trainer en Perú y Chief Executive Officer en 3D Model Perú.
</p>
</figure>
<h4>VICTOR SOTO</h4>
</article>
<article class="item instructor animated fadeInUp">
<figure> <img alt="" src="images/img_instructor_castro.jpg" />
<p class="detail">
Es Adobe Certified Expert y pertenece al equipo de desarrollo de Studio INI4 y conferencista en Adobe Express Perú.
</p>
</figure>
<h4>RENZO CASTRO</h4>
</article>
<article class="item instructor animated fadeInUp">
<figure> <img alt="" src="images/img_instructor_martinez.jpg" />
<p class="detail">
Fundador de PreZentit.com y co Fundador de Lucumalabs, conferencista y promotor de buenas prácticas y uso de HTML5.
</p>
</figure>
<h4>GERMÁN MARTÍNEZ</h4>
</article>
<article class="item instructor animated fadeInUp">
<figure> <img alt="" src="images/img_instructor_miranda.jpg" />
<p class="detail">
Jefe de Diseño Web de El Comercio y Diseñadora web con más de 10 años de experiencia.
</p>
</figure>
<h4>MARIELLA MIRANDA</h4>
</article>
<div id="instructores-sec-wrap">
<div class="cf w-inner">
<div class="head animated slideInLeft">
<h2>INSTRUCTORES</h2>
<p style="display:none;">Area51 Training Center, es un centro de entrenamiento OFICIAL de Adobe y Autodesk que reúne a los principales profesionales e instructores del país.</p>
</div>
<div class="slide">
<article class="item instructor animated fadeInDown">
<figure> <img alt="" src="images/img_instructor_melgarejo.jpg" />
<p class="detail">
Experto reconocido en el mundo del 3D, es Chief Financial Officer en Toy Catz Inc.
</p>
</figure>
<h4>ALDO MELGAREJO</h4>
</article>
<article class="item instructor animated fadeInDown">
<figure> <img alt="" src="images/img_instructor_alarcon.jpg" />
<p class="detail">
Es Adobe Certified Expert, Director Creativo de Studio INI4 y conferencistas en Adobe en Vivo 2008 y 2009.
</p>
</figure>
<h4>LUIS ALARCÓN</h4>
</article>
<article class="item instructor animated fadeInDown">
<figure> <img alt="" src="images/img_instructor_pereyra.jpg" />
<p class="detail">
Conferencistas y promotor del uso de Ruby & Rails en el Perú y Chief Executive Officer en Xenda.
</p>
</figure>
<h4>ALVARO PEREYRA</h4>
</article>
<article class="item instructor animated fadeInDown">
<figure> <img alt="" src="images/img_instructor_soplin.jpg" />
<p class="detail">
Gerente de Arquitectura de Información en Grupo Clarín-Argentina. Arquitecto de información y desarrollador web.
</p>
</figure>
<h4>CESAR SOPLÍN</h4>
</article>
<div class="wrap-instructors">
<div class="slide">
<article class="item instructor animated fadeInDown">
<figure>
<img alt="" src="images/img_instructor.jpg" />
<p class="detail">
Es Google AdWords Certified, publicista egresada del IPP y Chief Communications Officer en Studio INI4.
</p>
</figure>
<h4> MARU TAMAYO </h4>
</article>
<article class="item instructor animated fadeInDown">
<figure> <img alt="" src="images/img_instructor_gayoso.jpg" />
<p class="detail">
Es Autodesk Certified Instructor, fundador de PeruWorkShop y Chief Executive Officer en CollisionArt.
</p>
</figure>
<h4>DANIEL GAYOSO</h4>
</article>
<article class="item instructor animated fadeInDown">
<figure> <img alt="" src="images/img_instructor_vasquez.jpg" />
<p class="detail">
Es Adobe Certified Instructor, Adobe Regional Coordinator y Adobe Community Champions.
</p>
</figure>
<h4>ELDER VÁSQUEZ</h4>
</article>
<article class="item instructor animated fadeInDown">
<figure> <img alt="" src="images/img_instructor_acuna.jpg" />
<p class="detail">
Es Adobe Certified Expert, pertenece al equipo de desarrollo en la agencia Bell&Whistle New York-EEUU.
</p>
</figure>
<h4>GUISELLA ACUÑA</h4>
</article>
<article class="item instructor animated fadeInUp">
<figure> <img alt="" src="images/img_instructor_soto.jpg" />
<p class="detail">
Es el primer Authorized Rhino Trainer en Perú y Chief Executive Officer en 3D Model Perú.
</p>
</figure>
<h4>VICTOR SOTO</h4>
</article>
<article class="item instructor animated fadeInUp">
<figure> <img alt="" src="images/img_instructor_castro.jpg" />
<p class="detail">
Es Adobe Certified Expert y pertenece al equipo de desarrollo de Studio INI4 y conferencista en Adobe Express Perú.
</p>
</figure>
<h4>RENZO CASTRO</h4>
</article>
<article class="item instructor animated fadeInUp">
<figure> <img alt="" src="images/img_instructor_martinez.jpg" />
<p class="detail">
Fundador de PreZentit.com y co Fundador de Lucumalabs, conferencista y promotor de buenas prácticas y uso de HTML5.
</p>
</figure>
<h4>GERMÁN MARTÍNEZ</h4>
</article>
<article class="item instructor animated fadeInUp">
<figure> <img alt="" src="images/img_instructor_miranda.jpg" />
<p class="detail">
Jefe de Diseño Web de El Comercio y Diseñadora web con más de 10 años de experiencia.
</p>
</figure>
<h4>MARIELLA MIRANDA</h4>
</article>
</div>
<div class="slide">
<article class="item instructor animated fadeInDown">
<figure> <img alt="" src="images/img_instructor_melgarejo.jpg" />
<p class="detail">
Experto reconocido en el mundo del 3D, es Chief Financial Officer en Toy Catz Inc.
</p>
</figure>
<h4>ALDO MELGAREJO</h4>
</article>
<article class="item instructor animated fadeInDown">
<figure> <img alt="" src="images/img_instructor_alarcon.jpg" />
<p class="detail">
Es Adobe Certified Expert, Director Creativo de Studio INI4 y conferencistas en Adobe en Vivo 2008 y 2009.
</p>
</figure>
<h4>LUIS ALARCÓN</h4>
</article>
<article class="item instructor animated fadeInDown">
<figure> <img alt="" src="images/img_instructor_pereyra.jpg" />
<p class="detail">
Conferencistas y promotor del uso de Ruby & Rails en el Perú y Chief Executive Officer en Xenda.
</p>
</figure>
<h4>ALVARO PEREYRA</h4>
</article>
<article class="item instructor animated fadeInDown">
<figure> <img alt="" src="images/img_instructor_soplin.jpg" />
<p class="detail">
Gerente de Arquitectura de Información en Grupo Clarín-Argentina. Arquitecto de información y desarrollador web.
</p>
</figure>
<h4>CESAR SOPLÍN</h4>
</article>
</div>
</div>
</div>
</div>
Expand Down
22 changes: 22 additions & 0 deletions less/base.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -489,6 +489,10 @@ header.darker{
}
}

html.fullpage #sec-inicio .slide {
display: table !important;
}

#certificados{
position: relative;
background-color: #FFF;
Expand Down Expand Up @@ -849,6 +853,19 @@ svg#bigTriangleColor {
}
p{color: #FFF;font-size: 14px;line-height: 24px;font-weight: bold;}
}

#instructores-sec-wrap {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
height: 100%;
}
}
.wrap-instructors{
.item{
Expand Down Expand Up @@ -1633,6 +1650,11 @@ svg#bigTriangleColor {
width: 200px;
}

#sec-cursos .wrap-tabs .list_tab ul li {
margin-right: 0;
width: 20%;
}

#fullpage {
position: relative;
width: 100%;
Expand Down
21 changes: 20 additions & 1 deletion scripts/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -267,6 +267,16 @@
});

if (isMobile()) {
$('.animated').addClass('wow');
var wow = new WOW(
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0 // default
}
)
wow.init();

$('#nav-dots').find('.toSlide').bind('click', function () {
var slideIndex = parseInt($(this).data('index'), 10);
$('#nav-dots span:eq(' + (slideIndex - 1) + ')').addClass('nav-dot-current').siblings().removeClass('nav-dot-current');
Expand Down Expand Up @@ -458,10 +468,19 @@

$(document).on('click', '.wrap-courses-logo figure', function() {
var title = $(this).data('title'),
description = $(this).data('description') || '',
caption = $(this).parents('.tab-content').find('.detail h3'),
body = $(this).parents('.tab-content').find('.detail p'),
captionText = caption.text();

caption.text(title);
$(this).data('title', captionText);
body.text(description);
//$(this).data('title', captionText);
});

$(document).on('click', '.wrap-courses-logo .item-logo', function() {
var item = $(this);
item.siblings('.item-logo').removeClass('active');
item.addClass('active');
});
})(Modernizr, jQuery, GMaps, window, document, navigator);
2 changes: 1 addition & 1 deletion styles/base.css
View file
Open in desktop

Large diffs are not rendered by default.