Skip to content

Último commit. Página lista. #14

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

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

Último commit. Página lista. #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
ff26136
Update index.html
luisgallego Aug 3, 2013
fa30c0a
Update estilos.css
luisgallego Aug 3, 2013
f6049d1
Update responsive.css
luisgallego Aug 3, 2013
1a9765f
adaptación para desktops terminada y explicada.
luisgallego Aug 7, 2013
d8c1cf9
Adaptación para desktops terminada y explicada.
luisgallego Aug 7, 2013
be1737b
Último Commit. Página lista :D
luisgallego Aug 8, 2013
82531a3
Último Commit. Página lista :D
luisgallego Aug 8, 2013
eb7e546
Otro Commit...
luisgallego Aug 9, 2013
5d73c27
Slideshow y scroll
luisgallego Aug 9, 2013
925d7cd
Slider responsive
Aug 10, 2013
06e9541
Merge pull request #1 from MiguelNieva/cuatro
luisgallego Aug 10, 2013
3136c2a
Auto height.
luisgallego Aug 10, 2013
da90841
Quité el height:auto.
luisgallego Aug 10, 2013
c13d711
SlideShow responsive.
luisgallego Aug 10, 2013
72c2524
slider
luisgallego Aug 10, 2013
0897ac8
Comentarios En gris
luisgallego Aug 10, 2013
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
4 changes: 0 additions & 4 deletions .gitignore
View file
Open in desktop

This file was deleted.

10 changes: 0 additions & 10 deletions README.md
View file
Open in desktop

This file was deleted.

Binary file added Thumbs.db
View file
Open in desktop
Binary file not shown.
173 changes: 173 additions & 0 deletions articulo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,173 @@
<!--Declaramos el tipo de documento como html-->
<!DOCTYPE html>
<!--Y decimos que la página está en español-->
<html lang="es">
<head>
<!--Insertando el Favicon(El ícono que va a la izquierda del <title>). No lo podrás ver con el "Open in Browser"-->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!--Título de la página-->
<title>Puls3: Comunidad online de gente pro y (no sé qué más escribir)</title>
<link rel="stylesheet" type="text/css" media="screen" href="res/css/style.css"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400italic,400,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<!--Añadiendo el Normalize-->
<link rel="stylesheet" href="normalize.css" />
<!--Insertando la tipografía principal :D-->
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css' />
<!--Conectando con los estilos(css)-->
<link rel="stylesheet" href="estilos.css" />
<!--Y ahora con los estilos para el responsive design(css)-->
<link rel="stylesheet" href="responsive2.css" />
</head>
<body>
<!--Aquí viene el header :o-->
<header>
<!--El logo-->
<figure id="logo">
<img src="logo.png" />
</figure>
<!--El título del header-->
<h1 id="titulo_header">Puls3: Comunidad de gente cool, atractiva y millonaria</h1>
<!--El avatar-->
<figure id="avatar">
<img src="avatar.jpg" />
<figcaption></figcaption>
</figure>
<!--El botón para ir al home-->
<a href="index.html" title="Home">
<div>
Home
</div>
</a>
</header>
<!--La barra de navegación-->
<nav>
<!--Y los diferentes botones-->
<ul>
<li id="flechita_nav"><a href="#"></a></li>
<!--¿Ves la parte donde dice title="Python"?. Ese mensaje se mostrará cuando pases el cursor sobre el botón-->
<li class="con_hover"><a href="#" title="Python">Python</a></li>
<li class="con_hover"><a href="#" title="HTML5">HTML5</a></li>
<li class="con_hover"><a href="#" title="Javascript">Javascript</a></li>
<li class="con_hover"><a href="#" title="CSS3">CSS3</a></li>
<li class="con_hover"><a href="#" title="Django">Django</a></li>
<li id="publicar_nav"><a href="#" title="Publicar">Publicar</a></li>
</ul>
</nav>

<!--El registro y las notificaciones de actividad(Exclusivas para Desktops y tablets[Algunas]-->
<div id="grupo">
<aside id="bienvenida">
<!--El botón e información de registro-->
<aside id="Autor">
<h2 id="autor_nombre">Freddy Vega<br><span>Autor</span></br></h2>
<a id="seguir" href="https://twitter.com/freddier" title="Seguir a Freddy Vega">Seguir</a>


<p id="mensaje"><img id="avatar_autor"src="avatar.jpg">Founder of the biggest effort on tech education in spanish: @mejorandola, @platzicom and @Cristalab
I travel, teach, learn and share.</p>
</aside>
<!--La actividad-->
<aside id="actividad">
<!--Título de la actividad-->
<a id="b_actividad" href="#" title="Actividad de Freddy Vega">Actividad de Freddy Vega</a>
<!--La parte scrolleable-->
<div id="notificaciones"style="height:200px;width:100%;overflow-y:scroll;">

<!--Ahora las notificaciones :)-->
<article class="notificacion">
<a class="comentarios_item" href="#">3141</a>
<p id ="actividad_mensaje">Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</article>
<!--Y otras cuantas-->
<article class="notificacion">
<a class="comentarios_item" href="#">3141</a>
<p id ="actividad_mensaje"> Excepteur sint occaecat cupidatat non proident, sunt.</p>
</article>
<article class="notificacion">
<a class="comentarios_item" href="#">3141</a>
<p id ="actividad_mensaje">exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
</article>
<article class="notificacion">
<a class="comentarios_item" href="#">3141</a>
<p id ="actividad_mensaje">Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</article>
<article class="notificacion">
<a class="comentarios_item" href="#">3141</a>
<p id ="actividad_mensaje"> Excepteur sint occaecat cupidatat non proident, sunt.</p>
</article>
<article class="notificacion">
<a class="comentarios_item" href="#">3141</a>
<p id ="actividad_mensaje">exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
</article>
</div>
<a id="b_comentarios" href="#" title="Actividad de Freddy Vega">Comentarios</a>
<div id="notificaciones">

<!--Ahora las notificaciones :)-->
<article class="notificacion">
<a class="usuario" href="#"><figure><img src="usuarios/avatar_1.jpg" /></figure></a>
<p id ="actividad_mensaje">¡Lorem ipsum dolor sit amet, consectetur adipisicing! :D</p>
</article>
<!--Y otras cuantas-->
<article class="notificacion">
<a class="usuario" href="#"><figure><img src="usuarios/avatar_2.jpg" /></figure></a>
<p id ="actividad_mensaje"> Excepteur sint occaecat cupidatat non proident, sunt.</p>
</article>
<article class="notificacion">
<a class="usuario" href="#"><figure><img src="usuarios/avatar_3.jpeg" /></figure></a>
<p id ="actividad_mensaje">exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
</article>
<article class="notificacion">
<a class="usuario" href="#"><figure><img src="usuarios/avatar_4.jpeg" /></figure></a>
<p id ="actividad_mensaje">Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</article>
<article class="notificacion">
<a class="usuario" href="#"><figure><img src="usuarios/avatar_5.jpg" /></figure></a>
<p id ="actividad_mensaje"> Excepteur sint occaecat cupidatat non proident, sunt.</p>
</article>
<article class="notificacion">
<a class="usuario" href="#"><figure><img src="usuarios/avatar_6.jpeg" /></figure></a>
<p id ="actividad_mensaje">exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
</article>
</div>
</aside>
</aside>
</div>
<aside id="post_texto">
<h1>Una mirada a Leap Motion: El control Minority Report</h1>
<figure>
<img src="photos/photo7.jpg"/>
<figcaption> Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</figcaption>
</figure>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.

Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui.

Suspendisse lectus leo, consectetur in tempor sit amet, placerat quis neque. Etiam luctus porttitor lorem, sed suscipit est rutrum non. Curabitur lobortis nisl a enim congue semper. Aenean commodo ultrices imperdiet. Vestibulum ut justo vel sapien venenatis tincidunt. Phasellus eget dolor sit amet ipsum dapibus condimentum vitae quis lectus. Aliquam ut massa in turpis dapibus convallis. Praesent elit lacus, vestibulum at malesuada et, ornare et est. Ut augue nunc, sodales ut euismod non, adipiscing vitae orci. Mauris ut placerat justo. Mauris in ultricies enim. Quisque nec est eleifend nulla ultrices egestas quis ut quam. Donec sollicitudin lectus a mauris pulvinar id aliquam urna cursus. Cras quis ligula sem, vel elementum mi. Phasellus non ullamcorper urna.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In euismod ultrices facilisis. Vestibulum porta sapien adipiscing augue congue id pretium lectus molestie. Proin quis dictum nisl. Morbi id quam sapien, sed vestibulum sem. Duis elementum rutrum mauris sed convallis. Proin vestibulum magna mi. Aenean tristique hendrerit magna, ac facilisis nulla hendrerit ut. Sed non tortor sodales quam auctor elementum. Donec hendrerit nunc eget elit pharetra pulvinar. Suspendisse id tempus tortor. Aenean luctus, elit commodo laoreet commodo, justo nisi consequat massa, sed vulputate quam urna quis eros. Donec vel.
<p>
</aside>









<footer>
<p><strong>Powered by Platzi!</strong></p>
<p>Mejorando.la 2013 ®</p>
</footer>




</body>
</html>
<!--Y ya está toda la estructura de la página =-D-->
129 changes: 129 additions & 0 deletions css/iview.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
/* The slider */
.iviewSlider {
overflow: hidden;
}

/* The timer in the Slider */
#iview-timer {
position: absolute;
z-index: 100;
border-radius: 5px;
cursor: pointer;
}

#iview-timer div {
border-radius: 3px;
}

/* The Preloader in the Slider */
#iview-preloader {
position: absolute;
z-index: 1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: #000 1px solid;
padding: 1px;
width: 100px;
height: 3px;
}
#iview-preloader div {
float: left;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
height: 3px;
background: #000;
width: 0px;
}

/* The strips and boxes in the Slider */
.iview-strip {
display:block;
position:absolute;
z-index:5;
}
.iview-block {
display:block;
position:absolute;
z-index:5;
}

/* Direction nav styles (e.g. Next & Prev) */
.iview-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.iview-prevNav {
left:0px;
}
.iview-nextNav {
right:0px;
}

/* Control nav styles (e.g. 1,2,3...) */
.iview-controlNav {
position:absolute;
z-index:9;
}
.iview-controlNav a {
z-index:9;
cursor:pointer;
}
.iview-controlNav a.active {
font-weight:bold;
}
.iview-controlNav .iview-items ul {
list-style: none;
}
.iview-controlNav .iview-items ul li {
display: inline;
position: relative;
}
.iview-controlNav .iview-tooltip {
position: absolute;
}

/* The captions in the Slider */
.iview-caption {
position:absolute;
z-index:4;
overflow: hidden;
cursor: default;
}

/* The video show in the Slider */
.iview-video-show {
background: #000;
position: absolute;
width: 100%;
height: 100%;
z-index: 101;
}
.iview-video-show .iview-video-container {
position: relative;
width: 100%;
height: 100%;
}
.iview-video-show .iview-video-container a.iview-video-close {
position: absolute;
right: 10px;
top: 10px;
background: #000;
color: #FFF;
height: 20px;
width: 20px;
text-align: center;
line-height: 29px;
font-size: 22px;
font-weight: bold;
overflow: hidden;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.iview-video-show .iview-video-container a.iview-video-close:hover {
background: #000;
}
Loading